https://pages-content.github.io/ JBake Bootstrap Template en-gb Tue, 21 Apr 2026 21:03:08 +0000 Tue, 21 Apr 2026 21:03:08 +0000 https://pages-content.github.io//blog/2026/0102_migration_gradle_script_to_plugin_post.html Fri, 6 Mar 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="#contexte_et_objectif">1. Contexte et objectif</a> <ul class="sectlevel2"> <li><a href="#le_point_de_départ">1.1. Le point de départ</a></li> <li><a href="#lobjectif">1.2. L’objectif</a></li> </ul> </li> <li><a href="#le_premier_obstacle_ruby_gems">2. Le premier obstacle : <code>ruby { gems() }</code></a> <ul class="sectlevel2"> <li><a href="#ce_que_cache_le_sucre_syntaxique_groovy">2.1. Ce que cache le sucre syntaxique Groovy</a></li> <li><a href="#décomposition_du_mécanisme">2.2. Décomposition du mécanisme</a></li> </ul> </li> <li><a href="#la_solution_en_trois_parties">3. La solution en trois parties</a> <ul class="sectlevel2"> <li><a href="#partie_1_le_repo_ivy_pour_rubygems">3.1. Partie 1 : le repo Ivy pour rubygems</a></li> <li><a href="#partie_2_la_dépendance_asciidoctorgems">3.2. Partie 2 : la dépendance asciidoctorGems</a></li> <li><a href="#partie_3_settings_gradle_kts">3.3. Partie 3 : settings.gradle.kts</a></li> </ul> </li> <li><a href="#introspection_de_lapi_par_bytecodes">4. Introspection de l’API par bytecodes</a> <ul class="sectlevel2"> <li><a href="#pourquoi_javap">4.1. Pourquoi <code>javap</code> ?</a></li> <li><a href="#hiérarchie_de_la_tâche">4.2. Hiérarchie de la tâche</a></li> <li><a href="#découverte_de_forkoptions">4.3. Découverte de <code>forkOptions</code></a></li> <li><a href="#lapi_de_javaforkoptions_grolifant">4.4. L’API de JavaForkOptions (grolifant)</a></li> <li><a href="#revealjsextension">4.5. RevealJSExtension</a></li> </ul> </li> <li><a href="#configuration_du_toolchain_java">5. Configuration du toolchain Java</a> <ul class="sectlevel2"> <li><a href="#le_problème_de_javatoolchainservice">5.1. Le problème de JavaToolchainService</a></li> </ul> </li> <li><a href="#détection_automatique_docker">6. Détection automatique Docker</a> <ul class="sectlevel2"> <li><a href="#contexte">6.1. Contexte</a></li> <li><a href="#stratégie">6.2. Stratégie</a></li> </ul> </li> <li><a href="#résultat_final">7. Résultat final</a> <ul class="sectlevel2"> <li><a href="#le_buildscript_consommateur">7.1. Le buildscript consommateur</a></li> <li><a href="#settings_gradle_kts">7.2. settings.gradle.kts</a></li> </ul> </li> <li><a href="#récapitulatif_des_pièges_et_solutions">8. Récapitulatif des pièges et solutions</a></li> <li><a href="#méthode_dinvestigation_lire_une_api_inconnue_avec_javap">9. Méthode d’investigation : lire une API inconnue avec javap</a> <ul class="sectlevel2"> <li><a href="#principe">9.1. Principe</a></li> <li><a href="#étape_1_localiser_le_jar_dans_le_cache_gradle">9.2. Étape 1 : localiser le jar dans le cache Gradle</a></li> <li><a href="#étape_2_lister_les_classes_du_jar">9.3. Étape 2 : lister les classes du jar</a></li> <li><a href="#étape_3_inspecter_une_classe">9.4. Étape 3 : inspecter une classe</a></li> <li><a href="#étape_4_remonter_la_hiérarchie">9.5. Étape 4 : remonter la hiérarchie</a></li> <li><a href="#étape_5_suivre_les_types_inconnus">9.6. Étape 5 : suivre les types inconnus</a></li> <li><a href="#étape_6_vérifier_les_extensions_de_projet">9.7. Étape 6 : vérifier les extensions de projet</a></li> <li><a href="#récapitulatif_de_la_méthode">9.8. Récapitulatif de la méthode</a></li> </ul> </li> <li><a href="#prochaine_étape">10. Prochaine étape</a></li> </ul> </div> <div class="sect1"> <h2 id="contexte_et_objectif">1. Contexte et objectif</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_point_de_départ">1.1. Le point de départ</h3> <div class="paragraph"> <p>Le projet <code>slider-gradle</code> génère des présentations Reveal.js à partir de fichiers AsciiDoc via le plugin Gradle <code>org.asciidoctor.jvm.revealjs</code>. La configuration de la tâche principale <code>asciidoctorRevealJs</code> vivait directement dans le buildscript racine <code>build.gradle.kts</code> :</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="lobjectif">1.2. L’objectif</h3> <div class="paragraph"> <p>Déplacer toute cette configuration dans <code>buildSrc/src/main/kotlin/slides/SlidesPlugin.kt</code> pour que le buildscript consommateur se réduise à :</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>Le plugin doit être totalement autonome : il applique lui-même ses dépendances de plugins, configure ses repos, et gère ses gems Ruby.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="le_premier_obstacle_ruby_gems">2. Le premier obstacle : <code>ruby { gems() }</code></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="ce_que_cache_le_sucre_syntaxique_groovy">2.1. Ce que cache le sucre syntaxique Groovy</h3> <div class="paragraph"> <p>La ligne <code>repositories { ruby { gems() } }</code> est une extension DSL Groovy disponible uniquement dans le contexte d’exécution du buildscript. Elle n’existe pas en tant qu’API Kotlin statique accessible depuis buildSrc.</p> </div> <div class="paragraph"> <p>En tentant de l’appeler depuis <code>SlidesPlugin.kt</code>, la compilation échoue immédiatement.</p> </div> </div> <div class="sect2"> <h3 id="décomposition_du_mécanisme">2.2. Décomposition du mécanisme</h3> <div class="paragraph"> <p>Après analyse du cache Gradle (<code>~/.gradle/caches/modules-2/files-2.1/rubygems/</code>), on découvre dans le fichier <code>ivy-3.1.0.xml</code> :</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><code>ruby { gems() }</code> effectuait en réalité <strong>trois opérations distinctes</strong> :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Enregistrer un repo Ivy pointant vers <code><a href="https://rubygems.org/gems/" class="bare">https://rubygems.org/gems/</a></code></p> </li> <li> <p>Exclure le groupe <code>rubygems</code> des repos Maven pour éviter les conflits</p> </li> <li> <p>Enregistrer la gem dans la configuration <code>asciidoctorGems</code> pour que JRuby la charge au runtime</p> </li> </ol> </div> <div class="paragraph"> <p>Ces trois responsabilités doivent être reproduites séparément en Kotlin.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="la_solution_en_trois_parties">3. La solution en trois parties</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="partie_1_le_repo_ivy_pour_rubygems">3.1. Partie 1 : le repo Ivy pour rubygems</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">project.repositories.mavenCentral() { content { excludeGroup("rubygems") } } project.repositories.ivy { url = project.uri("https://rubygems.org/gems/") patternLayout { artifact("[module]-[revision].gem") } <i class="conum" data-value="1"></i><b>(1)</b> metadataSources { artifact() } content { includeGroup("rubygems") } }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>L’extension <code>.gem</code> doit être hardcodée. <code>[ext]</code> résout par défaut en <code>.jar</code>, ce qui provoque une erreur <code>Resource missing</code>.</td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Le repo Ivy est déclaré directement sur <code>project.repositories</code> et non dans un bloc <code>repositories { }</code> car le receiver de ce bloc n’est pas le <code>RepositoryHandler</code> standard de Gradle mais une API grolifant incompatible avec l’extension <code>ivy</code> Kotlin DSL. </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="partie_2_la_dépendance_asciidoctorgems">3.2. Partie 2 : la dépendance asciidoctorGems</h3> <div class="paragraph"> <p>Le plugin <code>org.asciidoctor.jvm.gems</code> doit être appliqué en premier — il crée la configuration <code>asciidoctorGems</code> et la tâche <code>asciidoctorGemsPrepare</code> :</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>L’ordre d’application est important : <code>gems</code> avant <code>revealjs</code>.</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Le qualificateur <code>@gem</code> force l’extension correcte sur la dépendance.</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="partie_3_settings_gradle_kts">3.3. Partie 3 : settings.gradle.kts</h3> <div class="paragraph"> <p><code>dependencyResolutionManagement</code> dans <code>settings.gradle.kts</code> doit autoriser les projets à déclarer leurs propres repos :</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>Sans cette ligne, Gradle ignore les repos déclarés dans le plugin et la résolution des gems échoue.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="introspection_de_lapi_par_bytecodes">4. Introspection de l’API par bytecodes</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="pourquoi_javap">4.1. Pourquoi <code>javap</code> ?</h3> <div class="paragraph"> <p>Le plugin <code>asciidoctor-gradle-jvm-slides</code> est en version <code>4.0.0-alpha.1</code>. Sa documentation est inexistante ou incomplète. La seule source fiable est l’inspection directe des classes compilées.</p> </div> </div> <div class="sect2"> <h3 id="hiérarchie_de_la_tâche">4.2. Hiérarchie de la tâche</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>Résultat :</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="découverte_de_forkoptions">4.3. Découverte de <code>forkOptions</code></h3> <div class="paragraph"> <p>En inspectant <code>AbstractAsciidoctorTask</code> :</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>On trouve :</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="lapi_de_javaforkoptions_grolifant">4.4. L’API de JavaForkOptions (grolifant)</h3> <div class="paragraph"> <p><code>javaLauncher</code> n’existe pas sur cette tâche. L’API réelle de <code>org.ysb33r.grolifant.api.v4.JavaForkOptions</code> expose :</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>La méthode <code>executable(Object)</code> remplace l’assignation <code>executable = …​</code> qui ne compile pas (<code>val</code> cannot be reassigned).</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="revealjsextension">4.5. RevealJSExtension</h3> <div class="paragraph"> <p><code>revealjs { }</code> n’est pas une méthode de la tâche mais une <strong>extension de projet</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>Elle s’accède via :</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="configuration_du_toolchain_java">5. Configuration du toolchain Java</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_problème_de_javatoolchainservice">5.1. Le problème de JavaToolchainService</h3> <div class="paragraph"> <p><code>JavaToolchainService</code> n’est pas une extension de projet. L’appel suivant échoue :</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>La bonne API est <code>serviceOf</code> :</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="détection_automatique_docker">6. Détection automatique Docker</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="contexte">6.1. Contexte</h3> <div class="paragraph"> <p>Le plugin Asciidoctor/JRuby requiert Java 17. Kotlin 2.0.x dans buildSrc ne supporte pas Java 25 (le parser de version crashe sur <code>"25.0.2"</code>). Le daemon Gradle doit donc tourner sur Java 17 ou Docker doit être utilisé.</p> </div> </div> <div class="sect2"> <h3 id="stratégie">6.2. Stratégie</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Docker disponible → exécution via container <code>eclipse-temurin:17</code> (comportement par défaut)</p> </li> <li> <p>Docker absent + Java 17 → exécution locale</p> </li> <li> <p>Docker absent + Java > 17 → erreur explicite</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="résultat_final">7. Résultat final</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_buildscript_consommateur">7.1. Le buildscript consommateur</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>C’est tout. Le plugin porte l’intégralité de la responsabilité.</p> </div> </div> <div class="sect2"> <h3 id="settings_gradle_kts">7.2. 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="récapitulatif_des_pièges_et_solutions">8. Récapitulatif des pièges et solutions</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">Problème</th> <th class="tableblock halign-left valign-top">Cause</th> <th class="tableblock halign-left valign-top">Solution</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ruby { gems() }</code> non disponible en Kotlin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Extension DSL Groovy uniquement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Trois mécanismes séparés : repo Ivy + exclusion Maven + <code>asciidoctorGems</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gradle cherche un <code>.jar</code> au lieu d’un <code>.gem</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>[ext]</code> résout en <code>jar</code> par défaut</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hardcoder <code>.gem</code> dans le pattern Ivy + qualificateur <code>@gem</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ivy { }</code> ne compile pas dans <code>repositories { }</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Receiver grolifant incompatible avec le DSL Kotlin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Appel direct <code>project.repositories.ivy { }</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>javaLauncher</code> non résolu</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Propriété inexistante sur <code>AsciidoctorJRevealJSTask</code></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"><code>executable = …​</code> ne compile pas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Propriété <code>val</code> dans <code>JavaForkOptions</code> grolifant</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Méthode <code>executable(Object)</code> à la place</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>JavaToolchainService</code> introuvable via <code>extensions</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">C’est un service Gradle, pas une extension</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"><code>revealjs { }</code> non résolu dans la tâche</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Extension de projet, pas méthode de tâche</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 crashe avec Java 25</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kotlin 2.0.x ne parse pas les versions Java à deux chiffres</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Détection Docker automatique + fallback Java 17</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="méthode_dinvestigation_lire_une_api_inconnue_avec_javap">9. Méthode d’investigation : lire une API inconnue avec javap</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="principe">9.1. Principe</h3> <div class="paragraph"> <p>Quand la documentation est absente ou incomplète, les bytecodes sont la source de vérité. <code>javap</code> est l’outil standard du JDK qui décompile les fichiers <code>.class</code> en signatures Java lisibles, sans nécessiter le code source.</p> </div> </div> <div class="sect2"> <h3 id="étape_1_localiser_le_jar_dans_le_cache_gradle">9.2. Étape 1 : localiser le jar dans le cache Gradle</h3> <div class="paragraph"> <p>Gradle télécharge toutes ses dépendances dans <code>~/.gradle/caches/modules-2/files-2.1/</code>. La première étape est de trouver le jar qui contient la classe à inspecter :</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">Résultat :</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="étape_2_lister_les_classes_du_jar">9.3. Étape 2 : lister les classes du jar</h3> <div class="paragraph"> <p>Avant d’inspecter une classe, on vérifie qu’elle existe bien dans le 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 class="paragraph"> <div class="title">Cela révèle toutes les classes disponibles :</div> <p><code>AsciidoctorJRevealJSTask</code>, <code>RevealJSExtension</code>, <code>RevealJSOptions</code>, etc.</p> </div> </div> <div class="sect2"> <h3 id="étape_3_inspecter_une_classe">9.4. Étape 3 : inspecter une classe</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>L’option <code>-p</code> affiche tous les membres y compris les privés. Le résultat montre immédiatement la ligne clé :</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="étape_4_remonter_la_hiérarchie">9.5. Étape 4 : remonter la hiérarchie</h3> <div class="paragraph"> <p>La tâche étend <code>AbstractAsciidoctorTask</code>. On l’inspecte à son tour en localisant d’abord son jar :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find ~/.gradle/caches -name "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>C’est là qu’on découvre <code>forkOptions</code>, <code>JAVA_EXEC</code>, et <code>javaForkOptions</code> de type <code>org.ysb33r.grolifant.api.v4.JavaForkOptions</code>.</p> </div> </div> <div class="sect2"> <h3 id="étape_5_suivre_les_types_inconnus">9.6. Étape 5 : suivre les types inconnus</h3> <div class="paragraph"> <p><code>JavaForkOptions</code> est une classe grolifant inconnue. On localise son jar :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find ~/.gradle/caches -name "grolifant*.jar" 2>/dev/null</code></pre> </div> </div> <div class="paragraph"> <p>Puis on l’inspecte :</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>On y trouve <code>executable(java.lang.Object)</code> — la méthode correcte à appeler, par opposition à <code>executable = …​</code> qui ne compile pas car c’est une propriété <code>val</code>.</p> </div> </div> <div class="sect2"> <h3 id="étape_6_vérifier_les_extensions_de_projet">9.7. Étape 6 : vérifier les extensions de projet</h3> <div class="paragraph"> <p>Pour <code>revealjs { }</code>, la question était : est-ce une méthode de la tâche ou une extension de projet ? L’inspection de <code>AsciidoctorJRevealJSTask</code> ne montre aucune méthode <code>revealjs</code>. On inspecte alors <code>RevealJSExtension</code> :</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>La présence de <code>NAME</code> confirme que c’est une extension enregistrée sur le projet, accessible via <code>project.extensions.getByType<RevealJSExtension>()</code>.</p> </div> </div> <div class="sect2"> <h3 id="récapitulatif_de_la_méthode">9.8. Récapitulatif de la méthode</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">Étape</th> <th class="tableblock halign-left valign-top">Action</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> — localiser le 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> — vérifier que la classe existe</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> — inspecter la classe</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">Identifier <code>extends</code> et remonter la hiérarchie</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">Suivre les types inconnus dans leurs propres jars</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">Chercher <code>NAME</code> pour identifier une extension de projet</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Cette méthode s’applique à n’importe quel plugin Gradle dont l’API n’est pas documentée ou dont la version alpha ne correspond plus à la documentation existante.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="prochaine_étape">10. Prochaine étape</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce plugin buildSrc sera extrait dans un projet indépendant publié sur Gradle Plugin Portal ou Maven Local. Le buildscript consommateur deviendra alors :</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</code> sera réduit à son strict minimum sans référence à <code>foojay-resolver-convention</code>, le provisioning JDK étant géré par le plugin lui-même ou documenté comme prérequis.</p> </div> </div> </div> https://pages-content.github.io//blog/2026/0101_jbake_portfolio_post.html Mon, 19 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="#vision_architecturale">1. Vision Architecturale</a> <ul class="sectlevel2"> <li><a href="#principe_directeur">1.1. Principe directeur</a></li> <li><a href="#choix_stratégique_asciidoc_pour_le_portfolio">1.2. Choix stratégique : AsciiDoc pour le portfolio</a></li> <li><a href="#modèle_de_données">1.3. Modèle de données</a></li> </ul> </li> <li><a href="#use_cases_détaillés">2. Use Cases Détaillés</a> <ul class="sectlevel2"> <li><a href="#uc1_ajouter_un_élément_au_portfolio">2.1. UC1 : Ajouter un élément au portfolio</a> <ul class="sectlevel3"> <li><a href="#flux_nominal">2.1.1. Flux nominal</a></li> <li><a href="#template_du_fichier_à_créer">2.1.2. Template du fichier à créer</a></li> <li><a href="#points_de_validation">2.1.3. Points de validation</a></li> </ul> </li> <li><a href="#uc2_supprimer_un_élément_du_portfolio">2.2. UC2 : Supprimer un élément du portfolio</a> <ul class="sectlevel3"> <li><a href="#flux_nominal_2">2.2.1. Flux nominal</a></li> <li><a href="#stratégie_alternative_archivage">2.2.2. Stratégie alternative : archivage</a></li> <li><a href="#nettoyage_des_ressources">2.2.3. Nettoyage des ressources</a></li> </ul> </li> <li><a href="#uc3_mettre_en_non_publié_draft">2.3. UC3 : Mettre en non publié (draft)</a> <ul class="sectlevel3"> <li><a href="#flux_nominal_3">2.3.1. Flux nominal</a></li> <li><a href="#états_possibles">2.3.2. États possibles</a></li> <li><a href="#cas_dusage_typiques">2.3.3. Cas d’usage typiques</a></li> </ul> </li> </ul> </li> <li><a href="#architecture_de_templating">3. Architecture de Templating</a> <ul class="sectlevel2"> <li><a href="#stratégie_de_templates_réutilisables">3.1. Stratégie de templates réutilisables</a></li> <li><a href="#pattern_dextraction_des_données">3.2. Pattern d’extraction des données</a></li> <li><a href="#conventions_de_nommage">3.3. Conventions de nommage</a></li> </ul> </li> <li><a href="#workflow_de_publication">4. Workflow de Publication</a> <ul class="sectlevel2"> <li><a href="#pipeline_de_développement">4.1. Pipeline de développement</a></li> <li><a href="#environnements">4.2. Environnements</a></li> </ul> </li> <li><a href="#extensibilité">5. Extensibilité</a> <ul class="sectlevel2"> <li><a href="#ajout_de_nouveaux_attributs">5.1. Ajout de nouveaux attributs</a></li> <li><a href="#catégorisation_avancée">5.2. Catégorisation avancée</a></li> </ul> </li> <li><a href="#bonnes_pratiques">6. Bonnes Pratiques</a> <ul class="sectlevel2"> <li><a href="#organisation_des_fichiers">6.1. Organisation des fichiers</a></li> <li><a href="#gestion_du_contenu">6.2. Gestion du contenu</a></li> <li><a href="#performance">6.3. Performance</a></li> </ul> </li> <li><a href="#conclusion">7. Conclusion</a></li> </ul> </div> <div class="sect1"> <h2 id="vision_architecturale">1. Vision Architecturale</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="principe_directeur">1.1. Principe directeur</h3> <div class="paragraph"> <p>L’architecture repose sur le principe de <strong>séparation des préoccupations</strong> :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Contenu</strong> : fichiers AsciiDoc structurés avec métadonnées riches</p> </li> <li> <p><strong>Présentation</strong> : templates Thymeleaf réutilisables</p> </li> <li> <p><strong>Données</strong> : modèle extrait automatiquement par JBake depuis les attributs AsciiDoc</p> </li> <li> <p><strong>Style</strong> : Bootstrap 5 pour la cohérence visuelle</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="choix_stratégique_asciidoc_pour_le_portfolio">1.2. Choix stratégique : AsciiDoc pour le portfolio</h3> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Pourquoi AsciiDoc ?</caption> <colgroup> <col style="width: 33.3333%;"> <col style="width: 66.6667%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Critère</th> <th class="tableblock halign-left valign-top">Avantage</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Cohérence</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Même format que les articles de blog</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Métadonnées</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Attributs structurés et extensibles (<code>project-*</code>)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Maintenabilité</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Édition simple en texte, versionnable Git</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Flexibilité</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Peut contenir du contenu riche (tableaux, code, images)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Templating</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JBake extrait automatiquement les attributs pour Thymeleaf</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="modèle_de_données">1.3. Modèle de données</h3> <div class="paragraph"> <p>Chaque projet portfolio est un document AsciiDoc avec :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Métadonnées d’en-tête</strong> : informations structurées (client, durée, technologies, etc.)</p> </li> <li> <p><strong>Corps du document</strong> : description narrative, défis, solutions, résultats</p> </li> <li> <p><strong>Attributs personnalisés</strong> : préfixés <code>project-*</code> pour l’extraction automatique</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-39f614a45c003c8e4b1a076206012364.png" alt="Diagram" width="386" height="811"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="use_cases_détaillés">2. Use Cases Détaillés</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="uc1_ajouter_un_élément_au_portfolio">2.1. UC1 : Ajouter un élément au portfolio</h3> <div class="sect3"> <h4 id="flux_nominal">2.1.1. Flux nominal</h4> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-10f84eeb379f90577b624b1ddd2283fd.png" alt="Diagram" width="980" height="715"> </div> </div> </div> <div class="sect3"> <h4 id="template_du_fichier_à_créer">2.1.2. Template du fichier à créer</h4> <div class="paragraph"> <p>Le développeur crée <code>content/portfolio/nom-projet.adoc</code> avec une structure standardisée :</p> </div> <div class="ulist"> <ul> <li> <p>En-tête avec tous les attributs requis</p> </li> <li> <p>Sections normalisées (Contexte, Défis, Solutions, Résultats)</p> </li> <li> <p>Nomenclature cohérente des images</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="points_de_validation">2.1.3. Points de validation</h4> <div class="ulist"> <ul> <li> <p>Les attributs obligatoires sont présents (<code>jbake-type</code>, <code>jbake-status</code>, <code>project-thumbnail</code>)</p> </li> <li> <p>Les images référencées existent dans <code>assets/img/portfolio/</code></p> </li> <li> <p>Le build JBake réussit sans erreur</p> </li> <li> <p>Le projet apparaît sur la page portfolio</p> </li> <li> <p>La page individuelle du projet s’affiche correctement</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="uc2_supprimer_un_élément_du_portfolio">2.2. UC2 : Supprimer un élément du portfolio</h3> <div class="sect3"> <h4 id="flux_nominal_2">2.2.1. Flux nominal</h4> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-d0113242083726276d0bc353b8b5f695.png" alt="Diagram" width="738" height="645"> </div> </div> </div> <div class="sect3"> <h4 id="stratégie_alternative_archivage">2.2.2. Stratégie alternative : archivage</h4> <div class="paragraph"> <p>Au lieu de supprimer définitivement, possibilité de créer un dossier <code>content/portfolio/archive/</code> :</p> </div> <div class="ulist"> <ul> <li> <p>Déplacer le fichier au lieu de le supprimer</p> </li> <li> <p>Permet de restaurer facilement</p> </li> <li> <p>Garde l’historique Git plus clair</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="nettoyage_des_ressources">2.2.3. Nettoyage des ressources</h4> <div class="ulist"> <ul> <li> <p>Vérifier les images orphelines dans <code>assets/img/portfolio/</code></p> </li> <li> <p>Supprimer les images non référencées par d’autres projets</p> </li> <li> <p>Nettoyer le cache JBake pour éviter les références fantômes</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="uc3_mettre_en_non_publié_draft">2.3. UC3 : Mettre en non publié (draft)</h3> <div class="sect3"> <h4 id="flux_nominal_3">2.3.1. Flux nominal</h4> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-f7dfefdd65ada55b764b6d82def2581d.png" alt="Diagram" width="783" height="594"> </div> </div> </div> <div class="sect3"> <h4 id="états_possibles">2.3.2. États possibles</h4> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-a4b71e9dbf30083d131223257db47469.png" alt="Diagram" width="556" height="448"> </div> </div> </div> <div class="sect3"> <h4 id="cas_dusage_typiques">2.3.3. Cas d’usage typiques</h4> <div class="ulist"> <ul> <li> <p><strong>Projet en cours de rédaction</strong> : créer en draft, publier quand prêt</p> </li> <li> <p><strong>Projet confidentiel temporairement</strong> : passer en draft le temps de l’accord client</p> </li> <li> <p><strong>Mise à jour majeure</strong> : passer en draft, modifier, republier</p> </li> <li> <p><strong>A/B testing</strong> : dupliquer en draft, tester, publier la meilleure version</p> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="architecture_de_templating">3. Architecture de Templating</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="stratégie_de_templates_réutilisables">3.1. Stratégie de templates réutilisables</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-947a1865680ea1351c022f08cee9d68c.png" alt="Diagram" width="881" height="350"> </div> </div> </div> <div class="sect2"> <h3 id="pattern_dextraction_des_données">3.2. Pattern d’extraction des données</h3> <div class="paragraph"> <p>JBake transforme automatiquement les attributs AsciiDoc en propriétés accessibles dans Thymeleaf :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-24dd3ccd504cafd397fe34bb5e84e414.png" alt="Diagram" width="891" height="346"> </div> </div> </div> <div class="sect2"> <h3 id="conventions_de_nommage">3.3. Conventions de nommage</h3> <div class="ulist"> <ul> <li> <p><strong>Attributs projet</strong> : préfixe <code>project-*</code> (ex: <code>project-client</code>, <code>project-tech-stack</code>)</p> </li> <li> <p><strong>Fichiers</strong> : kebab-case (ex: <code>ecommerce-platform.adoc</code>)</p> </li> <li> <p><strong>Images</strong> : préfixe nom-projet (ex: <code>ecommerce-platform-thumb.jpg</code>)</p> </li> <li> <p><strong>Templates</strong> : nom fonctionnel (ex: <code>project-card.html</code>, <code>tech-badge.html</code>)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="workflow_de_publication">4. Workflow de Publication</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="pipeline_de_développement">4.1. Pipeline de développement</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-2694c3ad773a745365e7ae3fa7dc2d53.png" alt="Diagram" width="386" height="811"> </div> </div> </div> <div class="sect2"> <h3 id="environnements">4.2. Environnements</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">Environnement</th> <th class="tableblock halign-left valign-top">Usage</th> <th class="tableblock halign-left valign-top">Statut accepté</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Local</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Développement et preview</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">draft, published</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Staging</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Validation pré-production</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">published uniquement</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Production</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Site public</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">published uniquement</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="extensibilité">5. Extensibilité</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="ajout_de_nouveaux_attributs">5.1. Ajout de nouveaux attributs</h3> <div class="paragraph"> <p>Pour enrichir le modèle de données, simplement ajouter de nouveaux attributs préfixés <code>project-*</code> :</p> </div> <div class="ulist"> <ul> <li> <p><code>project-awards</code>: Prix et reconnaissances</p> </li> <li> <p><code>project-testimonial</code>: Citation client</p> </li> <li> <p><code>project-team-size</code>: Taille équipe</p> </li> <li> <p><code>project-budget-range</code>: Fourchette budgétaire</p> </li> </ul> </div> <div class="paragraph"> <p>Ces attributs deviennent automatiquement disponibles dans les templates sans modification du moteur JBake.</p> </div> </div> <div class="sect2"> <h3 id="catégorisation_avancée">5.2. Catégorisation avancée</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-5778cdd97fbd507aeb0b4ae9b4bb4724.png" alt="Diagram" width="561" height="259"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="bonnes_pratiques">6. Bonnes Pratiques</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="organisation_des_fichiers">6.1. Organisation des fichiers</h3> <div class="ulist"> <ul> <li> <p><strong>Un fichier = un projet</strong> : éviter de mélanger plusieurs projets</p> </li> <li> <p><strong>Images dans dossier dédié</strong> : <code>assets/img/portfolio/nom-projet/</code></p> </li> <li> <p><strong>Nomenclature cohérente</strong> : facilite recherche et maintenance</p> </li> <li> <p><strong>Versioning Git</strong> : tracking complet des modifications</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="gestion_du_contenu">6.2. Gestion du contenu</h3> <div class="ulist"> <ul> <li> <p><strong>Statut draft par défaut</strong> : publier seulement quand prêt</p> </li> <li> <p><strong>Review avant publication</strong> : validation qualité et confidentialité</p> </li> <li> <p><strong>Métadonnées complètes</strong> : remplir tous les champs pertinents</p> </li> <li> <p><strong>Contenu narratif riche</strong> : ne pas se limiter aux métadonnées</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="performance">6.3. Performance</h3> <div class="ulist"> <ul> <li> <p><strong>Optimiser images</strong> : compression avant commit</p> </li> <li> <p><strong>Pagination si nécessaire</strong> : si >20 projets</p> </li> <li> <p><strong>Lazy loading</strong> : images des galeries chargées à la demande</p> </li> <li> <p><strong>Cache navigateur</strong> : headers appropriés pour assets</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">7. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette architecture permet :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Simplicité d’usage</strong> : ajouter un projet = créer un fichier texte</p> </li> <li> <p><strong>Flexibilité</strong> : extensible via nouveaux attributs</p> </li> <li> <p><strong>Maintenabilité</strong> : séparation contenu/présentation</p> </li> <li> <p><strong>Traçabilité</strong> : versioning Git complet</p> </li> <li> <p><strong>Automatisation</strong> : build et déploiement continus possibles</p> </li> </ul> </div> <div class="paragraph"> <p>Le choix d’AsciiDoc assure la cohérence avec le reste du site tout en offrant la richesse des métadonnées nécessaires à un portfolio professionnel.</p> </div> </div> </div> https://pages-content.github.io//blog/2026/0100_jbake_supabase_springboot_hybride_post.html Sat, 17 Jan 2026 00:00:00 +0000 blog/2026/0100_jbake_supabase_springboot_hybride_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph lead"> <div class="title">temps de lecture : 12 minutes</div> <p>Plutôt que de choisir entre la simplicité de Supabase et la puissance de Spring Boot, pourquoi ne pas combiner les deux ? Découvrez une architecture hybride qui exploite le meilleur de chaque technologie.</p> </div> <div id="toc" class="toc"> <div id="toctitle" class="title">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_le_faux_dilemme_de_larchitecture_moderne">Le Faux Dilemme de l’Architecture Moderne</a></li> <li><a href="#_vision_architecturale">Vision Architecturale</a> <ul class="sectlevel2"> <li><a href="#_larchitecture_traditionnelle_monolithique">L’Architecture Traditionnelle : Monolithique</a></li> <li><a href="#_larchitecture_baas_tout_délégué">L’Architecture BaaS : Tout Délégué</a></li> <li><a href="#_larchitecture_hybride_séparation_des_responsabilités">L’Architecture Hybride : Séparation des Responsabilités</a></li> </ul> </li> <li><a href="#_principes_de_conception">Principes de Conception</a> <ul class="sectlevel2"> <li><a href="#_principe_1_commencer_simple_évoluer_intelligemment">Principe 1 : Commencer Simple, Évoluer Intelligemment</a></li> <li><a href="#_principe_2_séparation_par_nature_dopération">Principe 2 : Séparation par Nature d’Opération</a></li> <li><a href="#_principe_3_une_seule_source_de_vérité">Principe 3 : Une Seule Source de Vérité</a></li> </ul> </li> <li><a href="#_orchestration_des_flux">Orchestration des Flux</a> <ul class="sectlevel2"> <li><a href="#_flux_1_authentification_centralisée">Flux 1 : Authentification Centralisée</a></li> <li><a href="#_flux_2_orchestration_dun_processus_métier_complexe">Flux 2 : Orchestration d’un Processus Métier Complexe</a></li> <li><a href="#_flux_3_jobs_planifiés_et_synchronisations">Flux 3 : Jobs Planifiés et Synchronisations</a></li> </ul> </li> <li><a href="#_matrice_de_décision">Matrice de Décision</a> <ul class="sectlevel2"> <li><a href="#_quand_utiliser_supabase">Quand Utiliser Supabase ?</a></li> <li><a href="#_quand_utiliser_spring_boot">Quand Utiliser Spring Boot ?</a></li> </ul> </li> <li><a href="#_exemples_darchitecture_par_type_de_projet">Exemples d’Architecture par Type de Projet</a> <ul class="sectlevel2"> <li><a href="#_blog_portfolio">Blog / Portfolio</a></li> <li><a href="#_application_saas">Application SaaS</a></li> <li><a href="#_e_commerce">E-commerce</a></li> </ul> </li> <li><a href="#_stratégie_de_migration_progressive">Stratégie de Migration Progressive</a></li> <li><a href="#_coûts_et_considérations_opérationnelles">Coûts et Considérations Opérationnelles</a> <ul class="sectlevel2"> <li><a href="#_structure_des_coûts">Structure des Coûts</a></li> <li><a href="#_responsabilités_opérationnelles">Responsabilités Opérationnelles</a></li> </ul> </li> <li><a href="#_conclusion_léquilibre_parfait">Conclusion : L’Équilibre Parfait</a> <ul class="sectlevel2"> <li><a href="#_les_principes_à_retenir">Les Principes à Retenir</a></li> <li><a href="#_quand_choisir_cette_architecture">Quand Choisir Cette Architecture ?</a></li> <li><a href="#_vision_densemble_finale">Vision d’Ensemble Finale</a></li> <li><a href="#_le_meilleur_des_deux_mondes">Le Meilleur des Deux Mondes</a></li> </ul> </li> <li><a href="#_pour_aller_plus_loin">Pour Aller Plus Loin</a> <ul class="sectlevel2"> <li><a href="#_ressources_techniques">Ressources Techniques</a></li> <li><a href="#_cas_dusage_réels">Cas d’Usage Réels</a></li> <li><a href="#_checklist_de_démarrage">Checklist de Démarrage</a></li> <li><a href="#_anti_patterns_à_éviter">Anti-Patterns à Éviter</a></li> </ul> </li> <li><a href="#_perspectives_dévolution">Perspectives d’Évolution</a> <ul class="sectlevel2"> <li><a href="#_ajout_de_nouvelles_capacités">Ajout de Nouvelles Capacités</a></li> <li><a href="#_scaling_horizontal">Scaling Horizontal</a></li> </ul> </li> <li><a href="#_témoignages_architecturaux">Témoignages Architecturaux</a> <ul class="sectlevel2"> <li><a href="#_startup_saas_50k_utilisateurs">Startup SaaS (50k utilisateurs)</a></li> <li><a href="#_plateforme_e_learning_10k_utilisateurs">Plateforme E-learning (10k utilisateurs)</a></li> <li><a href="#_marketplace_b2b_3k_utilisateurs">Marketplace B2B (3k utilisateurs)</a></li> </ul> </li> <li><a href="#_synthèse_un_paradigme_architectural_moderne">Synthèse : Un Paradigme Architectural Moderne</a> <ul class="sectlevel2"> <li><a href="#_la_règle_des_8020">La Règle des 80/20</a></li> </ul> </li> <li><a href="#_conclusion_finale">Conclusion Finale</a> <ul class="sectlevel2"> <li><a href="#_votre_prochain_pas">Votre Prochain Pas</a></li> </ul> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_le_faux_dilemme_de_larchitecture_moderne">Le Faux Dilemme de l’Architecture Moderne</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lorsqu’on construit une application moderne avec un frontend statique, on se retrouve souvent face à un choix binaire :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Tout miser sur une solution Backend-as-a-Service</strong> (Supabase, Firebase) - simple mais limitée</p> </li> <li> <p><strong>Construire un backend complet</strong> (Spring Boot, Node.js) - puissant mais complexe</p> </li> </ul> </div> <div class="paragraph"> <p>Ce choix est un faux dilemme. L’architecture hybride propose une troisième voie : <strong>utiliser chaque technologie là où elle excelle</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_vision_architecturale">Vision Architecturale</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_larchitecture_traditionnelle_monolithique">L’Architecture Traditionnelle : Monolithique</h3> <div class="imageblock"> <div class="content"> <img src="traditional-architecture.svg" alt="traditional architecture" width="879" height="587"> </div> </div> <div class="paragraph"> <p>Dans cette approche, même les opérations les plus simples (lecture d’un article, création d’un commentaire) doivent transiter par votre backend. Vous payez le coût de la complexité dès le premier jour.</p> </div> </div> <div class="sect2"> <h3 id="_larchitecture_baas_tout_délégué">L’Architecture BaaS : Tout Délégué</h3> <div class="imageblock"> <div class="content"> <img src="baas-architecture.svg" alt="baas architecture" width="594" height="583"> </div> </div> <div class="paragraph"> <p>À l’opposé, tout déléguer à un BaaS est séduisant au début mais montre rapidement ses limites dès que la logique métier se complexifie.</p> </div> </div> <div class="sect2"> <h3 id="_larchitecture_hybride_séparation_des_responsabilités">L’Architecture Hybride : Séparation des Responsabilités</h3> <div class="imageblock"> <div class="content"> <img src="hybrid-overview.svg" alt="hybrid overview" width="1594" height="604"> </div> </div> <div class="paragraph"> <p>L’architecture hybride sépare clairement les responsabilités selon la complexité et la nature des opérations.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_principes_de_conception">Principes de Conception</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_principe_1_commencer_simple_évoluer_intelligemment">Principe 1 : Commencer Simple, Évoluer Intelligemment</h3> <div class="imageblock"> <div class="content"> <img src="evolution-phases.svg" alt="evolution phases" width="468" height="507"> </div> </div> <div class="paragraph"> <p><strong>Ne construisez pas Spring Boot si vous n’en avez pas besoin.</strong> Démarrez avec Supabase, ajoutez Spring Boot quand la complexité le justifie.</p> </div> </div> <div class="sect2"> <h3 id="_principe_2_séparation_par_nature_dopération">Principe 2 : Séparation par Nature d’Opération</h3> <div class="imageblock"> <div class="content"> <img src="operation-types.svg" alt="operation types" width="1213" height="274"> </div> </div> </div> <div class="sect2"> <h3 id="_principe_3_une_seule_source_de_vérité">Principe 3 : Une Seule Source de Vérité</h3> <div class="imageblock"> <div class="content"> <img src="single-source-truth.svg" alt="single source truth" width="1534" height="350"> </div> </div> <div class="paragraph"> <p>En partageant la même instance PostgreSQL, Supabase et Spring Boot travaillent sur les mêmes données sans synchronisation complexe.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_orchestration_des_flux">Orchestration des Flux</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_flux_1_authentification_centralisée">Flux 1 : Authentification Centralisée</h3> <div class="imageblock"> <div class="content"> <img src="auth-orchestration.svg" alt="auth orchestration" width="1032" height="1020"> </div> </div> <div class="paragraph"> <p><strong>Point clé</strong> : Un seul processus d’authentification, un seul JWT, utilisable partout.</p> </div> </div> <div class="sect2"> <h3 id="_flux_2_orchestration_dun_processus_métier_complexe">Flux 2 : Orchestration d’un Processus Métier Complexe</h3> <div class="imageblock"> <div class="content"> <img src="business-orchestration.svg" alt="business orchestration" width="1035" height="1071"> </div> </div> <div class="paragraph"> <p><strong>Ce que Spring Boot apporte</strong> : Orchestration fiable de processus complexes impliquant plusieurs systèmes avec garantie transactionnelle.</p> </div> </div> <div class="sect2"> <h3 id="_flux_3_jobs_planifiés_et_synchronisations">Flux 3 : Jobs Planifiés et Synchronisations</h3> <div class="imageblock"> <div class="content"> <img src="scheduled-jobs.svg" alt="scheduled jobs" width="893" height="990"> </div> </div> <div class="paragraph"> <p><strong>Ce que Spring Boot apporte</strong> : Jobs planifiés fiables avec gestion d’état, retry automatique, et exécution garantie.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_matrice_de_décision">Matrice de Décision</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_quand_utiliser_supabase">Quand Utiliser Supabase ?</h3> <div class="imageblock"> <div class="content"> <img src="supabase-decision.svg" alt="supabase decision" width="984" height="459"> </div> </div> </div> <div class="sect2"> <h3 id="_quand_utiliser_spring_boot">Quand Utiliser Spring Boot ?</h3> <div class="imageblock"> <div class="content"> <img src="springboot-decision.svg" alt="springboot decision" width="1099" height="517"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_exemples_darchitecture_par_type_de_projet">Exemples d’Architecture par Type de Projet</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_blog_portfolio">Blog / Portfolio</h3> <div class="imageblock"> <div class="content"> <img src="blog-architecture.svg" alt="blog architecture" width="1426" height="361"> </div> </div> <div class="paragraph"> <p><strong>Verdict</strong> : 100% Supabase suffit largement.</p> </div> </div> <div class="sect2"> <h3 id="_application_saas">Application SaaS</h3> <div class="imageblock"> <div class="content"> <img src="saas-architecture.svg" alt="saas architecture" width="1889" height="451"> </div> </div> <div class="paragraph"> <p><strong>Verdict</strong> : Architecture hybride nécessaire. Supabase pour l’essentiel, Spring Boot pour la partie critique (paiements, facturation).</p> </div> </div> <div class="sect2"> <h3 id="_e_commerce">E-commerce</h3> <div class="imageblock"> <div class="content"> <img src="ecommerce-architecture.svg" alt="ecommerce architecture" width="2071" height="410"> </div> </div> <div class="paragraph"> <p><strong>Verdict</strong> : Spring Boot indispensable. Supabase pour auth et catalogue uniquement.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_stratégie_de_migration_progressive">Stratégie de Migration Progressive</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="migration-strategy.svg" alt="migration strategy" width="1927" height="1013"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_coûts_et_considérations_opérationnelles">Coûts et Considérations Opérationnelles</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_structure_des_coûts">Structure des Coûts</h3> <div class="imageblock"> <div class="content"> <img src="cost-structure.svg" alt="cost structure" width="2245" height="410"> </div> </div> </div> <div class="sect2"> <h3 id="_responsabilités_opérationnelles">Responsabilités Opérationnelles</h3> <div class="imageblock"> <div class="content"> <img src="operational-responsibilities.svg" alt="operational responsibilities" width="1287" height="579"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_léquilibre_parfait">Conclusion : L’Équilibre Parfait</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’architecture hybride Supabase + Spring Boot n’est pas un compromis, c’est une <strong>synergie</strong>.</p> </div> <div class="sect2"> <h3 id="_les_principes_à_retenir">Les Principes à Retenir</h3> <div class="imageblock"> <div class="content"> <img src="key-principles.svg" alt="key principles" width="556" height="357"> </div> </div> </div> <div class="sect2"> <h3 id="_quand_choisir_cette_architecture">Quand Choisir Cette Architecture ?</h3> <div class="paragraph"> <p><strong>✅ Cette architecture est idéale si :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Vous voulez démarrer rapidement (MVP en jours, pas en mois)</p> </li> <li> <p>Vous anticipez une croissance de la complexité métier</p> </li> <li> <p>Vous voulez minimiser les coûts initiaux</p> </li> <li> <p>Vous aimez PostgreSQL et voulez une source de vérité unique</p> </li> <li> <p>Vous appréciez Kotlin et les Coroutines pour le code métier</p> </li> <li> <p>Vous voulez éviter le vendor lock-in total</p> </li> </ul> </div> <div class="paragraph"> <p><strong>❌ Cette architecture n’est PAS adaptée si :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Votre projet est simple et le restera (blog personnel → 100% Supabase suffit)</p> </li> <li> <p>Vous avez déjà une stack backend établie que vous maîtrisez</p> </li> <li> <p>Vous préférez un monolithe traditionnel</p> </li> <li> <p>Vous avez besoin de .NET, Python, ou autre langage côté backend</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_vision_densemble_finale">Vision d’Ensemble Finale</h3> <div class="imageblock"> <div class="content"> <img src="final-vision.svg" alt="final vision" width="1680" height="634"> </div> </div> </div> <div class="sect2"> <h3 id="_le_meilleur_des_deux_mondes">Le Meilleur des Deux Mondes</h3> <div class="paragraph"> <p>Cette architecture vous donne :</p> </div> <div class="paragraph"> <p><strong>🚀 La Vélocité de Supabase</strong></p> </div> <div class="ulist"> <ul> <li> <p>Démarrage en heures, pas en semaines</p> </li> <li> <p>Authentification OAuth2 en quelques clics</p> </li> <li> <p>APIs REST générées automatiquement</p> </li> <li> <p>Zéro configuration de serveur</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💪 La Puissance de Spring Boot</strong></p> </div> <div class="ulist"> <ul> <li> <p>Kotlin et Coroutines pour code asynchrone élégant</p> </li> <li> <p>Orchestration de processus métier complexes</p> </li> <li> <p>Jobs planifiés fiables</p> </li> <li> <p>Transactions ACID garanties</p> </li> <li> <p>Écosystème Spring complet</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💰 L’Économie Progressive</strong></p> </div> <div class="ulist"> <ul> <li> <p>0€ pour démarrer et valider</p> </li> <li> <p>Coûts qui suivent la croissance</p> </li> <li> <p>Pas de sur-engineering prématuré</p> </li> </ul> </div> <div class="paragraph"> <p><strong>🎯 La Flexibilité Architecturale</strong></p> </div> <div class="ulist"> <ul> <li> <p>Migration progressive sans refonte</p> </li> <li> <p>Ajout de Spring Boot seulement si nécessaire</p> </li> <li> <p>Pas de vendor lock-in total</p> </li> <li> <p>Architecture évolutive</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pour_aller_plus_loin">Pour Aller Plus Loin</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ressources_techniques">Ressources Techniques</h3> <div class="paragraph"> <p><strong>Documentation Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://supabase.com/docs/guides/auth">Guide d’Authentification</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/database/postgres/row-level-security">Row Level Security</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/api">Auto-generated APIs</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Documentation Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://spring.io/guides/tutorials/spring-boot-kotlin/">Spring Boot avec Kotlin</a></p> </li> <li> <p><a href="https://spring.io/blog/2019/04/12/going-reactive-with-spring-coroutines-and-kotlin-flow">Coroutines et 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>Articles Complémentaires :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Sécurisation des APIs avec JWT</p> </li> <li> <p>Optimisation des performances PostgreSQL</p> </li> <li> <p>Patterns de migration progressive</p> </li> <li> <p>Gestion des erreurs en architecture distribuée</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_cas_dusage_réels">Cas d’Usage Réels</h3> <div class="paragraph"> <p>Cette architecture hybride est utilisée avec succès dans :</p> </div> <div class="ulist"> <ul> <li> <p><strong>SaaS B2B</strong> : Authentification Supabase, facturation Spring Boot</p> </li> <li> <p><strong>Marketplaces</strong> : Catalogue Supabase, transactions Spring Boot</p> </li> <li> <p><strong>Plateformes de contenu</strong> : Articles Supabase, analytics Spring Boot</p> </li> <li> <p><strong>Outils internes</strong> : CRUD Supabase, workflows Spring Boot</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_checklist_de_démarrage">Checklist de Démarrage</h3> <div class="paragraph"> <p><strong>Phase 1 - Fondations (Semaine 1)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Créer compte Supabase</p> </li> <li> <p><i class="fa fa-square-o"></i> Configurer projet PostgreSQL</p> </li> <li> <p><i class="fa fa-square-o"></i> Activer Auth (Google, GitHub)</p> </li> <li> <p><i class="fa fa-square-o"></i> Définir schéma initial</p> </li> <li> <p><i class="fa fa-square-o"></i> Configurer Row Level Security</p> </li> <li> <p><i class="fa fa-square-o"></i> Tester APIs depuis JBake</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Phase 2 - MVP (Semaine 2-3)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Implémenter pages principales</p> </li> <li> <p><i class="fa fa-square-o"></i> Intégrer authentification OAuth2</p> </li> <li> <p><i class="fa fa-square-o"></i> Créer formulaires CRUD</p> </li> <li> <p><i class="fa fa-square-o"></i> Configurer Storage pour fichiers</p> </li> <li> <p><i class="fa fa-square-o"></i> Déployer sur GitHub Pages</p> </li> <li> <p><i class="fa fa-square-o"></i> Tester en conditions réelles</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Phase 3 - Évolution (Selon besoins)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Identifier besoins de logique complexe</p> </li> <li> <p><i class="fa fa-square-o"></i> Créer projet Spring Boot si nécessaire</p> </li> <li> <p><i class="fa fa-square-o"></i> Configurer validation JWT Supabase</p> </li> <li> <p><i class="fa fa-square-o"></i> Connecter à PostgreSQL Supabase</p> </li> <li> <p><i class="fa fa-square-o"></i> Migrer fonctionnalités complexes</p> </li> <li> <p><i class="fa fa-square-o"></i> Implémenter jobs planifiés</p> </li> <li> <p><i class="fa fa-square-o"></i> Déployer Spring Boot (Cloud Run, etc.)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_anti_patterns_à_éviter">Anti-Patterns à Éviter</h3> <div class="paragraph"> <p><strong>❌ Ne pas faire :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Dupliquer les données entre Supabase et Spring Boot</p> </li> <li> <p>Créer deux bases PostgreSQL séparées</p> </li> <li> <p>Coder l’authentification vous-même</p> </li> <li> <p>Utiliser Spring Boot pour du CRUD simple</p> </li> <li> <p>Sur-architecturer dès le départ</p> </li> <li> <p>Ignorer Row Level Security de Supabase</p> </li> </ul> </div> <div class="paragraph"> <p><strong>✅ Faire plutôt :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Partager une seule base PostgreSQL</p> </li> <li> <p>Laisser Supabase gérer l’authentification</p> </li> <li> <p>Utiliser Spring Boot seulement pour la complexité</p> </li> <li> <p>Commencer simple, évoluer progressivement</p> </li> <li> <p>Exploiter les forces de chaque technologie</p> </li> <li> <p>Sécuriser avec RLS au niveau base de données</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_perspectives_dévolution">Perspectives d’Évolution</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ajout_de_nouvelles_capacités">Ajout de Nouvelles Capacités</h3> <div class="imageblock"> <div class="content"> <img src="future-capabilities.svg" alt="future capabilities" width="2155" height="459"> </div> </div> </div> <div class="sect2"> <h3 id="_scaling_horizontal">Scaling Horizontal</h3> <div class="paragraph"> <p>Lorsque votre application grandit, l’architecture hybride scale naturellement :</p> </div> <div class="paragraph"> <p><strong>Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Scale automatiquement jusqu’à des millions d’opérations</p> </li> <li> <p>Read replicas pour performances lecture</p> </li> <li> <p>Point-in-time recovery pour sécurité</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Multiple instances derrière load balancer</p> </li> <li> <p>Stateless design facilite le scaling horizontal</p> </li> <li> <p>Kubernetes pour orchestration si nécessaire</p> </li> </ul> </div> <div class="paragraph"> <p><strong>PostgreSQL :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Partitioning pour tables volumineuses</p> </li> <li> <p>Connection pooling (PgBouncer)</p> </li> <li> <p>Sharding si vraiment nécessaire (rare)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_témoignages_architecturaux">Témoignages Architecturaux</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_startup_saas_50k_utilisateurs">Startup SaaS (50k utilisateurs)</h3> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Nous avons démarré 100% Supabase. À 5k utilisateurs, nous avons ajouté Spring Boot uniquement pour la facturation Stripe et les rapports mensuels. Un an plus tard, 80% de nos opérations passent toujours par Supabase. Spring Boot gère seulement la partie critique. Cette séparation nous a permis de scaler sans refonte.</p> </div> </blockquote> </div> </div> <div class="sect2"> <h3 id="_plateforme_e_learning_10k_utilisateurs">Plateforme E-learning (10k utilisateurs)</h3> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>L’authentification OAuth2 de Supabase nous a fait gagner 3 semaines de développement. Les APIs auto-générées gèrent tout notre catalogue de cours. Spring Boot ne sert que pour les certificats PDF et les emails de progression. Architecture simple, maintenable, évolutive.</p> </div> </blockquote> </div> </div> <div class="sect2"> <h3 id="_marketplace_b2b_3k_utilisateurs">Marketplace B2B (3k utilisateurs)</h3> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Spring Boot gère les transactions entre acheteurs et vendeurs (critique). Supabase gère tout le reste : profils, messagerie temps réel, documents. Le fait qu’ils partagent la même base PostgreSQL nous évite toute synchronisation complexe. Meilleur choix architectural que nous ayons fait.</p> </div> </blockquote> </div> </div> </div> </div> <div class="sect1"> <h2 id="_synthèse_un_paradigme_architectural_moderne">Synthèse : Un Paradigme Architectural Moderne</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’architecture hybride Supabase + Spring Boot représente un nouveau paradigme : <strong>la spécialisation architecturale</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="paradigm-shift.svg" alt="paradigm shift" width="1220" height="430"> </div> </div> <div class="paragraph"> <p><strong>Le principe fondamental :</strong> Ne construisez pas ce qui existe déjà sous forme de service. Concentrez-vous sur ce qui différencie votre application.</p> </div> <div class="sect2"> <h3 id="_la_règle_des_8020">La Règle des 80/20</h3> <div class="paragraph"> <p>Dans la plupart des applications :</p> </div> <div class="ulist"> <ul> <li> <p><strong>80% des opérations</strong> sont du CRUD standard → Supabase</p> </li> <li> <p><strong>20% des opérations</strong> nécessitent de la logique métier → Spring Boot</p> </li> </ul> </div> <div class="paragraph"> <p>Cette règle naturelle justifie l’architecture hybride.</p> </div> <div class="imageblock"> <div class="content"> <img src="8020-rule.svg" alt="8020 rule" width="1693" height="311"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_finale">Conclusion Finale</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’architecture hybride n’est pas un compromis technique, c’est une <strong>décision stratégique</strong>.</p> </div> <div class="paragraph"> <p><strong>Elle vous permet de :</strong></p> </div> <div class="ulist"> <ul> <li> <p>✅ Démarrer rapidement avec un MVP fonctionnel</p> </li> <li> <p>✅ Valider votre marché sans investissement lourd</p> </li> <li> <p>✅ Évoluer progressivement quand la complexité l’exige</p> </li> <li> <p>✅ Maîtriser vos coûts à chaque étape</p> </li> <li> <p>✅ Exploiter le meilleur de chaque technologie</p> </li> <li> <p>✅ Éviter le sur-engineering prématuré</p> </li> <li> <p>✅ Conserver la flexibilité pour l’avenir</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Elle représente :</strong></p> </div> <div class="ulist"> <ul> <li> <p>🎯 <strong>Pragmatisme</strong> : Chaque technologie où elle excelle</p> </li> <li> <p>🚀 <strong>Vélocité</strong> : Time-to-market minimal</p> </li> <li> <p>💰 <strong>Économie</strong> : Coûts alignés sur la valeur</p> </li> <li> <p>🔮 <strong>Évolutivité</strong> : Architecture qui grandit avec vous</p> </li> <li> <p>🛡️ <strong>Robustesse</strong> : Services éprouvés et fiables</p> </li> </ul> </div> <div class="sect2"> <h3 id="_votre_prochain_pas">Votre Prochain Pas</h3> <div class="paragraph"> <p>Si cette architecture vous parle, voici par où commencer :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Créez un compte Supabase</strong> (gratuit)</p> </li> <li> <p><strong>Définissez votre schéma de données minimal</strong></p> </li> <li> <p><strong>Configurez l’authentification OAuth2</strong></p> </li> <li> <p><strong>Créez votre première page JBake qui consomme l’API</strong></p> </li> <li> <p><strong>Déployez sur GitHub Pages</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Vous aurez un MVP fonctionnel en <strong>quelques jours</strong>.</p> </div> <div class="paragraph"> <p>Spring Boot viendra naturellement quand vous en aurez besoin. Pas avant.</p> </div> <hr> <div class="paragraph"> <p><strong>L’architecture hybride, c’est l’art de construire exactement ce qu’il faut, quand il faut.</strong></p> </div> <div class="paragraph text-center"> <p><em>Bon développement ! 🚀</em></p> </div> <hr> <div class="paragraph text-center"> <p><em>Partagez cet article si vous pensez qu’il peut aider d’autres développeurs à faire les bons choix architecturaux.</em></p> </div> </div> </div> </div> https://pages-content.github.io//blog/2025/0099_debugging-mockito-gradle-plugin_post.html Mon, 17 Nov 2025 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="#introduction">1. Introduction</a></li> <li><a href="#le_contexte_plugin_gradle_bakery">2. Le contexte : Plugin Gradle Bakery</a></li> <li><a href="#problème_1_vérifier_le_mauvais_mock">3. Problème #1 : Vérifier le mauvais mock</a> <ul class="sectlevel2"> <li><a href="#le_diagnostic">3.1. Le diagnostic</a></li> <li><a href="#la_solution">3.2. La solution</a></li> </ul> </li> <li><a href="#problème_2_unfinishedstubbingexception_en_cascade">4. Problème #2 : UnfinishedStubbingException en cascade</a> <ul class="sectlevel2"> <li><a href="#le_diagnostic_2">4.1. Le diagnostic</a></li> <li><a href="#la_solution_2">4.2. La solution</a></li> </ul> </li> <li><a href="#problème_3_le_fichier_de_configuration_nexiste_pas">5. Problème #3 : Le fichier de configuration n’existe pas</a> <ul class="sectlevel2"> <li><a href="#le_diagnostic_3">5.1. Le diagnostic</a></li> <li><a href="#la_solution_3">5.2. La solution</a></li> </ul> </li> <li><a href="#problème_4_afterevaluate_et_nullpointerexception">6. Problème #4 : afterEvaluate et NullPointerException</a> <ul class="sectlevel2"> <li><a href="#le_diagnostic_4">6.1. Le diagnostic</a></li> <li><a href="#la_solution_4">6.2. La solution</a></li> </ul> </li> <li><a href="#la_solution_complète">7. La solution complète</a></li> <li><a href="#leçons_apprises">8. Leçons apprises</a> <ul class="sectlevel2"> <li><a href="#1_vérifier_le_bon_mock">8.1. 1. Vérifier le bon mock</a></li> <li><a href="#2_éviter_les_mocks_imbriqués">8.2. 2. Éviter les mocks imbriqués</a></li> <li><a href="#3_mocker_les_callbacks_dévaluation">8.3. 3. Mocker les callbacks d’évaluation</a></li> <li><a href="#4_tester_la_résolution_des_chemins">8.4. 4. Tester la résolution des chemins</a></li> </ul> </li> <li><a href="#architecture_de_test_finale">9. Architecture de test finale</a></li> <li><a href="#conclusion">10. Conclusion</a></li> <li><a href="#ressources">11. Ressources</a></li> </ul> </div> <div class="sect1"> <h2 id="introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lors du développement du plugin Gradle <strong>Bakery</strong> pour mon blog JBake, j’ai rencontré un problème apparemment simple : un test unitaire qui échouait avec l’erreur <code>Wanted but not invoked</code>. Ce qui semblait être un bug trivial s’est révélé être un cas d’école parfait pour comprendre les subtilités du mocking avec Mockito et Kotlin.</p> </div> <div class="paragraph"> <p>Dans cet article, je vous emmène dans un voyage de debugging méthodique, où chaque solution révèle un nouveau problème, jusqu’à la résolution finale.</p> </div> </div> </div> <div class="sect1"> <h2 id="le_contexte_plugin_gradle_bakery">2. Le contexte : Plugin Gradle Bakery</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le plugin Bakery est un wrapper autour de JBake qui facilite la publication de sites statiques. Voici sa structure simplifiée :</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>Le test qui échouait était simple :</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>L’erreur :</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="problème_1_vérifier_le_mauvais_mock">3. Problème #1 : Vérifier le mauvais mock</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_diagnostic">3.1. Le diagnostic</h3> <div class="imageblock"> <div class="content"> <img src="./images/mockito-problem-1.svg" alt="mockito problem 1" width="687" height="521"> </div> </div> <div class="paragraph"> <p>Le problème : Mockito ne peut pas tracer les interactions sur <code>project.plugins</code> car ce n’est qu’un getter qui retourne le vrai mock <code>mockPluginContainer</code>. La vérification doit se faire directement sur l’instance du mock.</p> </div> </div> <div class="sect2"> <h3 id="la_solution">3.2. La solution</h3> <div class="paragraph"> <p>Modifier <code>createMockProject()</code> pour retourner les deux objets :</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>Et adapter le test :</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="problème_2_unfinishedstubbingexception_en_cascade">4. Problème #2 : UnfinishedStubbingException en cascade</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_diagnostic_2">4.1. Le diagnostic</h3> <div class="paragraph"> <p>Une fois la première correction appliquée, une nouvelle erreur est apparue :</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>Le code problématique utilisait la syntaxe DSL de 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="imageblock"> <div class="content"> <img src="./images/mockito-problem-2.svg" alt="mockito problem 2" width="690" height="316"> </div> </div> </div> <div class="sect2"> <h3 id="la_solution_2">4.2. La solution</h3> <div class="paragraph"> <p>Créer <strong>tous</strong> les mocks en dehors de tout bloc de stubbing, puis les configurer avec <code>whenever()</code> :</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>Règle d’or</strong> : Ne jamais appeler <code>mock()</code> à l’intérieur d’un bloc de configuration de mock. Toujours créer les mocks en premier, puis les configurer.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="problème_3_le_fichier_de_configuration_nexiste_pas">5. Problème #3 : Le fichier de configuration n’existe pas</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_diagnostic_3">5.1. Le diagnostic</h3> <div class="paragraph"> <p>Même avec les mocks corrects, le test échouait toujours car le plugin ne trouvait pas le fichier de configuration :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// Dans BakeryPlugin.kt if (!project.layout.projectDirectory.asFile .resolve(extension.configPath.get()).exists()) { println("config file does not exists") return@afterEvaluate // ❌ Sort avant d'appliquer JBake ! }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/mockito-problem-3.svg" alt="mockito problem 3" width="530" height="373"> </div> </div> </div> <div class="sect2"> <h3 id="la_solution_3">5.2. La solution</h3> <div class="paragraph"> <p>Configurer les mocks pour que la résolution du chemin fonctionne :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // ... autres mocks ... val configFile = File("../../site.yml").canonicalFile val projectDir = configFile.parentFile // Configuration cohérente des chemins whenever(mockConfigPathProperty.get()).thenReturn("site.yml") whenever(mockProjectDirectory.asFile).thenReturn(projectDir) // Maintenant : projectDir.resolve("site.yml") existe ! ✅ }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/path-resolution.svg" alt="path resolution" width="604" height="189"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="problème_4_afterevaluate_et_nullpointerexception">6. Problème #4 : afterEvaluate et NullPointerException</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_diagnostic_4">6.1. Le diagnostic</h3> <div class="paragraph"> <p>Le plugin applique JBake dans un bloc <code>afterEvaluate</code>, et accède à <code>buildDirectory.dir()</code> :</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>Le mock de <code>buildDirectory.dir()</code> retournait <code>null</code>.</p> </div> </div> <div class="sect2"> <h3 id="la_solution_4">6.2. La solution</h3> <div class="paragraph"> <p>Mocker <code>afterEvaluate</code> pour qu’il s’exécute immédiatement, et configurer complètement <code>buildDirectory</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // ... autres mocks ... val mockBuildDirectory = mock<DirectoryProperty>() val buildDir = File(projectDir, "build") // Mocker dir() pour retourner un Provider valide whenever(mockBuildDirectory.dir(any<String>())).doAnswer { invocation -> val path = invocation.arguments[0] as String val mockDirProvider = mock<Provider<Directory>>() val mockDir = mock<Directory>() whenever(mockDir.asFile).thenReturn(File(buildDir, path)) whenever(mockDirProvider.get()).thenReturn(mockDir) mockDirProvider } // Mocker afterEvaluate pour exécution immédiate whenever(mockProject.afterEvaluate(any<Action<Project>>())).doAnswer { invocation -> val action = invocation.arguments[0] as Action<Project> action.execute(mockProject) // ✅ Exécution synchrone null } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/after-evaluate-flow.svg" alt="after evaluate flow" width="777" height="357"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="la_solution_complète">7. La solution complète</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici la fonction <code>createMockProject()</code> finale, qui résout tous les problèmes :</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>Et le test final qui passe :</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="leçons_apprises">8. Leçons apprises</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="./images/lessons-learned.svg" alt="lessons learned" width="748" height="472"> </div> </div> <div class="sect2"> <h3 id="1_vérifier_le_bon_mock">8.1. 1. Vérifier le bon mock</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ❌ FAUX verify(project.plugins).apply(JBakePlugin::class.java) // ✅ CORRECT val (project, mockPluginContainer) = createMockProject() verify(mockPluginContainer).apply(JBakePlugin::class.java)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="2_éviter_les_mocks_imbriqués">8.2. 2. Éviter les mocks imbriqués</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_mocker_les_callbacks_dévaluation">8.3. 3. Mocker les callbacks d’évaluation</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_tester_la_résolution_des_chemins">8.4. 4. Tester la résolution des chemins</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="architecture_de_test_finale">9. Architecture de test finale</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="./images/test-architecture.svg" alt="test architecture" width="707" height="598"> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">10. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce qui semblait être un simple problème de test s’est révélé être un excellent cas d’étude sur :</p> </div> <div class="ulist"> <ul> <li> <p>Les subtilités de Mockito avec Kotlin</p> </li> <li> <p>L’importance de mocker les bons objets</p> </li> <li> <p>La gestion des callbacks asynchrones dans les tests</p> </li> <li> <p>La résolution de chemins dans les plugins Gradle</p> </li> </ul> </div> <div class="paragraph"> <p>Le debugging méthodique, en comprenant chaque couche du problème, a permis d’arriver à une solution robuste et maintenable.</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>Conseil pour vos tests</strong> : Si vous rencontrez "Wanted but not invoked" avec Mockito, demandez-vous toujours :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Est-ce que je vérifie le bon mock ?</p> </li> <li> <p>Est-ce que tous mes mocks sont créés en dehors des blocs de configuration ?</p> </li> <li> <p>Est-ce que mes callbacks s’exécutent vraiment ?</p> </li> <li> <p>Est-ce que mes chemins se résolvent correctement ?</p> </li> </ol> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="ressources">11. Ressources</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/mockito/mockito-kotlin">Mockito-Kotlin Documentation</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/custom_plugins.html">Gradle Plugin Development Guide</a></p> </li> <li> <p><a href="https://jbake.org/">JBake Static Site Generator</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Avez-vous rencontré des problèmes similaires dans vos tests ? Partagez votre expérience dans les commentaires !</em></p> </div> </div> </div> https://pages-content.github.io//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="#résumé">Résumé</a></li> <li><a href="#le_problème_ce_maudit_clignotement_de_thème">1. Le Problème : Ce Maudit Clignotement de Thème</a> <ul class="sectlevel2"> <li><a href="#un_cauchemar_pour_lexpérience_utilisateur">1.1. Un Cauchemar pour l’Expérience Utilisateur</a></li> <li><a href="#le_fouc_un_vieux_problème_web">1.2. Le FOUC : Un Vieux Problème Web</a></li> <li><a href="#impact_sur_la_perception_de_qualité">1.3. Impact sur la Perception de Qualité</a></li> <li><a href="#analyse_technique_du_problème">1.4. Analyse Technique du Problème</a></li> </ul> </li> <li><a href="#pourquoi_un_script_classique_ne_suffit_pas">2. Pourquoi un Script Classique ne Suffit Pas ?</a> <ul class="sectlevel2"> <li><a href="#lapproche_intuitive_mais_inefficace">2.1. L’Approche Intuitive mais Inefficace</a></li> <li><a href="#comprendre_lévénement_domcontentloaded">2.2. Comprendre l’Événement DOMContentLoaded</a></li> <li><a href="#le_problème_du_render_blocking">2.3. Le Problème du Render Blocking</a></li> <li><a href="#visualisation_du_problème">2.4. Visualisation du Problème</a></li> <li><a href="#les_tentatives_de_solution_inefficaces">2.5. Les Tentatives de Solution Inefficaces</a></li> <li><a href="#la_vraie_solution_agir_plus_tôt">2.6. La Vraie Solution : Agir Plus Tôt</a></li> </ul> </li> <li><a href="#la_solution_le_chargement_précoce_early_loading">3. La Solution : Le Chargement Précoce (Early Loading)</a> <ul class="sectlevel2"> <li><a href="#le_principe_fondamental">3.1. Le Principe Fondamental</a></li> <li><a href="#pourquoi_le_head_est_lendroit_idéal">3.2. Pourquoi le <code><head></code> est l’Endroit Idéal</a></li> <li><a href="#architecture_de_la_solution_en_trois_couches">3.3. Architecture de la Solution en Trois Couches</a></li> </ul> </li> <li><a href="#étape_1_sauvegarder_le_choix_de_lutilisateur">4. Étape 1 : Sauvegarder le Choix de l’Utilisateur</a> <ul class="sectlevel2"> <li><a href="#le_localstorage_votre_mémoire_persistante">4.1. Le localStorage : Votre Mémoire Persistante</a></li> <li><a href="#implémentation_de_la_sauvegarde_du_thème">4.2. Implémentation de la Sauvegarde du Thème</a></li> <li><a href="#gestion_des_cas_derreur">4.3. Gestion des Cas d’Erreur</a></li> <li><a href="#stratégies_avancées_de_persistance">4.4. Stratégies Avancées de Persistance</a></li> </ul> </li> <li><a href="#étape_2_le_script_de_pré_chargement_dans_le_head">5. Étape 2 : Le Script de Pré-chargement dans le <code><head></code></a> <ul class="sectlevel2"> <li><a href="#le_cœur_de_la_solution">5.1. Le Cœur de la Solution</a></li> <li><a href="#anatomie_du_script_chaque_ligne_compte">5.2. Anatomie du Script : Chaque Ligne Compte</a></li> <li><a href="#détection_de_la_préférence_système_bonus">5.3. Détection de la Préférence Système (Bonus)</a></li> <li><a href="#performance_pourquoi_ce_script_est_rapide">5.4. Performance : Pourquoi ce Script est Rapide</a></li> <li><a href="#placement_optimal_dans_le_head">5.5. Placement Optimal dans le <code><head></code></a></li> </ul> </li> <li><a href="#étape_3_la_puissance_des_sélecteurs_dattributs_css">6. Étape 3 : La Puissance des Sélecteurs d’Attributs CSS</a> <ul class="sectlevel2"> <li><a href="#le_système_de_thème_de_bootstrap_5">6.1. Le Système de Thème de Bootstrap 5</a></li> <li><a href="#structure_css_pour_un_système_de_thème">6.2. Structure CSS pour un Système de Thème</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="résumé">Résumé</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans cet article technique approfondi, nous explorons comment implémenter un sélecteur de thème (light/dark) sans le désagréable effet de clignotement qui survient lors du chargement de page. Nous analysons en détail le cycle de rendu du navigateur, les causes profondes du FOUC (Flash of Unstyled Content), et proposons une solution robuste basée sur le pré-chargement synchrone dans le <code><head></code>. Cette technique garantit une expérience utilisateur fluide et professionnelle.</p> </div> </div> </div> <div class="sect1"> <h2 id="le_problème_ce_maudit_clignotement_de_thème">1. Le Problème : Ce Maudit Clignotement de Thème</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="un_cauchemar_pour_lexpérience_utilisateur">1.1. Un Cauchemar pour l’Expérience Utilisateur</h3> <div class="paragraph"> <p>Imaginez la scène : vous avez passé des heures à concevoir un magnifique thème sombre pour votre application web. Les couleurs sont parfaitement équilibrées, le contraste est optimal, et vos utilisateurs adorent cette option. Mais il y a un problème embarrassant : à chaque rechargement de page, pendant une fraction de seconde, le thème clair par défaut s’affiche avant que le thème sombre ne prenne le relais.</p> </div> <div class="paragraph"> <p>Ce "flash" visuel, bien que bref (parfois moins de 100ms), est immédiatement perceptible par l’œil humain et crée une expérience désagréable. Pour les utilisateurs qui ont choisi le thème sombre pour des raisons de confort visuel ou d’accessibilité, ce clignotement peut même être douloureux, particulièrement dans un environnement peu éclairé.</p> </div> </div> <div class="sect2"> <h3 id="le_fouc_un_vieux_problème_web">1.2. Le FOUC : Un Vieux Problème Web</h3> <div class="paragraph"> <p>Ce phénomène est une variante de ce que l’on appelle le "Flash of Unstyled Content" (FOUC), un problème classique du développement web qui remonte aux premiers jours du CSS. Le FOUC se produit lorsque le navigateur affiche temporairement du contenu HTML sans ses styles CSS appliqués, créant un flash de contenu non stylisé.</p> </div> <div class="paragraph"> <p>Dans notre cas spécifique, nous ne parlons pas d’un contenu complètement non stylisé, mais plutôt d’un <strong>Flash of Wrong Theme</strong> (FOWT) - le contenu est stylisé, mais avec le mauvais thème. C’est particulièrement frustrant car cela montre que notre application "oublie" la préférence de l’utilisateur à chaque chargement de page.</p> </div> </div> <div class="sect2"> <h3 id="impact_sur_la_perception_de_qualité">1.3. Impact sur la Perception de Qualité</h3> <div class="paragraph"> <p>Ce problème, bien que technique, a des répercussions importantes sur la perception de la qualité de votre application :</p> </div> <div class="paragraph"> <p><strong>Manque de polish</strong> : Le clignotement donne l’impression d’une application inachevée ou mal optimisée. Les utilisateurs associent souvent ces petits défauts visuels à un manque de professionnalisme général.</p> </div> <div class="paragraph"> <p><strong>Rupture de cohérence</strong> : L’application semble "oublier" les préférences de l’utilisateur, créant une sensation de désynchronisation entre l’interface et les attentes.</p> </div> <div class="paragraph"> <p><strong>Fatigue visuelle</strong> : Pour les utilisateurs sensibles à la lumière ou souffrant de migraines, ce flash lumineux peut être plus qu’un simple désagrément esthétique.</p> </div> <div class="paragraph"> <p><strong>Performance perçue</strong> : Ironiquement, même si votre site se charge rapidement, ce clignotement peut donner l’impression d’une application lente ou peu réactive.</p> </div> </div> <div class="sect2"> <h3 id="analyse_technique_du_problème">1.4. Analyse Technique du Problème</h3> <div class="paragraph"> <p>Pour comprendre comment résoudre ce problème, il faut d’abord comprendre pourquoi il se produit. Le clignotement survient à cause d’un décalage temporel entre trois événements critiques dans le cycle de vie d’une page web :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Le parsing initial du HTML</strong> : Le navigateur lit et analyse la structure de votre page</p> </li> <li> <p><strong>L’application des styles CSS</strong> : Le navigateur applique les règles CSS et calcule le rendu visuel</p> </li> <li> <p><strong>L’exécution du JavaScript</strong> : Votre code qui change le thème s’exécute</p> </li> </ol> </div> <div class="paragraph"> <p>Le problème survient lorsque l’événement n°3 (exécution du JavaScript) arrive après que le navigateur a déjà commencé ou terminé l’événement n°2 (application des styles). À ce moment-là, le navigateur a déjà pris une décision sur quel thème afficher, et votre code arrive trop tard pour l’influencer avant le premier rendu.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="pourquoi_un_script_classique_ne_suffit_pas">2. Pourquoi un Script Classique ne Suffit Pas ?</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="lapproche_intuitive_mais_inefficace">2.1. L’Approche Intuitive mais Inefficace</h3> <div class="paragraph"> <p>L’approche la plus naturelle pour un développeur serait de placer un script à la fin de notre <code><body></code> qui vérifie le thème préféré de l’utilisateur et l’applique. Cette approche suit les meilleures pratiques traditionnelles du web qui recommandent de charger les scripts en fin de page pour ne pas bloquer le rendu.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">// À la fin de <body> - L'APPROCHE INSUFFISANTE document.addEventListener('DOMContentLoaded', () => { const theme = localStorage.getItem('preferred-theme'); if (theme === 'dark') { document.documentElement.setAttribute('data-bs-theme', 'dark'); } });</code></pre> </div> </div> <div class="paragraph"> <p>Cette approche semble logique à première vue. Nous attendons que le DOM soit prêt, puis nous appliquons le thème. Simple, non ? Malheureusement, cette simplicité cache un défaut fondamental lié au timing du cycle de rendu du navigateur.</p> </div> </div> <div class="sect2"> <h3 id="comprendre_lévénement_domcontentloaded">2.2. Comprendre l’Événement DOMContentLoaded</h3> <div class="paragraph"> <p>L’événement <code>DOMContentLoaded</code> se déclenche lorsque le document HTML initial a été complètement chargé et analysé par le navigateur, <strong>sans attendre</strong> la fin du chargement des feuilles de style, des images et des sous-cadres. C’est un point important à comprendre.</p> </div> <div class="paragraph"> <p>Voici la séquence typique des événements :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Le navigateur commence à télécharger le HTML</p> </li> <li> <p>Il analyse le HTML au fur et à mesure de sa réception</p> </li> <li> <p>Il découvre les balises <code><link></code> pour les CSS et commence à les télécharger</p> </li> <li> <p>Il découvre les balises <code><script></code> et les exécute (selon leur type et attributs)</p> </li> <li> <p>Il construit le DOM (Document Object Model)</p> </li> <li> <p><strong>L’événement <code>DOMContentLoaded</code> se déclenche</strong></p> </li> <li> <p>Il continue d’appliquer les styles et de faire le layout</p> </li> <li> <p>Le premier paint (affichage) se produit</p> </li> <li> <p>L’événement <code>load</code> se déclenche quand toutes les ressources sont chargées</p> </li> </ol> </div> <div class="paragraph"> <p>Le problème ? Entre l’étape 6 (DOMContentLoaded) et l’étape 8 (premier paint), le navigateur a déjà pris des décisions sur comment afficher la page. Si votre script de changement de thème s’exécute à l’étape 6, il est déjà trop tard pour éviter un premier affichage avec les styles par défaut.</p> </div> </div> <div class="sect2"> <h3 id="le_problème_du_render_blocking">2.3. Le Problème du Render Blocking</h3> <div class="paragraph"> <p>En réalité, le timing est encore plus complexe. Les navigateurs modernes utilisent des techniques d’optimisation sophistiquées pour améliorer la performance perçue. Ils essaient de faire le premier paint (First Contentful Paint) le plus rapidement possible pour que l’utilisateur voie quelque chose à l’écran.</p> </div> <div class="paragraph"> <p>Les CSS sont "render-blocking" par défaut, ce qui signifie que le navigateur attend d’avoir téléchargé et parsé les feuilles de style avant de faire le premier paint. C’est logique : on ne veut pas afficher du contenu non stylisé.</p> </div> <div class="paragraph"> <p>Mais voici le piège : quand le navigateur applique ces styles CSS pour la première fois, il le fait en se basant sur l’état actuel du DOM. Si l’attribut <code>data-bs-theme</code> n’est pas encore défini sur la balise <code><html></code>, le navigateur appliquera les styles par défaut (généralement le thème clair).</p> </div> <div class="paragraph"> <p>Ensuite, quand votre script s’exécute et change cet attribut, le navigateur doit :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Recalculer tous les styles affectés par ce changement</p> </li> <li> <p>Refaire le layout si nécessaire</p> </li> <li> <p>Repeindre les éléments affectés</p> </li> </ol> </div> <div class="paragraph"> <p>Ce processus de recalcul et de repeinture est ce qui cause le clignotement visible.</p> </div> </div> <div class="sect2"> <h3 id="visualisation_du_problème">2.4. Visualisation du Problème</h3> <div class="paragraph"> <p>Pour mieux comprendre cette séquence problématique, examinons un diagramme de séquence détaillé :</p> </div> <div id="diag-flux-incorrect" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-4cecab2bd5c378c47b8154389dfa0d84.svg" alt="Diagramme de séquence du chargement incorrect" width="1488" height="666"> </div> </div> <div class="paragraph"> <p>Ce diagramme illustre clairement le problème : le premier paint se produit avant que notre script n’ait eu la chance de définir le bon thème. Le repaint subséquent crée le clignotement visible.</p> </div> </div> <div class="sect2"> <h3 id="les_tentatives_de_solution_inefficaces">2.5. Les Tentatives de Solution Inefficaces</h3> <div class="paragraph"> <p>Plusieurs approches ont été tentées pour résoudre ce problème, mais la plupart ont leurs propres inconvénients :</p> </div> <div class="paragraph"> <p><strong>Approche 1 : Cacher le contenu jusqu’au chargement</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">body { opacity: 0; transition: opacity 0.3s; } body.loaded { opacity: 1; }</code></pre> </div> </div> <div class="paragraph"> <p>Cette approche cache tout le contenu jusqu’à ce que le JavaScript ait défini le bon thème. Le problème ? Cela retarde artificiellement l’affichage du contenu, donnant l’impression d’un site plus lent. De plus, si JavaScript est désactivé, l’utilisateur ne voit rien du tout !</p> </div> <div class="paragraph"> <p><strong>Approche 2 : Utiliser un loader/spinner</strong></p> </div> <div class="paragraph"> <p>Similaire à l’approche 1, mais avec un spinner de chargement. Cela masque le problème mais n’améliore pas la performance réelle et ajoute un délai perçu inutile.</p> </div> <div class="paragraph"> <p><strong>Approche 3 : Défaut au thème sombre</strong></p> </div> <div class="paragraph"> <p>Certains développeurs définissent le thème sombre comme défaut dans le CSS. Cela évite le clignotement pour les utilisateurs du thème sombre, mais crée le problème inverse pour les utilisateurs du thème clair !</p> </div> <div class="paragraph"> <p>Aucune de ces approches n’est satisfaisante car elles traitent le symptôme plutôt que la cause racine du problème.</p> </div> </div> <div class="sect2"> <h3 id="la_vraie_solution_agir_plus_tôt">2.6. La Vraie Solution : Agir Plus Tôt</h3> <div class="paragraph"> <p>La clé pour résoudre ce problème est de réaliser que nous devons définir l’attribut <code>data-bs-theme</code> <strong>avant</strong> que le navigateur ne commence à appliquer les styles CSS. Cela signifie que notre script doit s’exécuter plus tôt dans le cycle de vie de la page, et c’est exactement ce que nous allons explorer dans la section suivante.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="la_solution_le_chargement_précoce_early_loading">3. La Solution : Le Chargement Précoce (Early Loading)</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_principe_fondamental">3.1. Le Principe Fondamental</h3> <div class="paragraph"> <p>La solution élégante à notre problème de clignotement repose sur un principe simple mais puissant : <strong>synchroniser l’état de l’application avec le processus de rendu du navigateur</strong>. Au lieu d’attendre que la page soit chargée pour définir le thème, nous devons le définir <strong>pendant</strong> le chargement, avant même que les styles CSS ne soient appliqués.</p> </div> <div class="paragraph"> <p>Cette approche s’appelle le "Early Loading" ou "Synchronous Preloading" dans le jargon du développement web. L’idée est d’exécuter notre logique de détection de thème le plus tôt possible dans le cycle de vie de la page, idéalement dans la balise <code><head></code>, avant même que le navigateur ne commence à télécharger les fichiers CSS.</p> </div> </div> <div class="sect2"> <h3 id="pourquoi_le_head_est_lendroit_idéal">3.2. Pourquoi le <code><head></code> est l’Endroit Idéal</h3> <div class="paragraph"> <p>Le <code><head></code> d’un document HTML est traité séquentiellement par le navigateur, de haut en bas. Chaque élément est traité dans l’ordre où il apparaît. Cette caractéristique est cruciale pour notre solution.</p> </div> <div class="paragraph"> <p>Lorsque le navigateur rencontre une balise <code><script></code> dans le <code><head></code> sans les attributs <code>async</code> ou <code>defer</code>, il :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Interrompt le parsing du HTML</strong></p> </li> <li> <p><strong>Télécharge le script</strong> (si externe) ou le lit (si inline)</p> </li> <li> <p><strong>Exécute immédiatement le script</strong></p> </li> <li> <p><strong>Reprend le parsing du HTML</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Ce comportement, souvent considéré comme un problème de performance (d’où la recommandation habituelle de placer les scripts en fin de page), devient notre allié dans ce cas précis. En plaçant notre script de détection de thème au début du <code><head></code>, nous garantissons qu’il s’exécute avant que le navigateur ne rencontre les balises <code><link></code> de nos feuilles de style.</p> </div> </div> <div class="sect2"> <h3 id="architecture_de_la_solution_en_trois_couches">3.3. Architecture de la Solution en Trois Couches</h3> <div class="paragraph"> <p>Notre solution complète se compose de trois couches interdépendantes, chacune jouant un rôle spécifique :</p> </div> <div class="paragraph"> <p><strong>Couche 1 : Persistence (localStorage)</strong> Cette couche est responsable de la sauvegarde et de la récupération du choix de l’utilisateur entre les sessions.</p> </div> <div class="paragraph"> <p><strong>Couche 2 : Synchronisation Précoce (Script inline dans <code><head></code>)</strong> Cette couche synchronise l’état de l’application avec le DOM avant le rendu initial.</p> </div> <div class="paragraph"> <p><strong>Couche 3 : Styles Réactifs (CSS avec sélecteurs d’attributs)</strong> Cette couche définit les styles visuels basés sur l’état défini par la couche 2.</p> </div> <div class="paragraph"> <p>Explorons maintenant chaque couche en détail.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="étape_1_sauvegarder_le_choix_de_lutilisateur">4. Étape 1 : Sauvegarder le Choix de l’Utilisateur</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_localstorage_votre_mémoire_persistante">4.1. Le localStorage : Votre Mémoire Persistante</h3> <div class="paragraph"> <p>Le <code>localStorage</code> est une API Web Storage qui permet de stocker des paires clé-valeur dans le navigateur de manière persistante. Contrairement aux cookies, les données du <code>localStorage</code> :</p> </div> <div class="ulist"> <ul> <li> <p>Ne sont jamais envoyées au serveur automatiquement</p> </li> <li> <p>Ont une capacité de stockage plus importante (généralement 5-10MB)</p> </li> <li> <p>N’ont pas de date d’expiration (persistent jusqu’à suppression explicite)</p> </li> <li> <p>Sont limitées au protocole et au domaine (Same-Origin Policy)</p> </li> </ul> </div> <div class="paragraph"> <p>Pour notre cas d’usage, le <code>localStorage</code> est parfait car :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Nous n’avons pas besoin de partager cette information avec le serveur</p> </li> <li> <p>Nous voulons que la préférence persiste indéfiniment</p> </li> <li> <p>La taille de stockage requise est minime (quelques octets)</p> </li> </ol> </div> </div> <div class="sect2"> <h3 id="implémentation_de_la_sauvegarde_du_thème">4.2. Implémentation de la Sauvegarde du Thème</h3> <div class="paragraph"> <p>Voici comment nous sauvegardons le choix de l’utilisateur lorsqu’il change de thème :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">// Fonction complète pour changer le thème function setTheme(newTheme) { // Validation de l'entrée if (!['light', 'dark', 'auto'].includes(newTheme)) { console.error('Thème invalide:', newTheme); return; } try { // Sauvegarde dans localStorage localStorage.setItem('preferred-theme', newTheme); // Application immédiate dans le DOM document.documentElement.setAttribute('data-bs-theme', newTheme); // Dispatch d'un événement personnalisé pour notifier d'autres composants window.dispatchEvent(new CustomEvent('theme-changed', { detail: { theme: newTheme } })); console.log('Thème changé:', newTheme); } catch (error) { console.error('Erreur lors de la sauvegarde du thème:', error); // Fallback : on applique quand même le thème visuellement document.documentElement.setAttribute('data-bs-theme', newTheme); } } // Exemple d'utilisation avec un bouton document.getElementById('theme-toggle').addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light'; const newTheme = currentTheme === 'light' ? 'dark' : 'light'; setTheme(newTheme); });</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="gestion_des_cas_derreur">4.3. Gestion des Cas d’Erreur</h3> <div class="paragraph"> <p>Il est crucial de gérer les cas où le <code>localStorage</code> n’est pas disponible ou accessible. Plusieurs scénarios peuvent empêcher l’accès au <code>localStorage</code> :</p> </div> <div class="paragraph"> <p><strong>Navigation privée stricte</strong> : Safari en mode navigation privée lève une exception <code>QuotaExceededError</code> lors de tentatives d’écriture dans le <code>localStorage</code>.</p> </div> <div class="paragraph"> <p><strong>Paramètres de confidentialité</strong> : Certains navigateurs ou extensions de confidentialité peuvent bloquer l’accès au <code>localStorage</code>.</p> </div> <div class="paragraph"> <p><strong>Limitations de domaine</strong> : Le <code>localStorage</code> n’est pas accessible sur le protocole <code>file://</code> dans certains navigateurs.</p> </div> <div class="paragraph"> <p><strong>Espace de stockage saturé</strong> : Bien que rare, l’espace de stockage peut être complètement rempli.</p> </div> <div class="paragraph"> <p>C’est pourquoi notre code utilise un bloc <code>try…​catch</code> pour gérer ces cas gracieusement, en continuant d’offrir la fonctionnalité de changement de thème même si la persistance n’est pas disponible.</p> </div> </div> <div class="sect2"> <h3 id="stratégies_avancées_de_persistance">4.4. Stratégies Avancées de Persistance</h3> <div class="paragraph"> <p>Pour des applications plus sophistiquées, vous pouvez envisager des stratégies supplémentaires :</p> </div> <div class="paragraph"> <p><strong>Synchronisation serveur (optionnelle)</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">async function setTheme(newTheme) { // Sauvegarde locale immédiate localStorage.setItem('preferred-theme', newTheme); document.documentElement.setAttribute('data-bs-theme', newTheme); // Synchronisation serveur en arrière-plan (si l'utilisateur est connecté) if (userIsAuthenticated()) { try { await fetch('/api/user/preferences', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ theme: newTheme }) }); } catch (error) { console.warn('Échec de la synchronisation serveur:', error); // L'échec n'est pas critique car la préférence est déjà sauvegardée localement } } }</code></pre> </div> </div> <div class="paragraph"> <p>Cette approche permet de synchroniser les préférences entre appareils pour les utilisateurs connectés, tout en gardant la réactivité locale immédiate.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="étape_2_le_script_de_pré_chargement_dans_le_head">5. Étape 2 : Le Script de Pré-chargement dans le <code><head></code></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_cœur_de_la_solution">5.1. Le Cœur de la Solution</h3> <div class="paragraph"> <p>C’est ici que la magie opère véritablement. Nous allons placer un petit script <strong>inline</strong> directement dans notre <code><head></code>, avant toutes nos balises <code><link></code> de feuilles de style. Ce script est volontairement minimaliste, autonome, et conçu pour s’exécuter le plus rapidement possible.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mon Site Incroyable</title> <!-- ========================================== NOTRE SCRIPT MAGIQUE DE PRÉ-CHARGEMENT Ce script DOIT être le premier élément dans le <head> après les meta tags ========================================== --> <script> // IIFE pour ne pas polluer le scope global (function() { 'use strict'; try { // Lecture de la préférence sauvegardée const savedTheme = localStorage.getItem('preferred-theme'); // Si une préférence existe, on l'applique immédiatement if (savedTheme) { document.documentElement.setAttribute('data-bs-theme', savedTheme); } // Optionnel : Détecter la préférence système si aucune sauvegarde else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark'); } // Sinon, le thème par défaut du CSS sera utilisé (généralement 'light') } catch (error) { // En cas d'erreur (localStorage bloqué, etc.), on log discrètement // et on laisse le thème par défaut s'appliquer console.warn('Impossible de charger la préférence de thème:', error); } })(); </script> <!-- FIN DU SCRIPT MAGIQUE --> <!-- Les feuilles de style sont chargées APRÈS le script --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <!-- Autres ressources du head --> <link rel="icon" href="favicon.ico"> </head> <body> <!-- Contenu de la page --> </body> </html></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="anatomie_du_script_chaque_ligne_compte">5.2. Anatomie du Script : Chaque Ligne Compte</h3> <div class="paragraph"> <p>Décortiquons ce script ligne par ligne pour comprendre chaque décision de design :</p> </div> <div class="paragraph"> <p><strong>L’IIFE (Immediately Invoked Function Expression)</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">(function() { // ... })();</code></pre> </div> </div> <div class="paragraph"> <p>Cette structure crée une fonction qui s’exécute immédiatement. Pourquoi ? Pour isoler nos variables dans un scope local et éviter de polluer le scope global. Même si nous n’utilisons que <code>const</code> (qui a un scope de bloc), l’IIFE est une bonne pratique qui rend nos intentions claires et protège contre d’éventuels conflits de noms.</p> </div> <div class="paragraph"> <p><strong>Le Mode Strict</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">'use strict';</code></pre> </div> </div> <div class="paragraph"> <p>Cette directive active le mode strict de JavaScript, qui : - Interdit l’utilisation de variables non déclarées - Génère des erreurs pour les opérations dangereuses - Améliore les performances dans certains moteurs JavaScript</p> </div> <div class="paragraph"> <p>Pour un script critique comme celui-ci, nous voulons la sécurité maximale.</p> </div> <div class="paragraph"> <p><strong>Le Bloc try…​catch</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">try { // Code principal } catch (error) { console.warn('Impossible de charger la préférence de thème:', error); }</code></pre> </div> </div> <div class="paragraph"> <p>Ce bloc est absolument crucial. Il garantit que si quelque chose se passe mal (localStorage bloqué, erreur de syntaxe improbable, etc.), notre script ne bloquera pas le chargement de la page entière. L’utilisation de <code>console.warn</code> plutôt que <code>console.error</code> indique que c’est un problème non-critique.</p> </div> <div class="paragraph"> <p><strong>La Lecture du localStorage</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">const savedTheme = localStorage.getItem('preferred-theme');</code></pre> </div> </div> <div class="paragraph"> <p>Cette ligne peut lever une exception dans certains contextes (navigation privée stricte de Safari). C’est pourquoi elle est dans un bloc try…​catch.</p> </div> <div class="paragraph"> <p><strong>L’Application Conditionnelle</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">if (savedTheme) { document.documentElement.setAttribute('data-bs-theme', savedTheme); }</code></pre> </div> </div> <div class="paragraph"> <p>Nous appliquons le thème seulement si nous en avons trouvé un sauvegardé. Sinon, nous laissons le CSS utiliser son thème par défaut. Cette approche est plus robuste qu’une valeur par défaut côdée en dur dans le JavaScript.</p> </div> </div> <div class="sect2"> <h3 id="détection_de_la_préférence_système_bonus">5.3. Détection de la Préférence Système (Bonus)</h3> <div class="paragraph"> <p>Une amélioration optionnelle mais élégante consiste à détecter la préférence de thème du système d’exploitation de l’utilisateur s’il n’a pas encore fait de choix explicite dans votre application :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark'); }</code></pre> </div> </div> <div class="paragraph"> <p>Cette fonctionnalité utilise la Media Query <code>prefers-color-scheme</code> pour interroger le système. Sur macOS, Windows 10+, iOS, et Android moderne, cette requête retourne la préférence système de l’utilisateur.</p> </div> <div class="paragraph"> <p><strong>Avantages :</strong> - Expérience personnalisée dès la première visite - Cohérence avec l’environnement système de l’utilisateur - Aucun stockage nécessaire pour la première visite</p> </div> <div class="paragraph"> <p><strong>Considérations :</strong> - Tous les navigateurs ne supportent pas cette fonctionnalité (mais le support est excellent depuis 2020) - La vérification <code>window.matchMedia</code> assure la compatibilité - L’utilisateur peut toujours surcharger ce choix</p> </div> </div> <div class="sect2"> <h3 id="performance_pourquoi_ce_script_est_rapide">5.4. Performance : Pourquoi ce Script est Rapide</h3> <div class="paragraph"> <p>Notre script de pré-chargement est conçu pour être extrêmement rapide :</p> </div> <div class="paragraph"> <p><strong>Taille minime</strong> : Environ 300 octets non-minifiés, 200 octets minifiés. C’est négligeable comparé à n’importe quelle image ou librairie JavaScript.</p> </div> <div class="paragraph"> <p><strong>Inline</strong> : Pas de requête HTTP supplémentaire. Le script est dans le HTML, donc il est immédiatement disponible.</p> </div> <div class="paragraph"> <p><strong>Opérations synchrones simples</strong> : Lecture d’une clé dans le localStorage (opération ultra-rapide) et modification d’un attribut DOM (opération native du navigateur).</p> </div> <div class="paragraph"> <p><strong>Aucune dépendance</strong> : Pas de framework, pas de librairie, juste du JavaScript vanilla. Pas de temps de démarrage, pas de parsing de dépendances.</p> </div> <div class="paragraph"> <p><strong>Exécution unique</strong> : Ce script s’exécute une seule fois au chargement. Pas de listeners d’événements, pas de boucles, pas de calculs complexes.</p> </div> <div class="paragraph"> <p>En pratique, sur du matériel moderne, ce script s’exécute en moins de 1 milliseconde, un temps imperceptible qui n’a aucun impact sur la performance de chargement de la page.</p> </div> </div> <div class="sect2"> <h3 id="placement_optimal_dans_le_head">5.5. Placement Optimal dans le <code><head></code></h3> <div class="paragraph"> <p>L’ordre des éléments dans le <code><head></code> est important. Voici l’ordre recommandé :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><head> <!-- 1. Métadonnées critiques --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 2. Notre script de pré-chargement (IMMÉDIATEMENT après les meta) --> <script> (function() { /* notre code */ })(); </script> <!-- 3. Titre de la page --> <title>Mon Site</title> <!-- 4. Feuilles de style --> <link rel="stylesheet" href="styles.css"> <!-- 5. Autres ressources (fonts, favicons, etc.) --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="icon" href="favicon.ico"> <!-- 6. Autres scripts avec defer ou async --> <script src="app.js" defer></script> </head></code></pre> </div> </div> <div class="paragraph"> <p>Cette ordre garantit que : 1. Le charset est défini avant tout traitement de texte 2. Notre script s’exécute avant le chargement des CSS 3. Les CSS sont chargés ensuite et appliquent directement le bon thème 4. Les autres ressources non-critiques sont chargées en dernier</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="étape_3_la_puissance_des_sélecteurs_dattributs_css">6. Étape 3 : La Puissance des Sélecteurs d’Attributs CSS</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="le_système_de_thème_de_bootstrap_5">6.1. Le Système de Thème de Bootstrap 5</h3> <div class="paragraph"> <p>Bootstrap 5 a introduit un système élégant de gestion des thèmes basé sur les custom properties CSS (variables CSS) et les sélecteurs d’attributs. Ce système utilise l’attribut <code>data-bs-theme</code> sur l’élément <code><html></code> pour déterminer quel ensemble de variables de couleur appliquer.</p> </div> <div class="paragraph"> <p>La beauté de ce système réside dans sa simplicité : au lieu de charger différentes feuilles de style ou de toggle des classes sur des milliers d’éléments, nous changeons simplement un attribut sur un seul élément, et le CSS fait le reste grâce à la cascade.</p> </div> </div> <div class="sect2"> <h3 id="structure_css_pour_un_système_de_thème">6.2. Structure CSS pour un Système de Thème</h3> <div class="paragraph"> <p>Voici une structure CSS complète pour implémenter un système de thème robuste :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">/** * SYSTÈME DE THÈME COMPLET * Utilise les Custom Properties CSS pour une maintenance facile */ /* ============================================ THÈME PAR DÉFAUT (LIGHT) Défini sur :root pour être le fallback ============================================ */ :root { /* Couleurs de base */ --color-primary: #0d6efd; --color-secondary: #6c757d; --color-success: #198754; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #0dcaf0; /* Couleurs de fond */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; /* Couleurs de texte */ --text-primary: #212529; --text-secondary: #6c757d; --text-tertiary: #adb5bd; /* Couleurs de bordure */ --border-color: #dee2e6; --border-color-subtle: #e9ecef; /* Couleurs d'ombre */ --shadow-sm: rgba(0, 0, 0, 0.075); --shadow-md: rgba(0, 0, 0, 0.15); --shadow-lg: rgba(0, 0, 0, 0.25</code></pre> </div> </div> </div> </div> </div> https://pages-content.github.io//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="#introduction">1. Introduction</a></li> <li><a href="#le_problème_dépendance_au_gradlerunner">2. Le Problème : Dépendance au GradleRunner</a> <ul class="sectlevel2"> <li><a href="#contexte_du_développement_de_plugin">2.1. Contexte du Développement de Plugin</a></li> <li><a href="#le_dilemme_du_logging">2.2. Le Dilemme du Logging</a></li> <li><a href="#les_fausses_bonnes_idées">2.3. Les Fausses Bonnes Idées</a></li> </ul> </li> <li><a href="#la_solution_logger_indépendant">3. La Solution : Logger Indépendant</a> <ul class="sectlevel2"> <li><a href="#architecture_recommandée">3.1. Architecture Recommandée</a></li> <li><a href="#flux_dexécution">3.2. Flux d’Exécution</a></li> </ul> </li> <li><a href="#implémentation_complète">4. Implémentation Complète</a> <ul class="sectlevel2"> <li><a href="#dépendances_gradle">4.1. Dépendances Gradle</a></li> <li><a href="#configuration_logback">4.2. Configuration Logback</a></li> <li><a href="#classe_de_test_complète">4.3. Classe de Test Complète</a></li> </ul> </li> <li><a href="#schéma_de_logging_multi_niveaux">5. Schéma de Logging Multi-Niveaux</a></li> <li><a href="#bonnes_pratiques">6. Bonnes Pratiques</a> <ul class="sectlevel2"> <li><a href="#structure_de_logging_recommandée">6.1. Structure de Logging Recommandée</a></li> <li><a href="#symboles_visuels_pour_la_lisibilité">6.2. Symboles Visuels pour la Lisibilité</a></li> <li><a href="#extraction_dinformations_de_la_sortie">6.3. Extraction d’Informations de la Sortie</a></li> </ul> </li> <li><a href="#comparaison_avantaprès">7. Comparaison Avant/Après</a> <ul class="sectlevel2"> <li><a href="#avant_approche_problématique">7.1. Avant : Approche Problématique</a></li> <li><a href="#après_approche_robuste">7.2. Après : Approche Robuste</a></li> </ul> </li> <li><a href="#diagramme_récapitulatif">8. Diagramme Récapitulatif</a></li> <li><a href="#pièges_à_éviter">9. Pièges à Éviter</a> <ul class="sectlevel2"> <li><a href="#piège_n1_oublier_forwardoutput">9.1. ❌ Piège n°1 : Oublier <code>.forwardOutput()</code></a></li> <li><a href="#piège_n2_logger_non_initialisé">9.2. ❌ Piège n°2 : Logger Non Initialisé</a></li> <li><a href="#piège_n3_logging_excessif">9.3. ❌ Piège n°3 : Logging Excessif</a></li> </ul> </li> <li><a href="#résultats_et_métriques">10. Résultats et Métriques</a></li> <li><a href="#conclusion">11. Conclusion</a></li> <li><a href="#ressources">12. Ressources</a></li> <li><a href="#aller_plus_loin">13. Aller Plus Loin</a></li> </ul> </div> <div class="sect1"> <h2 id="introduction"><a class="anchor" href="#introduction"></a><a class="link" href="#introduction">1. Introduction</a></h2> <div class="sectionbody"> <div class="paragraph"> <p>Lors du développement d’un plugin Gradle, les tests fonctionnels sont essentiels pour valider le comportement du plugin dans un environnement Gradle réel. Cependant, une question cruciale se pose rapidement : <strong>comment mettre en place un système de logging efficace sans créer de dépendances problématiques avec le <code>GradleRunner</code> ?</strong></p> </div> <div class="paragraph"> <p>Dans cet article, nous allons explorer :</p> </div> <div class="ulist"> <ul> <li> <p>La problématique du logging dans les tests fonctionnels Gradle</p> </li> <li> <p>L’architecture d’une solution robuste avec SLF4J et Logback</p> </li> <li> <p>L’implémentation complète avec des exemples concrets</p> </li> <li> <p>Les bonnes pratiques et pièges à éviter</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="le_problème_dépendance_au_gradlerunner"><a class="anchor" href="#le_problème_dépendance_au_gradlerunner"></a><a class="link" href="#le_problème_dépendance_au_gradlerunner">2. Le Problème : Dépendance au GradleRunner</a></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="contexte_du_développement_de_plugin"><a class="anchor" href="#contexte_du_développement_de_plugin"></a><a class="link" href="#contexte_du_développement_de_plugin">2.1. Contexte du Développement de Plugin</a></h3> <div class="paragraph"> <p>Lorsqu’on développe un plugin Gradle, on utilise généralement le <code>GradleRunner</code> du <em>Gradle TestKit</em> pour exécuter des builds de test :</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="le_dilemme_du_logging"><a class="anchor" href="#le_dilemme_du_logging"></a><a class="link" href="#le_dilemme_du_logging">2.2. Le Dilemme du Logging</a></h3> <div class="paragraph"> <p>Le problème principal est le suivant : <strong>le logging ne doit pas dépendre d’un objet dont on n’est pas sûr de l’initialisation</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-098f273556d73eefcb03088a9c320c28.png" alt="Diagram" width="460" height="262"> </div> </div> </div> <div class="sect2"> <h3 id="les_fausses_bonnes_idées"><a class="anchor" href="#les_fausses_bonnes_idées"></a><a class="link" href="#les_fausses_bonnes_idées">2.3. Les Fausses Bonnes Idées</a></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>Ne faites PAS cela :</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="la_solution_logger_indépendant"><a class="anchor" href="#la_solution_logger_indépendant"></a><a class="link" href="#la_solution_logger_indépendant">3. La Solution : Logger Indépendant</a></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="architecture_recommandée"><a class="anchor" href="#architecture_recommandée"></a><a class="link" href="#architecture_recommandée">3.1. Architecture Recommandée</a></h3> <div class="paragraph"> <p>La solution consiste à utiliser un logger <strong>complètement indépendant</strong> du <code>GradleRunner</code>, initialisé au niveau de la classe de test.</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-ffb0cf405a345057991a32f0ed77e9f4.png" alt="Diagram" width="601" height="448"> </div> </div> </div> <div class="sect2"> <h3 id="flux_dexécution"><a class="anchor" href="#flux_dexécution"></a><a class="link" href="#flux_dexécution">3.2. Flux d’Exécution</a></h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-ee708f49dc49046ba65da9a958958434.png" alt="Diagram" width="713" height="686"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="implémentation_complète"><a class="anchor" href="#implémentation_complète"></a><a class="link" href="#implémentation_complète">4. Implémentation Complète</a></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="dépendances_gradle"><a class="anchor" href="#dépendances_gradle"></a><a class="link" href="#dépendances_gradle">4.1. Dépendances Gradle</a></h3> <div class="paragraph"> <p>Ajoutez les dépendances nécessaires dans votre <code>build.gradle.kts</code> :</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="configuration_logback"><a class="anchor" href="#configuration_logback"></a><a class="link" href="#configuration_logback">4.2. Configuration Logback</a></h3> <div class="paragraph"> <p>Créez le fichier <code>src/test/resources/logback-test.xml</code> :</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="classe_de_test_complète"><a class="anchor" href="#classe_de_test_complète"></a><a class="link" href="#classe_de_test_complète">4.3. Classe de Test Complète</a></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="schéma_de_logging_multi_niveaux"><a class="anchor" href="#schéma_de_logging_multi_niveaux"></a><a class="link" href="#schéma_de_logging_multi_niveaux">5. Schéma de Logging Multi-Niveaux</a></h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-69cc83dd2b31ced14c3dd245c6509cb0.png" alt="Diagram" width="314" height="911"> </div> </div> </div> </div> <div class="sect1"> <h2 id="bonnes_pratiques"><a class="anchor" href="#bonnes_pratiques"></a><a class="link" href="#bonnes_pratiques">6. Bonnes Pratiques</a></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="structure_de_logging_recommandée"><a class="anchor" href="#structure_de_logging_recommandée"></a><a class="link" href="#structure_de_logging_recommandée">6.1. Structure de Logging Recommandée</a></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="symboles_visuels_pour_la_lisibilité"><a class="anchor" href="#symboles_visuels_pour_la_lisibilité"></a><a class="link" href="#symboles_visuels_pour_la_lisibilité">6.2. Symboles Visuels pour la Lisibilité</a></h3> <div class="paragraph"> <p>Utilisez des symboles Unicode pour améliorer la lisibilité des logs :</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="extraction_dinformations_de_la_sortie"><a class="anchor" href="#extraction_dinformations_de_la_sortie"></a><a class="link" href="#extraction_dinformations_de_la_sortie">6.3. Extraction d’Informations de la Sortie</a></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="comparaison_avantaprès"><a class="anchor" href="#comparaison_avantaprès"></a><a class="link" href="#comparaison_avantaprès">7. Comparaison Avant/Après</a></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="avant_approche_problématique"><a class="anchor" href="#avant_approche_problématique"></a><a class="link" href="#avant_approche_problématique">7.1. Avant : Approche Problématique</a></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="après_approche_robuste"><a class="anchor" href="#après_approche_robuste"></a><a class="link" href="#après_approche_robuste">7.2. Après : Approche Robuste</a></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="diagramme_récapitulatif"><a class="anchor" href="#diagramme_récapitulatif"></a><a class="link" href="#diagramme_récapitulatif">8. Diagramme Récapitulatif</a></h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-e6aafa175e92a0e0de6ae9cdeb5f360e.png" alt="Diagram" width="963" height="1345"> </div> </div> </div> </div> <div class="sect1"> <h2 id="pièges_à_éviter"><a class="anchor" href="#pièges_à_éviter"></a><a class="link" href="#pièges_à_éviter">9. Pièges à Éviter</a></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="piège_n1_oublier_forwardoutput"><a class="anchor" href="#piège_n1_oublier_forwardoutput"></a><a class="link" href="#piège_n1_oublier_forwardoutput">9.1. ❌ Piège n°1 : Oublier <code>.forwardOutput()</code></a></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="piège_n2_logger_non_initialisé"><a class="anchor" href="#piège_n2_logger_non_initialisé"></a><a class="link" href="#piège_n2_logger_non_initialisé">9.2. ❌ Piège n°2 : Logger Non Initialisé</a></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="piège_n3_logging_excessif"><a class="anchor" href="#piège_n3_logging_excessif"></a><a class="link" href="#piège_n3_logging_excessif">9.3. ❌ Piège n°3 : Logging Excessif</a></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="résultats_et_métriques"><a class="anchor" href="#résultats_et_métriques"></a><a class="link" href="#résultats_et_métriques">10. Résultats et Métriques</a></h2> <div class="sectionbody"> <div class="paragraph"> <p>Avec cette approche, vous obtenez :</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">Métrique</th> <th class="tableblock halign-left valign-top">Avant</th> <th class="tableblock halign-left valign-top">Après</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Lignes de code</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~50 lignes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~80 lignes (+60%)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Temps de debug</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~30 min</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~5 min (-83%)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Erreurs détectées</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Basique</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Détaillé</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Maintenance</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Difficile</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Simple</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Indépendance</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌ Couplée</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✓ Indépendante</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="conclusion"><a class="anchor" href="#conclusion"></a><a class="link" href="#conclusion">11. Conclusion</a></h2> <div class="sectionbody"> <div class="paragraph"> <p>La mise en place d’un système de logging robuste dans les tests fonctionnels de plugins Gradle repose sur un principe simple : <strong>l’indépendance</strong>.</p> </div> <div class="paragraph"> <p>Points clés à retenir :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Logger indépendant</strong> : Initialisé dans un <code>companion object</code></p> </li> <li> <p><strong>SLF4J + Logback</strong> : Stack éprouvée et configurable</p> </li> <li> <p><strong><code>.forwardOutput()</code></strong> : Capture de la sortie Gradle</p> </li> <li> <p><strong>Logging structuré</strong> : INFO pour les étapes, DEBUG pour les détails</p> </li> <li> <p><strong>Analyse de sortie</strong> : Extraction d’informations depuis <code>result.output</code></p> </li> </ol> </div> <div class="paragraph"> <p>Cette approche garantit des tests <strong>maintenables</strong>, <strong>debuggables</strong> et <strong>robustes</strong>, tout en respectant les principes de conception solides.</p> </div> </div> </div> <div class="sect1"> <h2 id="ressources"><a class="anchor" href="#ressources"></a><a class="link" href="#ressources">12. Ressources</a></h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/test_kit.html">Gradle TestKit Documentation</a></p> </li> <li> <p><a href="https://www.slf4j.org/manual.html">SLF4J Manual</a></p> </li> <li> <p><a href="https://logback.qos.ch/manual/configuration.html">Logback Configuration</a></p> </li> <li> <p><a href="https://github.com/gradle/gradle/tree/master/subprojects/test-kit">Gradle TestKit Source Code</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="aller_plus_loin"><a class="anchor" href="#aller_plus_loin"></a><a class="link" href="#aller_plus_loin">13. Aller Plus Loin</a></h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans un prochain article, nous explorerons :</p> </div> <div class="ulist"> <ul> <li> <p>L’intégration continue avec logging structuré</p> </li> <li> <p>Les rapports HTML de tests avec logs intégrés</p> </li> <li> <p>Le débogage avancé avec JVM attach</p> </li> <li> <p>Les performances et optimisations de logging</p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Cet article fait partie de la série "Développement de Plugins Gradle" sur mon blog technique.</em></p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_la_problématique">2. La problématique</a> <ul class="sectlevel2"> <li><a href="#_contexte_dutilisation">2.1. Contexte d’utilisation</a></li> <li><a href="#_les_approches_possibles">2.2. Les approches possibles</a> <ul class="sectlevel3"> <li><a href="#_option_1_caractères_unicode">2.2.1. Option 1 : Caractères Unicode</a></li> <li><a href="#_option_2_images_externes">2.2.2. Option 2 : Images externes</a></li> <li><a href="#_option_3_rôles_css_personnalisés">2.2.3. Option 3 : Rôles CSS personnalisés</a></li> <li><a href="#_option_4_injection_html_solution_retenue">2.2.4. Option 4 : Injection HTML (solution retenue)</a></li> </ul> </li> </ul> </li> <li><a href="#_la_solution_injection_html_avec">3. La solution : Injection HTML avec </a> <ul class="sectlevel2"> <li><a href="#_principe_de_fonctionnement">3.1. Principe de fonctionnement</a></li> <li><a href="#_implémentation">3.2. Implémentation</a> <ul class="sectlevel3"> <li><a href="#_explication_des_propriétés_css">3.2.1. Explication des propriétés CSS</a></li> </ul> </li> <li><a href="#_exemple_complet">3.3. Exemple complet</a></li> </ul> </li> <li><a href="#_optimisations_et_bonnes_pratiques">4. Optimisations et bonnes pratiques</a> <ul class="sectlevel2"> <li><a href="#_gérer_les_couleurs_claires">4.1. Gérer les couleurs claires</a></li> <li><a href="#_adapter_la_taille_des_carrés">4.2. Adapter la taille des carrés</a></li> <li><a href="#_créer_des_variantes">4.3. Créer des variantes</a> <ul class="sectlevel3"> <li><a href="#_cercle_coloré">4.3.1. Cercle coloré</a></li> <li><a href="#_carré_avec_bordure_colorée">4.3.2. Carré avec bordure colorée</a></li> </ul> </li> </ul> </li> <li><a href="#_architecture_de_la_solution">5. Architecture de la solution</a></li> <li><a href="#_avantages_et_limitations">6. Avantages et limitations</a> <ul class="sectlevel2"> <li><a href="#_avantages">6.1. Avantages</a></li> <li><a href="#_limitations">6.2. Limitations</a></li> <li><a href="#_amélioration_de_laccessibilité">6.3. Amélioration de l’accessibilité</a></li> </ul> </li> <li><a href="#_exemple_concret_documentation_de_thèmes">7. Exemple concret : Documentation de thèmes</a></li> <li><a href="#_conclusion">8. Conclusion</a></li> <li><a href="#_ressources">9. Ressources</a></li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lors de la rédaction de documentation technique, notamment pour des guides de style ou des spécifications d’interface utilisateur, il est fréquent de devoir afficher des palettes de couleurs. AsciiDoc, bien que très puissant pour la documentation, ne propose pas de syntaxe native pour afficher des échantillons de couleur. Cet article explore la problématique et propose une solution élégante basée sur l’injection HTML.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_problématique">2. La problématique</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_contexte_dutilisation">2.1. Contexte d’utilisation</h3> <div class="paragraph"> <p>Imaginons que vous documentez les variables CSS d’un thème d’application web. Vous avez besoin de :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Lister les codes couleurs hexadécimaux</p> </li> <li> <p>Afficher un aperçu visuel de chaque couleur</p> </li> <li> <p>Maintenir la lisibilité du document source</p> </li> <li> <p>Assurer la compatibilité avec les générateurs de sites statiques comme JBake</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="use-case-diagram.svg" alt="use case diagram" width="1050" height="205"> </div> </div> </div> <div class="sect2"> <h3 id="_les_approches_possibles">2.2. Les approches possibles</h3> <div class="paragraph"> <p>Plusieurs solutions peuvent être envisagées pour afficher des couleurs dans un document AsciiDoc :</p> </div> <div class="imageblock"> <div class="content"> <img src="component-diagram.svg" alt="component diagram" width="874" height="190"> </div> </div> <div class="sect3"> <h4 id="_option_1_caractères_unicode">2.2.1. Option 1 : Caractères Unicode</h4> <div class="paragraph"> <p>L’utilisation de caractères Unicode comme <code>■</code> (■) est simple mais limitée :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* ■ --accent-color: #7952b3 (violet Bootstrap)</code></pre> </div> </div> <div class="paragraph"> <p><strong>Limitations</strong> : Pas de contrôle sur la couleur, dépend de la police système.</p> </div> </div> <div class="sect3"> <h4 id="_option_2_images_externes">2.2.2. Option 2 : Images externes</h4> <div class="paragraph"> <p>Créer des images PNG ou SVG pour chaque couleur :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* image:colors/violet.svg[width=16] --accent-color: #7952b3</code></pre> </div> </div> <div class="paragraph"> <p><strong>Limitations</strong> : Maintenance lourde, multiplication des fichiers, pas de synchronisation automatique.</p> </div> </div> <div class="sect3"> <h4 id="_option_3_rôles_css_personnalisés">2.2.3. Option 3 : Rôles CSS personnalisés</h4> <div class="paragraph"> <p>Définir des classes CSS et les appliquer via des rôles 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>Limitations</strong> : Nécessite une feuille de style externe, définition préalable de toutes les couleurs possibles.</p> </div> </div> <div class="sect3"> <h4 id="_option_4_injection_html_solution_retenue">2.2.4. Option 4 : Injection HTML (solution retenue)</h4> <div class="paragraph"> <p>Utiliser la macro <code></code> pour injecter du HTML avec styles 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="_la_solution_injection_html_avec">3. La solution : Injection HTML avec </h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_principe_de_fonctionnement">3.1. Principe de fonctionnement</h3> <div class="paragraph"> <p>La macro <code></code> d’AsciiDoc permet d’insérer du contenu brut qui ne sera pas interprété par le processeur AsciiDoc. Cela nous permet d’injecter directement du HTML avec des styles CSS inline.</p> </div> <div class="imageblock"> <div class="content"> <img src="sequence-diagram.svg" alt="sequence diagram" width="628" height="282"> </div> </div> </div> <div class="sect2"> <h3 id="_implémentation">3.2. Implémentation</h3> <div class="paragraph"> <p>Voici la structure HTML à injecter :</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="_explication_des_propriétés_css">3.2.1. Explication des propriétés 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">Propriété</th> <th class="tableblock halign-left valign-top">Fonction</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">Permet de définir width/height tout en restant dans le flux 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">Taille du carré relative à la taille de police (responsive)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>background:#7952b3</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">La couleur à afficher (variable selon vos besoins)</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">Aligne le carré avec le texte adjacent</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">Espacement entre le carré et le texte</p></td> </tr> </tbody> </table> </div> </div> <div class="sect2"> <h3 id="_exemple_complet">3.3. Exemple complet</h3> <div class="paragraph"> <p>Voici un exemple documentant une palette de thème :</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>Qui produit le rendu suivant :</p> </div> <hr> <div class="paragraph"> <p><strong>Thème Clair</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: <code>#f8f9fa</code> (blanc cassé)</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: <code>#212529</code> (noir très foncé)</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: <code>#7952b3</code> (violet 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: <code>#61428f</code> (violet plus foncé)</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: <code>#ffffff</code> (blanc)</p> </li> </ul> </div> <hr> </div> </div> </div> <div class="sect1"> <h2 id="_optimisations_et_bonnes_pratiques">4. Optimisations et bonnes pratiques</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_gérer_les_couleurs_claires">4.1. Gérer les couleurs claires</h3> <div class="paragraph"> <p>Pour les couleurs très claires (blanc, gris très clair), ajoutez une bordure pour les rendre visibles sur fond blanc :</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>La bordure grise (<code>border:1px solid #ccc</code>) permet de délimiter le carré blanc sur un fond blanc.</p> </div> </div> <div class="sect2"> <h3 id="_adapter_la_taille_des_carrés">4.2. Adapter la taille des carrés</h3> <div class="paragraph"> <p>Vous pouvez ajuster la taille des carrés selon vos besoins :</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>L’utilisation de l’unité <code>em</code> garantit que les carrés s’adaptent à la taille de la police.</p> </div> </div> <div class="sect2"> <h3 id="_créer_des_variantes">4.3. Créer des variantes</h3> <div class="paragraph"> <p>Pour des besoins spécifiques, vous pouvez créer différentes formes :</p> </div> <div class="sect3"> <h4 id="_cercle_coloré">4.3.1. Cercle coloré</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="_carré_avec_bordure_colorée">4.3.2. Carré avec bordure colorée</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="_architecture_de_la_solution">5. Architecture de la solution</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="architecture-diagram.svg" alt="architecture diagram" width="483" height="412"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_avantages_et_limitations">6. Avantages et limitations</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_avantages">6.1. Avantages</h3> <div class="ulist"> <ul> <li> <p>✓ <strong>Autonomie</strong> : Pas de dépendance à des fichiers externes</p> </li> <li> <p>✓ <strong>Portabilité</strong> : Fonctionne avec tous les processeurs AsciiDoc</p> </li> <li> <p>✓ <strong>Synchronisation</strong> : Le code couleur est directement dans le HTML</p> </li> <li> <p>✓ <strong>Flexibilité</strong> : Personnalisation complète du style</p> </li> <li> <p>✓ <strong>Maintenance</strong> : Modification simple du code hexadécimal</p> </li> <li> <p>✓ <strong>Compatibilité JBake</strong> : Fonctionne parfaitement avec les générateurs de sites statiques</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_limitations">6.2. Limitations</h3> <div class="ulist"> <ul> <li> <p>✗ <strong>Verbosité</strong> : Code HTML répétitif dans le source AsciiDoc</p> </li> <li> <p>✗ <strong>Lisibilité source</strong> : Le document source est moins épuré</p> </li> <li> <p>✗ <strong>Accessibilité</strong> : Pas de texte alternatif natif (à ajouter manuellement)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_amélioration_de_laccessibilité">6.3. Amélioration de l’accessibilité</h3> <div class="paragraph"> <p>Pour rendre les carrés accessibles aux lecteurs d’écran :</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>Les attributs <code>role="img"</code> et <code>aria-label</code> permettent aux technologies d’assistance de comprendre et décrire le contenu visuel.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_exemple_concret_documentation_de_thèmes">7. Exemple concret : Documentation de thèmes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici un exemple complet documentant plusieurs thèmes :</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="_conclusion">8. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’injection HTML via la macro <code></code> d’AsciiDoc offre une solution élégante et pragmatique pour afficher des échantillons de couleur dans la documentation technique. Bien que légèrement verbeuse, cette approche garantit une portabilité maximale et une maintenance simplifiée.</p> </div> <div class="paragraph"> <p>Cette technique ne nécessite aucune configuration externe, aucune feuille de style additionnelle, et fonctionne immédiatement avec JBake et tous les processeurs AsciiDoc standard.</p> </div> <div class="paragraph"> <p>Une fois que vous avez créé votre premier carré coloré, il suffit de copier-coller le code HTML et de modifier le code hexadécimal pour créer rapidement une palette complète.</p> </div> <div class="paragraph"> <p>Cette technique peut être étendue à d’autres cas d’usage nécessitant du rendu visuel personnalisé : icônes, badges, graphiques simples, ou tout élément visuel nécessitant un contrôle précis du style.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ressources">9. Ressources</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">Documentation AsciiDoc : pass macro</a></p> </li> <li> <p><a href="https://jbake.org/docs/2.6.7/" target="_blank" rel="noopener">JBake Documentation</a></p> </li> <li> <p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value" target="_blank" rel="noopener">MDN : Valeurs de couleur CSS</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Article publié le 2025-11-01</em></p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a> <ul class="sectlevel2"> <li><a href="#_diagramme_de_cas_dusage_use_case">1.1. Diagramme de cas d’usage (Use Case)</a></li> </ul> </li> <li><a href="#_architecture_de_linternationalisation">2. Architecture de l’internationalisation</a> <ul class="sectlevel2"> <li><a href="#_diagramme_de_structure_organisation_des_fichiers">2.1. Diagramme de structure (Organisation des fichiers)</a></li> <li><a href="#_pourquoi_cette_approche">2.2. Pourquoi cette approche ?</a></li> <li><a href="#_diagramme_de_composants">2.3. Diagramme de composants</a></li> </ul> </li> <li><a href="#_i18n_du_templating_avec_thymeleaf">3. I18n du templating avec Thymeleaf</a> <ul class="sectlevel2"> <li><a href="#_structure_des_fichiers_de_messages">3.1. Structure des fichiers de messages</a></li> <li><a href="#_contenu_des_fichiers_de_messages">3.2. Contenu des fichiers de messages</a></li> <li><a href="#_utilisation_dans_les_templates">3.3. Utilisation dans les templates</a></li> <li><a href="#_diagramme_de_séquence_résolution_i18n">3.4. Diagramme de séquence - Résolution i18n</a></li> <li><a href="#_configuration_de_la_locale_dans_jbake">3.5. Configuration de la locale dans JBake</a></li> </ul> </li> <li><a href="#_i18n_des_articles_organisation_par_dossiers">4. I18n des articles : organisation par dossiers</a> <ul class="sectlevel2"> <li><a href="#_diagramme_de_flux_flow_génération">4.1. Diagramme de flux (Flow) - Génération</a></li> <li><a href="#_structure_des_dossiers">4.2. Structure des dossiers</a></li> <li><a href="#_avantages_de_cette_approche">4.3. Avantages de cette approche</a></li> <li><a href="#_métadonnées_des_articles">4.4. Métadonnées des articles</a></li> <li><a href="#_configuration_des_urls">4.5. Configuration des URLs</a></li> </ul> </li> <li><a href="#_templates_pour_laffichage_multilingue">5. Templates pour l’affichage multilingue</a> <ul class="sectlevel2"> <li><a href="#_template_darticle_avec_sélecteur_de_langue">5.1. Template d’article avec sélecteur de langue</a></li> <li><a href="#_index_filtré_par_langue">5.2. Index filtré par langue</a></li> </ul> </li> <li><a href="#_navigation_entre_langues">6. Navigation entre langues</a> <ul class="sectlevel2"> <li><a href="#_sélecteur_de_langue_global">6.1. Sélecteur de langue global</a></li> <li><a href="#_diagramme_de_flux_lecture_utilisateur">6.2. Diagramme de flux - Lecture utilisateur</a></li> <li><a href="#_style_css_pour_le_sélecteur">6.3. Style CSS pour le sélecteur</a></li> </ul> </li> <li><a href="#_flux_rss_par_langue">7. Flux RSS par langue</a></li> <li><a href="#_bonnes_pratiques_et_astuces">8. Bonnes pratiques et astuces</a> <ul class="sectlevel2"> <li><a href="#_1_cohérence_des_identifiants_darticle">8.1. 1. Cohérence des identifiants d’article</a></li> <li><a href="#_2_dates_cohérentes">8.2. 2. Dates cohérentes</a></li> <li><a href="#_3_tags_multilingues">8.3. 3. Tags multilingues</a></li> <li><a href="#_4_gestion_des_articles_non_traduits">8.4. 4. Gestion des articles non traduits</a></li> <li><a href="#_5_sitemap_multilingue">8.5. 5. Sitemap multilingue</a></li> </ul> </li> <li><a href="#_conclusion">9. Conclusion</a> <ul class="sectlevel2"> <li><a href="#_diagramme_de_déploiement">9.1. Diagramme de déploiement</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’internationalisation (i18n) d’un site statique peut sembler complexe au premier abord, mais JBake combiné avec Thymeleaf offre des solutions élégantes pour créer un site multilingue. Dans cet article, je vais vous montrer comment j’ai mis en place l’i18n sur mon blog, en couvrant à la fois le templating et la gestion des articles dans plusieurs langues.</p> </div> <div class="sect2"> <h3 id="_diagramme_de_cas_dusage_use_case">1.1. Diagramme de cas d’usage (Use Case)</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-c2a5be17bd909780be607cfd597f215f.png" alt="Diagram" width="660" height="447"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_architecture_de_linternationalisation">2. Architecture de l’internationalisation</h2> <div class="sectionbody"> <div class="paragraph"> <p>Notre approche repose sur deux piliers :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>L’i18n du templating</strong> : utilisation des fichiers de messages Thymeleaf pour les éléments d’interface</p> </li> <li> <p><strong>L’i18n du contenu</strong> : organisation des articles par langue dans une structure de dossiers dédiée</p> </li> </ol> </div> <div class="sect2"> <h3 id="_diagramme_de_structure_organisation_des_fichiers">2.1. Diagramme de structure (Organisation des fichiers)</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-2f100fc3ec2ec37f9556818cdc246602.png" alt="Diagram" width="188" height="513"> </div> </div> </div> <div class="sect2"> <h3 id="_pourquoi_cette_approche">2.2. Pourquoi cette approche ?</h3> <div class="paragraph"> <p>Cette séparation permet de :</p> </div> <div class="ulist"> <ul> <li> <p>Maintenir une cohérence dans l’interface quelle que soit la langue</p> </li> <li> <p>Gérer indépendamment le contenu et les traductions d’articles</p> </li> <li> <p>Faciliter l’ajout de nouvelles langues sans refactoring majeur</p> </li> <li> <p>Permettre des articles disponibles uniquement dans certaines langues</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_diagramme_de_composants">2.3. Diagramme de composants</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-9d42e1ff744debfc429aaa889922ac15.png" alt="Diagram" width="1771" height="477"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_i18n_du_templating_avec_thymeleaf">3. I18n du templating avec Thymeleaf</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_structure_des_fichiers_de_messages">3.1. Structure des fichiers de messages</h3> <div class="paragraph"> <p>La première étape consiste à créer les fichiers de propriétés pour chaque langue supportée :</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="_contenu_des_fichiers_de_messages">3.2. Contenu des fichiers de messages</h3> <div class="paragraph"> <p>Voici un exemple de fichier <code>messages_fr.properties</code> :</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>Et son équivalent anglais <code>messages_en.properties</code> :</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="_utilisation_dans_les_templates">3.3. Utilisation dans les templates</h3> <div class="paragraph"> <p>Dans vos templates Thymeleaf, utilisez la syntaxe <code>#{}</code> pour accéder aux messages :</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="_diagramme_de_séquence_résolution_i18n">3.4. Diagramme de séquence - Résolution i18n</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-890efdf0cf45e6d957ea45af6e68a11d.png" alt="Diagram" width="910" height="882"> </div> </div> </div> <div class="sect2"> <h3 id="_configuration_de_la_locale_dans_jbake">3.5. Configuration de la locale dans JBake</h3> <div class="paragraph"> <p>Dans votre fichier <code>jbake.properties</code>, définissez la locale par défaut :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties"># Locale par défaut thymeleaf.locale=fr # Encodage template.encoding=UTF-8</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_i18n_des_articles_organisation_par_dossiers">4. I18n des articles : organisation par dossiers</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagramme_de_flux_flow_génération">4.1. Diagramme de flux (Flow) - Génération</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-dc5f4bca87c443b337bf4e82c96c9a69.png" alt="Diagram" width="285" height="1034"> </div> </div> </div> <div class="sect2"> <h3 id="_structure_des_dossiers">4.2. Structure des dossiers</h3> <div class="paragraph"> <p>Plutôt que d’utiliser des suffixes dans les noms de fichiers, j’ai opté pour une organisation par dossiers qui offre plus de clarté et de maintenabilité :</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="_avantages_de_cette_approche">4.3. Avantages de cette approche</h3> <div class="paragraph"> <p>Cette structure présente plusieurs avantages :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Séparation claire</strong> : chaque langue a son propre espace</p> </li> <li> <p><strong>Nommage flexible</strong> : les fichiers peuvent avoir des noms différents selon la langue</p> </li> <li> <p><strong>Scalabilité</strong> : facile d’ajouter une nouvelle langue</p> </li> <li> <p><strong>Organisation naturelle</strong> : suit la logique temporelle de JBake</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_métadonnées_des_articles">4.4. Métadonnées des articles</h3> <div class="paragraph"> <p>Chaque article doit contenir des métadonnées pour permettre la liaison entre traductions. Voici un exemple :</p> </div> <div class="paragraph"> <p><strong>Version française</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>Version anglaise</strong> (<code>2025/en/jbake-internationalization.adoc</code>) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Internationalizing a JBake Static Site :jbake-type: post :jbake-status: published :jbake-date: 2025-10-20 :jbake-lang: en :jbake-article-id: jbake-i18n-thymeleaf :jbake-tags: jbake, thymeleaf, i18n :jbake-description: Guide to implement i18n with JBake</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> L’attribut <code>:jbake-article-id:</code> est crucial : il permet de lier les différentes traductions d’un même article. </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_configuration_des_urls">4.5. Configuration des URLs</h3> <div class="paragraph"> <p>Dans <code>jbake.properties</code>, configurez le pattern d’URL pour inclure la langue :</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>Cela génèrera des URLs du type :</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_pour_laffichage_multilingue">5. Templates pour l’affichage multilingue</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_template_darticle_avec_sélecteur_de_langue">5.1. Template d’article avec sélecteur de langue</h3> <div class="paragraph"> <p>Créez un template <code>post.html</code> qui affiche les traductions disponibles :</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="_index_filtré_par_langue">5.2. Index filtré par langue</h3> <div class="paragraph"> <p>Créez des templates d’index pour chaque langue :</p> </div> <div class="paragraph"> <p><strong><code>index.html</code></strong> (index français) :</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><code>index_en.html</code></strong> (index anglais) :</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="_navigation_entre_langues">6. Navigation entre langues</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sélecteur_de_langue_global">6.1. Sélecteur de langue global</h3> </div> <div class="sect2"> <h3 id="_diagramme_de_flux_lecture_utilisateur">6.2. Diagramme de flux - Lecture utilisateur</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-35c457cfbd1b9be0156f6bbbfb2925d1.png" alt="Diagram" width="494" height="761"> </div> </div> <div class="paragraph"> <p>Ajoutez un sélecteur de langue dans votre template principal :</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="_style_css_pour_le_sélecteur">6.3. Style CSS pour le sélecteur</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="_flux_rss_par_langue">7. Flux RSS par langue</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour avoir des flux RSS séparés par langue, créez des templates distincts :</p> </div> <div class="paragraph"> <p><strong><code>feed.xml</code></strong> (flux français) :</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="_bonnes_pratiques_et_astuces">8. Bonnes pratiques et astuces</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_1_cohérence_des_identifiants_darticle">8.1. 1. Cohérence des identifiants d’article</h3> <div class="paragraph"> <p>Assurez-vous que <code>:jbake-article-id:</code> est identique pour toutes les traductions d’un même article. Utilisez un format cohérent :</p> </div> <div class="ulist"> <ul> <li> <p>Préférez les identifiants en anglais pour universalité</p> </li> <li> <p>Utilisez des tirets pour séparer les mots</p> </li> <li> <p>Évitez les caractères spéciaux</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_2_dates_cohérentes">8.2. 2. Dates cohérentes</h3> <div class="paragraph"> <p>Toutes les traductions d’un article doivent avoir la même date de publication (<code>:jbake-date:</code>). Cela facilite le tri et l’affichage chronologique.</p> </div> </div> <div class="sect2"> <h3 id="_3_tags_multilingues">8.3. 3. Tags multilingues</h3> <div class="paragraph"> <p>Pour les tags, vous avez deux options :</p> </div> <div class="paragraph"> <p><strong>Option 1 : Tags universels en anglais</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">:jbake-tags: java, spring-boot, microservices</code></pre> </div> </div> <div class="paragraph"> <p><strong>Option 2 : Tags traduits avec mapping</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc"># Version française :jbake-tags: java, spring-boot, microservices # Version anglaise :jbake-tags: java, spring-boot, microservices</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_4_gestion_des_articles_non_traduits">8.4. 4. Gestion des articles non traduits</h3> <div class="paragraph"> <p>Il n’est pas obligatoire de traduire tous les articles. Si un article n’existe que dans une langue, il n’apparaîtra simplement pas dans les listings de l’autre langue.</p> </div> </div> <div class="sect2"> <h3 id="_5_sitemap_multilingue">8.5. 5. Sitemap multilingue</h3> <div class="paragraph"> <p>Générez un sitemap qui inclut toutes les langues :</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="_conclusion">9. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’internationalisation d’un site JBake avec Thymeleaf est une approche robuste et maintenable. En séparant l’i18n du templating (via les fichiers de messages) et l’i18n du contenu (via l’organisation en dossiers), vous obtenez un système flexible qui peut évoluer facilement.</p> </div> <div class="paragraph"> <p>Les points clés à retenir :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Fichiers de messages Thymeleaf</strong> pour l’interface utilisateur</p> </li> <li> <p><strong>Organisation par dossiers</strong> (année/langue) pour les articles</p> </li> <li> <p><strong>Identifiants d’article</strong> pour lier les traductions</p> </li> <li> <p><strong>Templates dédiés</strong> pour chaque langue</p> </li> <li> <p><strong>URLs explicites</strong> incluant le code de langue</p> </li> </ul> </div> <div class="sect2"> <h3 id="_diagramme_de_déploiement">9.1. Diagramme de déploiement</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-e93d75cf1c345b28883ab04c6a861e54.png" alt="Diagram" width="535" height="713"> </div> </div> <div class="paragraph"> <p>Cette architecture vous permet de démarrer simplement avec deux langues et d’en ajouter d’autres sans refactoring majeur. Le tout reste entièrement statique et performant, fidèle à la philosophie de JBake.</p> </div> <div class="paragraph"> <p>Bon développement multilingue ! 🌍</p> </div> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_téléchargement_de_tor_et_de_sa_signature">2. Téléchargement de Tor et de sa signature</a></li> <li><a href="#_vérification_cryptographique_de_la_signature">3. Vérification cryptographique de la signature</a> <ul class="sectlevel2"> <li><a href="#_1_importer_la_clé_publique_du_tor_project">3.1. 1. Importer la clé publique du Tor Project</a></li> <li><a href="#_2_vérifier_la_signature">3.2. 2. Vérifier la signature</a></li> <li><a href="#_cas_pratique_signature_valide_mais_clé_non_certifiée">3.3. Cas pratique : Signature valide mais clé non certifiée</a></li> </ul> </li> <li><a href="#_pourquoi_vérifier_la_signature">4. Pourquoi vérifier la signature ?</a></li> <li><a href="#_extraction_et_lancement_de_tor_browser">5. Extraction et lancement de Tor Browser</a></li> <li><a href="#_intégration_au_bureau_ubuntu">6. Intégration au bureau Ubuntu</a></li> <li><a href="#_explorer_des_ressources_éducatives_avec_tor">7. Explorer des ressources éducatives avec Tor</a></li> <li><a href="#_mise_à_jour_de_tor_browser">8. Mise à jour de Tor Browser</a></li> <li><a href="#_conclusion">9. Conclusion</a></li> <li><a href="#_références">10. Références</a></li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans un monde où la confidentialité numérique est de plus en plus menacée, <strong>Tor Browser</strong> reste un outil essentiel pour préserver son anonymat et sa liberté d’information. Cependant, il est crucial de ne jamais exécuter un logiciel téléchargé sans avoir <strong>vérifié son authenticité</strong>. Cet article présente une méthode complète pour :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Télécharger <strong>Tor Browser</strong> et sa signature <code>.asc</code></p> </li> <li> <p>Vérifier la validité du fichier téléchargé</p> </li> <li> <p>Installer et lancer <strong>Tor Browser</strong> sous Ubuntu</p> </li> <li> <p>L’ajouter aux menus du bureau pour un usage quotidien</p> </li> <li> <p>Explorer des ressources éducatives et OSINT éthiques via Tor</p> </li> </ol> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_téléchargement_de_tor_et_de_sa_signature">2. Téléchargement de Tor et de sa signature</h2> <div class="sectionbody"> <div class="paragraph"> <p>Créez un dossier dédié pour le navigateur 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>Téléchargez ensuite l’archive du navigateur Tor et sa signature :</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> <hr> </div> </div> <div class="sect1"> <h2 id="_vérification_cryptographique_de_la_signature">3. Vérification cryptographique de la signature</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette étape est <strong>indispensable</strong> pour s’assurer que le fichier téléchargé provient bien du <strong>Tor Project</strong> et n’a pas été modifié.</p> </div> <div class="sect2"> <h3 id="_1_importer_la_clé_publique_du_tor_project">3.1. 1. Importer la clé publique du Tor Project</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>Vérifiez que la clé est bien importée :</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_vérifier_la_signature">3.2. 2. Vérifier la signature</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>Si tout est correct, le message suivant s’affichera :</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>En cas d’avertissement de clé non certifiée, cela signifie simplement que vous n’avez pas encore signé la clé de confiance du Tor Project, mais la signature reste valide.</p> </div> </div> <div class="sect2"> <h3 id="_cas_pratique_signature_valide_mais_clé_non_certifiée">3.3. Cas pratique : Signature valide mais clé non certifiée</h3> <div class="paragraph"> <p>Il est fréquent de rencontrer un message comme celui-ci lors de la vérification :</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>Ce message indique que la signature est techniquement "bonne" (le fichier n’a pas été altéré), mais que votre système GPG ne peut pas <strong>certifier la confiance</strong> en la clé elle-même. Pour lever ce doute, il est impératif de comparer l’empreinte de la clé principale (<code>EF6E 286D DA85 EA2A 4BA7 DE68 4E2C 6E87 9329 8290</code>) avec celle publiée sur le site officiel du Tor Project.</p> </div> <div class="paragraph"> <p>D’après le site officiel, l’empreinte attendue est : <code>EF6E286DDA85EA2A4BA7DE684E2C6E8793298290</code>.</p> </div> <div class="paragraph"> <p>Puisque l’empreinte affichée par <code>gpg</code> correspond <strong>exactement</strong> à celle du site officiel, vous pouvez être certain que la clé est légitime et que le fichier est sûr. L’avertissement de "clé non certifiée" est alors une information sur votre configuration GPG locale, et non sur la validité de la signature ou l’authenticité du fichier.</p> </div> <hr> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_vérifier_la_signature">4. Pourquoi vérifier la signature ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>La vérification des signatures GPG est un acte fondamental de sécurité numérique. Elle permet de :</p> </div> <div class="ulist"> <ul> <li> <p>Garantir <strong>l’authenticité</strong> du logiciel téléchargé</p> </li> <li> <p>Empêcher l’installation d’un fichier compromis par un acteur malveillant</p> </li> <li> <p>Participer à la <strong>souveraineté numérique</strong> individuelle</p> </li> <li> <p>Favoriser une culture numérique responsable et éthique</p> </li> </ul> </div> <hr> <div class="imageblock"> <div class="content"> <img src="usecase-tor-verification.svg" alt="usecase tor verification" width="420" height="264"> </div> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_extraction_et_lancement_de_tor_browser">5. Extraction et lancement de Tor Browser</h2> <div class="sectionbody"> <div class="paragraph"> <p>Décompressez l’archive téléchargée :</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>Lancez ensuite le navigateur :</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>Lors du premier lancement, une fenêtre de configuration s’ouvrira pour établir la connexion au réseau Tor.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_intégration_au_bureau_ubuntu">6. Intégration au bureau Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour ajouter <strong>Tor Browser</strong> dans le menu des applications :</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>Vous pouvez ensuite :</p> </div> <div class="ulist"> <ul> <li> <p>Lancer <strong>Tor Browser</strong> depuis le menu des applications</p> </li> <li> <p>L’ajouter aux favoris du dock</p> </li> <li> <p>Créer un raccourci clavier si souhaité</p> </li> </ul> </div> <hr> <div class="imageblock"> <div class="content"> <img src="activity-tor-installation.svg" alt="activity tor installation" width="457" height="470"> </div> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_explorer_des_ressources_éducatives_avec_tor">7. Explorer des ressources éducatives avec Tor</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tor n’est pas uniquement un outil d’anonymat. Il constitue un portail d’accès à des ressources éducatives et de recherche, notamment dans les domaines de :</p> </div> <div class="ulist"> <ul> <li> <p><strong>OSINT (Open Source Intelligence)</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>Partage éducatif et open source</strong></p> </li> <li> <p><a href="https://archive.org">https://archive.org</a> (accès via Tor pour plus de confidentialité)</p> </li> <li> <p><a href="https://github.com/">https://github.com/</a> (consultable via Tor)</p> </li> <li> <p><a href="https://librarygenesis.pro">https://librarygenesis.pro</a> (accès à la littérature scientifique libre)</p> </li> <li> <p><strong>Transmission de savoir et compréhension de l’humain dans la société numérique</strong></p> </li> <li> <p>Ressources sur la culture numérique, la liberté d’expression et l’accès à la connaissance</p> </li> <li> <p>Documentation libre sur la cybersécurité et l’éthique des technologies</p> </li> </ul> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_mise_à_jour_de_tor_browser">8. Mise à jour de Tor Browser</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour garantir une sécurité optimale, il est crucial de maintenir <strong>Tor Browser</strong> à jour. Le navigateur intègre un mécanisme de mise à jour automatique qui peut être déclenché en ligne de commande.</p> </div> <div class="paragraph"> <p>Depuis le répertoire d’installation de Tor Browser, il suffit de relancer le script de démarrage :</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>Au lancement, <strong>Tor Browser</strong> vérifiera automatiquement s’il existe une nouvelle version. Si c’est le cas, il la téléchargera et l’installera pour vous.</p> </div> <div class="paragraph"> <p>Cette méthode simple assure que vous disposez toujours des derniers correctifs de sécurité et des améliorations les plus récentes, ce qui est essentiel pour une navigation sécurisée.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_conclusion">9. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vérifier ses téléchargements est un réflexe essentiel pour toute personne souhaitant évoluer dans un environnement numérique sûr. Installer Tor de manière vérifiée, c’est <strong>protéger son intégrité numérique</strong>, <strong>préserver la confiance dans les logiciels libres</strong>, et <strong>renforcer son autonomie informationnelle</strong>.</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p><strong>La sécurité numérique est un acte de conscience, non de paranoïa.</strong></p> </div> </blockquote> </div> <hr> <div class="imageblock"> <div class="content"> <img src="summary-diagram.svg" alt="summary diagram" width="442" height="203"> </div> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_références">10. Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Site officiel du Tor Project : <a href="https://www.torproject.org/download/">https://www.torproject.org/download/</a></p> </li> <li> <p>Documentation de vérification des signatures : <a href="https://support.torproject.org/tbb/how-to-verify-signature/">https://support.torproject.org/tbb/how-to-verify-signature/</a></p> </li> <li> <p>Documentation Ubuntu : <a href="https://ubuntu.com">https://ubuntu.com</a></p> </li> <li> <p>Archive éducative : <a href="https://archive.org/details/opensource">https://archive.org/details/opensource</a></p> </li> </ul> </div> <hr> <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>Cet article fait partie de la série <strong>Sécurité et Conscience Numérique</strong>, visant à promouvoir des pratiques responsables et pédagogiques autour des outils libres.</p> </div> </td> </tr> </table> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_1_le_catalogue_de_versions_libs_versions_toml_un_rappel">2. 1. Le Catalogue de Versions (<code>libs.versions.toml</code>) : Un Rappel</a></li> <li><a href="#_2_le_problème_un_build_composite_et_deux_mondes_séparés">3. 2. Le Problème : Un Build Composite et Deux Mondes Séparés</a></li> <li><a href="#_3_la_solution_partager_la_résolution_de_dépendances">4. 3. La Solution : Partager la Résolution de Dépendances</a></li> <li><a href="#_4_conclusion_la_puissance_des_builds_composites_bien_gérés">5. 4. Conclusion : La Puissance des Builds Composites Bien Gérés</a></li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Public cible : Développeurs Gradle confrontés à la gestion de dépendances dans des projets multi-builds.</div> <p>Dans notre quête pour créer le plugin <code>site-baker</code>, nous avons cherché à maintenir une base de code propre et centralisée. L’une des meilleures pratiques dans l’écosystème Gradle moderne est l’utilisation du <strong>catalogue de versions</strong> (<code>libs.versions.toml</code>) pour gérer les dépendances. Mais que se passe-t-il lorsque votre projet devient plus complexe, comme un <strong>build composite</strong> où un build indépendant (notre plugin) doit être inclus dans un autre ?</p> </div> <div class="paragraph"> <p>C’est là que notre aventure a pris un tournant inattendu. Nous voulions que notre plugin <code>site-baker</code>, qui est lui-même un projet Gradle, utilise le même catalogue de versions que notre projet principal. Cet article, le cinquième de notre série, raconte comment nous avons résolu ce défi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_le_catalogue_de_versions_libs_versions_toml_un_rappel">2. 1. Le Catalogue de Versions (<code>libs.versions.toml</code>) : Un Rappel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le fichier <code>gradle/libs.versions.toml</code> est une fonctionnalité de Gradle qui permet de centraliser les versions et les coordonnées des dépendances de votre projet. Il est généralement structuré en quatre sections :</p> </div> <div class="ulist"> <ul> <li> <p><code>[versions]</code> : Définit des alias pour les numéros de version (ex: <code>kotlin = "1.9.20"</code>).</p> </li> <li> <p><code>[libraries]</code> : Définit des alias pour les dépendances complètes, en utilisant les versions définies ci-dessus (ex: <code>kotlin-stdlib = { module = "org.jetbrains.kotlin:kotlin-stdlib", version.ref = "kotlin" }</code>).</p> </li> <li> <p><code>[bundles]</code> : Regroupe plusieurs bibliothèques sous un seul alias (ex: <code>jackson = ["jackson-core", "jackson-databind"]</code>).</p> </li> <li> <p><code>[plugins]</code> : Définit des alias pour les plugins Gradle.</p> </li> </ul> </div> <div class="paragraph"> <p>Une fois défini, Gradle génère automatiquement des accesseurs typés, ce qui rend votre <code>build.gradle.kts</code> beaucoup plus lisible :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">dependencies { // Au lieu de : implementation("org.jetbrains.kotlin:kotlin-stdlib:1.9.20") implementation(libs.kotlin.stdlib) }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="toml-flow.svg" alt="toml flow" width="478" height="252"> </div> <div class="title">Figure 1. Flux de données du catalogue de versions</div> </div> </div> </div> <div class="sect1"> <h2 id="_2_le_problème_un_build_composite_et_deux_mondes_séparés">3. 2. Le Problème : Un Build Composite et Deux Mondes Séparés</h2> <div class="sectionbody"> <div class="paragraph"> <p>Notre structure de projet est un <strong>build composite</strong>. Le projet principal (<code>thymeleaf.cheroliv.com</code>) inclut le projet du plugin (<code>site-baker</code>) via la commande <code>includeBuild("site-baker")</code> dans le fichier <code>settings.gradle.kts</code>.</p> </div> <div class="imageblock"> <div class="content"> <img src="composite-build.svg" alt="composite build" width="604" height="246"> </div> <div class="title">Figure 2. Structure du build composite</div> </div> <div class="paragraph"> <p>Le problème est que, par défaut, un build inclus est un <strong>monde séparé</strong>. Il a sa propre configuration, son propre cycle de vie, et il ne voit pas le fichier <code>libs.versions.toml</code> du build principal. Notre <code>plugin/build.gradle.kts</code> essayait d’utiliser <code>libs.plugins.kotlin.jvm</code>, mais l’objet <code>libs</code> n’était pas généré à partir du bon fichier TOML, provoquant des erreurs de build.</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_la_solution_partager_la_résolution_de_dépendances">4. 3. La Solution : Partager la Résolution de Dépendances</h2> <div class="sectionbody"> <div class="paragraph"> <p>Après plusieurs recherches, la solution s’est avérée être une fonctionnalité de Gradle conçue précisément pour ce cas : <code>dependencyResolutionManagement</code>.</p> </div> <div class="paragraph"> <p>Dans le fichier <code>settings.gradle.kts</code> du <strong>build inclus</strong> (<code>site-baker/settings.gradle.kts</code>), nous pouvons dire à Gradle où trouver le catalogue de versions à utiliser.</p> </div> <div class="paragraph"> <p>Voici la configuration que nous avons ajoutée à <code>site-baker/settings.gradle.kts</code> :</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>Analysons la partie cruciale :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">versionCatalogs { create("libs") { // Crée un catalogue nommé 'libs' from(files("../gradle/libs.versions.toml")) // En utilisant ce fichier } }</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p><code>create("libs")</code> : Nous déclarons un catalogue de versions qui sera accessible via l’alias <code>libs</code>.</p> </li> <li> <p><code>from(files("../gradle/libs.versions.toml"))</code> : C’est la magie. Nous indiquons à Gradle que la source de ce catalogue est le fichier TOML situé dans le répertoire <code>gradle</code> du <strong>projet parent</strong> (<code>../</code>).</p> </li> </ul> </div> <div class="paragraph"> <p>Avec cette configuration, le build <code>site-baker</code> sait maintenant qu’il doit utiliser le catalogue de versions du projet principal. L’objet <code>libs</code> est généré correctement, et les dépendances sont résolues comme prévu.</p> </div> </div> </div> <div class="sect1"> <h2 id="_4_conclusion_la_puissance_des_builds_composites_bien_gérés">5. 4. Conclusion : La Puissance des Builds Composites Bien Gérés</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette expérience a été riche en enseignements. Le catalogue de versions est un outil fantastique pour la maintenabilité, mais son comportement dans des scénarios de builds composites n’est pas toujours intuitif.</p> </div> <div class="paragraph"> <p>La clé est de se rappeler qu’un build inclus reste un build indépendant. Pour partager des configurations comme le catalogue de versions, il faut utiliser les mécanismes explicites fournis par Gradle, comme le bloc <code>dependencyResolutionManagement</code> dans <code>settings.gradle.kts</code>.</p> </div> <div class="paragraph"> <p>En résolvant ce problème, nous avons non seulement rendu notre build plus propre, mais nous avons aussi renforcé la cohérence de notre projet en nous assurant que le plugin et le projet principal partagent une source unique de vérité pour leurs dépendances.</p> </div> <div class="paragraph"> <p>Dans le prochain article, nous continuerons à enrichir notre plugin en y ajoutant des tâches plus complexes, maintenant que notre gestion des dépendances est solide et centralisée.</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_le_symptôme_des_builds_fantômes">2. Le Symptôme : Des Builds Fantômes</a></li> <li><a href="#_lenquête_quest_ce_que_le_cache_de_configuration">3. L’Enquête : Qu’est-ce que le Cache de Configuration ?</a></li> <li><a href="#_la_cause_du_problème_un_plugin_non_conforme">4. La Cause du Problème : Un Plugin Non Conforme</a></li> <li><a href="#_la_solution_temporaire_désactiver_le_cache">5. La Solution Temporaire : Désactiver le Cache</a></li> <li><a href="#_la_vraie_solution_rendre_le_plugin_compatible">6. La Vraie Solution : Rendre le Plugin Compatible</a></li> <li><a href="#_conclusion">7. Conclusion</a></li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Public cible : Développeurs Gradle ayant déjà rencontré des comportements de build "magiques" ou inattendus.</div> <p>Dans notre aventure de création du plugin <code>site-baker</code>, nous avons suivi une approche TDD rigoureuse. Chaque fonctionnalité était testée, validée, et nous avancions avec confiance. Et puis, un jour, l’imprévu est arrivé. Les builds ont commencé à se comporter de manière erratique. Des modifications dans la logique du plugin ou dans les fichiers de configuration semblaient être ignorées, et nos tests fonctionnels, autrefois fiables, échouaient sans raison apparente.</p> </div> <div class="paragraph"> <p>Ce genre de problème peut être incroyablement frustrant. Il remet en question la fiabilité de l’outil et la validité de notre code. Après une session de débogage intense, le coupable a été identifié : le <strong>cache de configuration de Gradle</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_symptôme_des_builds_fantômes">2. Le Symptôme : Des Builds Fantômes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le problème se manifestait de plusieurs manières :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Je modifiais une chaîne de caractères dans une tâche <code>println</code>, mais l’ancienne chaîne continuait de s’afficher à l’exécution.</p> </li> <li> <p>Je changeais une valeur dans mon fichier <code>managed-jbake-context.yml</code>, mais le plugin agissait comme si le fichier n’avait pas été modifié.</p> </li> <li> <p>Les tests fonctionnels, qui créent des projets de test à la volée, échouaient parce que le plugin ne semblait pas détecter les fichiers de configuration fraîchement créés.</p> </li> </ol> </div> <div class="paragraph"> <p>Tout se passait comme si Gradle exécutait une "version fantôme" de notre build, ignorant nos changements les plus récents.</p> </div> </div> </div> <div class="sect1"> <h2 id="_lenquête_quest_ce_que_le_cache_de_configuration">3. L’Enquête : Qu’est-ce que le Cache de Configuration ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le cache de configuration est une fonctionnalité relativement moderne et extrêmement puissante de Gradle, activée par défaut dans les nouvelles versions. Son objectif est de rendre les builds plus rapides.</p> </div> <div class="olist arabic"> <div class="title">Le principe est simple :</div> <ol class="arabic"> <li> <p>Lors de la première exécution, Gradle exécute la phase de <strong>Configuration</strong> (lecture des <code>build.gradle.kts</code>, création des tâches, résolution des dépendances) et construit un graphe de tâches.</p> </li> <li> <p>À la fin de cette phase, Gradle <strong>sérialise ce graphe de tâches</strong> et le met en cache.</p> </li> <li> <p>Lors des exécutions suivantes, si rien n’a changé (scripts de build, <code>gradle.properties</code>, etc.), Gradle <strong>saute complètement la phase de configuration</strong> et réutilise le graphe de tâches mis en cache.</p> </li> </ol> </div> <div class="paragraph"> <p>Le gain de temps est spectaculaire sur les gros projets. Cependant, cette performance a un prix : elle impose des règles strictes sur la manière dont les plugins doivent être écrits.</p> </div> <div class="imageblock"> <div class="content"> <img src="config-cache-lifecycle.svg" alt="config cache lifecycle" width="661" height="709"> </div> <div class="title">Figure 1. Le cycle de vie du cache de configuration</div> </div> </div> </div> <div class="sect1"> <h2 id="_la_cause_du_problème_un_plugin_non_conforme">4. La Cause du Problème : Un Plugin Non Conforme</h2> <div class="sectionbody"> <div class="paragraph"> <p>Notre plugin <code>site-baker</code> violait, sans le savoir, plusieurs règles du cache de configuration. Pour qu’un graphe de tâches soit sérialisable, les tâches ne doivent pas contenir de références à des objets complexes comme l’objet <code>Project</code> ou lire des fichiers de manière arbitraire pendant la phase d’exécution.</p> </div> <div class="paragraph"> <p>Notre erreur principale était de lire le contenu du fichier YAML directement à l’intérieur de la logique d’exécution de la tâche, en utilisant une référence au chemin stocké dans notre extension. Cette approche est incompatible avec le cache car Gradle ne peut pas savoir si le contenu du fichier a changé si cette lecture n’est pas modélisée comme une <strong>entrée de tâche</strong> (Task Input).</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_solution_temporaire_désactiver_le_cache">5. La Solution Temporaire : Désactiver le Cache</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour nous débloquer et retrouver un comportement de build prévisible, la solution la plus rapide a été de désactiver le cache de configuration. Il suffit d’ajouter la ligne suivante dans le fichier <code>gradle.properties</code> du projet qui utilise le plugin (ou dans notre cas, le projet de test <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>Instantanément, les builds ont retrouvé leur comportement normal. Chaque exécution relançait la phase de configuration et nos changements étaient pris en compte.</p> </div> <div class="paragraph"> <p>Cependant, c’est une solution de contournement, pas une solution durable. Elle sacrifie la performance et ne résout pas le problème de fond de notre plugin.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_vraie_solution_rendre_le_plugin_compatible">6. La Vraie Solution : Rendre le Plugin Compatible</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour qu’un plugin soit un bon citoyen de l’écosystème Gradle moderne, il doit être compatible avec le cache de configuration. Cela implique de repenser la manière dont les données circulent vers nos tâches.</p> </div> <div class="paragraph"> <p>La clé est d’utiliser les <strong>Provider APIs</strong> de Gradle. Au lieu de passer des valeurs directes (comme un <code>String</code> ou un <code>File</code>) à nos tâches, nous devons passer des <code>Property<T></code> ou des <code>Provider<T></code>.</p> </div> <div class="olist arabic"> <div class="title">Voici le plan de refactoring :</div> <ol class="arabic"> <li> <p><strong>Déclarer les entrées de tâches :</strong> La tâche qui parse le fichier YAML doit déclarer ce fichier comme une entrée. On utilise pour cela l’annotation <code>@InputFile</code>. [source,kotlin] ---- @get:InputFile abstract val configFile: RegularFileProperty ----</p> </li> <li> <p><strong>Utiliser les <code>Property</code> et <code>Provider</code> :</strong> La valeur de <code>configFile</code> sera connectée à la propriété <code>configPath</code> de notre extension DSL. Gradle est ainsi capable de tracer la provenance de la donnée. [source,kotlin] ---- // Dans le plugin tasks.register<MyTask>("myTask") { configFile.set(extension.configPath.flatMap { project.layout.projectDirectory.file(it) }) } ----</p> </li> <li> <p><strong>Lire le contenu au bon moment :</strong> La lecture du fichier doit se faire à l’intérieur de l’action de la tâche (<code>@TaskAction</code>), en utilisant le <code>Provider</code> de l’entrée. [source,kotlin] ---- @TaskAction fun execute() { val content = configFile.get().asFile.readText() // …​ parser le contenu } ----</p> </li> </ol> </div> <div class="paragraph"> <p>En suivant ce modèle, Gradle comprend que si le contenu de <code>configFile</code> change, le cache de configuration est invalide et la phase de configuration doit être ré-exécutée. De plus, il sait que la sortie de la tâche dépend du contenu de ce fichier, ce qui permet également d’optimiser le cache d’exécution (<code>UP-TO-DATE</code>).</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">7. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette aventure de débogage a été une leçon précieuse. Le comportement "magique" du cache de configuration nous a forcés à mieux comprendre le cycle de vie de Gradle et les principes de la programmation déclarative et paresseuse (<code>lazy</code>).</p> </div> <div class="paragraph"> <p>Désactiver le cache de configuration est un outil de diagnostic utile, mais la véritable solution est de concevoir des plugins robustes et modernes. En modélisant correctement les entrées et sorties de nos tâches avec les APIs <code>Provider</code>, nous ne corrigeons pas seulement un bug, nous améliorons la performance, la fiabilité et la maintenabilité de notre plugin.</p> </div> <div class="paragraph"> <p>Dans le prochain article, nous mettrons en pratique ce refactoring pour rendre notre tâche de parsing YAML entièrement compatible avec le cache de configuration.</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_1_le_contexte_notre_plugin_site_baker">2. 1. Le Contexte : Notre Plugin <code>site-baker</code></a></li> <li><a href="#_2_modélisation_de_la_configuration_en_kotlin">3. 2. Modélisation de la Configuration en Kotlin</a></li> <li><a href="#_3_intégration_de_jackson_dans_le_build_gradle_kts">4. 3. Intégration de Jackson dans le <code>build.gradle.kts</code></a></li> <li><a href="#_4_lapproche_tdd_tester_le_parsing_yaml">5. 4. L’Approche TDD : Tester le Parsing YAML</a> <ul class="sectlevel2"> <li><a href="#_4_1_test_unitaire_mapper_le_yaml_en_objet_kotlin">5.1. 4.1. Test Unitaire : Mapper le YAML en Objet Kotlin</a></li> <li><a href="#_4_2_test_fonctionnel_valider_la_lecture_du_fichier_de_configuration">5.2. 4.2. Test Fonctionnel : Valider la Lecture du Fichier de Configuration</a></li> </ul> </li> <li><a href="#_5_visualisation_du_flux_de_parsing">6. 5. Visualisation du Flux de Parsing</a></li> <li><a href="#_conclusion">7. Conclusion</a></li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Public cible : Développeurs Gradle intermédiaires souhaitant gérer des configurations complexes.</div> <p>Dans le développement de plugins Gradle, la gestion de configurations complexes est une tâche courante. Plutôt que de surcharger le DSL avec des centaines de propriétés, il est souvent plus propre et plus maintenable de définir la configuration dans un fichier externe, comme le YAML. Cet article vous guide à travers l’intégration de la puissante bibliothèque Jackson pour parser des fichiers YAML en objets Kotlin, en adoptant une approche TDD rigoureuse pour garantir la robustesse de notre plugin <code>site-baker</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_le_contexte_notre_plugin_site_baker">2. 1. Le Contexte : Notre Plugin <code>site-baker</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>Notre plugin <code>site-baker</code> est conçu pour automatiser la génération et le déploiement d’un site statique. Il a besoin de lire un fichier de configuration YAML (<code>managed-jbake-context.yml</code>) pour obtenir des informations telles que les chemins des sources, les destinations de déploiement, et les identifiants Git.</p> </div> <div class="paragraph"> <p>La configuration YAML que nous souhaitons parser ressemble à ceci :</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_modélisation_de_la_configuration_en_kotlin">3. 2. Modélisation de la Configuration en Kotlin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant de parser, nous devons définir la structure de nos données en Kotlin. Jackson utilisera ces classes pour mapper automatiquement le contenu 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>La fonction <code>parseSiteConfiguration</code> est notre point d’entrée pour la désérialisation. Elle utilise <code>ObjectMapper</code> de Jackson, configuré avec <code>YAMLFactory</code> pour le format YAML et <code>registerKotlinModule()</code> pour le support des spécificités de Kotlin (comme les valeurs par défaut des propriétés).</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_intégration_de_jackson_dans_le_build_gradle_kts">4. 3. Intégration de Jackson dans le <code>build.gradle.kts</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour utiliser Jackson, nous devons ajouter les dépendances nécessaires dans le <code>build.gradle.kts</code> de notre module <code>plugin</code> :</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>Nous utilisons <code>jackson-module-kotlin</code> pour le support de Kotlin et <code>jackson-dataformat-yaml</code> pour la gestion du format YAML.</p> </div> </div> </div> <div class="sect1"> <h2 id="_4_lapproche_tdd_tester_le_parsing_yaml">5. 4. L’Approche TDD : Tester le Parsing YAML</h2> <div class="sectionbody"> <div class="paragraph"> <p>Maintenant, appliquons le TDD pour valider notre logique de parsing.</p> </div> <div class="sect2"> <h3 id="_4_1_test_unitaire_mapper_le_yaml_en_objet_kotlin">5.1. 4.1. Test Unitaire : Mapper le YAML en Objet Kotlin</h3> <div class="paragraph"> <p>Nous commençons par un test unitaire dans <code>SiteBakerPluginTest.kt</code> pour vérifier que la fonction <code>parseSiteConfiguration</code> peut correctement transformer une chaîne YAML en un objet <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>Ce test lit le contenu du fichier <code>managed-jbake-context.yml</code> (qui doit exister pour que le test soit valide) et effectue des assertions sur l’objet <code>SiteConfiguration</code> résultant. Il valide que les valeurs clés du YAML sont correctement mappées.</p> </div> </div> <div class="sect2"> <h3 id="_4_2_test_fonctionnel_valider_la_lecture_du_fichier_de_configuration">5.2. 4.2. Test Fonctionnel : Valider la Lecture du Fichier de Configuration</h3> <div class="paragraph"> <p>Pour s’assurer que le plugin peut lire le fichier de configuration via son DSL et que le parsing fonctionne dans un environnement Gradle réel, nous ajoutons un test fonctionnel dans <code>SiteBakerPluginFunctionalTest.kt</code>.</p> </div> <div class="paragraph"> <p>Ce test est crucial car il simule l’exécution du plugin dans un projet réel. Il doit être <strong>hermétique</strong>, c’est-à-dire qu’il doit créer lui-même le fichier <code>managed-jbake-context.yml</code> avec un contenu contrôlé, pour garantir la reproductibilité et l’isolation du test.</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>Ce test fonctionnel vérifie que le fichier de configuration copié dans le répertoire temporaire du test contient les données attendues. Bien que ce test ne parse pas directement le YAML en objet Kotlin, il valide la présence du fichier et de son contenu, ce qui est une étape préalable essentielle au parsing par le plugin.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_visualisation_du_flux_de_parsing">6. 5. Visualisation du Flux de Parsing</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le diagramme suivant illustre le flux de données et les interactions lors du parsing de la configuration YAML :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-0994e4ea85b7366b45651fc9303bc947.png" alt="Diagram" width="1523" height="472"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">7. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En suivant une approche TDD, nous avons intégré avec succès la bibliothèque Jackson pour parser des fichiers de configuration YAML en objets Kotlin au sein de notre plugin Gradle. Cette méthode nous a permis de :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Modéliser clairement</strong> notre configuration avec des data classes Kotlin.</p> </li> <li> <p><strong>Valider la logique de parsing</strong> avec des tests unitaires ciblés.</p> </li> <li> <p><strong>Assurer l’intégration</strong> dans un environnement Gradle réel grâce à des tests fonctionnels hermétiques.</p> </li> </ul> </div> <div class="paragraph"> <p>Cette base solide nous offre une grande confiance pour étendre notre plugin avec des fonctionnalités qui s’appuient sur cette configuration, tout en garantissant la maintenabilité et la robustesse du code. Le parsing YAML est désormais une fonctionnalité fiable et testée de notre plugin <code>site-baker</code>.</p> </div> </div> </div> https://pages-content.github.io//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="#_1_linitialisation_du_projet">1. 1. L’Initialisation du Projet</a></li> <li><a href="#_2_notre_premier_cycle_tdd_enregistrer_une_tâche">2. 2. Notre Premier Cycle TDD : Enregistrer une Tâche</a> <ul class="sectlevel2"> <li><a href="#_2_1_le_test_dabord_le_test_qui_échoue">2.1. 2.1. Le Test d’Abord (Le Test qui Échoue)</a></li> <li><a href="#_2_2_le_code_ensuite_faire_passer_le_test">2.2. 2.2. Le Code Ensuite (Faire Passer le Test)</a></li> </ul> </li> <li><a href="#_3_deuxième_cycle_tdd_ajouter_une_extension_dsl">3. 3. Deuxième Cycle TDD : Ajouter une Extension DSL</a> <ul class="sectlevel2"> <li><a href="#_3_1_le_test_dabord">3.1. 3.1. Le Test d’Abord</a></li> <li><a href="#_3_2_le_code_ensuite">3.2. 3.2. Le Code Ensuite</a></li> </ul> </li> <li><a href="#_4_le_test_fonctionnel_valider_lintégration">4. 4. Le Test Fonctionnel : Valider l’Intégration</a> <ul class="sectlevel2"> <li><a href="#_4_1_le_test_dintégration_créer_un_environnement_contrôlé">4.1. 4.1. Le Test d’Intégration : Créer un Environnement Contrôlé</a></li> <li><a href="#_4_2_finaliser_la_logique">4.2. 4.2. Finaliser la Logique</a></li> </ul> </li> <li><a href="#_conclusion">5. Conclusion</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Dans cet article, nous allons explorer comment mettre en place une base de développement solide pour un plugin Gradle en utilisant une approche de Développement Guidé par les Tests (TDD - Test-Driven Development). Cette méthode nous assure que notre code est robuste, maintenable et répond précisément aux exigences dès le départ.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_linitialisation_du_projet">1. 1. L’Initialisation du Projet</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle facilite grandement la création d’un nouveau plugin grâce à la commande <code>gradle init</code>. En choisissant de créer un "Gradle Plugin" avec Kotlin, nous obtenons une structure de projet prête à l’emploi, incluant deux types de tests cruciaux :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Tests Unitaires :</strong> Situés dans <code>src/test</code>, ils permettent de valider des composants isolés de notre plugin, comme la logique interne d’une tâche ou la configuration d’une extension. Ils sont rapides et n’ont pas besoin d’une exécution complète de Gradle.</p> </li> <li> <p><strong>Tests Fonctionnels :</strong> Situés dans <code>src/functionalTest</code>, ils utilisent <code>GradleRunner</code> pour exécuter une build Gradle complète dans un projet de test temporaire. Cela nous permet de vérifier le comportement réel du plugin dans un environnement contrôlé.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_2_notre_premier_cycle_tdd_enregistrer_une_tâche">2. 2. Notre Premier Cycle TDD : Enregistrer une Tâche</h2> <div class="sectionbody"> <div class="paragraph"> <p>Notre première exigence est simple : le plugin doit enregistrer une tâche nommée <code>printSiteConfig</code>.</p> </div> <div class="sect2"> <h3 id="_2_1_le_test_dabord_le_test_qui_échoue">2.1. 2.1. Le Test d’Abord (Le Test qui Échoue)</h3> <div class="paragraph"> <p>Conformément au TDD, nous écrivons d’abord un test qui vérifie l’existence de cette tâche. Dans <code>SiteBakerPluginTest.kt</code> (notre fichier de test unitaire), nous ajoutons :</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>Ce test échoue, car nous n’avons encore écrit aucun code dans notre plugin.</p> </div> </div> <div class="sect2"> <h3 id="_2_2_le_code_ensuite_faire_passer_le_test">2.2. 2.2. Le Code Ensuite (Faire Passer le Test)</h3> <div class="paragraph"> <p>Maintenant, nous écrivons le minimum de code nécessaire dans <code>SiteBakerPlugin.kt</code> pour que le test passe :</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>Nous relançons les tests, et ils passent. Notre première fonctionnalité est validée.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_3_deuxième_cycle_tdd_ajouter_une_extension_dsl">3. 3. Deuxième Cycle TDD : Ajouter une Extension DSL</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’exigence suivante est de permettre aux utilisateurs de configurer notre plugin via un bloc DSL dans leur <code>build.gradle.kts</code>. Nous voulons un bloc <code>site { …​ }</code> où l’on peut spécifier un chemin de configuration.</p> </div> <div class="sect2"> <h3 id="_3_1_le_test_dabord">3.1. 3.1. Le Test d’Abord</h3> <div class="paragraph"> <p>Nous ajoutons un test pour vérifier que l’extension <code>site</code> est bien enregistrée et qu’on peut y affecter une valeur.</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>Ce test échoue car ni la classe <code>SiteExtension</code> ni l’enregistrement de l’extension n’existent.</p> </div> </div> <div class="sect2"> <h3 id="_3_2_le_code_ensuite">3.2. 3.2. Le Code Ensuite</h3> <div class="paragraph"> <p>Nous créons la classe <code>SiteBakerExtension.kt</code> et mettons à jour <code>SiteBakerPlugin.kt</code> :</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>Les tests passent à nouveau.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_le_test_fonctionnel_valider_lintégration">4. 4. Le Test Fonctionnel : Valider l’Intégration</h2> <div class="sectionbody"> <div class="paragraph"> <p>Maintenant que les unités sont testées, nous devons nous assurer que tout fonctionne ensemble dans une vraie build. C’est le rôle du test fonctionnel dans <code>SiteBakerPluginFunctionalTest.kt</code>.</p> </div> <div class="sect2"> <h3 id="_4_1_le_test_dintégration_créer_un_environnement_contrôlé">4.1. 4.1. Le Test d’Intégration : Créer un Environnement Contrôlé</h3> <div class="paragraph"> <p>Ce test va simuler un vrai projet utilisant notre plugin. Pour qu’il soit fiable, il doit être <strong>hermétique</strong>, c’est-à-dire qu’il ne doit pas dépendre de fichiers existants sur le système. Il doit créer lui-même toutes les conditions nécessaires à son exécution.</p> </div> <div class="paragraph"> <p>Le test va donc : 1. Créer un <code>build.gradle.kts</code> de test qui utilise notre plugin et son DSL. 2. <strong>Créer le fichier de configuration</strong> (<code>managed-jbake-context.yml</code>) que le plugin est censé lire. C’est une étape cruciale pour la robustesse du test. 3. Exécuter la tâche <code>printSiteConfig</code> via <code>GradleRunner</code>. 4. Vérifier que la sortie de la build est correcte.</p> </div> <div class="paragraph"> <p>En copiant ou créant ce fichier de configuration à chaque exécution, nous nous assurons que le test est <strong>reproductible</strong> et ne dépend pas d’un état externe. Cela sécurise nos tests contre les régressions qui pourraient être liées à la lecture du fichier.</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>Ce test échouera tant que la tâche <code>printSiteConfig</code> n’utilisera pas réellement la valeur de l’extension.</p> </div> </div> <div class="sect2"> <h3 id="_4_2_finaliser_la_logique">4.2. 4.2. Finaliser la Logique</h3> <div class="paragraph"> <p>Nous mettons à jour la tâche dans <code>SiteBakerPlugin.kt</code> pour qu’elle affiche la valeur configurée :</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>Tous les tests, unitaires et fonctionnels, passent désormais.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">5. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En suivant une approche TDD, nous avons construit un plugin de manière incrémentale et sécurisée. Chaque petite fonctionnalité est immédiatement validée par un test, des tests unitaires rapides aux tests fonctionnels qui valident l’intégration complète.</p> </div> <div class="paragraph"> <p>En prenant soin de rendre nos tests fonctionnels <strong>hermétiques</strong> — notamment en créant programmatiquement les fichiers de configuration nécessaires — nous bâtissons un filet de sécurité extrêmement robuste. Cette rigueur nous protège efficacement contre les régressions et nous donne une grande confiance pour ajouter des fonctionnalités plus complexes par la suite, comme le parsing du fichier de configuration YAML.</p> </div> <div class="paragraph"> <p>Cette base de tests solides est l’atout le plus précieux pour la maintenance et l’évolution future du plugin.</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_étape_1_lancer_lassistant_de_projet">2. Étape 1 : Lancer l’assistant de projet</a></li> <li><a href="#_étape_2_comprendre_la_structure_générée">3. Étape 2 : Comprendre la structure générée</a> <ul class="sectlevel2"> <li><a href="#_fichiers_et_dossiers_clés">3.1. Fichiers et dossiers clés</a></li> </ul> </li> <li><a href="#_étape_3_construire_et_tester_le_plugin">4. Étape 3 : Construire et tester le plugin</a> <ul class="sectlevel2"> <li><a href="#_tâches_de_base">4.1. Tâches de base</a></li> </ul> </li> <li><a href="#_conclusion">5. Conclusion</a></li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Public cible : Développeur débutant à intermédiaire avec Gradle.</div> <p>Démarrer un nouveau projet de plugin Gradle peut sembler intimidant. Heureusement, Gradle fournit un assistant interactif puissant, la tâche <code>init</code>, qui génère une structure de projet complète, propre et prête à l’emploi. Ce guide vous montrera comment utiliser cet outil pour créer une base de plugin saine, en expliquera la structure et vous montrera comment lancer les premières tâches de build.</p> </div> </div> </div> <div class="sect1"> <h2 id="_étape_1_lancer_lassistant_de_projet">2. Étape 1 : Lancer l’assistant de projet</h2> <div class="sectionbody"> <div class="paragraph"> <p>La commande <code>gradle init</code> est le point de départ. Elle lance un assistant en ligne de commande qui vous pose une série de questions pour configurer le projet.</p> </div> <div class="paragraph"> <p>Ouvrez votre terminal dans un dossier vide et lancez :</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>L’assistant vous guidera. Voici les choix à faire pour un plugin Gradle écrit en Kotlin :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Select type of project to generate:</strong> Choisissez <code>Gradle plugin</code>.</p> </li> <li> <p><strong>Select implementation language:</strong> Choisissez <code>Kotlin</code>.</p> </li> <li> <p><strong>Select build script DSL:</strong> Choisissez <code>Kotlin</code>.</p> </li> <li> <p><strong>Project name:</strong> Entrez un nom pour votre projet (ex: <code>site-baker</code>).</p> </li> <li> <p><strong>Plugin id:</strong> Donnez un identifiant unique à votre plugin (ex: <code>com.cheroliv.site-baker</code>).</p> </li> <li> <p><strong>Plugin class:</strong> Spécifiez le nom de la classe d’implémentation (ex: <code>com.cheroliv.SiteBakerPlugin</code>).</p> </li> </ol> </div> <div class="paragraph"> <p>Une fois terminé, Gradle génère une arborescence de fichiers complète.</p> </div> <div class="imageblock"> <div class="content"> <img src="init-gradle.svg" alt="init gradle" width="193" height="406"> </div> <div class="title">Figure 1. Diagramme du processus d’initialisation</div> </div> </div> </div> <div class="sect1"> <h2 id="_étape_2_comprendre_la_structure_générée">3. Étape 2 : Comprendre la structure générée</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’assistant crée une structure de projet multi-modules, séparant le projet racine du code source du plugin lui-même.</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="_fichiers_et_dossiers_clés">3.1. Fichiers et dossiers clés</h3> <div class="ulist"> <ul> <li> <p><code>settings.gradle.kts</code> : Ce fichier à la racine définit les modules inclus dans le build. Ici, il inclut le sous-projet <code>plugin</code>. [source,kotlin] ---- rootProject.name = "site-baker" include("plugin") ----</p> </li> <li> <p><code>plugin/build.gradle.kts</code> : C’est le cœur de la configuration de votre plugin. Il applique le plugin <code>java-gradle-plugin</code>, déclare les dépendances et configure les métadonnées du plugin. [source,kotlin] ---- plugins { <code>java-gradle-plugin</code> alias(libs.plugins.kotlin.jvm) }</p> <div class="literalblock"> <div class="content"> <pre> gradlePlugin { val siteBaker by plugins.creating { id = "com.cheroliv.site-baker" implementationClass = "com.cheroliv.SiteBakerPlugin" } } ---- * `src/main/` : Contient le code source de votre plugin. * `src/test/` : Contient les tests unitaires. Ils s'exécutent rapidement et en isolation. * `src/functionalTest/` : Contient les tests fonctionnels. Ces tests utilisent `GradleRunner` pour exécuter une version complète de Gradle sur un projet de test, simulant ainsi une utilisation réelle de votre plugin.</pre> </div> </div> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_étape_3_construire_et_tester_le_plugin">4. Étape 3 : Construire et tester le plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le projet généré inclut le <strong>Gradle Wrapper</strong> (<code>gradlew</code>). C’est la manière recommandée d’exécuter Gradle, car elle garantit que tous les développeurs utilisent la même version, assurant des builds reproductibles.</p> </div> <div class="sect2"> <h3 id="_tâches_de_base">4.1. Tâches de base</h3> <div class="ulist"> <ul> <li> <p><strong>Construire le projet :</strong> Cette commande compile votre code, exécute tous les tests (unitaires et fonctionnels) et assemble le JAR de votre plugin. [source,bash] ---- ./gradlew build ----</p> </li> <li> <p><strong>Lancer toutes les vérifications :</strong> La tâche <code>check</code> est un alias qui exécute toutes les tâches de vérification, y compris <code>test</code> et <code>functionalTest</code>. [source,bash] ---- ./gradlew check ----</p> </li> <li> <p><strong>Exécuter uniquement les tests unitaires :</strong> Pour un feedback rapide pendant le développement. [source,bash] ---- ./gradlew test ----</p> </li> </ul> </div> <div class="exampleblock"> <div class="content"> <div class="paragraph"> <p>La commande <code>./gradlew :test</code>, qui cible explicitement le projet racine, échouera car ce dernier ne contient pas de tests. En revanche : * <code>./gradlew test</code> fonctionne car Gradle exécute la tâche <code>test</code> sur tous les sous-projets qui la possèdent (ici, le module <code>plugin</code>). * <code>./gradlew :plugin:test</code> est la commande la plus explicite pour lancer les tests du module <code>plugin</code> uniquement.</p> </div> </div> </div> <div class="ulist"> <ul> <li> <p><strong>Exécuter uniquement les tests fonctionnels :</strong> Plus lents, ils sont utiles pour valider le comportement global. [source,bash] ---- ./gradlew functionalTest ----</p> </li> </ul> </div> <div class="paragraph"> <p>Le résultat des tests est généré dans le dossier <code>plugin/build/reports/tests/</code>. Vous pouvez ouvrir le fichier <code>index.html</code> dans votre navigateur pour un rapport détaillé.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">5. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En quelques minutes, <code>gradle init</code> vous a fourni une base de projet solide, moderne et complète pour le développement de votre plugin. Vous disposez d’une structure claire, de tests unitaires et fonctionnels préconfigurés, et d’un système de build reproductible grâce au Gradle Wrapper.</p> </div> <div class="paragraph"> <p>Vous êtes maintenant prêt à ouvrir le fichier <code>SiteBakerPlugin.kt</code> et à commencer à y ajouter la logique métier de votre plugin !</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_1_le_jdk_le_moteur_de_gradle">2. 1. Le JDK : Le moteur de Gradle</a> <ul class="sectlevel2"> <li><a href="#_quelle_version_choisir">2.1. Quelle version choisir ?</a></li> <li><a href="#_installation_via_sdkman_recommandé">2.2. Installation via SDKMAN! (Recommandé)</a> <ul class="sectlevel3"> <li><a href="#_installer_sdkman">2.2.1. <strong>Installer SDKMAN!</strong></a></li> <li><a href="#_installer_une_version_du_jdk">2.2.2. <strong>Installer une version du JDK</strong></a></li> <li><a href="#_vérifier_linstallation">2.2.3. <strong>Vérifier l’installation</strong></a></li> </ul> </li> </ul> </li> <li><a href="#_2_lide_intellij_idea">3. 2. L’IDE : IntelliJ IDEA</a></li> <li><a href="#_3_gradle_loutil_de_build">4. 3. Gradle : L’outil de build</a> <ul class="sectlevel2"> <li><a href="#_installation_via_sdkman">4.1. Installation via SDKMAN!</a> <ul class="sectlevel3"> <li><a href="#_installer_gradle">4.1.1. <strong>Installer Gradle</strong></a></li> <li><a href="#_vérifier_linstallation_2">4.1.2. <strong>Vérifier l’installation</strong></a></li> </ul> </li> </ul> </li> <li><a href="#_4_jbake_le_générateur_de_site_statique">5. 4. JBake : Le générateur de site statique</a> <ul class="sectlevel2"> <li><a href="#_installation_via_sdkman_2">5.1. Installation via SDKMAN!</a> <ul class="sectlevel3"> <li><a href="#_installer_jbake">5.1.1. <strong>Installer JBake</strong></a></li> <li><a href="#_vérifier_linstallation_3">5.1.2. <strong>Vérifier l’installation</strong></a></li> </ul> </li> </ul> </li> <li><a href="#_5_le_gradle_wrapper_la_bonne_pratique_absolue">6. 5. Le Gradle Wrapper : La bonne pratique absolue</a></li> <li><a href="#_6_docker_et_portainer_pour_des_builds_reproductibles_optionnel">7. 6. Docker et Portainer : Pour des Builds Reproductibles (Optionnel)</a> <ul class="sectlevel2"> <li><a href="#_installation_de_docker_engine">7.1. Installation de Docker Engine</a> <ul class="sectlevel3"> <li><a href="#_installer_docker_via_le_script_officiel">7.1.1. <strong>Installer Docker via le script officiel :</strong></a></li> <li><a href="#_gérer_docker_sans_sudo_recommandé">7.1.2. <strong>Gérer Docker sans <code>sudo</code> (recommandé) :</strong></a></li> <li><a href="#_vous_devez_vous_déconnecter_et_vous_reconnecter_pour_que_ce_changement_soit_pris_en_compte">Vous devez vous déconnecter et vous reconnecter pour que ce changement soit pris en compte.</a></li> <li><a href="#_3_vérifier_linstallation">7.1.3. 3. <strong>Vérifier l’installation :</strong></a></li> </ul> </li> <li><a href="#_gérer_docker_avec_portainer_gui">7.2. Gérer Docker avec Portainer (GUI)</a> <ul class="sectlevel3"> <li><a href="#_créer_un_volume_pour_les_données_de_portainer">7.2.1. <strong>Créer un volume pour les données de Portainer :</strong></a></li> <li><a href="#_lancer_le_conteneur_portainer">7.2.2. <strong>Lancer le conteneur Portainer :</strong></a></li> </ul> </li> </ul> </li> <li><a href="#_conclusion">8. Conclusion</a></li> </ul> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Public cible : Développeurs souhaitant se lancer dans la création de plugins Gradle.</div> <p>Pour développer des plugins Gradle efficacement, un environnement de développement bien configuré est indispensable. Un bon setup vous fera gagner du temps, réduira les frustrations et assurera la cohérence de vos builds.</p> </div> <div class="olist arabic"> <div class="title">Ce guide se concentre sur quatre piliers essentiels :</div> <ol class="arabic"> <li> <p>Le <strong>JDK</strong> (Java Development Kit), car Gradle et JBake s’exécutent sur la JVM.</p> </li> <li> <p>Un <strong>IDE</strong> moderne (IntelliJ IDEA) avec un bon support de Kotlin et Gradle.</p> </li> <li> <p><strong>Gradle</strong> lui-même, pour initialiser les projets.</p> </li> <li> <p><strong>JBake</strong>, le moteur de notre site statique.</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="images/gradle-env.svg" alt="gradle env" width="492" height="213"> </div> <div class="title">Figure 1. Composants de l’environnement de développement</div> </div> </div> </div> <div class="sect1"> <h2 id="_1_le_jdk_le_moteur_de_gradle">2. 1. Le JDK : Le moteur de Gradle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle est une application qui s’exécute sur la Java Virtual Machine (JVM). Par conséquent, l’installation d’un JDK est un prérequis absolu.</p> </div> <div class="sect2"> <h3 id="_quelle_version_choisir">2.1. Quelle version choisir ?</h3> <div class="paragraph"> <p>Il est recommandé d’utiliser une version LTS (Long-Term Support) de Java. À l’heure actuelle, <strong>JDK 17</strong> ou <strong>JDK 21</strong> sont d’excellents choix.</p> </div> </div> <div class="sect2"> <h3 id="_installation_via_sdkman_recommandé">2.2. Installation via SDKMAN! (Recommandé)</h3> <div class="paragraph"> <p>SDKMAN! est un outil formidable pour gérer les versions de nombreux SDK, y compris Java et Gradle.</p> </div> <div class="sect3"> <h4 id="_installer_sdkman">2.2.1. <strong>Installer 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="_installer_une_version_du_jdk">2.2.2. <strong>Installer une version du JDK</strong></h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Pour lister les versions de Java disponibles sdk list java # Pour installer Java 17 (par exemple, la distribution Temurin) sdk install java 17.0.8-tem</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_vérifier_linstallation">2.2.3. <strong>Vérifier l’installation</strong></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>Vous devriez voir la version que vous venez d’installer s’afficher.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_2_lide_intellij_idea">3. 2. L’IDE : IntelliJ IDEA</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour le développement de plugins Gradle avec le DSL Kotlin, <strong>IntelliJ IDEA</strong> est l’outil de choix. Son intégration avec Gradle et Kotlin est inégalée.</p> </div> <div class="ulist"> <ul> <li> <p><strong>Community Edition :</strong> Gratuite et largement suffisante pour commencer.</p> </li> <li> <p><strong>Ultimate Edition :</strong> Payante, elle offre des fonctionnalités avancées pour le développement web et base de données.</p> </li> </ul> </div> <div class="paragraph"> <p>Téléchargez la version qui vous convient depuis le site de JetBrains : <a href="https://www.jetbrains.com/idea/download/" class="bare">https://www.jetbrains.com/idea/download/</a></p> </div> <div class="paragraph"> <p>L’IDE détectera automatiquement vos fichiers <code>build.gradle.kts</code> et <code>settings.gradle.kts</code>, vous offrant une autocomplétion puissante, la navigation dans le code et des outils de débogage intégrés.</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_gradle_loutil_de_build">4. 3. Gradle : L’outil de build</h2> <div class="sectionbody"> <div class="paragraph"> <p>Même si chaque projet utilisera sa propre version de Gradle via le Gradle Wrapper, il est utile d’avoir une installation globale de Gradle pour des tâches comme l’initialisation de nouveaux projets (<code>gradle init</code>).</p> </div> <div class="sect2"> <h3 id="_installation_via_sdkman">4.1. Installation via SDKMAN!</h3> <div class="paragraph"> <p>Tout comme pour le JDK, SDKMAN! simplifie l’installation de Gradle.</p> </div> <div class="sect3"> <h4 id="_installer_gradle">4.1.1. <strong>Installer Gradle</strong></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="_vérifier_linstallation_2">4.1.2. <strong>Vérifier l’installation</strong></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>Cette commande affichera les versions de Gradle, Kotlin, Groovy et du JDK utilisées.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_jbake_le_générateur_de_site_statique">5. 4. JBake : Le générateur de site statique</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake est l’outil que nous utiliserons pour transformer nos fichiers sources (comme celui-ci) en un site web statique. Avoir une installation locale est pratique pour prévisualiser les changements.</p> </div> <div class="sect2"> <h3 id="_installation_via_sdkman_2">5.1. Installation via SDKMAN!</h3> <div class="paragraph"> <p>Comme pour les autres outils, SDKMAN! est la méthode la plus simple.</p> </div> <div class="sect3"> <h4 id="_installer_jbake">5.1.1. <strong>Installer 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="_vérifier_linstallation_3">5.1.2. <strong>Vérifier l’installation</strong></h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">jbake -v</code></pre> </div> </div> <div class="paragraph"> <p>Cette commande affichera la version de JBake et les informations de l’environnement Java qu’il utilise.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_le_gradle_wrapper_la_bonne_pratique_absolue">6. 5. Le Gradle Wrapper : La bonne pratique absolue</h2> <div class="sectionbody"> <div class="paragraph"> <p>Une fois votre projet créé (ce que nous verrons dans l’article suivant), vous ne devriez plus utiliser la commande globale <code>gradle</code>. À la place, vous utiliserez le <strong>Gradle Wrapper</strong> (<code>./gradlew</code>), un script inclus dans votre projet.</p> </div> <div class="paragraph"> <p>Pourquoi ? * <strong>Reproductibilité :</strong> Le Wrapper garantit que chaque personne travaillant sur le projet (y compris votre serveur de CI/CD) utilise exactement la <strong>même version de Gradle</strong>, éliminant ainsi les erreurs de build dues à des environnements différents. * <strong>Simplicité :</strong> Pas besoin d’installer Gradle manuellement pour contribuer à un projet. Il suffit de cloner le dépôt et de lancer <code>./gradlew</code>.</p> </div> <div class="paragraph"> <p>Une commande typique ressemblera à ceci :</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_et_portainer_pour_des_builds_reproductibles_optionnel">7. 6. Docker et Portainer : Pour des Builds Reproductibles (Optionnel)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bien que non strictement nécessaires pour écrire un plugin, Docker et Portainer sont des outils DevOps modernes qui facilitent grandement la création de builds reproductibles et la gestion de votre environnement.</p> </div> <div class="sect2"> <h3 id="_installation_de_docker_engine">7.1. Installation de Docker Engine</h3> <div class="paragraph"> <p>Docker vous permet d’empaqueter votre application et ses dépendances dans un conteneur.</p> </div> <div class="sect3"> <h4 id="_installer_docker_via_le_script_officiel">7.1.1. <strong>Installer Docker via le script officiel :</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="_gérer_docker_sans_sudo_recommandé">7.1.2. <strong>Gérer Docker sans <code>sudo</code> (recommandé) :</strong></h4> <div class="paragraph"> <p>Ajoutez votre utilisateur au groupe <code>docker</code>.</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> <div class="sect3"> <h4 id="_vous_devez_vous_déconnecter_et_vous_reconnecter_pour_que_ce_changement_soit_pris_en_compte">Vous devez vous déconnecter et vous reconnecter pour que ce changement soit pris en compte.</h4> </div> <div class="sect3"> <h4 id="_3_vérifier_linstallation">7.1.3. 3. <strong>Vérifier l’installation :</strong></h4> <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="_gérer_docker_avec_portainer_gui">7.2. Gérer Docker avec Portainer (GUI)</h3> <div class="paragraph"> <p>Portainer est une interface web légère pour gérer vos conteneurs Docker.</p> </div> <div class="sect3"> <h4 id="_créer_un_volume_pour_les_données_de_portainer">7.2.1. <strong>Créer un volume pour les données de Portainer :</strong></h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">docker volume create portainer_data</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_lancer_le_conteneur_portainer">7.2.2. <strong>Lancer le conteneur Portainer :</strong></h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">docker run -d -p 8000:8000 -p 9443:9443 --name portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest</code></pre> </div> </div> <div class="paragraph"> <p>Vous pouvez maintenant accéder à l’interface de Portainer sur <code><a href="https://localhost:9443" class="bare">https://localhost:9443</a></code>.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">8. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Votre environnement est maintenant prêt ! Vous disposez d’un JDK, de l’IDE le plus adapté, de Gradle et de JBake. Avec l’ajout de Docker, vous êtes également paré pour créer des builds conteneurisés et reproductibles. Cette base solide vous permettra de vous concentrer sur l’essentiel : le développement de plugins puissants et utiles.</p> </div> <div class="paragraph"> <p>Dans le prochain article, nous utiliserons la commande <code>gradle init</code> pour générer la structure de notre premier projet de plugin.</p> </div> </div> </div> https://pages-content.github.io//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="#_intégration_avec_poetry">Intégration avec Poetry</a> <ul class="sectlevel2"> <li><a href="#_installation_de_poetry">Installation de Poetry</a></li> <li><a href="#_initialisation_du_projet">Initialisation du projet</a></li> <li><a href="#_ajout_et_installation_de_dépendances">Ajout et installation de dépendances</a></li> <li><a href="#_publication_avec_poetry">Publication avec Poetry</a></li> </ul> </li> <li><a href="#_builds_reproductibles_avec_docker">Builds reproductibles avec Docker</a> <ul class="sectlevel2"> <li><a href="#_exemple_de_dockerfile">Exemple de Dockerfile</a></li> <li><a href="#_intégration_dans_github_actions">Intégration dans GitHub Actions</a></li> </ul> </li> <li><a href="#_publication_conditionnelle">Publication conditionnelle</a></li> <li><a href="#_automatisation_des_dépendances_avec_renovate_et_dependabot">Automatisation des dépendances avec Renovate et Dependabot</a> <ul class="sectlevel2"> <li><a href="#_dependabot">Dependabot</a></li> <li><a href="#_renovate">Renovate</a></li> </ul> </li> <li><a href="#_diagrammes_plantuml">Diagrammes PlantUML</a> <ul class="sectlevel2"> <li><a href="#_cas_dusage_cicd_avancé">Cas d’Usage – CI/CD avancé</a></li> <li><a href="#_séquence_publication_conditionnelle">Séquence – Publication conditionnelle</a></li> <li><a href="#_états_pipeline_cicd">États – Pipeline CI/CD</a></li> <li><a href="#_déploiement_architecture_cicd">Déploiement – Architecture CI/CD</a></li> </ul> </li> <li><a href="#_conclusion">Conclusion</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Dans les deux premières parties de cette série, nous avons : - Établi un pipeline CI/CD fonctionnel pour une application Python avec GitHub Actions et PyPI. - Industrialisé ce pipeline avec des tests multi-versions, une publication progressive via Test PyPI, et des outils de qualité et de sécurité.</p> </div> <div class="paragraph"> <p>Dans cette troisième partie, nous allons aller <strong>au-delà de la simple publication sur PyPI</strong> pour construire une chaîne de CI/CD complète, robuste et professionnelle avec : - <strong>Poetry</strong> pour un packaging moderne et une gestion optimisée des dépendances. - <strong>Docker</strong> pour créer des builds reproductibles et multi-plateformes. - <strong>Publication conditionnelle</strong> pour gérer des scénarios comme les release candidates. - <strong>Outils d’automatisation</strong> (Renovate, Dependabot) pour maintenir le pipeline à jour sans effort.</p> </div> </div> </div> <div class="sect1"> <h2 id="_intégration_avec_poetry">Intégration avec Poetry</h2> <div class="sectionbody"> <div class="paragraph"> <p>Poetry remplace les anciens outils de packaging (setup.py, requirements.txt) en centralisant la gestion des dépendances et du build dans <code>pyproject.toml</code>.</p> </div> <div class="sect2"> <h3 id="_installation_de_poetry">Installation de Poetry</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell"># Installer Poetry curl -sSL https://install.python-poetry.org | python3 - # Vérifier la version poetry --version</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_initialisation_du_projet">Initialisation du projet</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell"># Initialiser un nouveau projet avec Poetry poetry init # Suivre l'assistant pour renseigner : nom, version, description, licence, dépendances.</code></pre> </div> </div> <div class="paragraph"> <p>Cela génère un fichier <code>pyproject.toml</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="toml">[tool.poetry] name = "playlist-downloader" version = "0.1.0" description = "CLI tool for managing YouTube playlists" authors = ["Christophe Hérolivier <cheroliv@example.com>"] [tool.poetry.dependencies] python = ">=3.8" typer = "^0.9.0" yt-dlp = "^2023.7.6" google-api-python-client = "^2.0.0" google-auth-oauthlib = "^1.0.0" [tool.poetry.group.dev.dependencies] pytest = "^7.0" mypy = "^1.0" bandit = "^1.7" safety = "^2.3" black = "^23.0" ruff = "^0.1"</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_ajout_et_installation_de_dépendances">Ajout et installation de dépendances</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell">poetry add typer yt-dlp google-api-python-client google-auth-oauthlib poetry add --group dev pytest mypy black bandit safety ruff</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_publication_avec_poetry">Publication avec Poetry</h3> <div class="paragraph"> <p>Poetry gère nativement la publication :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell"># Publication sur Test PyPI poetry publish --build --repository test-pypi # Publication sur PyPI poetry publish --build</code></pre> </div> </div> <div class="paragraph"> <p>Cette commande utilise automatiquement les informations présentes dans <code>pyproject.toml</code>.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_builds_reproductibles_avec_docker">Builds reproductibles avec Docker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour assurer des exécutions identiques en développement, CI/CD et production, Docker s’intègre parfaitement avec Poetry.</p> </div> <div class="sect2"> <h3 id="_exemple_de_dockerfile">Exemple de Dockerfile</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="dockerfile">FROM python:3.11-slim WORKDIR /app COPY pyproject.toml poetry.lock ./ RUN pip install poetry RUN poetry install --no-root --only main COPY . . CMD ["poetry", "run", "python", "cli.py"]</code></pre> </div> </div> <div class="paragraph"> <p>Cela garantit : - Un environnement Python figé. - Des dépendances verrouillées via <code>poetry.lock</code>. - Une image exécutable sur tout système supportant Docker.</p> </div> </div> <div class="sect2"> <h3 id="_intégration_dans_github_actions">Intégration dans GitHub Actions</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">name: Docker Build on: push: branches: [main] jobs: build-docker: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Build Docker image run: docker build -t ghcr.io/${{ github.repository }}:latest . - name: Push Docker image run: docker push ghcr.io/${{ github.repository }}:latest</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_publication_conditionnelle">Publication conditionnelle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans un pipeline professionnel, il faut pouvoir publier uniquement dans certains cas : - Release candidates vers Test PyPI. - Versions stables vers PyPI. - Builds Docker déclenchés uniquement pour <code>main</code>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Publish to Test PyPI if: contains(github.ref, '-rc') run: poetry publish --build --repository test-pypi - name: Publish to PyPI if: startsWith(github.ref, 'refs/tags/v') run: poetry publish --build</code></pre> </div> </div> <div class="paragraph"> <p>Cette approche évite les publications accidentelles.</p> </div> </div> </div> <div class="sect1"> <h2 id="_automatisation_des_dépendances_avec_renovate_et_dependabot">Automatisation des dépendances avec Renovate et Dependabot</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour éviter que vos dépendances deviennent obsolètes, intégrez des outils de mise à jour automatique.</p> </div> <div class="sect2"> <h3 id="_dependabot">Dependabot</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">version: 2 updates: - package-ecosystem: "pip" directory: "/" schedule: interval: "weekly" - package-ecosystem: "github-actions" directory: "/" schedule: interval: "weekly"</code></pre> </div> </div> <div class="paragraph"> <p>Dependabot ouvre des PR chaque semaine pour mettre à jour les dépendances Python et GitHub Actions.</p> </div> </div> <div class="sect2"> <h3 id="_renovate">Renovate</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="json">{ "extends": ["config:base"], "packageRules": [ { "matchManagers": ["pip"], "groupName": "python-dependencies", "schedule": ["before 6am on monday"] } ] }</code></pre> </div> </div> <div class="paragraph"> <p>Renovate permet un contrôle plus fin : regroupement de dépendances, planification, et règles avancées.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagrammes_plantuml">Diagrammes PlantUML</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_cas_dusage_cicd_avancé">Cas d’Usage – CI/CD avancé</h3> <div class="imageblock"> <div class="content"> <img src="images/usecase-cicd.svg" alt="usecase cicd" width="819" height="317"> </div> </div> </div> <div class="sect2"> <h3 id="_séquence_publication_conditionnelle">Séquence – Publication conditionnelle</h3> <div class="imageblock"> <div class="content"> <img src="images/sequence-cicd.svg" alt="sequence cicd" width="275" height="571"> </div> </div> </div> <div class="sect2"> <h3 id="_états_pipeline_cicd">États – Pipeline CI/CD</h3> <div class="imageblock"> <div class="content"> <img src="images/states-cicd.svg" alt="states cicd" width="284" height="608"> </div> </div> </div> <div class="sect2"> <h3 id="_déploiement_architecture_cicd">Déploiement – Architecture CI/CD</h3> <div class="imageblock"> <div class="content"> <img src="images/deployment-cicd.svg" alt="deployment cicd" width="535" height="288"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans cette troisième partie, nous avons vu comment : - Moderniser le packaging Python avec Poetry. - Garantir des builds reproductibles via Docker. - Mettre en place une publication conditionnelle. - Automatiser la mise à jour des dépendances.</p> </div> <div class="paragraph"> <p>Vous disposez désormais d’un pipeline CI/CD <strong>complet, industrialisé et sécurisé</strong>, prêt à évoluer avec vos projets.</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_architecture_du_pipeline_cicd">2. Architecture du Pipeline CI/CD</a></li> <li><a href="#_structure_du_projet">3. Structure du Projet</a></li> <li><a href="#_configuration_du_package_avec_pyproject_toml">4. Configuration du Package avec pyproject.toml</a></li> <li><a href="#_workflow_de_cicd_tests_et_qualité">5. Workflow de CI/CD - Tests et Qualité</a></li> <li><a href="#_workflow_de_release_et_déploiement">6. Workflow de Release et Déploiement</a></li> <li><a href="#_diagrammes_darchitecture">7. Diagrammes d’Architecture</a> <ul class="sectlevel2"> <li><a href="#_diagramme_de_séquence_processus_de_release">7.1. Diagramme de Séquence - Processus de Release</a></li> <li><a href="#_diagramme_détats_cycle_de_vie_du_package">7.2. Diagramme d’États - Cycle de Vie du Package</a></li> <li><a href="#_diagramme_de_déploiement_infrastructure_cicd">7.3. Diagramme de Déploiement - Infrastructure CI/CD</a></li> </ul> </li> <li><a href="#_objets_et_modèles_du_pipeline">8. Objets et Modèles du Pipeline</a> <ul class="sectlevel2"> <li><a href="#_diagramme_de_classes_modèles_cicd">8.1. Diagramme de Classes - Modèles CI/CD</a></li> </ul> </li> <li><a href="#_configuration_des_secrets">9. Configuration des Secrets</a> <ul class="sectlevel2"> <li><a href="#_secrets_github_actions">9.1. Secrets GitHub Actions</a></li> <li><a href="#_génération_des_tokens_pypi">9.2. Génération des Tokens PyPI</a></li> </ul> </li> <li><a href="#_scripts_de_développement_local">10. Scripts de Développement Local</a> <ul class="sectlevel2"> <li><a href="#_makefile">10.1. Makefile</a></li> <li><a href="#_script_de_version">10.2. Script de Version</a></li> </ul> </li> <li><a href="#_bonnes_pratiques_et_recommandations">11. Bonnes Pratiques et Recommandations</a> <ul class="sectlevel2"> <li><a href="#_versioning_sémantique">11.1. Versioning Sémantique</a></li> <li><a href="#_stratégie_de_branching">11.2. Stratégie de Branching</a></li> <li><a href="#_tests_et_couverture">11.3. Tests et Couverture</a></li> <li><a href="#_sécurité">11.4. Sécurité</a></li> </ul> </li> <li><a href="#_monitoring_et_observabilité">12. Monitoring et Observabilité</a> <ul class="sectlevel2"> <li><a href="#_métriques_de_pipeline">12.1. Métriques de Pipeline</a></li> <li><a href="#_notifications">12.2. Notifications</a></li> </ul> </li> <li><a href="#_conclusion">13. Conclusion</a></li> <li><a href="#_ressources_complémentaires">14. Ressources Complémentaires</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Objectif :</div> <p>Transformer un pipeline simple en pipeline industriel robuste, respectant les standards modernes du packaging et de l’ingénierie logicielle.</p> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans la première partie de cette série, nous avons construit un pipeline CI/CD simple mais efficace pour automatiser les tests et la publication d’un package Python sur PyPI.</p> </div> <div class="paragraph"> <p>Il est maintenant temps de professionnaliser ce pipeline. Dans cette seconde partie, nous allons :</p> </div> <div class="ulist"> <ul> <li> <p>Migrer vers le standard moderne pyproject.toml,</p> </li> <li> <p>Ajouter des outils de qualité et de sécurité (Black, Mypy, Bandit, Safety),</p> </li> <li> <p>Mettre en place des tests multi-versions,</p> </li> <li> <p>Intégrer un déploiement progressif via Test PyPI,</p> </li> <li> <p>Automatiser le versioning et améliorer la surveillance du pipeline.</p> </li> </ul> </div> <div class="paragraph"> <p>Préparez-vous à passer d’un pipeline fonctionnel à une infrastructure CI/CD professionnelle.</p> </div> <div class="paragraph"> <p>Déployer une application Python sur PyPI nécessite un pipeline CI/CD robuste qui automatise les tests, la construction et la publication des packages. Cet article détaille la mise en place d’un pipeline complet utilisant GitHub Actions pour une application CLI Python, en s’appuyant sur les bonnes pratiques de l’écosystème Python moderne.</p> </div> </div> </div> <div class="sect1"> <h2 id="_architecture_du_pipeline_cicd">2. Architecture du Pipeline CI/CD</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le pipeline que nous allons construire suit une approche en plusieurs étapes :</p> </div> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-7c661f88b9476d6adca6ed0f09d1f513.png" alt="Diagram" width="865" height="604"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_structure_du_projet">3. Structure du Projet</h2> <div class="sectionbody"> <div class="paragraph"> <p>Une application CLI Python prête pour la distribution doit respecter une structure standardisée :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="text">playlist-downloader/ ├── .github/ │ └── workflows/ │ ├── ci.yml │ ├── release.yml │ └── security.yml ├── src/ │ └── playlist_downloader/ │ ├── __init__.py │ ├── cli.py │ ├── core/ │ └── adapters/ ├── tests/ │ ├── unit/ │ ├── integration/ │ └── conftest.py ├── docs/ ├── pyproject.toml ├── requirements.txt ├── requirements-dev.txt ├── MANIFEST.in ├── README.md ├── LICENSE └── CHANGELOG.md</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_configuration_du_package_avec_pyproject_toml">4. Configuration du Package avec pyproject.toml</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le fichier <code>pyproject.toml</code> est le standard moderne pour configurer les packages Python :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="toml">[build-system] requires = ["setuptools>=45", "wheel", "setuptools_scm>=6.2"] build-backend = "setuptools.build_meta" [project] name = "playlist-downloader" authors = [ {name = "Christophe Hérolivier", email = "cheroliv@example.com"}, ] description = "CLI tool for YouTube playlist management" readme = "README.md" requires-python = ">=3.8" keywords = ["youtube", "playlist", "cli", "downloader"] license = {text = "MIT"} classifiers = [ "Development Status :: 4 - Beta", "Environment :: Console", "Intended Audience :: End Users/Desktop", "License :: OSI Approved :: MIT License", "Operating System :: OS Independent", "Programming Language :: Python :: 3", "Programming Language :: Python :: 3.8", "Programming Language :: Python :: 3.9", "Programming Language :: Python :: 3.10", "Programming Language :: Python :: 3.11", "Topic :: Multimedia :: Sound/Audio", "Topic :: Utilities", ] dependencies = [ "typer>=0.9.0", "yt-dlp>=2023.7.6", "google-api-python-client>=2.0.0", "google-auth-oauthlib>=1.0.0", "pyyaml>=6.0", "rich>=13.0.0", ] dynamic = ["version"] [project.optional-dependencies] dev = [ "pytest>=7.0.0", "pytest-cov>=4.0.0", "pytest-mock>=3.10.0", "black>=23.0.0", "flake8>=6.0.0", "mypy>=1.0.0", "pre-commit>=3.0.0", "tox>=4.0.0", ] test = [ "pytest>=7.0.0", "pytest-cov>=4.0.0", "pytest-mock>=3.10.0", ] [project.urls] Homepage = "https://github.com/cheroliv/playlist-downloader" Documentation = "https://github.com/cheroliv/playlist-downloader#readme" Repository = "https://github.com/cheroliv/playlist-downloader.git" "Bug Tracker" = "https://github.com/cheroliv/playlist-downloader/issues" [project.scripts] playlist-downloader = "playlist_downloader.cli:main" [tool.setuptools_scm] write_to = "src/playlist_downloader/_version.py" [tool.setuptools.packages.find] where = ["src"] [tool.pytest.ini_options] testpaths = ["tests"] python_files = ["test_*.py"] python_classes = ["Test*"] python_functions = ["test_*"] addopts = [ "--cov=src/playlist_downloader", "--cov-report=html", "--cov-report=term-missing", "--cov-fail-under=85", ] [tool.black] line-length = 88 target-version = ['py38'] include = '\.pyi?$' extend-exclude = ''' /( \.eggs | \.git | \.hg | \.mypy_cache | \.tox | \.venv | _build | buck-out | build | dist )/ ''' [tool.mypy] python_version = "3.8" warn_return_any = true warn_unused_configs = true disallow_untyped_defs = true disallow_incomplete_defs = true check_untyped_defs = true disallow_untyped_decorators = true no_implicit_optional = true warn_redundant_casts = true warn_unused_ignores = true warn_no_return = true warn_unreachable = true strict_equality = true [[tool.mypy.overrides]] module = [ "yt_dlp.*", "googleapiclient.*", "google_auth_oauthlib.*", ] ignore_missing_imports = true</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workflow_de_cicd_tests_et_qualité">5. Workflow de CI/CD - Tests et Qualité</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le workflow principal (<code>ci.yml</code>) exécute les tests sur plusieurs versions de Python :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">name: CI on: push: branches: [ main, develop ] pull_request: branches: [ main ] jobs: test: runs-on: ubuntu-latest strategy: matrix: python-version: ["3.8", "3.9", "3.10", "3.11"] steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Set up Python ${{ matrix.python-version }} uses: actions/setup-python@v4 with: python-version: ${{ matrix.python-version }} - name: Cache dependencies uses: actions/cache@v3 with: path: | ~/.cache/pip ~/.cache/pre-commit key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements*.txt') }} restore-keys: | ${{ runner.os }}-pip- - name: Install dependencies run: | python -m pip install --upgrade pip pip install -e ".[dev]" - name: Lint with flake8 run: | flake8 src tests --count --select=E9,F63,F7,F82 --show-source --statistics flake8 src tests --count --exit-zero --max-complexity=10 --max-line-length=88 --statistics - name: Check code formatting with Black run: black --check src tests - name: Type checking with mypy run: mypy src - name: Run tests with pytest run: | pytest tests/ -v --cov=src/playlist_downloader \ --cov-report=xml --cov-report=term-missing - name: Upload coverage to Codecov uses: codecov/codecov-action@v3 if: matrix.python-version == '3.11' with: file: ./coverage.xml flags: unittests name: codecov-umbrella security: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v4 with: python-version: "3.11" - name: Install dependencies run: | python -m pip install --upgrade pip pip install bandit[toml] safety - name: Run security checks with bandit run: bandit -r src/ -f json -o bandit-report.json - name: Check dependencies with safety run: safety check --json --output safety-report.json - name: Upload security reports uses: actions/upload-artifact@v3 if: always() with: name: security-reports path: | bandit-report.json safety-report.json build: needs: [test, security] runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Set up Python uses: actions/setup-python@v4 with: python-version: "3.11" - name: Install build dependencies run: | python -m pip install --upgrade pip pip install build twine - name: Build package run: python -m build - name: Check package with twine run: twine check dist/* - name: Upload build artifacts uses: actions/upload-artifact@v3 with: name: dist path: dist/</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workflow_de_release_et_déploiement">6. Workflow de Release et Déploiement</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le workflow de release (<code>release.yml</code>) gère la publication automatique sur PyPI :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">name: Release on: push: tags: - 'v*.*.*' workflow_dispatch: inputs: environment: description: 'Deployment environment' required: true default: 'test' type: choice options: - test - production env: PYTHON_VERSION: "3.11" jobs: release: runs-on: ubuntu-latest environment: name: ${{ github.event.inputs.environment || (startsWith(github.ref, 'refs/tags/') && '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="_diagrammes_darchitecture">7. Diagrammes d’Architecture</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagramme_de_séquence_processus_de_release">7.1. Diagramme de Séquence - Processus de Release</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-8e5219ce8920793948bdafac8a3427ec.png" alt="Diagram" width="942" height="832"> </div> </div> </div> <div class="sect2"> <h3 id="_diagramme_détats_cycle_de_vie_du_package">7.2. Diagramme d’États - Cycle de Vie du Package</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-2d132096cb63b0042bccf620fc284f91.png" alt="Diagram" width="525" height="740"> </div> </div> </div> <div class="sect2"> <h3 id="_diagramme_de_déploiement_infrastructure_cicd">7.3. Diagramme de Déploiement - Infrastructure CI/CD</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-590851667decb6042a455cb888cc4200.png" alt="Diagram" width="682" height="604"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_objets_et_modèles_du_pipeline">8. Objets et Modèles du Pipeline</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagramme_de_classes_modèles_cicd">8.1. Diagramme de Classes - Modèles CI/CD</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-510e3cb608857126a0dcae824abe3148.png" alt="Diagram" width="814" height="635"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_configuration_des_secrets">9. Configuration des Secrets</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour que le pipeline fonctionne, vous devez configurer les secrets suivants dans GitHub :</p> </div> <div class="sect2"> <h3 id="_secrets_github_actions">9.1. Secrets GitHub Actions</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="bash"># Dans Settings > Secrets and variables > Actions # Token PyPI pour la production PYPI_API_TOKEN=pypi-... # Token Test PyPI pour les pré-releases TEST_PYPI_API_TOKEN=pypi-... # Token GitHub pour créer les releases GITHUB_TOKEN=(automatiquement fourni) # Token Codecov (optionnel) CODECOV_TOKEN=...</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_génération_des_tokens_pypi">9.2. Génération des Tokens PyPI</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="bash"># 1. Créer un compte sur PyPI et Test PyPI # 2. Aller dans Account Settings > API tokens # 3. Créer un token avec scope "Entire account" ou spécifique au projet # 4. Format du token : pypi-AgEIcHlwaS5vcmc...</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_scripts_de_développement_local">10. Scripts de Développement Local</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour faciliter le développement, créez des scripts utilitaires :</p> </div> <div class="sect2"> <h3 id="_makefile">10.1. Makefile</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="makefile">.PHONY: install test lint format security build clean release-test release-prod install: pip install -e ".[dev]" test: pytest tests/ -v --cov=src/playlist_downloader lint: flake8 src tests mypy src format: black src tests security: bandit -r src/ safety check build: python -m build twine check dist/* clean: rm -rf build/ dist/ *.egg-info/ find . -type d -name __pycache__ -delete find . -name "*.pyc" -delete release-test: clean build twine upload --repository testpypi dist/* release-prod: clean build twine upload dist/* pre-commit: format lint test security @echo "✅ Prêt pour commit"</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_script_de_version">10.2. Script de Version</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="python">#!/usr/bin/env python3 """Script pour gérer les versions du projet.""" import sys import subprocess from pathlib import Path def get_current_version(): """Récupère la version actuelle depuis git.""" try: result = subprocess.run( ["git", "describe", "--tags", "--abbrev=0"], capture_output=True, text=True, check=True ) return result.stdout.strip() except subprocess.CalledProcessError: return "0.0.0" def create_version_tag(version, message=None): """Crée un tag de version.""" if not version.startswith('v'): version = f'v{version}' tag_message = message or f"Release {version}" subprocess.run(["git", "tag", "-a", version, "-m", tag_message], check=True) print(f"✅ Tag {version} créé") # Push le tag subprocess.run(["git", "push", "origin", version], check=True) print(f"✅ Tag {version} poussé vers origin") if __name__ == "__main__": if len(sys.argv) < 2: current = get_current_version() print(f"Version actuelle: {current}") print("Usage: python version.py <new_version> [message]") sys.exit(1) new_version = sys.argv[1] message = sys.argv[2] if len(sys.argv) > 2 else None create_version_tag(new_version, message)</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_bonnes_pratiques_et_recommandations">11. Bonnes Pratiques et Recommandations</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_versioning_sémantique">11.1. Versioning Sémantique</h3> <div class="paragraph"> <p>Utilisez le versioning sémantique (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> : changements incompatibles</p> </li> <li> <p><code>MINOR</code> : nouvelles fonctionnalités compatibles</p> </li> <li> <p><code>PATCH</code> : corrections de bugs compatibles</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_stratégie_de_branching">11.2. Stratégie de Branching</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="text">main ──●──●──●──●──●────●── (releases stables) / / / develop ──●──●──●──●──●──●──●──●── (développement) / / / feature/xxx ●──●──●──●──●──/ (fonctionnalités)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_tests_et_couverture">11.3. Tests et Couverture</h3> <div class="ulist"> <ul> <li> <p>Couverture de code minimum : 85%</p> </li> <li> <p>Tests unitaires pour la logique métier</p> </li> <li> <p>Tests d’intégration pour les adapters</p> </li> <li> <p>Tests de bout en bout pour les CLI</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_sécurité">11.4. Sécurité</h3> <div class="ulist"> <ul> <li> <p>Scan automatique des dépendances (Safety)</p> </li> <li> <p>Analyse statique du code (Bandit)</p> </li> <li> <p>Secrets jamais dans le code</p> </li> <li> <p>Utilisation de tokens PyPI spécifiques</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_monitoring_et_observabilité">12. Monitoring et Observabilité</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_métriques_de_pipeline">12.1. Métriques de Pipeline</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml"># .github/workflows/metrics.yml name: Pipeline Metrics on: workflow_run: workflows: ["CI", "Release"] types: [completed] jobs: metrics: runs-on: ubuntu-latest steps: - name: Collect metrics run: | echo "Pipeline: ${{ github.event.workflow_run.name }}" echo "Status: ${{ github.event.workflow_run.conclusion }}" echo "Duration: ${{ github.event.workflow_run.updated_at - github.event.workflow_run.created_at }}" # Envoyer vers système de monitoring</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_notifications">12.2. Notifications</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml"># Ajout dans les workflows pour notifications - name: Notify on failure if: failure() uses: 8398a7/action-slack@v3 with: status: failure text: "❌ Pipeline failed for ${{ github.repository }}" env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">13. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce pipeline CI/CD complet pour Python offre :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Automatisation complète</strong> : de la validation du code à la publication</p> </li> <li> <p><strong>Sécurité</strong> : scans automatiques et gestion sécurisée des secrets</p> </li> <li> <p><strong>Qualité</strong> : tests multi-versions, linting et couverture de code</p> </li> <li> <p><strong>Fiabilité</strong> : déploiement progressif via Test PyPI</p> </li> <li> <p><strong>Traçabilité</strong> : artifacts, rapports et releases GitHub</p> </li> </ul> </div> <div class="paragraph"> <p>L’adoption de ces pratiques garantit un processus de livraison robuste et professionnel pour vos applications Python CLI, facilitant la maintenance et l’évolution de vos projets sur le long terme.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ressources_complémentaires">14. Ressources Complémentaires</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://packaging.python.org/">Python Packaging User Guide</a></p> </li> <li> <p><a href="https://docs.github.com/en/actions">GitHub Actions Documentation</a></p> </li> <li> <p><a href="https://pypi.org/help/">PyPI Help Documentation</a></p> </li> <li> <p><a href="https://semver.org/">Semantic Versioning Specification</a></p> </li> <li> <p><a href="https://keepachangelog.com/">Keep a Changelog</a></p> </li> </ul> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_architecture_du_pipeline">2. Architecture du Pipeline</a></li> <li><a href="#_configuration_du_pipeline_dintégration_continue_ci">3. Configuration du Pipeline d’Intégration Continue (CI)</a> <ul class="sectlevel2"> <li><a href="#_structure_du_workflow_ci">3.1. Structure du Workflow CI</a></li> <li><a href="#_analyse_des_étapes_ci">3.2. Analyse des Étapes CI</a> <ul class="sectlevel3"> <li><a href="#_1_déclencheurs_on">3.2.1. 1. Déclencheurs (<code>on</code>)</a></li> <li><a href="#_2_environnement_dexécution">3.2.2. 2. Environnement d’Exécution</a></li> <li><a href="#_3_checkout_du_code">3.2.3. 3. Checkout du Code</a></li> <li><a href="#_4_configuration_python">3.2.4. 4. Configuration Python</a></li> <li><a href="#_5_installation_des_dépendances">3.2.5. 5. Installation des Dépendances</a></li> <li><a href="#_6_linting_avec_ruff">3.2.6. 6. Linting avec Ruff</a></li> <li><a href="#_7_exécution_des_tests">3.2.7. 7. Exécution des Tests</a></li> </ul> </li> </ul> </li> <li><a href="#_configuration_du_pipeline_de_déploiement_cd">4. Configuration du Pipeline de Déploiement (CD)</a> <ul class="sectlevel2"> <li><a href="#_structure_du_workflow_cd">4.1. Structure du Workflow CD</a></li> <li><a href="#_analyse_des_étapes_cd">4.2. Analyse des Étapes CD</a> <ul class="sectlevel3"> <li><a href="#_1_déclencheur_release">4.2.1. 1. Déclencheur Release</a></li> <li><a href="#_2_installation_des_outils_de_build">4.2.2. 2. Installation des Outils de Build</a></li> <li><a href="#_3_configuration_de_lauthentification">4.2.3. 3. Configuration de l’Authentification</a></li> <li><a href="#_4_build_et_publication">4.2.4. 4. Build et Publication</a></li> </ul> </li> </ul> </li> <li><a href="#_configuration_du_package_python">5. Configuration du Package Python</a> <ul class="sectlevel2"> <li><a href="#_structure_du_setup_py">5.1. Structure du setup.py</a></li> <li><a href="#_points_clés_du_setup_py">5.2. Points Clés du setup.py</a></li> </ul> </li> <li><a href="#_sécurisation_avec_les_github_secrets">6. Sécurisation avec les GitHub Secrets</a> <ul class="sectlevel2"> <li><a href="#_configuration_du_token_pypi">6.1. Configuration du Token PyPI</a></li> </ul> </li> <li><a href="#_workflow_de_déploiement_complet">7. Workflow de Déploiement Complet</a> <ul class="sectlevel2"> <li><a href="#_séquence_de_déploiement">7.1. Séquence de Déploiement</a></li> <li><a href="#_états_du_pipeline">7.2. États du Pipeline</a></li> </ul> </li> <li><a href="#_bonnes_pratiques_et_optimisations">8. Bonnes Pratiques et Optimisations</a> <ul class="sectlevel2"> <li><a href="#_1_gestion_des_versions">8.1. 1. Gestion des Versions</a></li> <li><a href="#_2_tests_de_matrice">8.2. 2. Tests de Matrice</a></li> <li><a href="#_3_cache_des_dépendances">8.3. 3. Cache des Dépendances</a></li> <li><a href="#_4_environnements_de_déploiement">8.4. 4. Environnements de Déploiement</a></li> </ul> </li> <li><a href="#_cas_dusage_et_architecture">9. Cas d’Usage et Architecture</a> <ul class="sectlevel2"> <li><a href="#_diagramme_de_cas_dusage">9.1. Diagramme de Cas d’Usage</a></li> <li><a href="#_architecture_du_déploiement">9.2. Architecture du Déploiement</a></li> </ul> </li> <li><a href="#_surveillance_et_debugging">10. Surveillance et Debugging</a> <ul class="sectlevel2"> <li><a href="#_logs_et_monitoring">10.1. Logs et Monitoring</a></li> <li><a href="#_notifications">10.2. Notifications</a></li> </ul> </li> <li><a href="#_conclusion">11. Conclusion</a></li> <li><a href="#_ressources_complémentaires">12. Ressources Complémentaires</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Objectif :</div> <p>Accompagner le lecteur dans la mise en place d’un pipeline CI/CD minimaliste mais fonctionnel pour une application Python, avec un déploiement automatique sur PyPI.</p> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’automatisation des processus de développement est devenue incontournable dans les projets modernes. Un pipeline CI/CD bien conçu permet non seulement de détecter les régressions tôt dans le cycle de développement, mais aussi d’automatiser entièrement le processus de déploiement.</p> </div> <div class="paragraph"> <p>Dans cet article, nous allons explorer comment mettre en place un pipeline complet avec GitHub Actions pour une application Python, de l’intégration continue (CI) au déploiement continu (CD) sur PyPI.</p> </div> </div> </div> <div class="sect1"> <h2 id="_architecture_du_pipeline">2. Architecture du Pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p>Notre pipeline se compose de deux workflows distincts :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>CI Pipeline</strong> : Exécuté sur chaque push et pull request</p> </li> <li> <p><strong>CD Pipeline</strong> : Déclenché uniquement lors des releases GitHub</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="images/ci-cd-overview.svg" alt="ci cd overview" width="394" height="648"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_configuration_du_pipeline_dintégration_continue_ci">3. Configuration du Pipeline d’Intégration Continue (CI)</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_structure_du_workflow_ci">3.1. Structure du Workflow CI</h3> <div class="paragraph"> <p>Le workflow CI est conçu pour valider chaque contribution au code. Voici sa configuration complète :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">name: CI/CD Pipeline on: push: branches: - main pull_request: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.x' - name: Install dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt pip install ruff pytest pytest-mock - name: Run Linting (Ruff) run: ruff check . - name: Run Tests (Pytest) run: pytest</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_analyse_des_étapes_ci">3.2. Analyse des Étapes CI</h3> <div class="sect3"> <h4 id="_1_déclencheurs_on">3.2.1. 1. Déclencheurs (<code>on</code>)</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">on: push: branches: - main pull_request: branches: - main</code></pre> </div> </div> <div class="paragraph"> <p>Le pipeline se déclenche sur : - Chaque push sur la branche <code>main</code> - Chaque pull request vers <code>main</code></p> </div> <div class="paragraph"> <p>Cette approche garantit que le code principal reste stable et que toute contribution est validée avant intégration.</p> </div> </div> <div class="sect3"> <h4 id="_2_environnement_dexécution">3.2.2. 2. Environnement d’Exécution</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">runs-on: ubuntu-latest</code></pre> </div> </div> <div class="paragraph"> <p>Ubuntu Latest offre un bon compromis entre performance, coût et compatibilité pour la plupart des projets Python.</p> </div> </div> <div class="sect3"> <h4 id="_3_checkout_du_code">3.2.3. 3. Checkout du Code</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Checkout code uses: actions/checkout@v4</code></pre> </div> </div> <div class="paragraph"> <p>L’action <code>checkout@v4</code> récupère le code source du repository. La version v4 apporte des améliorations de performance et de sécurité.</p> </div> </div> <div class="sect3"> <h4 id="_4_configuration_python">3.2.4. 4. Configuration Python</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.x'</code></pre> </div> </div> <div class="paragraph"> <p>L’utilisation de <code>'3.x'</code> permet d’automatiquement utiliser la dernière version stable de Python 3, simplifiant la maintenance.</p> </div> </div> <div class="sect3"> <h4 id="_5_installation_des_dépendances">3.2.5. 5. Installation des Dépendances</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Install dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt pip install ruff pytest pytest-mock</code></pre> </div> </div> <div class="paragraph"> <p>Cette étape : - Met à jour pip vers la dernière version - Installe les dépendances du projet - Ajoute les outils de développement (linting et tests)</p> </div> </div> <div class="sect3"> <h4 id="_6_linting_avec_ruff">3.2.6. 6. Linting avec Ruff</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Run Linting (Ruff) run: ruff check .</code></pre> </div> </div> <div class="paragraph"> <p><strong>Ruff</strong> est un linter Python ultra-rapide écrit en Rust. Il combine les fonctionnalités de plusieurs outils (Flake8, Black, isort) en un seul outil performant.</p> </div> </div> <div class="sect3"> <h4 id="_7_exécution_des_tests">3.2.7. 7. Exécution des Tests</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Run Tests (Pytest) run: pytest</code></pre> </div> </div> <div class="paragraph"> <p>Pytest exécute l’ensemble de la suite de tests, garantissant que les modifications n’introduisent pas de régressions.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_configuration_du_pipeline_de_déploiement_cd">4. Configuration du Pipeline de Déploiement (CD)</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_structure_du_workflow_cd">4.1. Structure du Workflow CD</h3> <div class="paragraph"> <p>Le workflow CD se déclenche uniquement lors des releases GitHub et automatise la publication sur PyPI :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="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/*</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_analyse_des_étapes_cd">4.2. Analyse des Étapes CD</h3> <div class="sect3"> <h4 id="_1_déclencheur_release">4.2.1. 1. Déclencheur Release</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">on: release: types: - published</code></pre> </div> </div> <div class="paragraph"> <p>Le pipeline CD ne se déclenche que lors de la publication d’une release GitHub. Cette approche assure un contrôle précis des déploiements.</p> </div> </div> <div class="sect3"> <h4 id="_2_installation_des_outils_de_build">4.2.2. 2. Installation des Outils de Build</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">pip install setuptools wheel twine</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p><strong>setuptools</strong> : Outils de packaging Python</p> </li> <li> <p><strong>wheel</strong> : Format de distribution Python moderne</p> </li> <li> <p><strong>twine</strong> : Outil sécurisé pour uploader vers PyPI</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_3_configuration_de_lauthentification">4.2.3. 3. Configuration de l’Authentification</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }}</code></pre> </div> </div> <div class="paragraph"> <p>L’authentification utilise un token API PyPI stocké comme secret GitHub, plus sécurisé que les identifiants classiques.</p> </div> </div> <div class="sect3"> <h4 id="_4_build_et_publication">4.2.4. 4. Build et Publication</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">run: | python setup.py sdist bdist_wheel twine upload dist/*</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p><code>sdist</code> : Crée une distribution source</p> </li> <li> <p><code>bdist_wheel</code> : Crée une wheel (distribution binaire)</p> </li> <li> <p><code>twine upload</code> : Publie les distributions sur PyPI</p> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_configuration_du_package_python">5. Configuration du Package Python</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_structure_du_setup_py">5.1. Structure du setup.py</h3> <div class="paragraph"> <p>Pour que le pipeline fonctionne, votre projet doit inclure un fichier <code>setup.py</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="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", ], }, )</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_points_clés_du_setup_py">5.2. Points Clés du setup.py</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Métadonnées</strong> : Nom, version, auteur, description</p> </li> <li> <p><strong>Dépendances</strong> : Liste des packages requis</p> </li> <li> <p><strong>Entry Points</strong> : Commandes CLI exposées</p> </li> <li> <p><strong>Classifiers</strong> : Métadonnées pour PyPI</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_sécurisation_avec_les_github_secrets">6. Sécurisation avec les GitHub Secrets</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_configuration_du_token_pypi">6.1. Configuration du Token PyPI</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Créer un token API sur PyPI</strong> :</p> <div class="ulist"> <ul> <li> <p>Connectez-vous à PyPI</p> </li> <li> <p>Allez dans Account Settings > API tokens</p> </li> <li> <p>Créez un nouveau token avec les permissions appropriées</p> </li> </ul> </div> </li> <li> <p><strong>Ajouter le secret dans GitHub</strong> :</p> <div class="ulist"> <ul> <li> <p>Repository Settings > Secrets and variables > Actions</p> </li> <li> <p>Créez un nouveau secret nommé <code>PYPI_API_TOKEN</code></p> </li> <li> <p>Collez votre token PyPI</p> </li> </ul> </div> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="images/secrets-flow.svg" alt="secrets flow" width="899" height="405"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workflow_de_déploiement_complet">7. Workflow de Déploiement Complet</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_séquence_de_déploiement">7.1. Séquence de Déploiement</h3> <div class="imageblock"> <div class="content"> <img src="images/deployment-sequence.svg" alt="deployment sequence" width="961" height="648"> </div> </div> </div> <div class="sect2"> <h3 id="_états_du_pipeline">7.2. États du Pipeline</h3> <div class="imageblock"> <div class="content"> <img src="images/pipeline-states.svg" alt="pipeline states" width="962" height="346"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_bonnes_pratiques_et_optimisations">8. Bonnes Pratiques et Optimisations</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_1_gestion_des_versions">8.1. 1. Gestion des Versions</h3> <div class="paragraph"> <p>Utilisez des tags Git sémantiques :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="bash">git tag -a v1.2.3 -m "Release version 1.2.3" git push origin v1.2.3</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_2_tests_de_matrice">8.2. 2. Tests de Matrice</h3> <div class="paragraph"> <p>Pour tester sur plusieurs versions Python :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">strategy: matrix: python-version: [3.8, 3.9, "3.10", "3.11"]</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_3_cache_des_dépendances">8.3. 3. Cache des Dépendances</h3> <div class="paragraph"> <p>Accélérez les builds avec le cache :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Cache pip dependencies uses: actions/cache@v3 with: path: ~/.cache/pip key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_4_environnements_de_déploiement">8.4. 4. Environnements de Déploiement</h3> <div class="paragraph"> <p>Utilisez les environnements GitHub pour des déploiements contrôlés :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">jobs: deploy: environment: production runs-on: ubuntu-latest</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_cas_dusage_et_architecture">9. Cas d’Usage et Architecture</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagramme_de_cas_dusage">9.1. Diagramme de Cas d’Usage</h3> <div class="imageblock"> <div class="content"> <img src="images/use-cases.svg" alt="use cases" width="449" height="370"> </div> </div> </div> <div class="sect2"> <h3 id="_architecture_du_déploiement">9.2. Architecture du Déploiement</h3> <div class="imageblock"> <div class="content"> <img src="images/deployment-architecture.svg" alt="deployment architecture" width="650" height="700"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_surveillance_et_debugging">10. Surveillance et Debugging</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_logs_et_monitoring">10.1. Logs et Monitoring</h3> <div class="paragraph"> <p>GitHub Actions fournit des logs détaillés pour chaque étape. Pour débugger :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Examinez les logs</strong> de chaque step</p> </li> <li> <p><strong>Activez le debug</strong> avec <code>ACTIONS_STEP_DEBUG</code></p> </li> <li> <p><strong>Utilisez des artifacts</strong> pour sauvegarder les fichiers de build</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Upload build artifacts uses: actions/upload-artifact@v3 if: failure() with: name: build-logs path: build/</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_notifications">10.2. Notifications</h3> <div class="paragraph"> <p>Ajoutez des notifications Slack ou email :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">- name: Notify on failure if: failure() uses: 8398a7/action-slack@v3 with: status: ${{ job.status }} webhook_url: ${{ secrets.SLACK_WEBHOOK }}</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">11. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>La mise en place d’un pipeline CI/CD robuste avec GitHub Actions transforme radicalement l’expérience de développement. En automatisant le linting, les tests et le déploiement, vous :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Réduisez les erreurs</strong> en production</p> </li> <li> <p><strong>Accélérez les cycles</strong> de développement</p> </li> <li> <p><strong>Améliorez la confiance</strong> dans vos releases</p> </li> <li> <p><strong>Facilitez la collaboration</strong> en équipe</p> </li> </ul> </div> <div class="paragraph"> <p>Ce pipeline peut être adapté à différents types de projets Python en ajustant les outils de linting, les frameworks de test, ou les destinations de déploiement.</p> </div> <div class="paragraph"> <p>L’investissement initial dans la configuration de ces workflows est rapidement rentabilisé par le gain de temps et la réduction des erreurs manuelles lors des déploiements.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ressources_complémentaires">12. Ressources Complémentaires</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.github.com/en/actions">Documentation GitHub Actions</a></p> </li> <li> <p><a href="https://packaging.python.org/">Python Packaging Guide</a></p> </li> <li> <p><a href="https://docs.pytest.org/">Documentation Pytest</a></p> </li> <li> <p><a href="https://docs.astral.sh/ruff/">Documentation Ruff</a></p> </li> <li> <p><a href="https://twine.readthedocs.io/">Documentation Twine</a></p> </li> </ul> </div> <div class="paragraph"> <p>✅ Pipeline fonctionnel atteint ! Vous avez désormais un pipeline CI/CD simple qui vous permet d’automatiser vos tests et de publier votre package Python sur PyPI directement depuis GitHub Actions.</p> </div> <div class="paragraph"> <p>Cependant, ce pipeline reste volontairement minimaliste. Il ne couvre pas encore certains aspects indispensables dans un contexte professionnel :</p> </div> <div class="literalblock"> <div class="content"> <pre>Tests multi-versions de Python,</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>Analyse de sécurité automatique,</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>Déploiement progressif via Test PyPI,</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>Surveillance et métriques du pipeline,</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>Automatisation du versioning et intégration des bonnes pratiques modernes (pyproject.toml).</pre> </div> </div> <div class="paragraph"> <p>Dans la prochaine partie, nous allons passer à l’étape supérieure. Vous apprendrez à transformer ce pipeline de base en une véritable chaîne de déploiement industrielle, robuste et sécurisée, prête pour des projets Python de production.</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_contexte_et_défis_actuels">2. Contexte et Défis Actuels</a> <ul class="sectlevel2"> <li><a href="#_évolution_des_apis_musicales">2.1. Évolution des APIs Musicales</a></li> <li><a href="#_approche_log_driven_development">2.2. Approche Log Driven Development</a></li> </ul> </li> <li><a href="#_architecture_conceptuelle">3. Architecture Conceptuelle</a></li> <li><a href="#_stack_technique_et_paradigme_fonctionnel">4. Stack Technique et Paradigme Fonctionnel</a> <ul class="sectlevel2"> <li><a href="#_choix_technologiques">4.1. Choix Technologiques</a></li> <li><a href="#_principes_fonctionnels_appliqués">4.2. Principes Fonctionnels Appliqués</a></li> </ul> </li> <li><a href="#_méthodologie_agile_et_backlog">5. Méthodologie Agile et Backlog</a> <ul class="sectlevel2"> <li><a href="#_epic_principales">5.1. Epic Principales</a> <ul class="sectlevel3"> <li><a href="#_epic_1_infrastructure_bot_discord">5.1.1. Epic 1 : Infrastructure Bot Discord</a></li> <li><a href="#_epic_2_intégration_spotify">5.1.2. Epic 2 : Intégration Spotify</a></li> <li><a href="#_epic_3_intégration_youtube">5.1.3. Epic 3 : Intégration YouTube</a></li> <li><a href="#_epic_4_fonctionnalités_musicales">5.1.4. Epic 4 : Fonctionnalités Musicales</a></li> </ul> </li> <li><a href="#_user_stories_détaillées">5.2. User Stories Détaillées</a> <ul class="sectlevel3"> <li><a href="#_us1_1_initialisation_du_bot">5.2.1. US1.1 : Initialisation du Bot</a></li> <li><a href="#_us2_1_recherche_spotify_intelligente">5.2.2. US2.1 : Recherche Spotify Intelligente</a></li> <li><a href="#_us3_1_extraction_youtube_resiliente">5.2.3. US3.1 : Extraction YouTube Resiliente</a></li> </ul> </li> </ul> </li> <li><a href="#_approche_log_driven_development_2">6. Approche Log Driven Development</a> <ul class="sectlevel2"> <li><a href="#_stratégie_de_logging">6.1. Stratégie de Logging</a></li> <li><a href="#_structure_des_logs">6.2. Structure des Logs</a></li> <li><a href="#_exemple_de_log_design">6.3. Exemple de Log Design</a></li> </ul> </li> <li><a href="#_architecture_de_validation_avec_pydantic">7. Architecture de Validation avec Pydantic</a> <ul class="sectlevel2"> <li><a href="#_modèles_de_données">7.1. Modèles de Données</a></li> </ul> </li> <li><a href="#_gestion_des_erreurs_fonctionnelle">8. Gestion des Erreurs Fonctionnelle</a> <ul class="sectlevel2"> <li><a href="#_monades_et_error_handling">8.1. Monades et Error Handling</a></li> </ul> </li> <li><a href="#_stratégie_de_contournement_des_restrictions">9. Stratégie de Contournement des Restrictions</a> <ul class="sectlevel2"> <li><a href="#_approche_multi_source">9.1. Approche Multi-Source</a></li> </ul> </li> <li><a href="#_plan_de_développement_itératif">10. Plan de Développement Itératif</a> <ul class="sectlevel2"> <li><a href="#_sprint_planning">10.1. Sprint Planning</a></li> <li><a href="#_métriques_de_qualité">10.2. Métriques de Qualité</a></li> </ul> </li> <li><a href="#_déploiement_et_monitoring">11. Déploiement et Monitoring</a> <ul class="sectlevel2"> <li><a href="#_architecture_de_production">11.1. Architecture de Production</a></li> <li><a href="#_monitoring_proactif">11.2. Monitoring Proactif</a></li> </ul> </li> <li><a href="#_conclusion_et_perspectives">12. Conclusion et Perspectives</a> <ul class="sectlevel2"> <li><a href="#_prochaines_étapes">12.1. Prochaines Étapes</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_introduction"><a class="anchor" href="#_introduction"></a>1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le développement d’un bot Discord intégrant les APIs Spotify et YouTube représente un défi technique moderne, notamment face aux récentes restrictions et évolutions des plateformes. Cet article présente une approche méthodologique basée sur le <strong>Log Driven Development</strong> (LDD), une extension du Test Driven Development, appliquée dans un paradigme fonctionnel avec Python.</p> </div> <div class="paragraph"> <p>Notre objectif : créer un bot robuste, maintenable et évolutif, capable de naviguer les contraintes actuelles des APIs musicales tout en offrant une expérience utilisateur fluide sur Discord.</p> </div> </div> </div> <div class="sect1"> <h2 id="_contexte_et_défis_actuels"><a class="anchor" href="#_contexte_et_défis_actuels"></a>2. Contexte et Défis Actuels</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_évolution_des_apis_musicales"><a class="anchor" href="#_évolution_des_apis_musicales"></a>2.1. Évolution des APIs Musicales</h3> <div class="paragraph"> <p>Les plateformes musicales ont considérablement durci leurs politiques d’accès :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Spotify</strong> : Restrictions sur l’accès aux métadonnées, limitation des quotas</p> </li> <li> <p><strong>YouTube</strong> : Politique anti-bot renforcée, complexification de l’authentification</p> </li> <li> <p><strong>Discord</strong> : Nouvelles exigences de sécurité et de performance</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_approche_log_driven_development"><a class="anchor" href="#_approche_log_driven_development"></a>2.2. Approche Log Driven Development</h3> <div class="paragraph"> <p>Le LDD étend le TDD en plaçant les logs au cœur du développement :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Définition des logs</strong> avant l’implémentation</p> </li> <li> <p><strong>Validation par observation</strong> des comportements attendus</p> </li> <li> <p><strong>Traçabilité complète</strong> des flux de données</p> </li> <li> <p><strong>Debugging proactif</strong> par anticipation des erreurs</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_architecture_conceptuelle"><a class="anchor" href="#_architecture_conceptuelle"></a>3. Architecture Conceptuelle</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-086b9caf633e5b3a704d7962a864373a.png" alt="Diagram" width="777" height="618"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_stack_technique_et_paradigme_fonctionnel"><a class="anchor" href="#_stack_technique_et_paradigme_fonctionnel"></a>4. Stack Technique et Paradigme Fonctionnel</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_choix_technologiques"><a class="anchor" href="#_choix_technologiques"></a>4.1. Choix Technologiques</h3> <div class="paragraph"> <p>Notre stack s’articule autour de la programmation fonctionnelle :</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>PyMonade</strong> </dt> <dd> <p>Gestion des effets de bord et composition de fonctions</p> </dd> <dt class="hdlist1"><strong>Pydantic</strong> </dt> <dd> <p>Validation de données type-safe et sérialisation</p> </dd> <dt class="hdlist1"><strong>Asyncio</strong> </dt> <dd> <p>Programmation asynchrone pour les APIs</p> </dd> <dt class="hdlist1"><strong>Structlog</strong> </dt> <dd> <p>Logging structuré pour le LDD</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_principes_fonctionnels_appliqués"><a class="anchor" href="#_principes_fonctionnels_appliqués"></a>4.2. Principes Fonctionnels Appliqués</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-430159f75aabab4ced1766bbd98cc2d0.png" alt="Diagram" width="701" height="554"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_méthodologie_agile_et_backlog"><a class="anchor" href="#_méthodologie_agile_et_backlog"></a>5. Méthodologie Agile et Backlog</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_epic_principales"><a class="anchor" href="#_epic_principales"></a>5.1. Epic Principales</h3> <div class="paragraph"> <p>Notre développement s’organise autour de 4 épics majeures :</p> </div> <div class="sect3"> <h4 id="_epic_1_infrastructure_bot_discord"><a class="anchor" href="#_epic_1_infrastructure_bot_discord"></a>5.1.1. Epic 1 : Infrastructure Bot Discord</h4> <div class="paragraph"> <p><strong>Valeur métier</strong> : Base solide et extensible</p> </div> <div class="paragraph"> <p><strong>Critères d’acceptation</strong> : - Connexion Discord stable avec gestion de reconnexion - Système de commandes modulaire - Logging structuré intégré - Gestion d’erreurs centralisée</p> </div> </div> <div class="sect3"> <h4 id="_epic_2_intégration_spotify"><a class="anchor" href="#_epic_2_intégration_spotify"></a>5.1.2. Epic 2 : Intégration Spotify</h4> <div class="paragraph"> <p><strong>Valeur métier</strong> : Accès aux métadonnées musicales</p> </div> <div class="paragraph"> <p><strong>Critères d’acceptation</strong> : - Authentification OAuth2 sécurisée - Recherche de tracks avec cache intelligent - Gestion des quotas API - Fallback sur erreurs réseau</p> </div> </div> <div class="sect3"> <h4 id="_epic_3_intégration_youtube"><a class="anchor" href="#_epic_3_intégration_youtube"></a>5.1.3. Epic 3 : Intégration YouTube</h4> <div class="paragraph"> <p><strong>Valeur métier</strong> : Accès au contenu audio</p> </div> <div class="paragraph"> <p><strong>Critères d’acceptation</strong> : - Contournement légal des restrictions - Extraction audio optimisée - Gestion des vidéos privées/supprimées - Respect des ToS YouTube</p> </div> </div> <div class="sect3"> <h4 id="_epic_4_fonctionnalités_musicales"><a class="anchor" href="#_epic_4_fonctionnalités_musicales"></a>5.1.4. Epic 4 : Fonctionnalités Musicales</h4> <div class="paragraph"> <p><strong>Valeur métier</strong> : Expérience utilisateur complète</p> </div> <div class="paragraph"> <p><strong>Critères d’acceptation</strong> : - Lecture audio haute qualité - Queue de lecture intelligente - Commandes vocales Discord - Synchronisation cross-platform</p> </div> </div> </div> <div class="sect2"> <h3 id="_user_stories_détaillées"><a class="anchor" href="#_user_stories_détaillées"></a>5.2. User Stories Détaillées</h3> <div class="sect3"> <h4 id="_us1_1_initialisation_du_bot"><a class="anchor" href="#_us1_1_initialisation_du_bot"></a>5.2.1. US1.1 : Initialisation du Bot</h4> <div class="paragraph"> <p><strong>En tant que</strong> développeur <strong>Je veux</strong> un bot Discord qui se connecte de manière fiable <strong>Afin de</strong> garantir la disponibilité du service</p> </div> <div class="paragraph"> <p><strong>DoD (Definition of Done)</strong> : - [ ] Bot se connecte automatiquement au démarrage - [ ] Logs structurés documentent chaque étape - [ ] Reconnexion automatique en cas de déconnexion - [ ] Tests d’intégration passent</p> </div> </div> <div class="sect3"> <h4 id="_us2_1_recherche_spotify_intelligente"><a class="anchor" href="#_us2_1_recherche_spotify_intelligente"></a>5.2.2. US2.1 : Recherche Spotify Intelligente</h4> <div class="paragraph"> <p><strong>En tant qu'</strong> utilisateur Discord <strong>Je veux</strong> rechercher des morceaux via Spotify <strong>Afin de</strong> découvrir et partager de la musique</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] Commande <code>/search</code> fonctionnelle - [ ] Résultats pertinents avec métadonnées - [ ] Cache local pour optimiser les requêtes - [ ] Gestion gracieuse des erreurs API</p> </div> </div> <div class="sect3"> <h4 id="_us3_1_extraction_youtube_resiliente"><a class="anchor" href="#_us3_1_extraction_youtube_resiliente"></a>5.2.3. US3.1 : Extraction YouTube Resiliente</h4> <div class="paragraph"> <p><strong>En tant que</strong> système <strong>Je veux</strong> extraire l’audio YouTube de manière fiable <strong>Afin de</strong> maintenir la continuité du service</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] Extraction sans violation des ToS - [ ] Qualité audio optimale - [ ] Gestion des restrictions géographiques - [ ] Logs détaillés des opérations</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_approche_log_driven_development_2"><a class="anchor" href="#_approche_log_driven_development_2"></a>6. Approche Log Driven Development</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_stratégie_de_logging"><a class="anchor" href="#_stratégie_de_logging"></a>6.1. Stratégie de Logging</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-79d957417244512294c169ebb2d6b88a.png" alt="Diagram" width="687" height="633"> </div> </div> </div> <div class="sect2"> <h3 id="_structure_des_logs"><a class="anchor" href="#_structure_des_logs"></a>6.2. Structure des Logs</h3> <div class="paragraph"> <p>Notre approche LDD utilise des logs structurés avec des niveaux sémantiques :</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>TRACE</strong> </dt> <dd> <p>Flux de données détaillé</p> </dd> <dt class="hdlist1"><strong>DEBUG</strong> </dt> <dd> <p>États internes des fonctions</p> </dd> <dt class="hdlist1"><strong>INFO</strong> </dt> <dd> <p>Opérations métier réussies</p> </dd> <dt class="hdlist1"><strong>WARN</strong> </dt> <dd> <p>Situations dégradées mais gérées</p> </dd> <dt class="hdlist1"><strong>ERROR</strong> </dt> <dd> <p>Erreurs nécessitant intervention</p> </dd> <dt class="hdlist1"><strong>CRITICAL</strong> </dt> <dd> <p>Pannes système</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_exemple_de_log_design"><a class="anchor" href="#_exemple_de_log_design"></a>6.3. Exemple de Log Design</h3> <div class="paragraph"> <p>Avant d’implémenter la fonction de recherche Spotify, nous définissons ses logs :</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="_architecture_de_validation_avec_pydantic"><a class="anchor" href="#_architecture_de_validation_avec_pydantic"></a>7. Architecture de Validation avec Pydantic</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_modèles_de_données"><a class="anchor" href="#_modèles_de_données"></a>7.1. Modèles de Données</h3> <div class="paragraph"> <p>Notre approche fonctionnelle privilégie la validation en amont :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-c6fae117aa98299175aac2f8bb11c734.png" alt="Diagram" width="696" height="339"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gestion_des_erreurs_fonctionnelle"><a class="anchor" href="#_gestion_des_erreurs_fonctionnelle"></a>8. Gestion des Erreurs Fonctionnelle</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_monades_et_error_handling"><a class="anchor" href="#_monades_et_error_handling"></a>8.1. Monades et Error Handling</h3> <div class="paragraph"> <p>L’utilisation de PyMonade permet une gestion élégante des erreurs :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-d256bdb87b36125ca20f18b0f9756180.png" alt="Diagram" width="494" height="494"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_stratégie_de_contournement_des_restrictions"><a class="anchor" href="#_stratégie_de_contournement_des_restrictions"></a>9. Stratégie de Contournement des Restrictions</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_approche_multi_source"><a class="anchor" href="#_approche_multi_source"></a>9.1. Approche Multi-Source</h3> <div class="paragraph"> <p>Face aux restrictions des APIs, nous adoptons une stratégie de diversification :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-1631d63ee04755eae439c5d595af9534.png" alt="Diagram" width="665" height="744"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_plan_de_développement_itératif"><a class="anchor" href="#_plan_de_développement_itératif"></a>10. Plan de Développement Itératif</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sprint_planning"><a class="anchor" href="#_sprint_planning"></a>10.1. Sprint Planning</h3> <div class="paragraph"> <p>Notre développement suit un cycle de sprints de 2 semaines :</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>Sprint 1-2</strong> </dt> <dd> <p>Infrastructure et Discord Bot Core</p> </dd> <dt class="hdlist1"><strong>Sprint 3-4</strong> </dt> <dd> <p>Intégration Spotify avec LDD</p> </dd> <dt class="hdlist1"><strong>Sprint 5-6</strong> </dt> <dd> <p>Intégration YouTube et contournements</p> </dd> <dt class="hdlist1"><strong>Sprint 7-8</strong> </dt> <dd> <p>Features musicales avancées</p> </dd> <dt class="hdlist1"><strong>Sprint 9-10</strong> </dt> <dd> <p>Optimisation et production</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_métriques_de_qualité"><a class="anchor" href="#_métriques_de_qualité"></a>10.2. Métriques de Qualité</h3> <div class="paragraph"> <p>Chaque sprint est évalué sur :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Couverture de logs</strong> : >90% des chemins critiques</p> </li> <li> <p><strong>Fiabilité API</strong> : <1% d’erreurs non gérées</p> </li> <li> <p><strong>Performance</strong> : <500ms temps de réponse moyen</p> </li> <li> <p><strong>Maintenabilité</strong> : Complexité cyclomatique <10</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_déploiement_et_monitoring"><a class="anchor" href="#_déploiement_et_monitoring"></a>11. Déploiement et Monitoring</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_architecture_de_production"><a class="anchor" href="#_architecture_de_production"></a>11.1. Architecture de Production</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-2049b13cbdd9eed68076ed557f938d6d.png" alt="Diagram" width="938" height="381"> </div> </div> </div> <div class="sect2"> <h3 id="_monitoring_proactif"><a class="anchor" href="#_monitoring_proactif"></a>11.2. Monitoring Proactif</h3> <div class="paragraph"> <p>Le LDD facilite un monitoring intelligent :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Alertes basées sur les patterns de logs</strong></p> </li> <li> <p><strong>Détection d’anomalies comportementales</strong></p> </li> <li> <p><strong>Métriques métier en temps réel</strong></p> </li> <li> <p><strong>Debugging assisté par corrélation de logs</strong></p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_et_perspectives"><a class="anchor" href="#_conclusion_et_perspectives"></a>12. Conclusion et Perspectives</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette approche méthodologique combine les bénéfices du paradigme fonctionnel avec la robustesse du Log Driven Development. Elle nous permet de :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Anticiper les problèmes</strong> grâce aux logs conçus en amont</p> </li> <li> <p><strong>Maintenir la qualité</strong> via la validation continue</p> </li> <li> <p><strong>Adapter rapidement</strong> aux changements d’APIs</p> </li> <li> <p><strong>Assurer la traçabilité</strong> complète des opérations</p> </li> </ol> </div> <div class="paragraph"> <p>Le développement itératif et l’architecture modulaire garantissent une évolutivité face aux contraintes changeantes des plateformes musicales.</p> </div> <div class="sect2"> <h3 id="_prochaines_étapes"><a class="anchor" href="#_prochaines_étapes"></a>12.1. Prochaines Étapes</h3> <div class="ulist"> <ul> <li> <p><strong>Phase 1</strong> : Implémentation du core avec PyMonade</p> </li> <li> <p><strong>Phase 2</strong> : Intégration Spotify avec cache intelligent</p> </li> <li> <p><strong>Phase 3</strong> : Solution YouTube résiliente</p> </li> <li> <p><strong>Phase 4</strong> : Features avancées et optimisation</p> </li> </ul> </div> <div class="paragraph"> <p>Cette fondation conceptuelle solide nous permettra de naviguer les défis techniques tout en livrant une expérience utilisateur exceptionnelle.</p> </div> <hr> <div class="paragraph"> <p><strong>Cet article sera suivi d’une série technique détaillant l’implémentation de chaque composant avec exemples de code et patterns fonctionnels.</strong></p> </div> </div> </div> </div> https://pages-content.github.io//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="#_objectif_de_ce_guide">1. Objectif de ce guide</a></li> <li><a href="#_prérequis">2. Prérequis</a></li> <li><a href="#_installer_et_configurer_les_outils">3. Installer et configurer les outils</a> <ul class="sectlevel2"> <li><a href="#_lm_sensors_pour_détecter_les_capteurs">3.1. <code>lm-sensors</code> pour détecter les capteurs</a></li> <li><a href="#_tlp_gestionnaire_dénergie_intelligent">3.2. <code>tlp</code> : gestionnaire d’énergie intelligent</a></li> <li><a href="#_cpufrequtils_limiter_les_fréquences_cpu">3.3. <code>cpufrequtils</code> : limiter les fréquences CPU</a></li> <li><a href="#_auto_cpufreq_gestion_dynamique_simplifiée">3.4. <code>auto-cpufreq</code> : gestion dynamique simplifiée</a></li> <li><a href="#_thermald_protection_thermique_automatique">3.5. <code>thermald</code> : protection thermique automatique</a></li> </ul> </li> <li><a href="#_surveillance_en_temps_réel">4. Surveillance en temps réel</a> <ul class="sectlevel2"> <li><a href="#_sensors_en_ligne_de_commande">4.1. <code>sensors</code> en ligne de commande</a></li> <li><a href="#_option_gui_psensor">4.2. Option GUI : <code>psensor</code></a></li> </ul> </li> <li><a href="#_astuces_supplémentaires">5. Astuces supplémentaires</a></li> <li><a href="#_nettoyer_le_système_pour_limiter_les_surcharges">6. Nettoyer le système pour limiter les surcharges</a></li> <li><a href="#_pour_aller_plus_loin">7. Pour aller plus loin</a></li> <li><a href="#_conclusion">8. 📚 Conclusion</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Vous sentez que votre ordinateur portable chauffe anormalement sous Ubuntu ? Cet article vous propose une démarche <strong>logicielle</strong> complète pour <strong>refroidir</strong>, <strong>surveiller</strong> et <strong>maîtriser la température</strong> de votre machine.</p> </div> </div> </div> <div class="sect1"> <h2 id="_objectif_de_ce_guide">1. Objectif de ce guide</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Réduire la température globale de l’ordinateur</p> </li> <li> <p>Optimiser la gestion d’énergie</p> </li> <li> <p>Surveiller les composants critiques (CPU, GPU, etc.)</p> </li> <li> <p>Éviter les ralentissements dus au <strong>thermal throttling</strong></p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="gestion_thermique.svg" alt="gestion thermique" width="392" height="298"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_prérequis">2. Prérequis</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Une machine Ubuntu (20.04 ou supérieure recommandée)</p> </li> <li> <p>Connexion Internet</p> </li> <li> <p>Compétence en ligne de commande (niveau débutant à intermédiaire)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_installer_et_configurer_les_outils">3. Installer et configurer les outils</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_lm_sensors_pour_détecter_les_capteurs">3.1. <code>lm-sensors</code> pour détecter les capteurs</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>Répondez <code>YES</code> à toutes les questions de <code>sensors-detect</code> pour détecter les modules.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_tlp_gestionnaire_dénergie_intelligent">3.2. <code>tlp</code> : gestionnaire d’énergie intelligent</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install tlp tlp-rdw sudo systemctl enable tlp sudo systemctl start tlp</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="tlp_etat.svg" alt="tlp etat" width="363" height="390"> </div> </div> </div> <div class="sect2"> <h3 id="_cpufrequtils_limiter_les_fréquences_cpu">3.3. <code>cpufrequtils</code> : limiter les fréquences 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> : limite les pics de fréquence</p> </li> <li> <p><code>performance</code> : favorise la puissance au détriment de la température</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_auto_cpufreq_gestion_dynamique_simplifiée">3.4. <code>auto-cpufreq</code> : gestion dynamique simplifiée</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">git clone https://github.com/AdnanHodzic/auto-cpufreq.git cd auto-cpufreq sudo ./auto-cpufreq-installer sudo auto-cpufreq --install</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="auto_cpufreq_cycle.svg" alt="auto cpufreq cycle" width="189" height="298"> </div> </div> </div> <div class="sect2"> <h3 id="_thermald_protection_thermique_automatique">3.5. <code>thermald</code> : protection thermique automatique</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="_surveillance_en_temps_réel">4. Surveillance en temps réel</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sensors_en_ligne_de_commande">4.1. <code>sensors</code> en ligne de commande</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="_option_gui_psensor">4.2. Option GUI : <code>psensor</code></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="quoteblock"> <blockquote> <div class="paragraph"> <p>Interface graphique simple pour CPU, GPU, ventilateurs.</p> </div> </blockquote> </div> </div> </div> </div> <div class="sect1"> <h2 id="_astuces_supplémentaires">5. Astuces supplémentaires</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Fermer les onglets et applications lourdes (ex: navigateurs)</p> </li> <li> <p>Éviter les utilisations intenses sur batterie</p> </li> <li> <p>Surveiller les processus via <code>htop</code> :</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="_nettoyer_le_système_pour_limiter_les_surcharges">6. Nettoyer le système pour limiter les surcharges</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="_pour_aller_plus_loin">7. Pour aller plus loin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vous pouvez créer un service <code>systemd</code> personnalisé pour appliquer automatiquement certains réglages au démarrage. Souhaitez-vous un exemple dans un prochain article ? Faites-le moi savoir !</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">8. 📚 Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En combinant ces outils simples, vous gagnerez :</p> </div> <div class="ulist"> <ul> <li> <p>Une température CPU maîtrisée</p> </li> <li> <p>Moins de bruit de ventilation</p> </li> <li> <p>Une meilleure autonomie</p> </li> </ul> </div> <div class="paragraph"> <p>N’oubliez pas de surveiller vos températures régulièrement pour prévenir toute surchauffe.</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Mieux vaut prévenir que fondre son CPU.</p> </div> </blockquote> <div class="attribution"> — cheroliv </div> </div> </div> </div> https://pages-content.github.io//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="#_le_champ_de_bataille_une_maquette_trois_navigateurs_des_rendus_multiples">1. Le champ de bataille : une maquette, trois navigateurs, des rendus multiples</a></li> <li><a href="#_problème_1_la_carte_volante_de_la_section_hero">2. Problème 1 : La carte volante de la section "Hero"</a></li> <li><a href="#_problème_2_la_barre_de_navigation_cannibale">3. Problème 2 : La barre de navigation cannibale</a></li> <li><a href="#_problème_3_la_typographie_anarchique">4. Problème 3 : La typographie anarchique</a></li> <li><a href="#_problème_4_la_barre_de_navigation_qui_déborde">5. Problème 4 : La barre de navigation qui déborde</a></li> <li><a href="#_problème_5_le_menu_hamburger_invisible">6. Problème 5 : Le menu hamburger invisible</a></li> <li><a href="#_conclusion_les_leçons_dun_débogage_acharné">7. Conclusion : les leçons d’un débogage acharné</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>Temps de lecture :</strong> environ 7 minutes <strong>Niveau :</strong> Intermédiaire</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Dans ce cas pratique détaillé, nous allons disséquer les problèmes de compatibilité navigateur les plus courants et parfois les plus frustrants rencontrés lors de la création d’une maquette UI avec Bootstrap 5.2. De la gestion Flexbox à la subtilité du rendu des polices, découvrez notre parcours de débogage pour transformer un design bancal sous Firefox en une expérience pixel-perfect sur tous les navigateurs.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_le_champ_de_bataille_une_maquette_trois_navigateurs_des_rendus_multiples">1. Le champ de bataille : une maquette, trois navigateurs, des rendus multiples</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tout développeur front-end connaît ce sentiment. Après des heures de travail, la maquette est enfin parfaite. Les alignements sont nets, la typographie est élégante, les animations sont fluides. On pousse un soupir de satisfaction, on admire son travail sur Chrome (ou Brave, ou Edge), puis, par acquis de conscience, on ouvre le projet sur Firefox. Et là, c’est le drame. Des éléments qui débordent, des alignements brisés, des polices aux tailles anarchiques…​ la belle harmonie s’est envolée.</p> </div> <div class="paragraph"> <p>C’est précisément le scénario que nous avons affronté en développant une nouvelle interface de portfolio. Le cahier des charges était simple : une page d’accueil moderne, responsive, avec un sélecteur de thèmes (clair, sombre, et à fort contraste), en utilisant <strong>vanilla JavaScript</strong> et la dernière version de <strong>Bootstrap 5.2</strong>.</p> </div> <div class="paragraph"> <p>Cet article n’est pas une liste de solutions miracles. C’est le journal de bord de notre session de débogage, une plongée dans le "pourquoi" des différences de rendu entre les moteurs Blink (Chromium, Brave) et Gecko (Firefox), et la démonstration que des solutions robustes et modernes valent toujours mieux que des rustines à la hâte.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/usecase-debugging-firefox.svg" alt="usecase debugging firefox" width="1045" height="401"> </div> <div class="title">Figure 1. Diagramme de Cas d’Utilisation : Le processus de débogage</div> </div> <div class="imageblock"> <div class="content"> <img src="./images/components-solution-architecture.svg" alt="components solution architecture" width="1286" height="188"> </div> <div class="title">Figure 2. Diagramme de Composants : Architecture de la solution front-end</div> </div> </div> </div> <div class="sect1"> <h2 id="_problème_1_la_carte_volante_de_la_section_hero">2. Problème 1 : La carte volante de la section "Hero"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le premier bug était aussi le plus visible. La section d’accueil ("hero") est composée de deux colonnes : à gauche, le titre principal ; à droite, une carte de présentation.</p> </div> <div class="ulist"> <ul> <li> <p><strong>Le symptôme :</strong> Sur Chrome et Brave, les deux colonnes étaient parfaitement centrées verticalement. Sur Firefox, la carte de droite chutait inexplicablement en dessous du texte de gauche.</p> </li> <li> <p><strong>L’investigation :</strong> Le code HTML semblait pourtant simple et correct, utilisant les classes standards de Bootstrap.</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Structure HTML initiale de la section Hero</div> <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>Notre CSS personnalisé pour <code>.hero-section</code> définissait <code>display: flex</code> et <code>align-items: center</code>, et la classe <code>min-vh-100</code> donnait bien une hauteur minimale à la ligne (<code>div.row</code>). Alors, pourquoi Firefox refusait-il de centrer les colonnes ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>La cause profonde :</strong> C’est un cas d’école sur la manière dont les moteurs de rendu interprètent les hauteurs implicites. La <code><section></code> avait une <code>min-height</code>, mais pas de <code>height</code> explicite. Pour appliquer <code>align-items-center</code> à l’intérieur de <code>div.row</code>, Firefox a besoin de connaître la hauteur de référence de ce conteneur. Comme ses parents (<code>div.container</code> et la <code><section></code> elle-même) n’avaient pas de hauteur <strong>stricte</strong>, Firefox était perdu. Le moteur Blink, plus permissif, arrive à "deviner" l’intention et à centrer les éléments. Gecko, plus fidèle à la spécification, ne le fait pas.</p> </li> <li> <p><strong>La solution :</strong> Rendre la hauteur explicite. Nous avons forcé le <code>.container</code> et le <code>.row</code> à occuper 100% de la hauteur de leur parent respectif en utilisant la classe utilitaire <code>h-100</code> de Bootstrap.</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Structure HTML corrigée</div> <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>Lorsqu’un <code>align-items</code> Flexbox ne fonctionne pas comme prévu sur l’axe vertical, vérifiez toujours que le conteneur a une hauteur (<code>height</code> ou <code>min-height</code>) définie et, si le problème persiste (surtout sur Firefox), assurez-vous que les conteneurs parents intermédiaires propagent bien cette hauteur.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_problème_2_la_barre_de_navigation_cannibale">3. Problème 2 : La barre de navigation cannibale</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Une fois la section "Hero" alignée, un autre problème est apparu : la barre de navigation, avec sa classe <code>fixed-top</code>, se superposait au titre. Un <code>padding-top: 80px</code> avait été appliqué à la section "Hero" en guise de solution.</div> <ul> <li> <p><strong>Le symptôme :</strong> Le <code>padding</code> était suffisant sur Chrome, mais pas sur Firefox, où le titre était toujours partiellement masqué.</p> </li> <li> <p><strong>La cause profonde :</strong> L’utilisation d’un "nombre magique" (<code>80px</code>) est une très mauvaise pratique. La hauteur d’un élément comme une barre de navigation peut varier de quelques pixels d’un navigateur à l’autre à cause de différences subtiles dans le rendu des polices, des espacements, ou même des options de l’utilisateur. Se fier à une valeur fixe est la recette pour un design fragile.</p> </li> <li> <p><strong>La solution :</strong> Une solution dynamique et infaillible en JavaScript. Nous avons écrit un petit script pour :</p> <div class="olist arabic"> <ol class="arabic"> <li> <p>Mesurer la hauteur <strong>réelle</strong> de la barre de navigation après le rendu de la page.</p> </li> <li> <p>Appliquer cette hauteur mesurée comme <code>padding-top</code> à la section "Hero".</p> </li> <li> <p>Ré-exécuter cette fonction à chaque redimensionnement de la fenêtre pour s’adapter aux changements (comme le passage au menu hamburger).</p> </li> </ol> </div> </li> </ul> </div> <div class="listingblock"> <div class="title">Fichier: script.js - La solution dynamique</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">document.addEventListener('DOMContentLoaded', function() { function adjustHeroPadding() { const navbar = document.querySelector('.navbar.fixed-top'); const heroSection = document.querySelector('.hero-section'); if (navbar && heroSection) { const navbarHeight = navbar.offsetHeight; heroSection.style.paddingTop = navbarHeight + 'px'; } } // Ajuster au chargement et au redimensionnement adjustHeroPadding(); window.addEventListener('resize', adjustHeroPadding); });</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/sequence-dynamic-padding.svg" alt="sequence dynamic padding" width="887" height="703"> </div> <div class="title">Figure 3. Diagramme de Séquence : Ajustement dynamique du padding</div> </div> <div class="paragraph"> <p>En parallèle, nous avons bien sûr supprimé la règle <code>padding-top: 80px;</code> de notre fichier <code>styles.css</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_problème_3_la_typographie_anarchique">4. Problème 3 : La typographie anarchique</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Le souci suivant était le plus nuisible à l’image de marque : la taille du titre principal.</div> <ul> <li> <p><strong>Le symptôme :</strong> Sur Firefox, la police du titre "Développeur Formateur…​" était gigantesque, presque choquante, alors qu’elle était harmonieuse sur les autres navigateurs.</p> </li> <li> <p><strong>La cause profonde :</strong> Le titre utilisait une classe <code>display-4</code> de Bootstrap. Ces classes utilisent des tailles de police responsives, souvent basées sur l’unité <code>rem</code> et des media queries. Encore une fois, l’algorithme de rendu de Firefox, combiné à la police "Inter", aboutissait à un calcul de taille beaucoup plus grand sur notre résolution de 1920x1080.</p> </li> <li> <p><strong>La solution :</strong> Reprendre le contrôle avec la fonction CSS <code>clamp()</code>. Cette fonction est une révolution pour la typographie fluide. Elle permet de définir une taille de police avec trois valeurs : une taille minimale, une taille "préférée" (qui s’adapte à la largeur de la vue, <code>vw</code>), et une taille maximale.</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Fichier: styles.css - Dompter la taille de la police</div> <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>Avec <code>clamp()</code>, nous avons pu dire au navigateur : "Fais grandir la police avec l’écran, mais ne dépasse <strong>jamais</strong> la limite de `2.5rem`". Cela a instantanément harmonisé le rendu sur tous les navigateurs, en nous donnant un contrôle absolu sur l’esthétique finale.</p> </div> </div> </div> <div class="sect1"> <h2 id="_problème_4_la_barre_de_navigation_qui_déborde">5. Problème 4 : La barre de navigation qui déborde</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">C’est le problème qui nous a donné le plus de fil à retordre et qui a finalement révélé la nature profonde des micro-différences de rendu.</div> <ul> <li> <p><strong>Le symptôme :</strong> Sur un écran de 1920x1080, les derniers liens du menu ("Blog", "Contact") étaient poussés hors de l’écran sur la droite, mais uniquement sur Firefox.</p> </li> <li> <p><strong>La cause profonde :</strong> Après plusieurs tentatives infructueuses (changer les points de rupture de Bootstrap de <code>lg</code> à <code>xl</code> puis <code>xxl</code>), nous avons compris. La cause n’était pas la logique de Bootstrap, mais un simple calcul de largeur. Sur Firefox, la somme des largeurs de tous les liens, incluant leurs <code>padding</code> et <code>margin</code> au sub-pixel près, était <strong>légèrement</strong> supérieure à 1920 pixels. Sur Chrome, cette même somme était <strong>légèrement</strong> inférieure. Il nous manquait quelques pixels.</p> </li> <li> <p><strong>La solution :</strong> Une réduction chirurgicale des espacements. Puisqu’il était hors de question de cibler spécifiquement Firefox avec des "hacks" CSS obsolètes, la seule solution propre était de trouver un style commun qui fonctionne partout. Nous avons donc légèrement réduit les marges et le padding horizontaux de chaque lien de navigation.</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Fichier: styles.css - Gagner les pixels manquants</div> <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>Cette réduction, quasi invisible à l’œil nu sur un seul élément, nous a fait gagner collectivement l’espace nécessaire pour que tous les liens rentrent dans le cadre sur Firefox, tout en conservant une apparence quasi identique sur les autres navigateurs.</p> </div> </div> </div> <div class="sect1"> <h2 id="_problème_5_le_menu_hamburger_invisible">6. Problème 5 : Le menu hamburger invisible</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Le dernier problème, et non des moindres, concernait l’accessibilité sur mobile.</div> <ul> <li> <p><strong>Le symptôme :</strong> En mode responsive (menu "hamburger"), l’icône du menu était invisible sur les thèmes "dark" et "high-contrast".</p> </li> <li> <p><strong>La cause profonde :</strong> L’icône du menu de Bootstrap 5 est un <code>background-image</code> (un SVG encodé en URL). Par défaut, la couleur de son trait est foncée, optimisée pour un fond clair. Elle ne s’adapte pas automatiquement au changement de thème.</p> </li> <li> <p><strong>La solution :</strong> Utiliser les variables CSS de Bootstrap pour surcharger l’icône. Nous avons défini une nouvelle icône SVG, mais cette fois avec un trait blanc (<code>#ffffff</code>), et nous l’avons appliquée spécifiquement lorsque les thèmes <code>dark</code> ou <code>high-contrast</code> sont actifs.</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Fichier: styles.css - Rendre l’icône visible</div> <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>La personnalisation des composants de Bootstrap comme celui-ci se fait de plus en plus via la surcharge de variables CSS (<code>--bs-component-property</code>), qui est la méthode la plus propre et la plus pérenne.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_les_leçons_dun_débogage_acharné">7. Conclusion : les leçons d’un débogage acharné</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce parcours, bien que parfois frustrant, est riche d’enseignements. Chaque problème résolu renforce une vérité fondamentale du développement web : <strong>rien ne remplace un test multi-navigateurs rigoureux</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/mindmap-debugging-summary.svg" alt="mindmap debugging summary" width="999" height="866"> </div> <div class="title">Figure 4. Mindmap : Synthèse du débogage et des leçons apprises</div> </div> <div class="olist arabic"> <div class="title">Voici les leçons que nous retenons :</div> <ol class="arabic"> <li> <p><strong>Firefox est un allié :</strong> Sa plus grande fidélité aux standards CSS nous force à écrire un code plus robuste et moins ambigu.</p> </li> <li> <p><strong>Fuyez les "nombres magiques" :</strong> Les valeurs fixes (comme <code>padding-top: 80px</code>) sont des bombes à retardement. Préférez toujours des solutions dynamiques (JavaScript) ou relatives (Flexbox, Grid).</p> </li> <li> <p><strong>Maîtrisez votre typographie :</strong> Utilisez <code>clamp()</code> pour un contrôle total sur la taille des polices responsives.</p> </li> <li> <p><strong>Pensez en "composants" :</strong> Pour personnaliser Bootstrap, surchargez ses variables CSS plutôt que de multiplier les règles qui écrasent le framework.</p> </li> <li> <p><strong>Ne ciblez pas un navigateur :</strong> La solution n’est presque jamais de faire un "hack" pour un navigateur spécifique, mais de trouver un style commun qui fonctionne partout.</p> </li> </ol> </div> <div class="paragraph"> <p>Au final, la maquette est maintenant solide, prévisible, et prête à être intégrée dans un système de templating. Chaque bug corrigé n’était pas un échec, mais une étape vers un code de meilleure qualité.</p> </div> </div> </div> https://pages-content.github.io//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="#_le_problème_isoler_les_tests_unitaires_dun_plugin_gradle">1. Le Problème : Isoler les Tests Unitaires d’un Plugin Gradle</a> <ul class="sectlevel2"> <li><a href="#_architecture_du_problème">1.1. Architecture du Problème</a></li> <li><a href="#_la_tentation_dune_fausse_bonne_idée">1.2. La Tentation d’une Fausse Bonne Idée</a></li> </ul> </li> <li><a href="#_la_solution_simuler_la_propriété_avec_extrapropertiesextension">2. La Solution : Simuler la Propriété avec <code>ExtraPropertiesExtension</code></a> <ul class="sectlevel2"> <li><a href="#_étape_1_comprendre_extrapropertiesextension">2.1. Étape 1 : Comprendre ExtraPropertiesExtension</a></li> <li><a href="#_étape_2_mise_en_place_du_test_préparation">2.2. Étape 2 : Mise en Place du Test - Préparation</a></li> <li><a href="#_étape_3_injection_de_la_propriété">2.3. Étape 3 : Injection de la Propriété</a></li> <li><a href="#_étape_4_diagramme_de_flux_de_la_solution">2.4. Étape 4 : Diagramme de Flux de la Solution</a></li> <li><a href="#_étape_5_comparaison_avantaprès">2.5. Étape 5 : Comparaison Avant/Après</a></li> <li><a href="#_étape_6_gestion_des_cas_de_test_multiples">2.6. Étape 6 : Gestion des Cas de Test Multiples</a></li> <li><a href="#_architecture_finale_de_la_solution">2.7. Architecture Finale de la Solution</a></li> </ul> </li> <li><a href="#_les_avantages_de_cette_approche">3. Les Avantages de cette Approche</a></li> <li><a href="#_bonnes_pratiques_et_conseils">4. Bonnes Pratiques et Conseils</a> <ul class="sectlevel2"> <li><a href="#_créer_une_méthode_utilitaire">4.1. Créer une Méthode Utilitaire</a></li> <li><a href="#_validation_des_propriétés">4.2. Validation des Propriétés</a></li> </ul> </li> <li><a href="#_conclusion">5. Conclusion</a></li> </ul> </div> <div class="sect1"> <h2 id="_le_problème_isoler_les_tests_unitaires_dun_plugin_gradle">1. Le Problème : Isoler les Tests Unitaires d’un Plugin Gradle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lors de l’écriture de tests unitaires pour un plugin Gradle, un défi courant est de gérer les dépendances à la configuration du projet, comme les propriétés définies dans le fichier <code>gradle.properties</code>. Dans notre cas, le plugin <code>jbake.ghpages</code> devait lire une propriété <code>site_config_path</code> pour fonctionner correctement. Le test unitaire pour la tâche <code>initialize</code> devait vérifier le comportement du plugin en présence de cette propriété.</p> </div> <div class="paragraph"> <p>Le problème fondamental est que les tests unitaires, par conception, doivent être <strong>isolés</strong>. L’utilisation de <code>ProjectBuilder</code> de Gradle crée une instance de <code>Project</code> en mémoire, complètement déconnectée d’un véritable projet sur le système de fichiers. Par conséquent, cette instance de test ne lit pas automatiquement le fichier <code>gradle.properties</code> et n’a donc pas connaissance de la propriété <code>site_config_path</code>.</p> </div> <div class="sect2"> <h3 id="_architecture_du_problème">1.1. Architecture du Problème</h3> <div class="paragraph"> <p>Le diagramme suivant illustre la déconnexion entre l’environnement de test et le système de fichiers :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/test-isolation-problem.svg" alt="test isolation problem" width="833" height="295"> </div> </div> </div> <div class="sect2"> <h3 id="_la_tentation_dune_fausse_bonne_idée">1.2. La Tentation d’une Fausse Bonne Idée</h3> <div class="paragraph"> <p>Une première approche pourrait être de créer un fichier <code>gradle.properties</code> factice dans les ressources du test.</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>Cependant, cette méthode est vouée à l’échec car <code>ProjectBuilder</code> n’est pas conçu pour scanner le système de fichiers à la recherche de fichiers de configuration. Le test resterait isolé et ignorerait ce fichier.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_la_solution_simuler_la_propriété_avec_extrapropertiesextension">2. La Solution : Simuler la Propriété avec <code>ExtraPropertiesExtension</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>La solution élégante à ce problème n’est pas de <strong>lire</strong> le fichier, mais de <strong>simuler</strong> la présence de la propriété directement dans l’objet <code>Project</code> de test. Gradle fournit un mécanisme puissant pour cela : les <strong>propriétés supplémentaires</strong> (Extra Properties).</p> </div> <div class="sect2"> <h3 id="_étape_1_comprendre_extrapropertiesextension">2.1. Étape 1 : Comprendre ExtraPropertiesExtension</h3> <div class="paragraph"> <p><code>ExtraPropertiesExtension</code> est un conteneur clé-valeur attaché à chaque objet du modèle Gradle. Il permet d’ajouter des propriétés dynamiquement à un projet, une tâche, ou toute autre extension Gradle.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/extra-properties-architecture.svg" alt="extra properties architecture" width="533" height="436"> </div> </div> </div> <div class="sect2"> <h3 id="_étape_2_mise_en_place_du_test_préparation">2.2. Étape 2 : Mise en Place du Test - Préparation</h3> <div class="paragraph"> <p>Commençons par créer la structure de base de notre test unitaire :</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="_étape_3_injection_de_la_propriété">2.3. Étape 3 : Injection de la Propriété</h3> <div class="paragraph"> <p>Voici le processus détaillé pour injecter la propriété dans le projet de test :</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="_étape_4_diagramme_de_flux_de_la_solution">2.4. Étape 4 : Diagramme de Flux de la Solution</h3> <div class="imageblock"> <div class="content"> <img src="./images/solution-flow.svg" alt="solution flow" width="242" height="807"> </div> </div> </div> <div class="sect2"> <h3 id="_étape_5_comparaison_avantaprès">2.5. Étape 5 : Comparaison Avant/Après</h3> <div class="imageblock"> <div class="content"> <img src="./images/before-after-comparison.svg" alt="before after comparison" width="1304" height="399"> </div> </div> </div> <div class="sect2"> <h3 id="_étape_6_gestion_des_cas_de_test_multiples">2.6. Étape 6 : Gestion des Cas de Test Multiples</h3> <div class="paragraph"> <p>Pour tester différents scénarios, créons plusieurs tests avec des configurations variées :</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="_architecture_finale_de_la_solution">2.7. Architecture Finale de la Solution</h3> <div class="imageblock"> <div class="content"> <img src="./images/final-architecture.svg" alt="final architecture" width="754" height="631"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_les_avantages_de_cette_approche">3. Les Avantages de cette Approche</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><strong>Isolation Complète</strong> : Le test ne dépend d’aucun fichier externe. Il est autonome et peut s’exécuter de manière fiable dans n’importe quel environnement (local, CI/CD, etc.).</p> </li> <li> <p><strong>Clarté et Intention</strong> : Le test déclare explicitement les conditions préalables à son exécution. Quiconque lit le test voit immédiatement que le plugin nécessite la propriété <code>site_config_path</code> pour fonctionner.</p> </li> <li> <p><strong>Maintenabilité</strong> : Si le nom de la propriété change, il suffit de le mettre à jour à un seul endroit dans le test, sans avoir à manipuler des fichiers de configuration de test.</p> </li> <li> <p><strong>Flexibilité</strong> : Il devient trivial de tester différents scénarios en changeant simplement la valeur de la propriété injectée dans chaque test (valeur valide, invalide, absente, etc.).</p> </li> <li> <p><strong>Performance</strong> : Pas de lecture de fichiers, tout se passe en mémoire, ce qui rend les tests plus rapides.</p> </li> <li> <p><strong>Reproductibilité</strong> : Les tests sont déterministes car ils ne dépendent pas de l’état du système de fichiers.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_bonnes_pratiques_et_conseils">4. Bonnes Pratiques et Conseils</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_créer_une_méthode_utilitaire">4.1. Créer une Méthode Utilitaire</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="_validation_des_propriétés">4.2. Validation des Propriétés</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="_conclusion">5. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plutôt que de lutter pour faire lire des fichiers de configuration à un environnement de test unitaire, la meilleure pratique consiste à simuler l’état requis. L’utilisation de <code>ExtraPropertiesExtension</code> pour définir par programme les propriétés Gradle est la méthode la plus propre et la plus robuste pour réaliser des tests unitaires de plugins efficaces et fiables.</p> </div> <div class="paragraph"> <p>Cette technique transforme un problème de dépendance externe en une simple injection de dépendance, au cœur même de la philosophie du Test-Driven Development (TDD). Elle offre un contrôle total sur l’environnement de test tout en maintenant l’isolation nécessaire à des tests unitaires de qualité.</p> </div> <div class="paragraph"> <p>Les diagrammes et exemples présentés dans cet article montrent comment cette approche peut être mise en œuvre de manière progressive et méthodique, permettant de créer une suite de tests robuste et maintenable pour vos plugins Gradle.</p> </div> </div> </div> https://pages-content.github.io//blog/2025/0080_kitty_term_post.html Sat, 12 Jul 2025 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="#_pourquoi_choisir_kitty_et_zsh">1. Pourquoi choisir Kitty et Zsh ?</a></li> <li><a href="#_pré_requis_système">2. Pré-requis système</a></li> <li><a href="#_téléchargement_et_installation_de_kitty">3. Téléchargement et installation de Kitty</a> <ul class="sectlevel2"> <li><a href="#_télécharger_le_script_dinstallation">3.1. Télécharger le script d’installation</a></li> <li><a href="#_création_des_liens_symboliques">3.2. Création des liens symboliques</a></li> </ul> </li> <li><a href="#_intégration_de_kitty_dans_xubuntu">4. Intégration de Kitty dans Xubuntu</a> <ul class="sectlevel2"> <li><a href="#_copier_le_fichier_desktop">4.1. Copier le fichier desktop</a></li> <li><a href="#_modifier_le_fichier_desktop">4.2. Modifier le fichier desktop</a></li> <li><a href="#_associer_kitty_comme_terminal_par_défaut_facultatif">4.3. Associer Kitty comme terminal par défaut (facultatif)</a></li> </ul> </li> <li><a href="#_installation_de_zsh">5. Installation de Zsh</a></li> <li><a href="#_définir_zsh_comme_shell_par_défaut">6. Définir Zsh comme shell par défaut</a> <ul class="sectlevel2"> <li><a href="#_méthode_globale_pour_tous_les_terminaux">6.1. Méthode globale (pour tous les terminaux)</a></li> <li><a href="#_méthode_spécifique_à_kitty">6.2. Méthode spécifique à Kitty</a></li> </ul> </li> <li><a href="#_configuration_de_zsh_optionnel">7. Configuration de Zsh (optionnel)</a> <ul class="sectlevel2"> <li><a href="#_créer_un_fichier_zshrc">7.1. Créer un fichier .zshrc</a></li> <li><a href="#_exemple_de_configuration_minimale">7.2. Exemple de configuration minimale</a></li> </ul> </li> <li><a href="#_résumé_du_workflow_complet">8. Résumé du workflow complet</a></li> <li><a href="#_vérification_finale">9. Vérification finale</a> <ul class="sectlevel2"> <li><a href="#_ouvrir_le_fichier_de_configuration">9.1. 📂 Ouvrir le fichier de configuration</a></li> <li><a href="#_️_ajouter_ou_modifier_font_size">9.2. 🖋️ Ajouter ou modifier <code>font_size</code></a></li> <li><a href="#_enregistrer_et_relancer_kitty">9.3. 💾 Enregistrer et relancer Kitty</a></li> <li><a href="#_ajustement_dynamique_zoom_temporaire">9.4. ✅ Ajustement dynamique (Zoom temporaire)</a></li> </ul> </li> <li><a href="#_installation_et_configuration_de_oh_my_zsh">10. Installation et configuration de Oh My Zsh</a> <ul class="sectlevel2"> <li><a href="#_installation_de_oh_my_zsh">10.1. Installation de Oh My Zsh</a></li> <li><a href="#_changer_le_thème">10.2. Changer le thème</a></li> <li><a href="#_vérification">10.3. Vérification</a></li> <li><a href="#_diagramme_du_use_case">10.4. Diagramme du use case</a></li> </ul> </li> <li><a href="#_activer_la_translucidité_dans_kitty">11. Activer la translucidité dans Kitty</a> <ul class="sectlevel2"> <li><a href="#_pré_requis_pour_la_transparence">11.1. Pré-requis pour la transparence</a></li> <li><a href="#_configuration_de_la_transparence_dans_kitty_conf">11.2. Configuration de la transparence dans kitty.conf</a></li> <li><a href="#_redémarrer_kitty">11.3. Redémarrer Kitty</a></li> <li><a href="#_compléments_possibles">11.4. Compléments possibles</a></li> <li><a href="#_diagramme_de_séquence_initialisation_de_kitty_avec_transparence">11.5. Diagramme de séquence - Initialisation de Kitty avec transparence</a></li> <li><a href="#_limitations_connues">11.6. Limitations connues</a></li> </ul> </li> <li><a href="#_mise_à_jour_de_kitty">12. Mise à jour de Kitty</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Ce guide explique pas à pas comment installer le terminal <strong>kitty</strong> sur Xubuntu, le configurer correctement, et remplacer bash par <strong>zsh</strong> comme shell par défaut. Le projet kitty est disponible ici : <a href="https://github.com/kovidgoyal/kitty" class="bare">https://github.com/kovidgoyal/kitty</a>.</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Kitty est un terminal moderne, rapide et configurable, particulièrement adapté aux développeurs exigeants.</p> </div> </blockquote> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_choisir_kitty_et_zsh">1. Pourquoi choisir Kitty et Zsh ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty se distingue par :</p> </div> <div class="ulist"> <ul> <li> <p>Des performances supérieures grâce à l’accélération GPU,</p> </li> <li> <p>Une configuration entièrement basée sur un fichier texte unique,</p> </li> <li> <p>Une excellente prise en charge des polices et des ligatures.</p> </li> </ul> </div> <div class="paragraph"> <p>Zsh est quant à lui un shell interactif puissant offrant :</p> </div> <div class="ulist"> <ul> <li> <p>Une complétion intelligente,</p> </li> <li> <p>Un prompt personnalisable,</p> </li> <li> <p>Une grande compatibilité avec bash.</p> </li> </ul> </div> <div class="paragraph"> <p>En associant Kitty et Zsh, vous bénéficiez d’un environnement productif et esthétique.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/kitty-zsh-overview.png" alt="kitty zsh overview" width="680" height="321"> </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>Ce guide est volontairement limité à l’installation via script et à Xubuntu.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_pré_requis_système">2. Pré-requis système</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant de commencer, assurez-vous d’avoir :</p> </div> <div class="ulist"> <ul> <li> <p>Xubuntu installé,</p> </li> <li> <p>un accès à internet,</p> </li> <li> <p>un shell bash fonctionnel pour lancer le script.</p> </li> </ul> </div> <div class="paragraph"> <p>Vérifiez votre environnement :</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="_téléchargement_et_installation_de_kitty">3. Téléchargement et installation de Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty recommande de l’installer via un script officiel qui place les fichiers dans <code>~/.local/kitty.app</code>.</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>Cette méthode est indépendante des gestionnaires de paquets (pas de <code>apt</code>).</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_télécharger_le_script_dinstallation">3.1. Télécharger le script d’installation</h3> <div class="paragraph"> <p>Exécutez la commande suivante :</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>Cette commande effectue :</p> </div> <div class="ulist"> <ul> <li> <p>téléchargement des binaires,</p> </li> <li> <p>extraction dans <code>~/.local/kitty.app</code>,</p> </li> <li> <p>création des liens symboliques.</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/download-install.svg" alt="download install" width="353" height="336"> </div> </div> </div> <div class="sect2"> <h3 id="_création_des_liens_symboliques">3.2. Création des liens symboliques</h3> <div class="paragraph"> <p>Afin de pouvoir invoquer <code>kitty</code> depuis le terminal, créez un lien symbolique :</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>Ajoutez <code>~/.local/bin</code> à votre PATH si ce n’est pas déjà fait :</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"' >> ~/.bashrc source ~/.bashrc</code></pre> </div> </div> <div class="paragraph"> <p>Vous pouvez vérifier l’installation :</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="_intégration_de_kitty_dans_xubuntu">4. Intégration de Kitty dans Xubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour que Kitty apparaisse dans le menu des applications :</p> </div> <div class="sect2"> <h3 id="_copier_le_fichier_desktop">4.1. Copier le fichier desktop</h3> <div class="paragraph"> <p>Copiez le fichier <code>.desktop</code> fourni :</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="_modifier_le_fichier_desktop">4.2. Modifier le fichier desktop</h3> <div class="paragraph"> <p>Editez le fichier :</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>Vérifiez ou modifiez les lignes suivantes :</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/YOURUSER/.local/kitty.app/bin/kitty Icon=kitty Categories=System;TerminalEmulator;</code></pre> </div> </div> <div class="paragraph"> <p>Remplacez <code>YOURUSER</code> par votre nom d’utilisateur.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/desktop-integration.png" alt="desktop integration" width="427" height="347"> </div> </div> </div> <div class="sect2"> <h3 id="_associer_kitty_comme_terminal_par_défaut_facultatif">4.3. Associer Kitty comme terminal par défaut (facultatif)</h3> <div class="paragraph"> <p>Pour que Kitty soit le terminal lancé par défaut :</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>Sélectionnez <code>kitty</code> dans le menu proposé.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_installation_de_zsh">5. Installation de Zsh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si Zsh n’est pas encore installé, exécutez :</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>Vérifiez l’installation :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">zsh --version</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_définir_zsh_comme_shell_par_défaut">6. Définir Zsh comme shell par défaut</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vous pouvez changer votre shell globalement ou uniquement dans Kitty.</p> </div> <div class="sect2"> <h3 id="_méthode_globale_pour_tous_les_terminaux">6.1. Méthode globale (pour tous les terminaux)</h3> <div class="paragraph"> <p>Identifiez le chemin absolu :</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>En général <code>/usr/bin/zsh</code>.</p> </div> <div class="paragraph"> <p>Modifiez le shell par défaut :</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>Déconnectez-vous et reconnectez-vous.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/zsh-default-shell.svg" alt="zsh default shell" width="546" height="341"> </div> </div> </div> <div class="sect2"> <h3 id="_méthode_spécifique_à_kitty">6.2. Méthode spécifique à Kitty</h3> <div class="paragraph"> <p>Si vous préférez uniquement changer le shell dans Kitty, éditez le fichier de configuration :</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>Ajoutez cette ligne :</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>Enregistrez et redémarrez Kitty.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_configuration_de_zsh_optionnel">7. Configuration de Zsh (optionnel)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour personnaliser votre Zsh :</p> </div> <div class="sect2"> <h3 id="_créer_un_fichier_zshrc">7.1. Créer un fichier .zshrc</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">touch ~/.zshrc nano ~/.zshrc</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_exemple_de_configuration_minimale">7.2. Exemple de configuration minimale</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">export ZSH_THEME="robbyrussell" export PATH="$HOME/.local/bin:$PATH" alias ll="ls -la"</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_résumé_du_workflow_complet">8. Résumé du workflow complet</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le schéma ci-dessous récapitule l’ensemble du processus :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/full-workflow.png" alt="full workflow" width="323" height="666"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_vérification_finale">9. Vérification finale</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lancez 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>Vous devriez voir que <code>zsh</code> est actif :</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>Résultat attendu :</p> </div> <div class="listingblock"> <div class="content"> <pre>/usr/bin/zsh</pre> </div> </div> <div class="paragraph"> <p>Pour modifier la taille de la police dans <strong>Kitty</strong>, il faut ajuster le paramètre <code>font_size</code> dans le fichier de configuration. Voici la procédure détaillée :</p> </div> <hr> <div class="sect2"> <h3 id="_ouvrir_le_fichier_de_configuration">9.1. 📂 Ouvrir le fichier de configuration</h3> <div class="paragraph"> <p>Le fichier principal de configuration est habituellement situé dans :</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>Si ce fichier n’existe pas encore, vous pouvez le créer. Exemple :</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> <hr> </div> <div class="sect2"> <h3 id="_️_ajouter_ou_modifier_font_size">9.2. 🖋️ Ajouter ou modifier <code>font_size</code></h3> <div class="paragraph"> <p>Ajoutez la directive suivante, ou modifiez-la si elle existe déjà :</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>Ici <code>14.0</code> correspond à la taille souhaitée. Vous pouvez mettre n’importe quelle valeur décimale, par exemple <code>12.0</code>, <code>15.5</code>, etc.</p> </div> <hr> </div> <div class="sect2"> <h3 id="_enregistrer_et_relancer_kitty">9.3. 💾 Enregistrer et relancer Kitty</h3> <div class="ulist"> <ul> <li> <p>Enregistrez (<code>Ctrl + O</code>, puis <code>Entrée</code>) et quittez (<code>Ctrl + X</code>) si vous utilisez <code>nano</code>.</p> </li> <li> <p>Fermez toutes les fenêtres de Kitty, puis relancez le terminal pour que le changement prenne effet.</p> </li> </ul> </div> <hr> </div> <div class="sect2"> <h3 id="_ajustement_dynamique_zoom_temporaire">9.4. ✅ Ajustement dynamique (Zoom temporaire)</h3> <div class="paragraph"> <p>Si vous souhaitez zoomer/dézoomer temporairement sans modifier la configuration, utilisez les raccourcis clavier par défaut :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Augmenter la taille de la police</strong> : <code>Ctrl + Shift + =</code></p> </li> <li> <p><strong>Diminuer la taille de la police</strong> : <code>Ctrl + Shift + -</code></p> </li> <li> <p><strong>Réinitialiser la taille</strong> : <code>Ctrl + Shift + Backspace</code></p> </li> </ul> </div> <div class="paragraph"> <p>Ces réglages ne persistent pas après la fermeture du terminal.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_installation_et_configuration_de_oh_my_zsh">10. Installation et configuration de Oh My Zsh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Une fois Zsh installé et configuré comme shell par défaut, vous pouvez enrichir votre environnement avec <strong>Oh My Zsh</strong>, un framework de gestion de la configuration Zsh, offrant :</p> </div> <div class="ulist"> <ul> <li> <p>une collection de thèmes pour le prompt,</p> </li> <li> <p>de nombreux plugins,</p> </li> <li> <p>une organisation claire de la configuration.</p> </li> </ul> </div> <div class="sect2"> <h3 id="_installation_de_oh_my_zsh">10.1. Installation de Oh My Zsh</h3> <div class="paragraph"> <p>Assurez-vous que Zsh est actif :</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>Si nécessaire, lancez :</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>Puis téléchargez et exécutez le script d’installation officiel :</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>Ce script :</p> </div> <div class="ulist"> <ul> <li> <p>crée le dossier <code>~/.oh-my-zsh</code>,</p> </li> <li> <p>sauvegarde éventuellement votre fichier <code>~/.zshrc</code>,</p> </li> <li> <p>active automatiquement le nouveau prompt.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_changer_le_thème">10.2. Changer le thème</h3> <div class="paragraph"> <p>Ouvrez votre fichier de configuration :</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>Modifiez la variable <code>ZSH_THEME</code> pour choisir un autre thème (par exemple <code>agnoster</code>) :</p> </div> <div class="listingblock"> <div class="content"> <pre>ZSH_THEME="agnoster"</pre> </div> </div> <div class="paragraph"> <p>Enregistrez puis rechargez la configuration :</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="_vérification">10.3. Vérification</h3> <div class="paragraph"> <p>Lancez Kitty et vérifiez que le prompt a bien changé. Vous pouvez confirmer qu’Oh My Zsh est actif en exécutant :</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>Le résultat devrait être similaire à :</p> </div> <div class="listingblock"> <div class="content"> <pre>/home/votre_utilisateur/.oh-my-zsh</pre> </div> </div> </div> <div class="sect2"> <h3 id="_diagramme_du_use_case">10.4. Diagramme du use case</h3> <div class="imageblock"> <div class="content"> <img src="./images/ohmyzsh-installation.png" alt="ohmyzsh installation" width="480" height="569"> </div> </div> <hr> </div> </div> </div> <div class="sect1"> <h2 id="_activer_la_translucidité_dans_kitty">11. Activer la translucidité dans Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Une des fonctionnalités les plus appréciées de Kitty est la possibilité d’ajouter de la <strong>transparence</strong> au fond du terminal. Cela permet de voir légèrement l’environnement sous-jacent (fenêtre, bureau, etc.), ce qui est particulièrement utile en multitâche.</p> </div> <div class="sect2"> <h3 id="_pré_requis_pour_la_transparence">11.1. Pré-requis pour la transparence</h3> <div class="paragraph"> <p>La transparence dans Kitty repose sur le <strong>compositeur de fenêtres</strong> utilisé par l’environnement graphique. Sous Xubuntu (basé sur XFCE), assurez-vous que la <strong>composition est activée</strong>.</p> </div> <div class="ulist"> <div class="title">À vérifier :</div> <ul> <li> <p>clic droit sur le bureau > Paramètres > <strong>Paramètres du gestionnaire de fenêtres</strong>,</p> </li> <li> <p>onglet <strong>Compositeur</strong> : la case <strong>"Activer la composition"</strong> doit être cochée.</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/transparency-usecase.png" alt="transparency usecase" width="656" height="265"> </div> </div> </div> <div class="sect2"> <h3 id="_configuration_de_la_transparence_dans_kitty_conf">11.2. Configuration de la transparence dans kitty.conf</h3> <div class="paragraph"> <p>Ouvrez votre fichier de configuration <code>~/.config/kitty/kitty.conf</code> :</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>Ajoutez ou modifiez les lignes suivantes :</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>Ce paramètre accepte des valeurs entre :</p> </div> <div class="ulist"> <ul> <li> <p><code>1.0</code> → opaque (aucune transparence),</p> </li> <li> <p><code>0.0</code> → complètement transparent (inutilisable),</p> </li> <li> <p>valeurs intermédiaires comme <code>0.90</code>, <code>0.75</code>, etc.</p> </li> </ul> </div> <div class="paragraph"> <p>Un bon compromis visuel est généralement entre <code>0.85</code> et <code>0.95</code>.</p> </div> </div> <div class="sect2"> <h3 id="_redémarrer_kitty">11.3. Redémarrer Kitty</h3> <div class="paragraph"> <p>Fermez toutes les instances de Kitty, puis relancez une nouvelle fenêtre pour que les modifications prennent effet :</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="_compléments_possibles">11.4. Compléments possibles</h3> <div class="paragraph"> <p>Si vous utilisez un fond de terminal personnalisé, vous pouvez également définir une couleur de fond avec transparence (en 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>La dernière composante (<code>ff</code>) indique l’opacité (de <code>00</code> à <code>ff</code>).</p> </div> </div> <div class="sect2"> <h3 id="_diagramme_de_séquence_initialisation_de_kitty_avec_transparence">11.5. Diagramme de séquence - Initialisation de Kitty avec transparence</h3> <div class="imageblock"> <div class="content"> <img src="./images/transparency-sequence.png" alt="transparency sequence" width="735" height="448"> </div> </div> </div> <div class="sect2"> <h3 id="_limitations_connues">11.6. Limitations connues</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>La translucidité ne fonctionne pas si :</p> </div> <div class="ulist"> <ul> <li> <p>le compositeur XFCE est désactivé,</p> </li> <li> <p>un gestionnaire de fenêtres incompatible est utilisé,</p> </li> <li> <p>vous utilisez Kitty dans un mode <strong>tmux</strong> en arrière-plan sans support de transparence.</p> </li> </ul> </div> </td> </tr> </table> </div> <hr> </div> </div> </div> <div class="sect1"> <h2 id="_mise_à_jour_de_kitty">12. Mise à jour de Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Puisque Kitty est installé via un script et non un gestionnaire de paquets, la mise à jour se fait en relançant le script d’installation officiel. Cela permet de télécharger la dernière version et de mettre à jour votre installation existante dans <code>~/.local/kitty.app</code>.</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>Le suffixe <code>.app</code> dans le chemin <code>~/.local/kitty.app</code> est la convention d’installation de Kitty sur Linux via son script officiel, et n’indique en aucun cas une compatibilité exclusive avec 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>Avant de lancer la commande de mise à jour, assurez-vous d’être dans votre répertoire personnel (par exemple, en utilisant la commande <code>cd</code>). == Mise à jour de Kitty</p> </div> <div class="paragraph"> <p>Puisque Kitty est installé via un script et non un gestionnaire de paquets, la mise à jour se fait en relançant le script d’installation officiel. Cela permet de télécharger la dernière version et de mettre à jour votre installation existante dans <code>~/.local/kitty.app</code>.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Le suffixe <code>.app</code> dans le chemin <code>~/.local/kitty.app</code> est la convention d’installation de Kitty sur Linux via son script officiel, et n’indique en aucun cas une compatibilité exclusive avec macOS.</p> </div> <div class="exampleblock"> <div class="content"> </div> </div> <div class="paragraph"> <p>Avant de lancer la commande de mise à jour, assurez-vous d’être dans votre répertoire personnel (<code>~</code>).</p> </div> <div class="exampleblock"> <div class="content"> <div class="paragraph"> <p>Exécutez la commande suivante depuis votre répertoire personnel :</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>Ce script se chargera de :</p> </div> <div class="ulist"> <ul> <li> <p>Télécharger les binaires de la nouvelle version.</p> </li> <li> <p>Extraire les fichiers dans <code>~/.local/kitty.app</code>.</p> </li> <li> <p>Mettre à jour les liens symboliques si nécessaire.</p> </li> </ul> </div> <div class="paragraph"> <p>Après la mise à jour, il est recommandé de fermer toutes les instances de Kitty et de les relancer pour s’assurer que la nouvelle version est bien prise en compte.</p> </div> <div class="paragraph"> <p>== Références</p> </div> <div class="paragraph"> <p>Si vous souhaitez approfondir la personnalisation, consultez la documentation officielle :</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> <div class="ulist"> <ul> <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> </ul> </div> </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> <div class="ulist"> <ul> <li> <p><a href="https://ohmyz.sh/" class="bare">https://ohmyz.sh/</a></p> </li> <li> <p><a href="https://github.com/ohmyzsh/ohmyzsh/wiki" class="bare">https://github.com/ohmyzsh/ohmyzsh/wiki</a></p> </li> </ul> </div> </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 class="paragraph"> <p>== Conclusion</p> </div> <div class="paragraph"> <p>Vous disposez maintenant :</p> </div> <div class="ulist"> <ul> <li> <p>d’un terminal moderne et performant (Kitty)</p> </li> <li> <p>d’un shell puissant et personnalisable (Zsh)</p> </li> <li> <p>d’une configuration propre et indépendante des paquets systèmes</p> </li> <li> <p>d’un terminal esthétique et fonctionnel équipé de Oh My Zsh</p> </li> </ul> </div> </div> </div> </div> </div> https://pages-content.github.io//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="#_centraliser_les_configurations_avec_allprojects_et_subprojects">1. Centraliser les Configurations avec <code>allprojects</code> et <code>subprojects</code></a></li> <li><a href="#_sourceplantuml">2. [source,plantuml]</a></li> <li><a href="#_enduml">3. @enduml</a></li> <li><a href="#_sourcekotlin">4. [source,kotlin]</a></li> <li><a href="#">5. }</a></li> <li><a href="#_sourcekotlin_2">6. [source,kotlin]</a></li> <li><a href="#_abstract_class_reportjbakefunctionalteststask_abstractjbakeexectask_init_description_opens_the_functional_test_report_in_firefox_reportrelativepath_buildreportstestsfunctionaltestindex_html">7. abstract class ReportJbakeFunctionalTestsTask : AbstractJbakeExecTask() { init { description = "Opens the functional test report in Firefox." reportRelativePath = "build/reports/tests/functionalTest/index.html" } }</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>L'automatisation des tâches de build est cruciale pour tout projet logiciel, et Gradle, avec son DSL Kotlin, offre une flexibilité exceptionnelle. Au cours de notre conversation, nous avons exploré comment centraliser et réutiliser la logique de build, notamment pour les rapports de tests, en tirant parti de **allprojects**, **buildSrc**, et des tâches personnalisées en Kotlin.</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_centraliser_les_configurations_avec_allprojects_et_subprojects">1. Centraliser les Configurations avec <code>allprojects</code> et <code>subprojects</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>Les blocs <code>allprojects</code> et <code>subprojects</code> dans votre <code>build.gradle.kts</code> racine sont fondamentaux pour appliquer des configurations communes à travers votre projet multi-modules.</p> </div> <div class="ulist"> <ul> <li> <p><code>allprojects { …​ }</code>: Applique la configuration au <strong>projet racine et à tous ses sous-projets</strong>. Idéal pour définir un <code>group</code>, une <code>version</code>, ou des <code>repositories</code> communs.</p> </li> <li> <p><code>subprojects { …​ }</code>: Applique la configuration <strong>uniquement aux sous-projets</strong>, excluant le projet racine. Parfait pour appliquer des plugins spécifiques aux modules (comme <code>java</code> ou <code>kotlin-jvm</code>) ou des dépendances communes à vos bibliothèques.</p> </li> </ul> </div> <div class="paragraph"> <p>Voici un exemple illustratif :</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>\== <code>buildSrc</code>: Le Couteau Suisse de la Logique de Build</p> </div> <div class="paragraph"> <p>Lorsque la logique de vos tâches devient complexe ou doit être réutilisée, <strong>buildSrc</strong> est la solution privilégiée. C’est un module Gradle spécial qui est compilé avant les scripts de build principaux, rendant ses classes disponibles sur le classpath de l’ensemble de votre build.</p> </div> <div class="paragraph"> <p>\=== Pourquoi utiliser <code>buildSrc</code> pour les Tâches ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Réutilisabilité</strong>: Une tâche définie dans <code>buildSrc</code> peut être appliquée à n’importe quel projet du build.</p> </li> <li> <p><strong>Organisation</strong>: Centralise le code de build, le rendant plus propre et maintenable.</p> </li> <li> <p><strong>Type Safety et Autocomplétion</strong>: Le code Kotlin dans <code>buildSrc</code> est compilé, offrant la vérification des erreurs et l’autocomplétion de votre IDE, améliorant l’expérience de développement.</p> </li> </ul> </div> <div class="paragraph"> <p>\=== Diagramme de Flux <code>buildSrc</code> (Code PlantUML)</p> </div> <div class="paragraph"> <p>Pour générer ce diagramme, copiez le code ci-dessous et collez-le dans un outil supportant PlantUML.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sourceplantuml">2. [source,plantuml]</h2> <div class="sectionbody"> <div class="paragraph"> <p>@startuml skinparam handwritten true skinparam monochrome true</p> </div> <div class="paragraph"> <p>rectangle "Gradle Build Process" { component "buildSrc" as BS { file "MyCustomTask.kt" as T file "MyConventionPlugin.kt" as P } component "Root Project" as RP component "Subproject A" as SA component "Subproject B" as SB }</p> </div> <div class="paragraph"> <p>T --\> P : "is defined in" P --\> RP : "is applied to" P --\> SA : "is applied to" P --\> SB : "is applied to"</p> </div> <div class="paragraph"> <p>RP --|\> SA : "contains" RP --|\> SB : "contains"</p> </div> <div class="paragraph"> <p>RP -up-\> BS : "depends on (for build logic)" SA -up-\> BS : "depends on (for build logic)" SB -up-\> BS : "depends on (for build logic)"</p> </div> <div class="paragraph"> <p>note right of T Classes de tâches personnalisées (ex: OpenTestReportTask) end note</p> </div> <div class="paragraph"> <p>note right of P Plugins de convention qui enregistrent les tâches end note</p> </div> </div> </div> <div class="sect1"> <h2 id="_enduml">3. @enduml</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>\== Création de Tâches de Rapport Abstraites Pour gérer les rapports de tests, nous avons conçu une approche modulaire en utilisant une classe de tâche abstraite dans `buildSrc`. Selon vos besoins, cette classe peut hériter de `DefaultTask` ou de `Exec`. \=== Tâche Abstraite `OpenTestReportTask` (héritant de `DefaultTask`) Cette approche est recommandée si vous avez besoin d'une logique Kotlin personnalisée qui interagit avec le système de fichiers ou d'autres APIs Gradle, puis lance une commande externe. ## [source,kotlin] // buildSrc/src/main/kotlin/com/yourpackage/OpenTestReportTask.kt package com.yourpackage import org.gradle.api.DefaultTask import org.gradle.api.tasks.Input import org.gradle.api.tasks.TaskAction import java.io.File abstract class OpenTestReportTask : DefaultTask() { ``` 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}") } ``` ## } \=== Implémentations Concrètes Ces classes héritent de la tâche abstraite et définissent le chemin spécifique du rapport. ## [source,kotlin] // buildSrc/src/main/kotlin/com/yourpackage/ReportUnitTestsTask.kt package com.yourpackage abstract class ReportUnitTestsTask : OpenTestReportTask() { init { description = "Opens the unit test report in Firefox." reportPath = "build/reports/tests/test/index.html" } } // buildSrc/src/main/kotlin/com/yourpackage/ReportFunctionalTestsTask.kt package com.yourpackage ## abstract class ReportFunctionalTestsTask : OpenTestReportTask() { init { description = "Opens the functional test report in Firefox." reportPath = "build/reports/tests/functionalTest/index.html" } } \=== Enregistrement des Tâches Dans le `build.gradle.kts` de votre projet racine : ## [source,kotlin] // build.gradle.kts (au niveau de la racine du projet) ## tasks.register\<com.yourpackage.ReportUnitTestsTask\>("reportTests") {} tasks.register\<com.yourpackage.ReportFunctionalTestsTask\>("reportFunctionalTests") {} \=== Diagramme UML des Tâches de Rapport (Code PlantUML) Copiez le code ci-dessous et collez-le dans un outil supportant PlantUML. ## [source,plantuml] @startuml skinparam handwritten true skinparam monochrome true abstract class DefaultTask { } abstract class Exec { \+ commandLine(args: String...) \+ exec() } abstract class OpenTestReportTask extends DefaultTask { \+ group: String = "verification" \+ description: String \+ dependsOn("check") \+ abstract reportPath: String \+ openReport() : void } abstract class AbstractJbakeExecTask extends Exec { \+ group: String = "verification" \+ description: String \+ dependsOn("check") \+ abstract reportRelativePath: String \+ exec() : void } class ReportUnitTestsTask extends OpenTestReportTask { \+ reportPath: String = "build/reports/tests/test/index.html" } class ReportFunctionalTestsTask extends OpenTestReportTask { \+ reportPath: String = "build/reports/tests/functionalTest/index.html" } class ReportJbakeTestsTask extends AbstractJbakeExecTask { \+ reportRelativePath: String = "build/reports/tests/test/index.html" } class ReportJbakeFunctionalTestsTask extends AbstractJbakeExecTask { \+ reportRelativePath: String = "build/reports/tests/functionalTest/index.html" } OpenTestReportTask \<-- ReportUnitTestsTask OpenTestReportTask \<-- ReportFunctionalTestsTask AbstractJbakeExecTask \<-- ReportJbakeTestsTask AbstractJbakeExecTask \<-- ReportJbakeFunctionalTestsTask DefaultTask \<|-- OpenTestReportTask Exec \<|-- AbstractJbakeExecTask DefaultTask \<|-- Exec ## @enduml</pre> </div> </div> <div class="paragraph"> <p>\== Tâche Abstraite <code>AbstractJbakeExecTask</code> (héritant de <code>Exec</code>)</p> </div> <div class="paragraph"> <p>Si votre tâche se résume principalement à exécuter une commande externe avec des arguments variables, hériter directement de <strong>Exec</strong> est plus direct.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sourcekotlin">4. [source,kotlin]</h2> <div class="sectionbody"> <div class="paragraph"> <p>package com.yourpackage</p> </div> <div class="paragraph"> <p>import org.gradle.api.tasks.Exec import org.gradle.api.tasks.Input import java.io.File</p> </div> <div class="paragraph"> <p>abstract class AbstractJbakeExecTask : Exec() {</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">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 }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="">5. }</h2> <div class="sectionbody"> <div class="paragraph"> <p>\=== Implémentations Concrètes pour <code>Exec</code></p> </div> </div> </div> <div class="sect1"> <h2 id="_sourcekotlin_2">6. [source,kotlin]</h2> <div class="sectionbody"> <div class="paragraph"> <p>package com.yourpackage</p> </div> <div class="paragraph"> <p>abstract class ReportJbakeTestsTask : AbstractJbakeExecTask() { init { description = "Opens the Jbake unit test report in Firefox." reportRelativePath = "build/reports/tests/test/index.html" } }</p> </div> <div class="paragraph"> <p>package com.yourpackage</p> </div> </div> </div> <div class="sect1"> <h2 id="_abstract_class_reportjbakefunctionalteststask_abstractjbakeexectask_init_description_opens_the_functional_test_report_in_firefox_reportrelativepath_buildreportstestsfunctionaltestindex_html">7. abstract class ReportJbakeFunctionalTestsTask : AbstractJbakeExecTask() { init { description = "Opens the functional test report in Firefox." reportRelativePath = "build/reports/tests/functionalTest/index.html" } }</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>\== Visibilité des Tâches `buildSrc` Les tâches et classes que vous définissez dans **buildSrc** sont : * **Visibles et utilisables** par tous les projets de votre build principal (racine et sous-projets). C'est pourquoi vous pouvez utiliser `com.yourpackage.ReportUnitTestsTask` dans `allprojects { ... }`. * **Non exécutables** directement en tant que tâches de buildSrc (par exemple, `gradle :buildSrc:reportTests` ne fonctionnerait pas si la tâche n'est pas enregistrée spécifiquement dans `buildSrc/build.gradle.kts`). `buildSrc` est un module de compilation, pas un module d'application exécutable pour ces tâches du build principal. \=== Exécuter un rapport pour les tests de `buildSrc` lui-même Si `buildSrc` a ses propres tests et génère des rapports, vous pouvez enregistrer une tâche de rapport directement dans `buildSrc/build.gradle.kts` : ## [source,kotlin] // buildSrc/build.gradle.kts plugins { `kotlin-jvm` } repositories { mavenCentral() } tasks.withType\<Test\> { useJUnitPlatform() reports.html.outputLocation.set(layout.buildDirectory.dir("reports/tests")) } import com.yourpackage.ReportJbakeTestsTask // Importez votre classe de tâche ## tasks.register\<ReportJbakeTestsTask\>("reportBuildSrcTests") { // Le chemin est déjà défini dans la classe, il pointera vers les rapports de buildSrc } Vous pourrez ensuite exécuter : `./gradlew :buildSrc:test` suivi de `./gradlew :buildSrc:reportBuildSrcTests`.</pre> </div> </div> <div class="paragraph"> <p>En adoptant ces pratiques, vous construirez des systèmes de build Gradle en Kotlin DSL qui sont non seulement puissants, mais aussi incroyablement modulaires, maintenables et faciles à comprendre.</p> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> </div> </div> https://pages-content.github.io//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="#_objectif">1. Objectif</a></li> <li><a href="#_configuration_déclarative">2. Configuration déclarative</a></li> <li><a href="#_architecture_du_plugin">3. Architecture du plugin</a></li> <li><a href="#_définition_de_lextension_dsl">4. Définition de l’extension DSL</a></li> <li><a href="#_définition_de_la_tâche_personnalisée">5. Définition de la tâche personnalisée</a></li> <li><a href="#_interface_gitadapter">6. Interface GitAdapter</a></li> <li><a href="#_implémentation_concrète_avec_jgit">7. Implémentation concrète avec JGit</a></li> <li><a href="#_configuration_dsl_kotlin">8. Configuration DSL Kotlin</a></li> <li><a href="#_tests_unitaires_avec_mockito">9. Tests unitaires avec Mockito</a> <ul class="sectlevel2"> <li><a href="#_dépendances">9.1. Dépendances</a></li> <li><a href="#_test_du_comportement_git">9.2. Test du comportement Git</a></li> </ul> </li> <li><a href="#_conclusion">10. Conclusion</a></li> <li><a href="#_prochaines_étapes">11. Prochaines étapes</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Ce billet présente la démarche complète de conception et de tests (TDD) d’un plugin Gradle écrit en Kotlin DSL. Ce plugin automatise la génération de sites statiques avec <strong>JBake</strong> et le <strong>déploiement Git</strong> via <strong>JGit</strong>, le tout à partir d’un fichier YAML de configuration.</p> </div> </div> </div> <div class="sect1"> <h2 id="_objectif">1. Objectif</h2> <div class="sectionbody"> <div class="paragraph"> <p>Créer un plugin Gradle :</p> </div> <div class="ulist"> <ul> <li> <p>configurable en Kotlin DSL ;</p> </li> <li> <p>capable de :</p> <div class="ulist"> <ul> <li> <p>générer un site statique à partir de JBake ;</p> </li> <li> <p>déployer sur un dépôt Git distant via JGit ;</p> </li> </ul> </div> </li> <li> <p>intégrable dans un workflow CI/CD ;</p> </li> <li> <p>testé selon une démarche TDD.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_configuration_déclarative">2. Configuration déclarative</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici un exemple de configuration YAML à modéliser dans notre DSL :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml">bake: srcPath: "./site/jbake" destDirPath: "bake" pushPage: from: "bake" to: "cvs" repo: name: "trainings" repository: "https://github.com/pages-content/trainings.git" credentials: username: "USERNAME" password: "SECRET_TOKEN" branch: "main" message: "cheroliv.com"</code></pre> </div> </div> <div class="paragraph"> <p>Cette configuration est représentée via une extension Gradle déclarable en Kotlin DSL.</p> </div> </div> </div> <div class="sect1"> <h2 id="_architecture_du_plugin">3. Architecture du plugin</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="./images/jbake-asciidoctor-class-diagram.png" alt="jbake asciidoctor class diagram" width="582" height="330"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_définition_de_lextension_dsl">4. Définition de l’extension 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 workspace-engine" }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_définition_de_la_tâche_personnalisée">5. Définition de la tâche personnalisée</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="_interface_gitadapter">6. Interface 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="_implémentation_concrète_avec_jgit">7. Implémentation concrète avec 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="_configuration_dsl_kotlin">8. Configuration 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="_tests_unitaires_avec_mockito">9. Tests unitaires avec Mockito</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_dépendances">9.1. Dépendances</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">testImplementation("org.mockito:mockito-core:5.12.0") testImplementation("org.mockito.kotlin:mockito-kotlin:5.2.1") testImplementation("org.junit.jupiter:junit-jupiter:5.10.0")</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_test_du_comportement_git">9.2. Test du comportement 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="imageblock"> <div class="content"> <img src="./images/jbake-asciidoctor-sequence-diagram.png" alt="jbake asciidoctor sequence diagram" width="742" height="345"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">10. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>La séparation des responsabilités via <code>GitAdapter</code> permet d’appliquer pleinement le TDD dans le développement de plugin Gradle :</p> </div> <div class="ulist"> <ul> <li> <p>les appels Git sont abstraits et testables ;</p> </li> <li> <p>la configuration DSL est propre et claire ;</p> </li> <li> <p>le plugin reste agnostique de l’implémentation réelle.</p> </li> </ul> </div> <div class="paragraph"> <p>Cette approche assure une haute testabilité et extensibilité (vers GitHub API, GitLab, etc.).</p> </div> </div> </div> <div class="sect1"> <h2 id="_prochaines_étapes">11. Prochaines étapes</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Intégrer la génération JBake comme un <code>BakeAdapter</code></p> </li> <li> <p>Ajouter des tests d’intégration avec <code>GradleRunner</code></p> </li> <li> <p>Supporter le chargement automatique de fichiers <code>site.yml</code> via SnakeYAML</p> </li> </ul> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_quest_ce_quasciidoc">2. Qu’est-ce qu’AsciiDoc ?</a> <ul class="sectlevel2"> <li><a href="#_pourquoi_choisir_asciidoc">2.1. Pourquoi choisir AsciiDoc ?</a></li> </ul> </li> <li><a href="#_diagramme_de_cas_dutilisation_use_case">3. Diagramme de cas d’utilisation (Use Case)</a></li> <li><a href="#_diagramme_mind_map">4. Diagramme Mind Map</a></li> <li><a href="#_diagramme_de_flow_flux">5. Diagramme de Flow (flux)</a></li> <li><a href="#_structure_de_base_dun_fichier_asciidoc">6. Structure de base d’un fichier AsciiDoc</a></li> <li><a href="#_syntaxe_fondamentale">7. Syntaxe fondamentale</a> <ul class="sectlevel2"> <li><a href="#_titres_et_sections">7.1. Titres et sections</a></li> <li><a href="#_texte_en_gras_italique_et_monospace">7.2. Texte en gras, italique et monospace</a></li> <li><a href="#_listes_à_puces_et_numérotées">7.3. Listes à puces et numérotées</a></li> <li><a href="#_liens_et_images">7.4. Liens et images</a></li> <li><a href="#_blocs_de_code">7.5. Blocs de code</a></li> <li><a href="#_tableaux">7.6. Tableaux</a></li> <li><a href="#_notes_et_admonitions">7.7. Notes et admonitions</a></li> </ul> </li> <li><a href="#_utilisation_dattributs_et_variables">8. Utilisation d’attributs et variables</a></li> <li><a href="#_cas_dutilisation_courants">9. Cas d’utilisation courants</a></li> <li><a href="#_bonnes_pratiques">10. Bonnes pratiques</a></li> <li><a href="#_conclusion">11. Conclusion</a></li> <li><a href="#_pour_aller_plus_loin">12. Pour aller plus loin</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Temps de lecture :</em></div> <p>8 à 12 minutes.</p> </div> <div class="paragraph"> <div class="title"><em>Public cible :</em></div> <p>Développeurs, rédacteurs techniques, et toute personne souhaitant rédiger de la documentation technique ou des articles riches.</p> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc est un langage de balisage léger, conçu pour rédiger des documents techniques structurés, des articles, des livres, ou encore des présentations. Il se distingue par sa lisibilité, sa richesse syntaxique et sa capacité à générer divers formats (HTML, PDF, DocBook, etc.). Dans cet article, nous allons explorer la syntaxe essentielle d’AsciiDoc et proposer des astuces pour une prise en main rapide.</p> </div> </div> </div> <div class="sect1"> <h2 id="_quest_ce_quasciidoc">2. Qu’est-ce qu’AsciiDoc ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc est un langage de description de documents, similaire à Markdown mais plus puissant. Il permet de structurer efficacement textes, titres, listes, tableaux, blocs de code, et bien plus encore. Sa polyvalence en fait un choix populaire pour la documentation de projets open source, la rédaction de livres et la publication web.</p> </div> <div class="sect2"> <h3 id="_pourquoi_choisir_asciidoc">2.1. Pourquoi choisir AsciiDoc ?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Syntaxe lisible et intuitive.</p> </li> <li> <p>Support natif de structures complexes (tableaux, notes, admonitions, etc.).</p> </li> <li> <p>Génération multi-formats (HTML, PDF, ePub, DocBook…).</p> </li> <li> <p>Intégration facile avec des générateurs de sites statiques comme JBake ou Antora.</p> </li> <li> <p>Personnalisation avancée avec les attributs et extensions.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagramme_de_cas_dutilisation_use_case">3. Diagramme de cas d’utilisation (Use Case)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Un diagramme de cas d’utilisation permet de présenter les interactions principales entre les utilisateurs et le système. Voici un exemple simple pour un système de documentation :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-381f40e6e0660c0c53433ff054330b76.png" alt="Diagram" width="423" height="258"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagramme_mind_map">4. Diagramme Mind Map</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le mind map (carte mentale) est idéal pour explorer les concepts liés à AsciiDoc et leurs relations :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-e1560e9cc014158b6fbeed1e5ad8e138.png" alt="Diagram" width="394" height="527"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagramme_de_flow_flux">5. Diagramme de Flow (flux)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Un diagramme de flow permet de décrire le processus de génération d’un document AsciiDoc :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-51318d77b9e18062d3a9b751587670ae.png" alt="Diagram" width="299" height="361"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_structure_de_base_dun_fichier_asciidoc">6. Structure de base d’un fichier AsciiDoc</h2> <div class="sectionbody"> <div class="paragraph"> <p>Un fichier AsciiDoc commence généralement par un titre, des attributs optionnels, puis le contenu structuré. Voici un exemple 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="_syntaxe_fondamentale">7. Syntaxe fondamentale</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_titres_et_sections">7.1. Titres et sections</h3> <div class="paragraph"> <p>AsciiDoc supporte plusieurs niveaux de titres :</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="_texte_en_gras_italique_et_monospace">7.2. Texte en gras, italique et monospace</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="_listes_à_puces_et_numérotées">7.3. Listes à puces et numérotées</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="_liens_et_images">7.4. Liens et images</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="_blocs_de_code">7.5. Blocs de code</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("Bonjour AsciiDoc !")</p> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> </div> <div class="sect2"> <h3 id="_tableaux">7.6. Tableaux</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="_notes_et_admonitions">7.7. Notes et admonitions</h3> <div class="paragraph"> <p>AsciiDoc propose des blocs d’information visuelle :</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="_utilisation_dattributs_et_variables">8. Utilisation d’attributs et variables</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les attributs personnalisés permettent de réutiliser des valeurs ou de configurer des comportements :</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="_cas_dutilisation_courants">9. Cas d’utilisation courants</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Documentation projet open source (README, guides techniques)</p> </li> <li> <p>Rédaction de livres et ebooks</p> </li> <li> <p>Génération automatique de sites web statiques (JBake, Antora)</p> </li> <li> <p>Présentations techniques</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_bonnes_pratiques">10. Bonnes pratiques</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Utilisez des titres cohérents et un sommaire automatique (:toc:).</p> </li> <li> <p>Privilégiez les admonitions pour attirer l’attention sur des points clés.</p> </li> <li> <p>Structurez vos fichiers pour faciliter la maintenance.</p> </li> <li> <p>Profitez des blocs de code annotés pour illustrer des exemples.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">11. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc est un outil puissant et accessible pour rédiger toute documentation technique ou article structuré. Sa syntaxe riche, combinée à la génération multi-formats, en fait un allié de choix pour les développeurs et rédacteurs exigeants. Essayez AsciiDoc dans votre prochain projet et découvrez la différence !</p> </div> </div> </div> <div class="sect1"> <h2 id="_pour_aller_plus_loin">12. Pour aller plus loin</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Documentation officielle : <a href="https://asciidoc.org" class="bare">https://asciidoc.org</a></p> </li> <li> <p>Asciidoctor : <a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a></p> </li> <li> <p>JBake et 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>Partagez vos expériences et astuces en commentaire !</p> </div> </div> </div> https://pages-content.github.io//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="#_le_problème_nat_et_adresses_privées">1. Le problème : NAT et adresses privées</a></li> <li><a href="#_étape_1_identifier_votre_adresse_ip_publique">2. Étape 1 : Identifier votre adresse IP publique</a></li> <li><a href="#_étape_2_connaître_ladresse_ip_locale_de_votre_machine_ubuntu">3. Étape 2 : Connaître l’adresse IP locale de votre machine Ubuntu</a></li> <li><a href="#_étape_3_configurer_le_port_forwarding_sur_votre_box">4. Étape 3 : Configurer le port forwarding sur votre box</a> <ul class="sectlevel2"> <li><a href="#_accès_à_linterface_dadministration">4.1. Accès à l’interface d’administration</a></li> <li><a href="#_configuration_de_la_redirection">4.2. Configuration de la redirection</a></li> </ul> </li> <li><a href="#_étape_4_configuration_du_service_sur_ubuntu">5. Étape 4 : Configuration du service sur Ubuntu</a></li> <li><a href="#_étape_5_configuration_du_pare_feu_ubuntu">6. Étape 5 : Configuration du pare-feu Ubuntu</a></li> <li><a href="#_étape_6_test_et_validation">7. Étape 6 : Test et validation</a> <ul class="sectlevel2"> <li><a href="#_test_depuis_le_réseau_local">7.1. Test depuis le réseau local</a></li> <li><a href="#_test_depuis_lextérieur">7.2. Test depuis l’extérieur</a></li> </ul> </li> <li><a href="#_bonnes_pratiques_et_sécurité">8. Bonnes pratiques et sécurité</a> <ul class="sectlevel2"> <li><a href="#_sécurisation_de_base">8.1. Sécurisation de base</a></li> <li><a href="#_monitoring_des_connexions">8.2. Monitoring des connexions</a></li> <li><a href="#_utilisation_dun_reverse_proxy">8.3. Utilisation d’un reverse proxy</a></li> </ul> </li> <li><a href="#_alternatives_au_port_forwarding">9. Alternatives au port forwarding</a> <ul class="sectlevel2"> <li><a href="#_solutions_cloud">9.1. Solutions cloud</a></li> <li><a href="#_vps_et_reverse_proxy">9.2. VPS et reverse proxy</a></li> </ul> </li> <li><a href="#_troubleshooting">10. Troubleshooting</a> <ul class="sectlevel2"> <li><a href="#_problèmes_courants">10.1. Problèmes courants</a></li> <li><a href="#_debug_réseau">10.2. Debug réseau</a></li> </ul> </li> <li><a href="#_conclusion">11. Conclusion</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="ulist"> <div class="title">Public cible : Intermédiaire</div> <ul> <li> <p><strong>Prérequis assumés</strong> : connaissance de base d’Ubuntu, du terminal, concepts réseau de base</p> </li> <li> <p><strong>Concepts techniques</strong> : NAT, port forwarding, pare-feu, reverse proxy</p> </li> <li> <p><strong>Commandes système</strong> : utilisation du terminal, configuration réseau</p> </li> <li> <p><strong>Sections avancées</strong> : monitoring, sécurité, alternatives cloud</p> </li> </ul> </div> <div class="paragraph"> <div class="title">Problématique :</div> <p>Vous développez une application web sur votre machine Ubuntu et souhaitez la rendre accessible depuis l’extérieur de votre réseau domestique ? Vous êtes au bon endroit ! Dans cet article, nous allons voir comment exposer un service local (par exemple sur le port 8080) vers Internet en configurant le port forwarding sur votre box internet.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_problème_nat_et_adresses_privées">1. Le problème : NAT et adresses privées</h2> <div class="sectionbody"> <div class="paragraph"> <p>Par défaut, votre box internet utilise le NAT (Network Address Translation) pour partager une seule adresse IP publique entre tous les appareils de votre réseau domestique. Vos machines locales utilisent des adresses IP privées (192.168.x.x, 10.x.x.x, etc.) qui ne sont pas routables sur Internet.</p> </div> <div class="paragraph"> <p>Lorsque vous lancez un service sur votre machine Ubuntu (par exemple un serveur web sur le port 8080), celui-ci n’est accessible que depuis votre réseau local. Pour le rendre accessible depuis Internet, nous devons configurer une redirection de port.</p> </div> </div> </div> <div class="sect1"> <h2 id="_étape_1_identifier_votre_adresse_ip_publique">2. Étape 1 : Identifier votre adresse IP publique</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant tout, récupérons l’adresse IP publique de votre connexion Internet :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Plusieurs méthodes au choix curl ifconfig.me curl ipecho.net/plain wget -qO- http://ipecho.net/plain # Ou encore curl -s checkip.amazonaws.com</code></pre> </div> </div> <div class="paragraph"> <p>Cette adresse IP est celle que les internautes utiliseront pour accéder à votre service.</p> </div> </div> </div> <div class="sect1"> <h2 id="_étape_2_connaître_ladresse_ip_locale_de_votre_machine_ubuntu">3. Étape 2 : Connaître l’adresse IP locale de votre machine Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Votre machine Ubuntu a une adresse IP privée sur votre réseau local. Pour la connaître :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Afficher toutes les interfaces réseau ip addr show # Ou plus spécifiquement pour l'interface principale ip route get 1.1.1.1 | awk '{print $7; exit}' # Alternative avec hostname hostname -I | awk '{print $1}'</code></pre> </div> </div> <div class="paragraph"> <p>Notez cette adresse (par exemple <code>192.168.1.100</code>), nous en aurons besoin pour la configuration.</p> </div> </div> </div> <div class="sect1"> <h2 id="_étape_3_configurer_le_port_forwarding_sur_votre_box">4. Étape 3 : Configurer le port forwarding sur votre box</h2> <div class="sectionbody"> <div class="paragraph"> <p>La configuration varie selon le modèle de votre box, mais le principe reste le même :</p> </div> <div class="sect2"> <h3 id="_accès_à_linterface_dadministration">4.1. Accès à l’interface d’administration</h3> <div class="paragraph"> <p>Ouvrez votre navigateur et rendez-vous sur l’interface web de votre box :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Freebox</strong> : <code>192.168.1.1</code> ou <code>mafreebox.freebox.fr</code></p> </li> <li> <p><strong>Livebox Orange</strong> : <code>192.168.1.1</code></p> </li> <li> <p><strong>SFR Box</strong> : <code>192.168.1.1</code></p> </li> <li> <p><strong>Bbox Bouygues</strong> : <code>192.168.1.254</code></p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_configuration_de_la_redirection">4.2. Configuration de la redirection</h3> <div class="paragraph"> <p>Cherchez la section dédiée au port forwarding (les noms varient) :</p> </div> <div class="ulist"> <ul> <li> <p>"Redirection de ports"</p> </li> <li> <p>"NAT/PAT"</p> </li> <li> <p>"Port Forwarding"</p> </li> <li> <p>"Serveurs de jeux"</p> </li> </ul> </div> <div class="paragraph"> <p>Créez une nouvelle règle avec ces paramètres :</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">Champ</th> <th class="tableblock halign-left valign-top">Valeur</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Nom/Description</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">"Service Web Ubuntu" (ou autre nom explicite)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Port externe (ou port public)</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">Adresse IP interne</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">L’IP de votre machine Ubuntu (ex: 192.168.1.100)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Port interne (ou port privé)</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">Protocole</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">État</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Activé</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_étape_4_configuration_du_service_sur_ubuntu">5. Étape 4 : Configuration du service sur Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Assurez-vous que votre service écoute sur toutes les interfaces, pas seulement sur localhost :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># ✅ Correct : écoute sur toutes les interfaces python3 -m http.server 8080 --bind 0.0.0.0 # ❌ Incorrect : écoute seulement en local python3 -m http.server 8080 --bind 127.0.0.1</code></pre> </div> </div> <div class="paragraph"> <p>Pour vérifier que votre service écoute correctement :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Vérifier les ports en écoute sudo netstat -tlnp | grep :8080 # ou avec ss (plus moderne) sudo ss -tlnp | grep :8080</code></pre> </div> </div> <div class="paragraph"> <p>Vous devriez voir quelque chose comme <code>0.0.0.0:8080</code> et non <code>127.0.0.1:8080</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_étape_5_configuration_du_pare_feu_ubuntu">6. Étape 5 : Configuration du pare-feu Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ubuntu utilise UFW (Uncomplicated Firewall) par défaut. Vérifiez son statut et autorisez le port si nécessaire :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Vérifier le statut du pare-feu sudo ufw status # Si le pare-feu est actif, autoriser le port 8080 sudo ufw allow 8080/tcp # Ou plus spécifiquement pour un service web sudo ufw allow 'Apache' # si vous utilisez Apache sudo ufw allow 'Nginx Full' # si vous utilisez Nginx</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_étape_6_test_et_validation">7. Étape 6 : Test et validation</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_test_depuis_le_réseau_local">7.1. Test depuis le réseau local</h3> <div class="paragraph"> <p>D’abord, testez l’accès depuis une autre machine de votre réseau local :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Remplacez par l'IP locale de votre machine Ubuntu curl http://192.168.1.100:8080</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_test_depuis_lextérieur">7.2. Test depuis l’extérieur</h3> <div class="paragraph"> <p>Maintenant, testez depuis Internet en utilisant votre IP publique :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Remplacez par votre IP publique curl http://VOTRE_IP_PUBLIQUE:8080</code></pre> </div> </div> <div class="paragraph"> <p>Vous pouvez également utiliser des outils en ligne comme :</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="_bonnes_pratiques_et_sécurité">8. Bonnes pratiques et sécurité</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sécurisation_de_base">8.1. Sécurisation de base</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Configurer fail2ban pour protéger contre les attaques par force brute sudo apt update && sudo apt install fail2ban # Limiter l'accès avec UFW (exemple : autoriser seulement certaines IP) sudo ufw allow from 203.0.113.0/24 to any port 8080</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_monitoring_des_connexions">8.2. Monitoring des connexions</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Surveiller les connexions en temps réel sudo netstat -an | grep :8080 # Logs des connexions (selon votre application) sudo tail -f /var/log/nginx/access.log # pour Nginx sudo journalctl -f -u your-service # pour un service systemd</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_utilisation_dun_reverse_proxy">8.3. Utilisation d’un reverse proxy</h3> <div class="paragraph"> <p>Pour une meilleure sécurité et flexibilité, considérez l’utilisation d’un reverse proxy comme Nginx :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-nginx" data-lang="nginx">server { listen 80; server_name votre-domaine.com; location / { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_alternatives_au_port_forwarding">9. Alternatives au port forwarding</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_solutions_cloud">9.1. Solutions cloud</h3> <div class="ulist"> <ul> <li> <p><strong>ngrok</strong> : tunnel sécurisé temporaire</p> </li> <li> <p><strong>Cloudflare Tunnel</strong> : solution gratuite et sécurisée</p> </li> <li> <p><strong>serveo.net</strong> : tunnel SSH simple</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Exemple avec ngrok ngrok http 8080 # Exemple avec serveo ssh -R 80:localhost:8080 serveo.net</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_vps_et_reverse_proxy">9.2. VPS et reverse proxy</h3> <div class="paragraph"> <p>Pour un usage professionnel, considérez l’utilisation d’un VPS avec un reverse proxy pointant vers votre infrastructure locale via VPN.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_troubleshooting">10. Troubleshooting</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_problèmes_courants">10.1. Problèmes courants</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">Problème</th> <th class="tableblock halign-left valign-top">Solution</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Service inaccessible depuis l’extérieur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Vérifiez la configuration du port forwarding et que le service écoute sur 0.0.0.0</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">"Connection refused"</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le service n’est pas démarré ou écoute sur 127.0.0.1 uniquement</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">"Connection timeout"</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Problème de pare-feu (box ou Ubuntu) ou port forwarding mal configuré</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">IP publique change régulièrement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Configurez un DNS dynamique (DynDNS, No-IP, etc.)</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_debug_réseau">10.2. Debug réseau</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Tester la connectivité locale telnet localhost 8080 # Tester depuis une autre machine du réseau telnet 192.168.1.100 8080 # Vérifier les routes réseau ip route show # Analyser le trafic réseau sudo tcpdump -i any port 8080</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">11. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Exposer un service local sur Internet nécessite une configuration soigneuse du port forwarding, de la sécurité et du monitoring. Bien que cette approche soit parfaite pour du développement ou des projets personnels, pensez aux alternatives plus robustes (VPS, CDN, services cloud) pour un usage en production.</p> </div> <div class="paragraph"> <p>L’important est de toujours garder la sécurité à l’esprit : utilisez des mots de passe forts, mettez à jour régulièrement votre système, et surveillez les accès à vos services exposés.</p> </div> <div class="paragraph"> <p>N’hésitez pas à partager vos expériences et questions dans les commentaires !</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_quest_ce_que_la_monade_either">2. Qu’est-ce que la monade Either ?</a> <ul class="sectlevel2"> <li><a href="#_pourquoi_utiliser_either">2.1. Pourquoi utiliser Either ?</a></li> </ul> </li> <li><a href="#_contexte">3. Contexte</a></li> <li><a href="#_les_différentes_approches">4. Les différentes approches</a> <ul class="sectlevel2"> <li><a href="#_lapproche_classique_avec_when">4.1. L’approche classique avec <code>when</code></a></li> <li><a href="#_utilisation_de_fold_pour_une_approche_plus_concise">4.2. Utilisation de <code>fold</code> pour une approche plus concise</a></li> <li><a href="#_transformation_avec_map_et_mapleft">4.3. Transformation avec <code>map</code> et <code>mapLeft</code></a></li> <li><a href="#_gestion_des_erreurs_avec_getorelse">4.4. Gestion des erreurs avec <code>getOrElse</code></a></li> <li><a href="#_actions_latérales_avec_onleft_et_onright">4.5. Actions latérales avec <code>onLeft</code> et <code>onRight</code></a></li> <li><a href="#_chaînage_dopérations_avec_flatmap">4.6. Chaînage d’opérations avec <code>flatMap</code></a></li> <li><a href="#_transformation_bidirectionnelle_avec_bimap">4.7. Transformation bidirectionnelle avec <code>bimap</code></a></li> <li><a href="#_inversion_des_côtés_avec_swap">4.8. Inversion des côtés avec <code>swap</code></a></li> <li><a href="#_utilisation_de_tap_et_tapleft">4.9. Utilisation de <code>tap</code> et <code>tapLeft</code> :</a></li> <li><a href="#_utilisation_de_recover">4.10. Utilisation de <code>recover</code> :</a></li> </ul> </li> <li><a href="#_cas_dutilisation_pratiques">5. Cas d’utilisation pratiques</a></li> <li><a href="#_conclusion">6. Conclusion</a></li> <li><a href="#_pour_aller_plus_loin">7. Pour aller plus loin</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Temps de lecture :</em></div> <p>12 à 15 minutes.</p> </div> <div class="paragraph"> <div class="title"><em>Public cible :</em></div> <p>Développeurs Kotlin de niveau intermédiaire à avancé.</p> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans le monde de la programmation fonctionnelle en Kotlin, la bibliothèque Arrow offre des outils puissants pour gérer les erreurs et les cas alternatifs. Parmi ces outils, la monade <code>Either</code> se distingue par sa capacité à représenter deux états possibles : succès (Right) ou échec (Left). Mais comment naviguer efficacement entre ces deux états ? C’est ce que nous allons explorer dans cet article.</p> </div> </div> </div> <div class="sect1"> <h2 id="_quest_ce_que_la_monade_either">2. Qu’est-ce que la monade Either ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>La monade <code>Either</code> est une structure de données qui représente deux possibilités mutuellement exclusives. En Kotlin avec Arrow, elle est souvent utilisée pour gérer les cas de succès et d’échec d’une opération, offrant une alternative élégante aux exceptions traditionnelles.</p> </div> <div class="sect2"> <h3 id="_pourquoi_utiliser_either">2.1. Pourquoi utiliser Either ?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Gestion explicite des erreurs : Force le développeur à considérer les cas d’échec.</p> </li> <li> <p>Composition fonctionnelle : Facilite le chaînage d’opérations qui peuvent échouer.</p> </li> <li> <p>Type-safety : Les erreurs sont typées, ce qui aide à les gérer de manière plus précise.</p> </li> <li> <p>Pas d’exceptions : Évite les effets de bord et les interruptions inattendues du flux d’exécution.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_contexte">3. Contexte</h2> <div class="sectionbody"> <div class="paragraph"> <p>Imaginons que vous développez une API REST avec <a href="https://spring.io/projects/spring-boot/">Spring Boot</a> et <a href="https://kotlinlang.org/">Kotlin</a>, en utilisant la bibliothèque <a href="https://arrow-kt.io/">Arrow</a>. Vous avez une fonction <code>findOneUserByEmail</code> qui renvoie un <code>Either<Throwable, User></code>. Comment pouvez-vous traiter ce résultat de manière élégante et fonctionnelle ?</p> </div> <div class="paragraph"> <p>Nous avons une classe User :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@file:Suppress( "RemoveRedundantQualifierName", "MemberVisibilityCanBePrivate", "SqlNoDataSourceInspection" ) package webapp.users import arrow.core.Either import arrow.core.left import arrow.core.right import com.fasterxml.jackson.annotation.JsonIgnore import com.fasterxml.jackson.databind.ObjectMapper import jakarta.validation.constraints.NotNull import jakarta.validation.constraints.Pattern import jakarta.validation.constraints.Size import org.springframework.beans.factory.getBean import org.springframework.context.ApplicationContext import org.springframework.data.r2dbc.core.R2dbcEntityTemplate import org.springframework.r2dbc.core.DatabaseClient import org.springframework.r2dbc.core.awaitOne import org.springframework.r2dbc.core.awaitRowsUpdated import webapp.core.property.ANONYMOUS_USER import webapp.core.property.EMPTY_STRING import webapp.core.utils.AppUtils.cleanField import webapp.users.EntityModel.Companion.ID_MEMBER import webapp.users.User.UserDao.Attributes.EMAIL_ATTR import webapp.users.User.UserDao.Attributes.ID_ATTR import webapp.users.User.UserDao.Attributes.LANG_KEY_ATTR import webapp.users.User.UserDao.Attributes.LOGIN_ATTR import webapp.users.User.UserDao.Attributes.PASSWORD_ATTR import webapp.users.User.UserDao.Attributes.VERSION_ATTR import webapp.users.User.UserDao.Constraints.LOGIN_REGEX import webapp.users.User.UserDao.Fields.EMAIL_FIELD import webapp.users.User.UserDao.Fields.ID_FIELD import webapp.users.User.UserDao.Fields.LANG_KEY_FIELD import webapp.users.User.UserDao.Fields.LOGIN_FIELD import webapp.users.User.UserDao.Fields.PASSWORD_FIELD import webapp.users.User.UserDao.Fields.VERSION_FIELD import webapp.users.User.UserDao.Relations.INSERT import webapp.users.security.Role import webapp.users.security.Role.RoleDao import webapp.users.security.UserRole.UserRoleDao import java.util.* import jakarta.validation.constraints.Email as EmailConstraint data class User( override val id: UUID? = null, @field:NotNull @field:Pattern(regexp = LOGIN_REGEX) @field:Size(min = 1, max = 50) val login: String, @JsonIgnore @field:NotNull @field:Size(min = 60, max = 60) val password: String = EMPTY_STRING, @field:EmailConstraint @field:Size(min = 5, max = 254) val email: String = EMPTY_STRING, @JsonIgnore val roles: MutableSet<Role> = mutableSetOf(Role(ANONYMOUS_USER)), @field:Size(min = 2, max = 10) val langKey: String = EMPTY_STRING, @JsonIgnore val version: Long = -1, ) : EntityModel<UUID>() { companion object { @JvmStatic fun main(args: Array<String>) = println(UserDao.Relations.sqlScript) } object UserDao { object Constraints { // Regex for acceptable logins const val LOGIN_REGEX = "^(?>[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)|(?>[_.@A-Za-z0-9-]+)$" const val PASSWORD_MIN: Int = 4 const val PASSWORD_MAX: Int = 16 const val IMAGE_URL_DEFAULT = "https://placehold.it/50x50" const val PHONE_REGEX = "^(\\+|00)?[1-9]\\d{0,49}\$" } object Members { const val PASSWORD_MEMBER = "password" const val ROLES_MEMBER = "roles" } object Fields { const val ID_FIELD = "`id`" const val LOGIN_FIELD = "`login`" const val PASSWORD_FIELD = "`password`" const val EMAIL_FIELD = "`email`" const val LANG_KEY_FIELD = "`lang_key`" const val VERSION_FIELD = "`version`" } object Attributes { val ID_ATTR = ID_FIELD.cleanField() val LOGIN_ATTR = LOGIN_FIELD.cleanField() val PASSWORD_ATTR = PASSWORD_FIELD.cleanField() val EMAIL_ATTR = EMAIL_FIELD.cleanField() const val LANG_KEY_ATTR = "langKey" val VERSION_ATTR = VERSION_FIELD.cleanField() } object Relations { const val TABLE_NAME = "`user`" const val SQL_SCRIPT = """ CREATE TABLE IF NOT EXISTS $TABLE_NAME ( $ID_FIELD UUID default random_uuid() PRIMARY KEY, $LOGIN_FIELD VARCHAR, $PASSWORD_FIELD VARCHAR, $EMAIL_FIELD VARCHAR, $LANG_KEY_FIELD VARCHAR, $VERSION_FIELD bigint ); CREATE UNIQUE INDEX IF NOT EXISTS `uniq_idx_user_login` ON $TABLE_NAME ($LOGIN_FIELD); CREATE UNIQUE INDEX IF NOT EXISTS `uniq_idx_user_email` ON $TABLE_NAME ($EMAIL_FIELD); """ @Suppress("SqlDialectInspection") const val INSERT = """ insert into $TABLE_NAME ( $LOGIN_FIELD, $EMAIL_FIELD, $PASSWORD_FIELD, $LANG_KEY_FIELD, $VERSION_FIELD ) values ( :login, :email, :password, :langKey, :version)""" @JvmStatic val sqlScript: String get() = setOf( UserDao.Relations.SQL_SCRIPT, RoleDao.Relations.SQL_SCRIPT, UserRoleDao.Relations.SQL_SCRIPT ).joinToString("") .trimMargin() } object Dao { val Pair<User, ApplicationContext>.toJson: String get() = second.getBean<ObjectMapper>().writeValueAsString(first) suspend fun Pair<User, ApplicationContext>.save(): Either<Throwable, Long> = try { second.getBean<R2dbcEntityTemplate>() .databaseClient .sql(INSERT) .bind(LOGIN_ATTR, first.login) .bind(EMAIL_ATTR, first.email) .bind(PASSWORD_ATTR, first.password) .bind(LANG_KEY_ATTR, first.langKey) .bind(VERSION_ATTR, first.version) .fetch() .awaitRowsUpdated() .right() } catch (e: Throwable) { e.left() } suspend fun ApplicationContext.findOneUserByEmail( email: String ): Either<Throwable, User> = try { getBean<DatabaseClient>() .sql("SELECT * FROM `user` WHERE LOWER(email) = LOWER(:email)") .bind("email", email) .fetch() .awaitOne() .let { row -> User( id = row[ID_ATTR] as UUID?, login = row[LOGIN_ATTR] as String, password = row[PASSWORD_ATTR] as String, email = row[EMAIL_ATTR] as String, langKey = row[LANG_KEY_ATTR] as String, version = row[VERSION_ATTR] as Long ) }.right() } catch (e: Throwable) { e.left() } } } /** Account REST API URIs */ object UserRestApis { const val API_AUTHORITY = "/api/authorities" const val API_USERS = "/api/users" const val API_SIGNUP = "/signup" const val API_SIGNUP_PATH = "$API_USERS$API_SIGNUP" const val API_ACTIVATE = "/activate" const val API_ACTIVATE_PATH = "$API_USERS$API_ACTIVATE?key=" const val API_ACTIVATE_PARAM = "{activationKey}" const val API_ACTIVATE_KEY = "key" const val API_RESET_INIT = "/reset-password/init" const val API_RESET_FINISH = "/reset-password/finish" const val API_CHANGE = "/change-password" const val API_CHANGE_PATH = "$API_USERS$API_CHANGE" } } // Abstract entity model with Generic ID, which can be of any type abstract class EntityModel<T>( open val id: T? = null ) { companion object { const val ID_MEMBER = "id" } } // Generic extension function that allows the ID to be applied to any EntityModel type inline fun <reified T : EntityModel<ID>, ID> T.withId(id: ID): T { // Use reflection to create a copy with the passed ID return this::class.constructors.first { it.parameters.any { param -> param.name == ID_MEMBER } } .call(id, *this::class.constructors.first().parameters.drop(1).map { param -> this::class.members.first { member -> member.name == param.name }.call(this) }.toTypedArray()) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_les_différentes_approches">4. Les différentes approches</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_lapproche_classique_avec_when">4.1. L’approche classique avec <code>when</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val user: User by lazy { userFactory(USER) } val result: Either<Throwable, User> = context.findOneUserByEmail(user.email) when (result) { is Either.Left -> { val error = result.value println("Erreur : ${error.message}") } is Either.Right -> { val user = result.value println("Utilisateur trouvé : ${user.login}") } }</code></pre> </div> </div> <div class="paragraph"> <p>Cette méthode, bien que simple et lisible, ne tire pas pleinement parti des capacités fonctionnelles d’Arrow.</p> </div> </div> <div class="sect2"> <h3 id="_utilisation_de_fold_pour_une_approche_plus_concise">4.2. Utilisation de <code>fold</code> pour une approche plus concise</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.fold( { error -> println("Erreur : ${error.message}") }, { user -> println("Utilisateur trouvé : ${user.login}") } )</code></pre> </div> </div> <div class="paragraph"> <p><code>fold</code> permet de définir des actions pour les deux cas (Left et Right) de manière concise et élégante.</p> </div> </div> <div class="sect2"> <h3 id="_transformation_avec_map_et_mapleft">4.3. Transformation avec <code>map</code> et <code>mapLeft</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val processedResult = result .map { user -> "Utilisateur trouvé : ${user.login}" } .mapLeft { error -> "Erreur : ${error.message}" } println(processedResult.merge())</code></pre> </div> </div> <div class="paragraph"> <p>Cette approche permet de transformer les valeurs contenues dans Either tout en préservant sa structure, idéal pour des chaînes de traitement plus complexes.</p> </div> </div> <div class="sect2"> <h3 id="_gestion_des_erreurs_avec_getorelse">4.4. Gestion des erreurs avec <code>getOrElse</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val user = result.getOrElse { error -> println("Erreur : ${error.message}") User(login = "default", email = "default@example.com") // utilisateur par défaut } println("Login : ${user.login}")</code></pre> </div> </div> <div class="paragraph"> <p><code>getOrElse</code> offre une gestion élégante des erreurs en permettant de fournir une valeur par défaut.</p> </div> </div> <div class="sect2"> <h3 id="_actions_latérales_avec_onleft_et_onright">4.5. Actions latérales avec <code>onLeft</code> et <code>onRight</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.onLeft { error -> println("Erreur : ${error.message}") } .onRight { user -> println("Utilisateur trouvé : ${user.login}") }</code></pre> </div> </div> <div class="paragraph"> <p>Ces méthodes permettent d’effectuer des actions sur chaque côté sans modifier l’Either, parfait pour le logging ou les effets secondaires légers.</p> </div> </div> <div class="sect2"> <h3 id="_chaînage_dopérations_avec_flatmap">4.6. Chaînage d’opérations avec <code>flatMap</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun findUser(email: String): Either<Throwable, User> = // ... implémentation fun getUserPermissions(user: User): Either<Throwable, List<String>> = // ... implémentation val userPermissions = findUser("user@example.com") .flatMap { user -> getUserPermissions(user) }</code></pre> </div> </div> <div class="paragraph"> <p><code>flatMap</code> est utile pour enchaîner des opérations qui retournent elles-mêmes des <code>Either</code>, évitant ainsi les <code>Either</code> imbriqués.</p> </div> </div> <div class="sect2"> <h3 id="_transformation_bidirectionnelle_avec_bimap">4.7. Transformation bidirectionnelle avec <code>bimap</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result: Either<Throwable, User> = // ... obtention du résultat val processedResult = result.bimap( { error -> "Erreur: ${error.message}" }, { user -> "Utilisateur: ${user.login}" } )</code></pre> </div> </div> <div class="paragraph"> <p><code>bimap</code> permet de transformer à la fois le côté gauche et le côté droit en une seule opération.</p> </div> </div> <div class="sect2"> <h3 id="_inversion_des_côtés_avec_swap">4.8. Inversion des côtés avec <code>swap</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result: Either<Throwable, User> = // ... obtention du résultat val swapped = result.swap()</code></pre> </div> </div> <div class="paragraph"> <p><code>swap</code> est utile lorsque vous voulez inverser les côtés d’un <code>Either</code>, par exemple pour adapter l’interface d’une fonction à une autre.</p> </div> </div> <div class="sect2"> <h3 id="_utilisation_de_tap_et_tapleft">4.9. Utilisation de <code>tap</code> et <code>tapLeft</code> :</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.tap { user -> println("Utilisateur trouvé : ${user.login}") } .tapLeft { error -> println("Erreur : ${error.message}") }</code></pre> </div> </div> <div class="paragraph"> <p>Similaire à <code>onLeft</code> et <code>onRight</code>, mais ces méthodes retournent l’Either original, ce qui est utile pour le chaînage d’opérations.</p> </div> </div> <div class="sect2"> <h3 id="_utilisation_de_recover">4.10. Utilisation de <code>recover</code> :</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val recoveredUser = result.recover { error -> println("Erreur récupérée : ${error.message}") User(login = "recovered", email = "recovered@example.com") } println("Login : ${recoveredUser.login}")</code></pre> </div> </div> <div class="paragraph"> <p>Cette méthode permet de transformer un Either.Left en Either.Right en fournissant une valeur de remplacement.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_cas_dutilisation_pratiques">5. Cas d’utilisation pratiques</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Utilisez <code>fold</code> pour des opérations simples nécessitant un traitement pour chaque cas.</p> </li> <li> <p>Préférez <code>map</code> et <code>mapLeft</code> pour des transformations de données sans changer la structure de l'`Either`.</p> </li> <li> <p>Optez pour <code>flatMap</code> lors du chaînage d’opérations pouvant échouer.</p> </li> <li> <p>Employez <code>recover</code> pour fournir une valeur par défaut en cas d’erreur.</p> </li> <li> <p>Choisissez <code>onLeft</code> et <code>onRight</code> (ou <code>tap</code> et <code>tapLeft</code>) pour des effets secondaires comme le logging.</p> </li> <li> <p>Utilisez <code>bimap</code> pour transformer les deux côtés en une seule opération.</p> </li> <li> <p>Appliquez <code>swap</code> lorsque vous devez adapter l’interface d’une fonction à une autre.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">6. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Chacune de ces approches a ses avantages selon le contexte d’utilisation. Les méthodes comme <code>fold</code>, <code>map</code>/<code>mapLeft</code>, et <code>recover</code> sont particulièrement utiles lorsque vous voulez enchaîner plusieurs opérations ou transformer les données de manière fonctionnelle.</p> </div> <div class="paragraph"> <p>La monade <code>Either</code> d’Arrow offre une flexibilité remarquable pour gérer les cas de succès et d’erreur dans vos applications Kotlin. En maîtrisant ces différentes approches, vous pourrez écrire un code plus robuste, plus lisible et plus fonctionnel.</p> </div> <div class="paragraph"> <p>Dans votre prochain projet, n’hésitez pas à explorer ces techniques pour tirer le meilleur parti de la programmation fonctionnelle avec Kotlin et Arrow !</p> </div> </div> </div> <div class="sect1"> <h2 id="_pour_aller_plus_loin">7. Pour aller plus loin</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Documentation officielle d’Arrow : <a href="https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-either/">Arrow Either</a></p> </li> <li> <p>Kotlin Coroutines avec Arrow : <a href="https://arrow-kt.io/docs/fx/">Arrow Fx Coroutines</a></p> </li> </ul> </div> <div class="paragraph"> <p>N’oubliez pas de partager vos expériences et vos techniques préférées pour travailler avec <code>Either</code> dans les commentaires ci-dessous !</p> </div> </div> </div> https://pages-content.github.io//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="#_introduction">1. Introduction</a></li> <li><a href="#_utilisation_de_la_commande_find">2. Utilisation de la commande <code>find</code></a> <ul class="sectlevel2"> <li><a href="#_options_supplémentaires_pour_find">2.1. Options supplémentaires pour <code>find</code></a></li> </ul> </li> <li><a href="#_utilisation_de_la_commande_locate">3. Utilisation de la commande <code>locate</code></a></li> <li><a href="#_utilisation_de_la_commande_grep_pour_rechercher_du_texte_dans_des_fichiers">4. Utilisation de la commande <code>grep</code> pour rechercher du texte dans des fichiers</a></li> <li><a href="#_conclusion">5. Conclusion</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Temps de lecture :</em></div> <p>5 à 7 minutes.</p> </div> <div class="paragraph"> <div class="title"><em>Public :</em></div> <p>Débutant et intermédiaires.</p> </div> <div class="paragraph"> <div class="title">La problématique :</div> <p>Rechercher des fichiers dans un système d’exploitation linux à travers le terminal.</p> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">1. Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans cet article, nous allons explorer comment rechercher un fichier sous Ubuntu en utilisant un terminal Zsh. Zsh (Z shell) est un interpréteur de commandes puissant et largement utilisé pour sa flexibilité et ses fonctionnalités avancées.</p> </div> <div class="paragraph"> <p>Ubuntu, une distribution Linux populaire, propose plusieurs outils en ligne de commande pour rechercher des fichiers. Nous verrons comment utiliser des commandes telles que <code>find</code>, <code>locate</code> et <code>grep</code> pour localiser des fichiers rapidement et efficacement dans le terminal.</p> </div> </div> </div> <div class="sect1"> <h2 id="_utilisation_de_la_commande_find">2. Utilisation de la commande <code>find</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>La commande <code>find</code> permet de rechercher des fichiers dans un répertoire spécifique et ses sous-répertoires. Sa syntaxe de base est la suivante :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">find [chemin] -name [nom_du_fichier]</code></pre> </div> </div> <div class="paragraph"> <p>Voici un exemple pratique où nous recherchons un fichier nommé <code>example.txt</code> dans le répertoire <code>/home</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">find /home -name "example.txt"</code></pre> </div> </div> <div class="paragraph"> <p>Cette commande va parcourir tous les sous-répertoires de <code>/home</code> et afficher le chemin complet du fichier s’il est trouvé.</p> </div> <div class="paragraph"> <p><strong>Manuel en ligne de la commande <code>find</code> : <a href="https://man.archlinux.org/man/find.1.fr/">man find</a></strong></p> </div> <div class="sect2"> <h3 id="_options_supplémentaires_pour_find">2.1. Options supplémentaires pour <code>find</code></h3> <div class="paragraph"> <p>La commande <code>find</code> est très puissante et dispose de nombreuses options. Voici quelques exemples utiles :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Rechercher par type de fichier</strong> : Pour rechercher uniquement des fichiers, utilisez <code>-type f</code>, et pour rechercher des répertoires, utilisez <code>-type d</code>.</p> </li> <li> <p><strong>Rechercher par taille</strong> : Vous pouvez aussi filtrer les fichiers en fonction de leur taille en utilisant l’option <code>-size</code>. Par exemple, pour rechercher des fichiers de plus de 100 Mo, utilisez :</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">find /home -size +100M</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_utilisation_de_la_commande_locate">3. Utilisation de la commande <code>locate</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>La commande <code>locate</code> est plus rapide que <code>find</code> car elle utilise une base de données pré-indexée des fichiers présents sur le système. Vous devez d’abord mettre à jour cette base de données avec la commande suivante :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">sudo updatedb</code></pre> </div> </div> <div class="paragraph"> <p>Ensuite, vous pouvez rechercher un fichier comme ceci :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">locate example.txt</code></pre> </div> </div> <div class="paragraph"> <p>J’utilise <a href="https://fr.wikipedia.org/wiki/Z_Shell">zsh</a> avec <a href="https://github.com/ohmyzsh/ohmyzsh/wiki">oh-my-zsh</a>, il s’avere que la commande <code>locate</code> n’est pas accessible depuis <code>zsh</code> mais bien possible depuis <code>bash</code>, pour palier à cela, l’argument <code>-c</code> de la commande <code>bash</code> permet de lancer une commande <code>bash</code> depuis un autre type de terminal.</p> </div> <div class="paragraph"> <p>ici je cherche les fichiers qui se termine par le motif <code>001.pdf</code> dans le user directory</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">bash -c "locate ~/*001.pdf"</code></pre> </div> </div> <div class="paragraph"> <p><strong>Manuel en ligne de la commande <code>locate</code> : <a href="https://man.archlinux.org/man/locate.1.fr/">man locate</a></strong></p> </div> </div> </div> <div class="sect1"> <h2 id="_utilisation_de_la_commande_grep_pour_rechercher_du_texte_dans_des_fichiers">4. Utilisation de la commande <code>grep</code> pour rechercher du texte dans des fichiers</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si vous voulez rechercher un texte spécifique à l’intérieur d’un fichier, vous pouvez utiliser <code>grep</code>. Par exemple, pour rechercher l’occurrence du mot "Ubuntu" dans tous les fichiers <code>.txt</code> du répertoire courant, utilisez :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">grep "Ubuntu" *.txt</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">5. Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>La recherche de fichiers sous Ubuntu via un terminal Zsh peut se faire à l’aide de plusieurs outils puissants. <code>find</code> est flexible et offre une multitude d’options, tandis que <code>locate</code> permet une recherche rapide à l’aide d’une base de données pré-construite. Enfin, <code>grep</code> permet de trouver des occurrences de texte à l’intérieur des fichiers.</p> </div> <div class="paragraph"> <p>Ces commandes vous offrent une gamme complète d’outils pour rendre vos recherches de fichiers plus efficaces et adaptées à vos besoins et chacune des ces commande posséde un manuel visible avec la commande <code>man</code></p> </div> </div> </div> https://pages-content.github.io//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="#_le_clavier">1. Le clavier :</a> <ul class="sectlevel2"> <li><a href="#_la_touche_ctrl">1.1. <em>la touche <Ctrl></em></a></li> </ul> </li> <li><a href="#_permissionauthorization">2. Permission(authorization)</a></li> <li><a href="#_recherche_de_fichiers">3. Recherche de fichiers</a></li> </ul> </div> <div class="sect1"> <h2 id="_le_clavier">1. Le clavier :</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_la_touche_ctrl">1.1. <em>la touche <Ctrl></em></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"><em>Code</em></th> <th class="tableblock halign-left valign-top"><em>Touches associées</em></th> <th class="tableblock halign-left valign-top"><em>Fonction</em></th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>intr</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^C</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stopper un programme</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>erase</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^H</strong> <em><Backspace></em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Effacer le dernier caractère</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>werase</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^W</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Effacer le dernier mot</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>kill</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^U</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Effacer la ligne</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>quit</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^\</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stopper programme avec core</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>stop</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^S</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Geler l’affichage à l’écran</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>start</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^Q</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Relancer l’affichage</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>eof</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^D</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Indiquer la fin des données</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>rprnt</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^R</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Réimpression de la ligne</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>flush</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^O</strong></p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>lnext</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^V</strong></p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>susp</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^Z /^Y</strong></p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>^I</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tabulation</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><a href="https://korben.info/les-raccourcis-clavier-pour-bash-terminal-linux-et-macos.html">lien</a><br> <a href="https://blogmotion.fr/systeme/astuces-bash-linux-16175">autre lien</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_permissionauthorization">2. Permission(authorization)</h2> <div class="sectionbody"> <div class="paragraph"> <p>CHMOD est utilisé pour changer les permissions d’un fichier.</p> </div> <div class="listingblock"> <div class="content"> <pre>PERMISSION COMMAND 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 U = User G = Group W = World r = Readable w = writable x = executable - = no permission</pre> </div> </div> <div class="paragraph"> <p>Une autre facon de voir les permissions:</p> </div> <div class="listingblock"> <div class="content"> <pre>400 read by owner 040 read by group 004 read by anybody (other) 200 write by owner 020 write by group 002 write by anybody 100 execute by owner 010 execute by group 001 execute by anybody</pre> </div> </div> <div class="paragraph"> <p>Pour obtenir une combinaison, il suffit de les additionner.<br> Par exemple, pour être lu, écrit, exécuté par le propriétaire,<br> lu, exécuté, par groupe et exécuté par n’importe qui,<br> vous ajouteriez 400+200+100+040+010+001 pour donner 751.<br></p> </div> </div> </div> <div class="sect1"> <h2 id="_recherche_de_fichiers">3. <a href="/blog/2024/0074_seach_file_linux_post.html">Recherche de fichiers</a></h2> <div class="sectionbody"> </div> </div> https://pages-content.github.io//blog/2024/0072_Exposer_un_port_linux_subsystem_post.adoc.html Thu, 1 Feb 2024 00:00:00 +0000 blog/2024/0072_Exposer_un_port_linux_subsystem_post.adoc.html <div class="paragraph"> <div class="title">La problématique :</div> <p>Comment exposer le port 8820 du sous système ubuntu dont l’hôte est windows ? Ubuntu est amorcé par la commande <code>wsl --install</code>.</p> </div> <div class="paragraph"> <div class="title">Réference :</div> <p><a href="https://www.it-connect.fr/wsl-2-port-forwarding-comment-acceder-a-sa-machine-virtuelle-a-distance/">wsl-2-port-forwarding</a></p> </div> https://pages-content.github.io//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>Temps de lecture : 3 min</em></div> <p>Pandoc un convertisseur universel de document</p> </div> <div class="paragraph"> <p>Pandoc est un logiciel de traitement de texte open source qui peut être utilisé pour convertir des documents entre différents formats. Il existe plusieurs façons d’installer Pandoc.</p> </div> </div> </div> <div class="sect1"> <h2 id="_installation_à_partir_de_la_page_de_téléchargement"><strong>Installation à partir de la page de téléchargement</strong></h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour installer Pandoc à partir de la page de téléchargement, procédez comme suit :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Accédez à la page de téléchargement de Pandoc : <a href="https://pandoc.org/installing.html/">https://pandoc.org/installing.html</a></p> </li> <li> <p>Téléchargez l’installateur de package pour votre système d’exploitation.</p> </li> <li> <p>Exécutez l’installateur pour installer Pandoc.</p> </li> </ol> </div> <div class="paragraph"> <p><strong>Installation à partir d’un fichier zip</strong></p> </div> <div class="paragraph"> <p>Pour installer Pandoc à partir d’un fichier zip, procédez comme suit :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Téléchargez le fichier zip contenant les binaires de Pandoc et la documentation.</p> </li> <li> <p>Décompressez le fichier zip.</p> </li> <li> <p>Déplacez les binaires vers un répertoire de votre choix.</p> </li> </ol> </div> <div class="paragraph"> <p><strong>Installation à l’aide de Chocolatey</strong></p> </div> <div class="paragraph"> <p>Pour installer Pandoc à l’aide de Chocolatey, procédez comme suit :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Ouvrez une invite de commande.</p> </li> <li> <p>Exécutez la commande suivante :</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-powershell" data-lang="powershell">choco install pandoc</code></pre> </div> </div> <div class="paragraph"> <p><strong>Installation à l’aide de winget</strong></p> </div> <div class="paragraph"> <p>Pour installer Pandoc à l’aide de winget, procédez comme suit :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Ouvrez une invite de commande.</p> </li> <li> <p>Exécutez la commande suivante :</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-powershell" data-lang="powershell">winget install --source winget --exact --id JohnMacFarlane.Pandoc</code></pre> </div> </div> <div class="paragraph"> <p><strong>Recommandations</strong></p> </div> <div class="paragraph"> <p>Par défaut, Pandoc crée des PDFs à l’aide de LaTeX. Il est recommandé d’installer LaTeX via MiKTeX. Avec l’option <code>--pdf-engine</code>, vous pouvez toutefois spécifier d’autres programmes pour cette tâche.</p> </div> <div class="paragraph"> <p><strong>Mise en garde</strong></p> </div> <div class="paragraph"> <p>L’utilisation de plusieurs méthodes d’installation peut entraîner deux installations distinctes de Pandoc. Il est recommandé de désinstaller correctement Pandoc avant de passer à une méthode d’installation alternative.</p> </div> <div class="paragraph"> <p><strong>Installation sur linux par WSL</strong></p> </div> <div class="paragraph"> <p>Vérifiez si la version de pandoc dans votre gestionnaire de paquets n’est pas obsolète. Pandoc se trouve dans les dépôts de Debian, Ubuntu, Slackware, Arch, Fedora, NixOS, openSUSE, gentoo et Void.</p> </div> <div class="paragraph"> <p>Pour obtenir la dernière version, nous proposons un paquet binaire pour l’architecture amd64 sur la page de téléchargement.</p> </div> <div class="paragraph"> <p>L’exécutable est lié statiquement et n’a pas de dépendances dynamiques ni de dépendances sur des fichiers de données externes. Remarque : en raison du lien statique, le binaire pandoc de ce paquet ne peut pas utiliser les filtres lua qui nécessitent des modules lua externes écrits en C.</p> </div> <div class="paragraph"> <p>Un tarball et un installateur deb sont fournis. Pour installer le deb :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">sudo dpkg -i $DEB</code></pre> </div> </div> <div class="paragraph"> <p>Exemple au moment de l’écriture :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">wget https://github.com/jgm/pandoc/releases/download/3.1.11.1/pandoc-3.1.11.1-1-amd64.deb</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">sudo dpkg -i pandoc-3.1.11.1-1-amd64.deb</code></pre> </div> </div> <div class="paragraph"> <p>où <code>$DEB</code> est le chemin vers le deb téléchargé. Cela installera l’exécutable <code>pandoc</code> et la page de manuel.</p> </div> <div class="paragraph"> <p>Si vous utilisez une distribution basée sur RPM, vous pourrez peut-être installer le deb de notre page de téléchargement à l’aide d’alien.</p> </div> <div class="paragraph"> <p>Sur n’importe quelle distribution, vous pouvez installer à partir du tarball dans <code>$DEST</code> (par exemple, <code>/usr/local/</code> ou <code>$HOME/.local</code>) en faisant :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">tar xvzf $TGZ --strip-components 1 -C $DEST</code></pre> </div> </div> <div class="paragraph"> <p>où <code>$TGZ</code> est le chemin vers le tarball zippé téléchargé. Pour les versions de Pandoc antérieures à 2.0, qui ne fournissent pas de tarball, essayez plutôt :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">ar p $DEB data.tar.gz | tar xvz --strip-components 2 -C $DEST</code></pre> </div> </div> <div class="paragraph"> <p>Vous pouvez également installer à partir de la source, en utilisant les instructions ci-dessous sous <code>Compilation à partir de la source</code>. Notez que la plupart des distributions ont la plate-forme Haskell dans leurs dépôts de paquets. Par exemple, sur Debian/Ubuntu, vous pouvez l’installer avec </p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">apt-get install haskell-platform</code></pre> </div> </div> <div class="paragraph"> <p>Par défaut, Pandoc crée des PDFs à l’aide de LaTeX. Nous vous recommandons d’installer TeX Live via votre gestionnaire de paquets. (Sur Debian/Ubuntu, <code>apt-get install texlive</code>). Avec l’option <code>--pdf-engine</code>, vous pouvez toutefois spécifier d’autres programmes pour cette tâche.</p> </div> </div> </div> https://pages-content.github.io//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>Temps de lecture : 2 min</em></div> <p>Créer une implémentation complète de la classe kotlin.Triple en JavaScript, TypeScript et Python en utilisant la programmation fonctionnelle.</p> </div> <div class="paragraph"> <p><strong>Note :</strong> Les types <code>Maybe</code>, <code>Either</code>, <code>Result</code> ne font pas partie du langage de base en JavaScript ou TypeScript, donc il faut les implémenter nous-mêmes.</p> </div> </div> </div> <div class="sect1"> <h2 id="_javascript">JavaScript</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">//javascript // Maybe type const Maybe = (value) => ({ map: (fn) => (value !== null && value !== undefined ? Maybe(fn(value)) : Maybe(null)), flatMap: (fn) => (value !== null && value !== undefined ? fn(value) : Maybe(null)), getOrElse: (defaultValue) => (value !== null && value !== undefined ? value : defaultValue), }); // Either type const Either = { Left: (value) => ({ map: (fn) => Either.Left(value), flatMap: (fn) => Either.Left(value), getOrElse: (defaultValue) => defaultValue, isLeft: true, isRight: false, }), Right: (value) => ({ map: (fn) => Either.Right(fn(value)), flatMap: (fn) => fn(value), getOrElse: (defaultValue) => value, isLeft: false, isRight: true, }), }; // Triple class class Triple { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; } map(fn) { return new Triple(fn(this.a), fn(this.b), fn(this.c)); } static of(a, b, c) { return new Triple(a, b, c); } // Example method using Maybe and Either divideBy(other) { return Maybe(this.b) .flatMap((numerator) => Maybe(other) .flatMap((denominator) => denominator !== 0 ? Either.Right(numerator / denominator) : Either.Left('Division by zero') ) ) .getOrElse(Either.Left('Invalid input')); } } // Example usage const triple = Triple.of(1, 2, 3); const result = triple.map((x) => x * 2); console.log(result); // Triple { a: 2, b: 4, c: 6 } const divisionResult = triple.divideBy(2); console.log(divisionResult); // Either.Right { value: 1 } const invalidDivisionResult = triple.divideBy(0); console.log(invalidDivisionResult); // Either.Left { value: 'Division by zero' }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_typescript">TypeScript</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">//Typescript // Maybe type // noinspection JSAnnotator type Maybe<T> = { map<U>(fn: (value: T) => U): Maybe<U>; flatMap<U>(fn: (value: T) => Maybe<U>): Maybe<U>; getOrElse(defaultValue: T): T; }; const just = <T>(value: T): Maybe<T> => ({ map: <U>(fn: (value: T) => U) => just(fn(value)), flatMap: <U>(fn: (value: T) => Maybe<U>) => fn(value), getOrElse: (_: T) => value, }); const nothing = <T>(): Maybe<T> => ({ map: <U>(_: (value: T) => U) => nothing<U>(), flatMap: <U>(_: (value: T) => Maybe<U>) => nothing<U>(), getOrElse: (defaultValue: T) => defaultValue, }); // Either type type Either<L, R> = { map<U>(fn: (value: R) => U): Either<L, U>; flatMap<U>(fn: (value: R) => Either<L, U>): Either<L, U>; getOrElse(defaultValue: R): R; isLeft: boolean; isRight: boolean; }; const left = <L, R>(value: L): Either<L, R> => ({ map: <U>(_: (value: R) => U) => left<L, U>(value), flatMap: <U>(_: (value: R) => Either<L, U>) => left<L, U>(value), getOrElse: (defaultValue: R) => defaultValue, isLeft: true, isRight: false, }); const right = <L, R>(value: R): Either<L, R> => ({ map: <U>(fn: (value: R) => U) => right<L, U>(fn(value)), flatMap: <U>(fn: (value: R) => Either<L, U>) => fn(value), getOrElse: (_: R) => value, isLeft: false, isRight: true, }); // Triple class class Triple<T> { constructor(public a: T, public b: T, public c: T) {} map<U>(fn: (value: T) => U): Triple<U> { return new Triple<U>(fn(this.a), fn(this.b), fn(this.c)); } static of<T>(a: T, b: T, c: T): Triple<T> { return new Triple<T>(a, b, c); } // Example method using Maybe and Either divideBy(other: T): Either<string, number> { return just(this.b) .flatMap((numerator) => just(other) .flatMap((denominator) => denominator !== 0 ? right(numerator / denominator) : left('Division by zero') ) ) .getOrElse(left('Invalid input')); } } // Example usage const triple = Triple.of(1, 2, 3); const result = triple.map((x) => x * 2); console.log(result); // Triple { a: 2, b: 4, c: 6 } const divisionResult = triple.divideBy(2); console.log(divisionResult); // Either.Right { value: 1 } const invalidDivisionResult = triple.divideBy(0); console.log(invalidDivisionResult); // Either.Left { value: 'Division by zero' }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_python_pydantic_pymonad">Python, pydantic, pymonad</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour créer une implémentation en Python en utilisant <code>pydantic</code> pour la validation des types et <code>pymonad</code> pour les monades :</p> </div> <div class="listingblock"> <div class="title">Installer les dépendances :</div> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">pip install pydantic pymonad</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-python" data-lang="python">from pymonad.either import Either, Left, Right from pydantic import BaseModel, ValidationError, validator # Définition de la classe Triple avec Pydantic class Triple(BaseModel): a: int b: int c: int @validator('b') def validate_b(cls, b, values): if b == 0: raise ValueError('Division by zero is not allowed') return b # Méthode utilisant Either pour la gestion des erreurs def divide_by(self, other): def division(numerator, denominator): return Right(numerator / denominator) def handle_error(error): return Left(str(error)) return Either(lambda: division(self.b, other)).or_else(handle_error) # Exemple d'utilisation try: triple = Triple(a=1, b=2, c=3) result = triple.divide_by(2) if result.is_right: print(f'Division result: {result.value}') else: print(f'Error: {result.value}') except ValidationError as e: print(f'Validation Error: {e}') except Exception as e: print(f'An unexpected error occurred: {e}')</code></pre> </div> </div> <div class="ulist"> <div class="title">Dans cet exemple :</div> <ul> <li> <p><code>pydantic</code> pour définir la classe <code>Triple</code> avec des champs typés.</p> </li> <li> <p>La méthode <code>divide_by</code> utilise la monade <code>Either</code> de <code>pymonad</code> pour gérer les erreurs potentielles résultant de la division par zéro.</p> </li> <li> <p>Validation personnalisée pour s’assurer que la valeur de <code>b</code> n’est pas égale à zéro. Si elle est égale à zéro, une exception est levée, et <code>pymonad</code> capture cette exception pour renvoyer un résultat <code>Left</code> indiquant l’erreur.</p> </li> </ul> </div> </div> </div> https://pages-content.github.io//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="_table_des_matières">Table des Matières</h2> <div class="sectionbody"> <div class="paragraph"> <p><em>temps de lecture : 30 min</em></p> </div> <div class="ulist"> <ul> <li> <p><a href="#_introduction">Introduction</a></p> </li> <li> <p><a href="#_structure_de_base_en_google_apps_script">Structure de base en Google Apps Script</a></p> </li> <li> <p><a href="#_types_et_variables_en_google_apps_script">Types et Variables en Google Apps Script</a></p> </li> <li> <p><a href="#Constantes">Variables, et Lettres en Google Apps Script</a></p> </li> <li> <p><a href="#_opérations_et_opérateurs_en_google_apps_script">Opérations et Opérateurs en Google Apps Script</a></p> </li> <li> <p><a href="#Var">Let et Const en Google Apps Script</a></p> </li> <li> <p><a href="#_structures_de_contrôle_en_google_apps_script">Structures de Contrôle en Google Apps Script</a></p> </li> <li> <p><a href="#_boucles_en_google_apps_script">Boucles en Google Apps Script</a></p> </li> <li> <p><a href="#_objets_en_google_apps_script">Objets en Google Apps Script</a></p> </li> <li> <p><a href="#_fonctions_en_google_apps_script">Fonctions en Google Apps Script</a></p> </li> <li> <p><a href="#_paramètres_et_scopes_en_google_apps_script">Paramètres et Scopes en Google Apps Script</a></p> </li> <li> <p><a href="#_opérateurs_de_repos_et_de_propagation_en_google_apps_script">Opérateurs de Repos et de Propagation en Google Apps Script</a></p> </li> <li> <p><a href="#_affectation_par_décomposition_en_google_apps_script">Affectation par Décomposition en Google Apps Script</a></p> </li> <li> <p><a href="#_collections_et_programmation_déclarative_en_google_apps_script">Collections et Programmation Déclarative en Google Apps Script</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script (GAS) est une plateforme de développement de scripts associée à divers services Google tels que Google Sheets, Google Docs et Google Forms. Elle permet d’automatiser des tâches, d’ajouter des fonctionnalités personnalisées et d’intégrer des services Google.</p> </div> <div class="paragraph"> <p>Dans ce mémo, nous allons explorer les principaux concepts de Google Apps Script en nous appuyant sur des exemples concrets. Nous aborderons des notions telles que les variables, les boucles, les fonctions, et bien d’autres, en les adaptant au contexte spécifique de GAS.</p> </div> </div> </div> <div class="sect1"> <h2 id="_structure_de_base_en_google_apps_script">Structure de base en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour commencer, examinons la structure de base d’un script Google Apps.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Structure de base en Google Apps Script */ function exempleStructureGAS() { // Votre code ici Logger.log("Hello, Google Apps Script!"); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_types_et_variables_en_google_apps_script">Types et Variables en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script utilise JavaScript en tant que langage de programmation. Les types de données et les variables fonctionnent de manière similaire à JavaScript standard.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Types et Variables en Google Apps Script */ function exempleTypesVariablesGAS() { // Votre code ici var nombre = 42; var texte = "Bonjour, Google Apps Script!"; Logger.log(nombre); Logger.log(texte); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_opérations_et_opérateurs_en_google_apps_script">Opérations et Opérateurs en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les opérations et opérateurs en Google Apps Script sont les mêmes qu’en JavaScript.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Opérations et Opérateurs en Google Apps Script */ function exempleOperationsGAS() { // Votre code ici var x = 10; var y = 5; var resultat = x + y; Logger.log(resultat); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_var_let_et_const_en_google_apps_script">Var, Let et Const en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>En GAS, les concepts de <code>var</code>, <code>let</code>, et <code>const</code> sont utilisés pour déclarer des variables. Cependant, il est essentiel de comprendre leurs différences et leurs implications.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Var, Let et Const en Google Apps Script */ function exempleVarLetConstGAS() { // Votre code ici // Utilisation de var var x = 10; if (true) { var x = 20; // La variable x est modifiée globalement } Logger.log(x); // Utilisation de let let y = 30; if (true) { let y = 40; // La variable y est limitée au bloc if } Logger.log(y); // Utilisation de const const z = 50; // z = 60; // Impossible de réassigner une constante Logger.log(z); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_structures_de_contrôle_en_google_apps_script">Structures de Contrôle en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les structures de contrôle telles que <code>if</code>, <code>else</code>, <code>while</code> et <code>for</code> sont utilisées pour gérer le flux d’exécution dans Google Apps Script.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Structures de Contrôle en Google Apps Script */ function exempleStructuresControleGAS() { // Votre code ici var condition = true; if (condition) { Logger.log("La condition est vraie."); } else { Logger.log("La condition est fausse."); } var compteur = 0; while (compteur < 5) { Logger.log(compteur); compteur++; } for (var i = 0; i < 3; i++) { Logger.log(i); } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_paramètres_et_scopes_en_google_apps_script">Paramètres et Scopes en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les paramètres et les scopes jouent un rôle crucial dans le développement de scripts en GAS. Comprenez comment ils fonctionnent pour éviter des comportements inattendus.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Paramètres et Scopes en Google Apps Script */ function exempleParametresScopesGAS(parametre) { // Votre code ici var variableGlobale = "Je suis global"; function afficherParametre() { Logger.log(parametre); } afficherParametre(); Logger.log(variableGlobale); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_constantes_variables_et_lettres_en_google_apps_script">Constantes, Variables, et Lettres en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Comprendre la différence entre <code>const</code>, <code>var</code>, et <code>let</code> est essentiel pour une utilisation efficace des variables en Google Apps Script.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Constantes, Variables, et Lettres en Google Apps Script */ function exempleConstantesVariablesLettresGAS() { // Votre code ici const constante = "Je ne change pas"; Logger.log(constante); var variable = "Je peux changer"; Logger.log(variable); let lettre = "Je peux aussi changer, mais seulement dans mon bloc"; Logger.log(lettre); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_boucles_en_google_apps_script">Boucles en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les boucles, telles que <code>for</code> et <code>while</code>, sont essentielles pour itérer sur des éléments et effectuer des opérations répétitives.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Boucles en Google Apps Script */ function exempleBouclesGAS() { // Votre code ici for (var i = 0; i < 3; i++) { Logger.log(i); } var condition = true; var compteur = 0; while (condition) { Logger.log("Tour de boucle"); compteur++; if (compteur === 3) { condition = false; } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_objets_en_google_apps_script">Objets en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les objets sont utilisés pour structurer les données. Dans GAS, de nombreux objets intégrés facilitent l’interaction avec les services Google.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Objets en Google Apps Script */ function exempleObjetsGAS() { // Votre code ici var feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var cellule = feuille.getRange("A1"); cellule.setValue("Nouvelle valeur"); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_constantes_variables_et_lettres_en_google_apps_script_2">Constantes, Variables, et Lettres en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Comprendre la différence entre <code>const</code>, <code>var</code>, et <code>let</code> est essentiel pour une utilisation efficace des variables en Google Apps Script.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Constantes, Variables, et Lettres en Google Apps Script */ function exempleConstantesVariablesLettresGAS() { // Votre code ici const constante = "Je ne change pas"; Logger.log(constante); var variable = "Je peux changer"; Logger.log(variable); let lettre = "Je peux aussi changer, mais seulement dans mon bloc"; Logger.log(lettre); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fonctions_en_google_apps_script">Fonctions en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les fonctions sont des éléments fondamentaux en programmation. En GAS, elles peuvent être déclarées et appelées de différentes manières.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Fonctions en Google Apps Script */ function exempleFonctionsGAS() { // Votre code ici function additionner(a, b) { return a + b; } var resultat = additionner(2, 3); Logger.log(resultat); // Fonction anonyme var multiplier = function (x, y) { return x * y; }; Logger.log(multiplier(4, 5)); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_opérateurs_de_repos_et_de_propagation_en_google_apps_script">Opérateurs de Repos et de Propagation en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les opérateurs de repos (<code>…​</code>) et de propagation (<code>…​</code>) sont utiles pour manipuler les tableaux et les objets de manière concise.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Opérateurs de Repos et de Propagation en Google Apps Script */ function exempleOperateursReposPropagationGAS() { // Votre code ici // Opérateur de repos (...) pour les tableaux var nombres = [1, 2, 3, 4, 5]; var [...copieNombres] = nombres; Logger.log(copieNombres); // Opérateur de propagation (...) pour les objets var objOriginal = { x: 1, y: 2 }; var objClone = { ...objOriginal, z: 3 }; Logger.log(objClone); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_affectation_par_décomposition_en_google_apps_script">Affectation par Décomposition en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’affectation par décomposition est une fonctionnalité puissante qui permet d’extraire des valeurs d’objets et de tableaux de manière concise.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Affectation par Décomposition en Google Apps Script */ function exempleAffectationDecompositionGAS() { // Votre code ici var coordonnees = [3, 4]; var [x, y] = coordonnees; Logger.log(x); Logger.log(y); var utilisateur = { nom: "John", age: 30 }; var { nom, age } = utilisateur; Logger.log(nom); Logger.log(age); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_collections_et_programmation_déclarative_en_google_apps_script">Collections et Programmation Déclarative en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script prend en charge les structures de données telles que les tableaux, et les concepts de programmation fonctionnelle et d’itération déclarative (><impérative), tels que <code>map</code>, <code>reduce</code> et <code>forEach</code>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Collections et Programmation Déclarative en Google Apps Script */ function exempleCollectionsFonctionnelleGAS() { // Votre code ici // Exemple de tableau (collection) var nombres = [1, 2, 3, 4, 5]; // Utilisation de forEach nombres.forEach(function (nombre) { Logger.log(nombre); }); // Utilisation de map var carresNombres = nombres.map(function (nombre) { return nombre * nombre; }); Logger.log(carresNombres); // Utilisation de reduce var somme = nombres.reduce(function (acc, nombre) { return acc + nombre; }, 0); Logger.log(somme); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce mémo a couvert les concepts fondamentaux de Google Apps Script en les illustrant à l’aide d’exemples de code concrets. Utilisez ces connaissances pour automatiser vos tâches quotidiennes, personnaliser vos documents et exploiter pleinement les fonctionnalités de Google Apps Script.</p> </div> </div> </div> https://pages-content.github.io//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>Durée : 30 minutes</p> </div> </div> </div> <div class="sect1"> <h2 id="_objectifs">Objectifs</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Comprendre les bases de Google Apps Script dans Forms</p> </li> <li> <p>Apprendre à acceder à l’editeur de script et executer une instruction au déclencheur</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_temporisation">Temporisation</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Introduction à Google Form Script</strong> (5 min)</p> <div class="ulist"> <ul> <li> <p>Aperçu rapide de Google Form Script</p> </li> <li> <p>Présentation des fonctionnalités principales</p> </li> </ul> </div> </li> <li> <p><strong>Création d’un Formulaire Google et d’un Script associé</strong> (5 min)</p> <div class="ulist"> <ul> <li> <p>Création d’un formulaire simple avec Google Forms</p> </li> <li> <p>Introduction à l’éditeur de script associé</p> </li> </ul> </div> </li> <li> <p><strong>Executer une instruction</strong> (10 min)</p> <div class="ulist"> <ul> <li> <p>Configuration du déclencheur "on start"</p> </li> <li> <p>Configuration du déclencheur "on submit"</p> </li> <li> <p>Écriture d’un script pour Executer une instruction</p> </li> <li> <p>Tests rapides pour vérifier le bon fonctionnement dans le journal</p> </li> </ul> </div> </li> <li> <p><strong>Analyse des Résultats et Bonnes Pratiques</strong> (10 min)</p> <div class="ulist"> <ul> <li> <p>Vérification des résultats de l’execution d’une instruction</p> </li> <li> <p>Discussion sur un exemple de script et comment l’automatisation peut faire gagner du temps</p> </li> </ul> </div> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_prérequis">Prérequis</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Avoir un compte Google et accès à Google Forms et Google Sheets</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_matériel">Matériel</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Ordinateur avec un navigateur web et une connexion internet</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_remarque">Remarque</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette formation express offre une introduction rapide à l’automatisation avec Google Form Script. Pour une compréhension plus approfondie, des formations plus longues sont recommandées.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_introduction_à_google_form_script">1 - Introduction à Google Form Script</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_slide_1_aperçu_rapide_de_google_form_script">Slide 1: Aperçu rapide de Google Form Script</h3> <div class="ulist"> <ul> <li> <p>Google Form Script est une plateforme de scripting intégrée à Google Forms.</p> </li> <li> <p>Elle permet d’ajouter des fonctionnalités personnalisées et d’automatiser des tâches.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_slide_2_présentation_des_fonctionnalités_principales">Slide 2: Présentation des fonctionnalités principales</h3> <div class="ulist"> <ul> <li> <p>Script Editor : L’éditeur de script intégré pour écrire des scripts Google Apps Script.</p> </li> <li> <p>Déclencheurs : Des événements comme "on submit" qui activent l’exécution des scripts.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_slide_3_avantages_de_lutilisation_de_google_form_script">Slide 3: Avantages de l’utilisation de Google Form Script</h3> <div class="ulist"> <ul> <li> <p>Personnalisation : Créez des formulaires personnalisés avec des fonctionnalités uniques.</p> </li> <li> <p>Automatisation : Automatisez des actions en réponse aux réponses des formulaires.</p> </li> <li> <p>Intégration : Intégrez des scripts avec d’autres services Google pour une expérience plus riche.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_note_pour_le_présentateur">Note pour le présentateur :</h3> <div class="paragraph"> <p>Ces fonctionnalités offrent un potentiel considérable pour personnaliser et automatiser les formulaires. La suite de cette formation explorera plus en détail la création de scripts et d’automatisations spécifiques.</p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/add-ons/editors/forms?hl=fr" class="bare">https://developers.google.com/apps-script/add-ons/editors/forms?hl=fr</a></p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/reference/forms?hl=fr" class="bare">https://developers.google.com/apps-script/reference/forms?hl=fr</a></p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/reference/forms/form-app?hl=fr" class="bare">https://developers.google.com/apps-script/reference/forms/form-app?hl=fr</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_création_dun_formulaire_google_et_dun_script_associé_5_min"><strong>Création d’un Formulaire Google et d’un Script associé</strong> (5 min)</h2> <div class="sectionbody"> </div> </div> https://pages-content.github.io//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="_install_python_on_windows">Install python on windows</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://ninite.com/pythonx3/">python on 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="_running_python">Running python</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Réference :</div> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">cd mon_projet python -m venv mon_venv source mon_venv/bin/activate # Sur windows mon_venv\Scripts\activate deactivate</code></pre> </div> </div> <div class="sect2"> <h3 id="_install_requirement">install requirement</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">pip install -r requirements.txt</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_initiation">initiation</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://python.doctor/page-apprendre-programmation-orientee-objet-poo-classes-python-cours-debutants">python POO</a></p> </div> </div> </div> <div class="sect1"> <h2 id="_design_patterns_du_gof_en_python">Design Patterns du GoF en Python</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://github.com/whikwon/python-patterns/">implementation 1</a></p> </div> <div class="paragraph"> <p><a href="https://github.com/Sean-Bradley/Design-Patterns-In-Python">implementation 2</a></p> </div> <div class="paragraph"> <p><a href="https://sbcode.net/python/">complete book</a></p> </div> <div class="paragraph"> <p>Les design patterns du GoF sont un ensemble de 23 design patterns qui ont été décrits dans le livre "Design Patterns: Elements of Reusable Object-Oriented Software".</p> </div> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Voici une liste des design patterns du GoF</caption> <colgroup> <col style="width: 33.3333%;"> <col style="width: 66.6667%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Nom</th> <th class="tableblock halign-left valign-top">Description</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Factory Method</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Crée des objets sans spécifier la classe exacte à instancier.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Abstract Factory</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Crée des familles d’objets liés ou dépendants sans spécifier leur classe concrète.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Builder</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sépare la construction d’un objet complexe de sa représentation afin que le même processus de construction puisse créer différentes représentations.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Prototype</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Crée de nouveaux objets en copiant un prototype existant.</p></td> </tr> <tr> <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">Restreint l’instanciation d’une classe à un seul objet.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Adapter</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Convertit l’interface d’une classe en une autre interface que le client attend.</p></td> </tr> <tr> <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">Découple une abstraction de son implémentation afin que les deux puissent varier indépendamment.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Composite</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Compose des objets dans des structures d’arborescence pour représenter des hiérarchies de partie-tout.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Decorator</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Attache dynamiquement des responsabilités supplémentaires à un objet.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Facade</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Fournit une interface unifiée à un ensemble d’interfaces dans un sous-système.</p></td> </tr> <tr> <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">Réduit le coût de création et d’utilisation d’objets légers.</p></td> </tr> <tr> <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">Fournit un substitut ou un espace réservé pour un autre objet afin de contrôler l’accès à celui-ci.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Chain of Responsibility</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Permet à plus d’un objet de traiter une demande.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Command</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Encapsule une demande dans un objet, permettant ainsi de paramétrer des clients avec différentes demandes, files d’attente ou journaux, et de supporter des opérations annulables.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Interpreter</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Donne une représentation de la grammaire d’une langue et utilise cette représentation pour interpréter des phrases dans cette langue.</p></td> </tr> <tr> <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">Fournit un moyen de parcourir séquentiellement les éléments d’un objet agrégé sans exposer sa représentation sous-jacente.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mediator</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Permet de réduire les dépendances complexes entre les objets en les faisant communiquer uniquement via un objet médiateur.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Memento</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Fournit la capacité de restaurer un objet à son état précédent (sans violer l’encapsulation).</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Observer</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Définit une dépendance un-à-plusieurs entre les objets de sorte que lorsqu’un objet change d’état, tous ses dépendants sont notifiés et mis à jour automatiquement.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>State</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Permet à un objet de changer de comportement lorsqu’il change d’état interne.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Strategy</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Définit une famille d’algorithmes, encapsule chacun d’eux et les rend interchangeables.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Template Method</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Définit le squelette d’un algorithme dans une méthode, reportant certaines étapes aux sous-classes.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Visitor</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Permet de définir une nouvelle opération à effectuer sur une structure d’objets sans changer les classes des objets sur lesquels elle opère.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_functional_programming">Functional programming</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">Bibliothèque</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">URL</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Description</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PyMonad</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://github.com/jasondelaat/pymonad" class="bare">https://github.com/jasondelaat/pymonad</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">PyMonad est une implémentation de structures de données monadiques en Python basée sur des langages de programmation tels que Haskell et F# avec des implémentations pour les types de monades les plus couramment utilisés en programmation fonctionnelle. <a href="https://www.miguelfarrajota.com/2021/06/monads-in-python-with-pymonad/">article</a></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 est une bibliothèque Python pour la programmation fonctionnelle qui fournit des outils pour travailler avec des fonctions pures et des itérables.</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 est une bibliothèque Python pour la programmation fonctionnelle qui fournit des outils pour travailler avec des fonctions pures et des itérables.</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 est une bibliothèque Python pour la programmation fonctionnelle qui fournit des outils pour travailler avec des fonctions pures et des itérables.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Coconut</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 ajoute plusieurs fonctionnalités à Python pour la programmation fonctionnelle, y compris le pattern matching. <a href="https://stackoverflow.com/questions/11909681/are-there-pattern-matching-functions-in-python-like-this">conversation sof</a></p></td> </tr> </tbody> </table> <div class="sect2"> <h3 id="_side_effects">side effects</h3> </div> <div class="sect2"> <h3 id="_loops">loops</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-python" data-lang="python"># impérative way result = [] for i in inputs: x = f(g(i)) result.append(x) # idiomatic way result = map(comp(f,g), inputs)</code></pre> </div> </div> </div> </div> </div> https://pages-content.github.io//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://pages-content.github.io//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://pages-content.github.io//blog/2023/0063_memo_ts_post.html Sat, 19 Aug 2023 00:00:00 +0000 blog/2023/0063_memo_ts_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>github repository: <a href="https://github.com/cheroliv/ts-codebase" target="_blank" rel="noopener">ts-codebase</a></p> </div> </div> </div> <div class="sect1"> <h2 id="toc_ts"><span class="underline">Intro typescript</span></h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#ts_types">Les types en typescript</a></p> </li> <li> <p><a href="#fonctions">Fonctions</a></p> </li> <li> <p><a href="#data_struct">Structure de données</a></p> </li> <li> <p><a href="#enums_tuples">Enums et tuples</a></p> </li> <li> <p><a href="#void_never">Void et Never</a></p> </li> <li> <p><a href="#class_interface">Classes et interfaces</a></p> </li> <li> <p><a href="#tsconfig">Le fichier tsconfig.json</a></p> </li> <li> <p><a href="#modules">Modules</a></p> </li> <li> <p><a href="#promesses">Promesses</a></p> </li> <li> <p><a href="#async-await">async/await</a></p> </li> <li> <p><a href="#generiques">Génériques</a></p> </li> </ol> </div> <div class="paragraph"> <p>index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!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">Les types en typescript</h2> <div class="sectionbody"> <div class="paragraph"> <p>01_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/** * Les types en typescript */ //quand le type n'est pas defini des le debut, // alors il est réassignable // c'est le type Any qui est attribué par défaut let my_var; my_var = "username"; console.assert(my_var === "username"); my_var = 11; console.assert(my_var === 11); my_var = true; console.assert(my_var === true); let age = 1; console.assert(age === 1); age = 2; // age="trois" c'est impossible // car l'inference de type a attribué le type number console.assert(age === 2); // Déclaration explicite de type let pi: Number = 3.14; console.assert(typeof pi === "number");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="fonctions">Fonctions</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les fonctions sont des blocs de code réutilisables.</p> </div> <div class="paragraph"> <p>Exemple de cote :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const add = (a: number, b: number): number => a + b;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="data_struct">Structure de données</h2> <div class="sectionbody"> <div class="paragraph"> <p>02_data_structure.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/*** * Structure de données: * Avec le type any on peut changer * le type de la variable à tout instruction * Lorsque l'on fixe le type * alors il n'est plus possible de le changer * lors d'une assignation */ // Arrays let buddies: any[] = [ "cheroliv", "imrandeh", "issoudeh", "soumi92" ] console.assert(buddies[0] === "cheroliv"); console.assert(buddies[1] === "imrandeh"); console.assert(buddies[2] === "issoudeh"); console.assert(buddies[3] === "soumi92"); // Déclaré en type any, l'inference de type // a bien réaligné en type string console.assert(typeof buddies[0] === "string"); console.assert(typeof buddies[1] === "string"); console.assert(typeof buddies[2] === "string"); console.assert(typeof buddies[3] === "string"); let writers: (String | String | String | Number)[][] = [ ["Chrétien", "de Troyes", "fr", 12], ["François", "Rabelais", "fr", 16], ["René", "Descartes", "fr", 17], ["Jean-Jacques", "Rousseau", "fr", 18], ["Georg", "Hegel", "de", 19], ["Karl", "Marx", "de", 19], ["Friedrich", "Engels", "de", 19], ["Victor", "Hugo", "fr", 19], ["Paul", "Verlaine", "fr", 19], ["Arthur", "Rimbaud", "fr", 19], ["Gérard", "de Nerval", "fr", 19], ["Georg", "Lukacs", "hu", 20], ["Franz", "Kafka", "hu", 20], ["Antonio", "Gramsci", "it", 20], ["Domenico","Losurdo","it",20], ]; // console.table(writers); // Objects let author: { first_name: String, last_name: String, lang: String, century: Number } = { // slice(-1) renvoie le dernier élèment first_name: writers.slice(-1)[0][0] as String, last_name: writers.slice(-1)[0][1] as String, lang: writers.slice(-1)[0][2] as String, century: writers.slice(-1)[0][3] as Number, } // assertion sur la valeur en accés par encapsulation(dot) console.assert(author.first_name === "Antonio") console.assert(author.last_name === "Gramsci") console.assert(author.lang === "it") console.assert(author.century === 20); // assertion sur le type en accès par index console.assert(typeof author["first_name"] === "string") console.assert(typeof author["last_name"] === "string") console.assert(typeof author["lang"] === "string") console.assert(typeof author["century"] === "number");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="enums_tuples">Enums et tuples</h2> <div class="sectionbody"> <div class="paragraph"> <p>03_enums_tuples.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/** * Enums et Tuples * * Enum: il existe les enums numérique * et les enums chaine de caracteres. * * Tuple: similaire aux arrays mais ne peut * contenir qu'une valeur de type spécifié. * */ //Enum numérique // l'index par de debut défaut est 0 // ici on le place a 1 enum Week { Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6, Sunday = 7, }; console.assert(Week.Monday == 1); console.assert(Week.Tuesday == 2); console.assert(Week.Wednesday == 3); console.assert(Week.Thursday == 4); console.assert(Week.Friday == 5); console.assert(Week.Saturday == 6); console.assert(Week.Sunday == 7); console.assert(Week[1] === "Monday"); console.assert(Week[2] === "Tuesday"); console.assert(Week[3] === "Wednesday"); console.assert(Week[4] === "Thursday"); console.assert(Week[5] === "Friday"); console.assert(Week[6] === "Saturday"); console.assert(Week[7] === "Sunday"); let motd_arr_fr: String[] = [ "Associé à la Lune", "Du dieu Tiw, associé à Mars", "Du dieu germanique Odin", "Du dieu germanique du tonnerre Thor", "De la déesse germanique Frigga associée à Vénus", "Associé à Saturne", "Associé au Soleil", ]; let motd_arr_en: String[] = [ "associated with the Moon", "from the god Tiw, associated with Mars", "from Germanic god Odin", "from Germanic god of thunder Thor", "from Germanic goddess Frigga associated with Venus", "associated with Saturn", "associated with the Sun", ]; // Un tuple (triple) let monday_triple_fr: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_arr_fr[0], ]; console.assert(monday_triple_fr[0] === 1); console.assert(monday_triple_fr[1] === "Monday"); console.assert(monday_triple_fr[2] === "Associé à la Lune"); let monday_triple_en: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_arr_en[0], ]; console.assert(monday_triple_en[0] === 1); console.assert(monday_triple_en[1] === "Monday"); console.assert(monday_triple_en[2] === "associated with the Moon"); // On se fait un type pour ajouter le nom de la langue type Meaning_of_the_day = { lang: String, meaning: (Week | String)[][], }; //fonction d'affichage du type Meaning_of_the_day const display_motd = (motd: Meaning_of_the_day) => { 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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="void_never">Void et Never</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_void_never_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">// Le type void est l'opposé du type any // c'est l'absence de type. function verify_writers_length(): void { console.assert(writers.length > 0); } verify_writers_length(); const verify_writers_length_arrow = (): void => console.assert(writers.length > 0); verify_writers_length_arrow(); //Type of et never let value = 30; console.assert(typeof value === "number"); //never: qqchs qui n'arrive jamais function foo(x: String | Number): Boolean { if (typeof x === "string") { return true; } else if (typeof x === "number") { return false; } return fail("Error!") } function fail(message: String): never { throw new Error(message as string); }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="class_interface">Classes et interfaces</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_void_never_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/** * Les classes: * members, * visibility, * nommage, * accesseurs * scope identifier: static,private,protected * * convention de nommage : * Les membres private sont préfixés avec un _ * */ class Member { username: String = ""; email: String = ""; private _password: String = ""; readonly signup_date: Date = new Date(Date.now()); constructor(username: String, email: String) { this.username = username; this.email = email; } get password(): String { return this._password; } set password(new_password: String) { this._password = new_password; } /** * Une fonction static qui initilise un member, * à partir d'un author */ static fromAuthor(author: { first_name: String, last_name: String, lang: String, century: Number }): Member { return new Member( `${author.first_name}.${author.last_name}`, `${author.first_name}.${author.last_name}@acme.com`, ); } }; let domenico = Member.fromAuthor(author); domenico.password = "test"; console.assert(domenico.email === "Domenico.Losurdo@acme.com"); console.assert(domenico.password === "test"); // Héritage enum Forms { Undefined = 0, Polygones = 1, Circle = 2, Straight = 3, Segment = 4, }; class Form { type: Forms = Forms.Undefined; }; class Rectangle extends Form { h: Number = 0; w: Number = 0; }; class Square extends Rectangle { side: Number = 0; }; /** * Interface donne un contrat à un type. * Les interfaces permettent de définir la structure d'un objet. */ interface IPerson { username: String; email: String; readonly signup_date: Date; } const user1: IPerson = { username: Member.fromAuthor(author)["username"], email: Member.fromAuthor(author)["email"], signup_date: Member.fromAuthor(author)["signup_date"], }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="tsconfig">Le fichier tsconfig.json</h2> <div class="sectionbody"> <div class="paragraph"> <p>tsconfig.json</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-json" data-lang="json">{ /* Visit https://aka.ms/tsconfig to read more about this file */ "compileOnSave": true, "compilerOptions": { "target": "es2016", "module": "CommonJS", "noEmitOnError": true, "strict": true, "noImplicitAny": true, "esModuleInterop": true } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="modules">Modules</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les modules permettent d’organiser le code en plusieurs fichiers.</p> </div> <div class="paragraph"> <p>Exemple de cote :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">// Dans un fichier math.ts export const add = (a: number, b: number): number => a + b; // Dans un autre fichier import { add } from './math'; let result = add(2, 3);</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="promesses">Promesses</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les promesses sont utilisées pour effectuer des opérations asynchrones.</p> </div> <div class="paragraph"> <p>Exemple de cote :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const promise = new Promise<string>((resolve) => { // Code asynchrone ici resolve("Succès"); }); promise.then((result) => { console.log(result); });</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="async-await">async/await</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’async/await simplifie la gestion des promesses.</p> </div> <div class="paragraph"> <p>Exemple de cote :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const fetchData = async (): Promise<void> => { const result = await someAsyncFunction(); console.log(result); };</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="generiques">Génériques</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les génériques permettent de créer des composants réutilisables avec des types dynamiques.</p> </div> <div class="paragraph"> <p>Exemple de cote :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const identity = <T>(arg: T): T => arg; const output = identity<string>("hello"); console.log(output);</code></pre> </div> </div> </div> </div> https://pages-content.github.io//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">Table des matieres</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#good_links">Bon liens</a></p> </li> <li> <p><a href="#repo">Répository et code sample</a></p> </li> <li> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </li> </ol> </div> <div class="sect2"> <h3 id="good_links">Bon liens</h3> <div class="paragraph"> <p><a href="#toc">Table des matieres</a></p> </div> </div> <div class="sect2"> <h3 id="repo">Répository et code sample</h3> <div class="paragraph"> <p>github repository: <a href="https://github.com/cheroliv/css-codebase" target="_blank" rel="noopener">css-codebase</a></p> </div> </div> <div class="sect2"> <h3 id="toc_début"><span class="underline">Début CSS</span></h3> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#début_intro">Intro & Mise en place</a></p> </li> <li> <p><a href="#début_texts">Les textes</a></p> </li> <li> <p><a href="#début_background">Background</a></p> </li> <li> <p><a href="#début_boxes">Les boites (boxes)</a></p> </li> <li> <p><a href="#début_flexbox">Flexbox</a></p> </li> <li> <p><a href="#début_grid">Grid</a></p> </li> <li> <p><a href="#début_abs_pos">Position absolute</a></p> </li> <li> <p><a href="#début_responsive">Le responsive</a></p> </li> <li> <p><a href="#début_conclusion">Débug & Conclusion</a></p> </li> </ol> </div> <div class="paragraph"> <p><a href="#toc">Table des matieres</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="début_intro">Intro & Mise en place</h2> <div class="sectionbody"> <div class="paragraph"> <p>Intro basé sur cette vidéo:</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: <a href="https://github.com/cheroliv/css-codebase/début_css/" target="_blank" rel="noopener">début css</a></p> </div> <div class="paragraph"> <p>memo source:<br> index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message" ></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> <div class="absolute"> <h2>Absolute</h2> <span id="circle1"></span> <span id="circle2"></span> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p>Relier le fichier style.css à la page html:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"></head> <link rel="stylesheet" href="style.css" /> </head></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_texts">Les textes</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">/* import remote de font sur l'ensemble de la feuille*/ @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); /* import local de font */ @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } /* body est le parent de toutes les balises, qu'il contient, donc je le déclare avant, pour la logique de précédence de parent */ body { /* si DMSerif n'est pas trouvé alors il se rabat sur Verdana*/ font-family: "DMSerif", Verdana; } /* va styliser toutes les balises h1, celles de body sont surchargés, par la déclaration présente */ h1 { text-transform: uppercase; /* espacement entre les lettres en pixel*/ letter-spacing: 3px; /* alignement du texte*/ text-align: center; /* Les tailles de polices doivent être en REM (rem = root em). Le REM se base pas sur l'élément parent pour obtenir sa taille mais sur l'élément racine. Ainsi 1rem prendra sa valeur de la font-size de votre document (body ou html).*/ font-size: 2.5rem; /* ombrage du texte */ text-shadow: 3px /* offset-x */ 3px /* offset-y */ 8px /* blur-radius */ #00000042/* color */; /* couleur du texte */ color: #ab0ef4; /*attibuer les polices(font): liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.*/ font-family: "Oswald", sans-serif; /* surligner le text*/ text-decoration: underline; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_background">Background</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; /* image comme background*/ background: url(./assets/img/bg.jpg) center/cover; /* 100VH = 100% de la taille de l'écran (viewport height) min afin de ne pas bloquer la possibilité d'avoir un plus grand */ min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_boxes">Les boites (boxes)</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } /* *: létoile donne du style a tous les éléments. Ensuite remettre un à un les parametres par defaut afin d'eviter les stylisation inattendu.*/ * { /* surcharge de base tous les elements à padding 0*/ margin: 0; /* surcharge de base tous les elements à padding 0*/ padding: 0; } body { font-family: "DMSerif", Verdana; /* image comme background*/ background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; /* quelque soit la taille de l'écran, la boite fait toujours 90% de la taille de la page, les 10% restant sont une marge à droite, pour avoir 5% de chaque coté on ajoute une margin, tel que [0, auto]*/ width: 90%; /* haut bas prend 0, et gauche droite prend auto(center cad meme de chaque cotés)*/ margin: 0 auto; /* on ajoute des bords a notre boite*/ border: 2px solid rgb(0, 140, 255); /* on arrondis les coins de la boite*/ border-radius: 20px 20px 0 0; /* ombrage sur la boite*/ box-shadow: 0px 0px 20px 4px #81cfc6; /* marge interrieure de la boite sur tous les cotés*/ padding: 15px; } h2 { /* afin de recuprer le comportement par defaut qui a ete surchargé par l'operateur étoile*/ margin: 0; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_flexbox">Flexbox</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } /* le point permet d'acceder à la classe d'un composant*/ .flexbox { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } /* FLEXBOX */ /* Sert à répartir équitablement des éléments sur la page */ .flexbox ul { padding: 0; /* aligne les éléments enfants de ul(les li)*/ display: flex; /* reparti convenablement(équitablement les li sur la page) */ justify-content: space-around; } /* ce style concerne les li de la classe, flexbox des balises qui y font referencent*/ .flexbox li { /* suprime les boules des éléments de la list li*/ list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; /* Centrer un unique élément verticalement et horizontalement */ display: flex; justify-content: center; align-items: center; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_grid">Grid</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour répartir des éléments de maniere un peu plus complexe qu’avec les flexbox, avec un systeme de grille entre autres.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } .flexbox ul { padding: 0; display: flex; justify-content: space-around; } .flexbox li { list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; display: flex; justify-content: center; align-items: center; } /* GRID */ .grid-container { display: grid; /* séparatuion de la grille en deux(à ses deux enfants), avec à gauche 30% pour l'image et à droite 70% pour le formulaire*/ grid-template-columns: 30% 70%; } /* sizing de l'image css-logo contenu dans la classe grid qui est dans le parent grid-container*/ .grid img { /* l'image remplt 80% de part de grille*/ width: 80%; margin: 20px auto; display: block; } form { display: grid; /* deux colonnes de chacune 1 fraction*/ grid-template-columns: 1fr 1fr; /* trois rangés de chacune 1 fraction*/ grid-template-rows: 1fr 1fr 1fr; /* structuration sous forme de template de notre repartition des composants enfants de la forme*/ grid-template-areas: "i1 i2"/* i1: input1, i2:input2*/ "ta ta"/*ta: text area */ "vi bt"/*vi:, bt: bouton */; } /* on donne du style sur deux éléments en meme temps en les listant avant les parentheses*/ input, textarea { margin: 5px; border: 1px solid darkblue; padding: 10px; font-size: 1.1rem; font-family: "DMSerif"; border-radius: 5px; } /* donner du style uniquement la textearea*/ textarea { /* renseigner le nommage pour le grid template area*/ grid-area: ta; height: 40px; /* empeche le cassage du style de la page en empechant le resizing de la textarea du formulaire*/ resize: none; } /* pour pointer un id d'élément html on utilise la notation préfixe # */ #btn-submit { /* renseigner le nommage*/ grid-area: bt; /* change le le symbole de curseur souris quand il survole sur le bouton*/ cursor: pointer; background: cyan; transition: 0.2s; } /* au survole(hover) de la souris le bouton change de comportement*/ #btn-submit:hover { background: darkblue; /* couleur de text du bouton devient blanc*/ color: white; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_abs_pos">Position absolute</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid, .absolute { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } .flexbox ul { padding: 0; display: flex; justify-content: space-around; } .flexbox li { list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; display: flex; justify-content: center; align-items: center; } .grid-container { display: grid; grid-template-columns: 30% 70%; } .grid img { width: 80%; margin: 20px auto; display: block; } form { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "i1 i2" "ta ta" "vi bt"; } input, textarea { margin: 5px; border: 1px solid darkblue; padding: 10px; font-size: 1.1rem; font-family: "DMSerif"; border-radius: 5px; } textarea { grid-area: ta; height: 40px; resize: none; } #btn-submit { grid-area: bt; cursor: pointer; background: cyan; transition: 0.2s; } #btn-submit:hover { background: darkblue; color: white; } /* ABSOLUTE */ /* Sans élément en Relative, de base, l'élément en absolute l'est par rapport au Body */ /* Il faut mettre une position relative au parent pour contraindre l'élément en absolute dans ses frontières */ .absolute { /* position relative par rapport à son parent, donc contenu dans les frontieres de son parents*/ position: relative; } #circle1 { height: 80px; width: 80px; background: skyblue; position: absolute; border-radius: 150px; top: -20px; right: -20px; } #circle2 { height: 40px; width: 40px; border-radius: 150px; background: teal; position: absolute; left: 50%; transform: /*traslate de 50% de la taille du cercle, pour etre centré par rapport au centre du cercle, plutot que sur son bord gauche par défaut.*/ translateX(-50%); top: 100px; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!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">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_responsive">Le responsive</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; /* pour etre plus responsive on peut passer la taille en vw(view port width) pour qu'elle s'adapte à la taille de l'ecran*/ font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid, .absolute { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } .flexbox ul { padding: 0; display: flex; justify-content: space-around; } .flexbox li { list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; display: flex; justify-content: center; align-items: center; } .grid-container { display: grid; grid-template-columns: 30% 70%; } .grid img { width: 80%; margin: 20px auto; /* permet en media query de la centrer en petit écran*/ display: block; } form { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "i1 i2" "ta ta" "vi bt"; } input, textarea { margin: 5px; border: 1px solid darkblue; padding: 10px; font-size: 1.1rem; font-family: "DMSerif"; border-radius: 5px; } textarea { grid-area: ta; height: 40px; resize: none; } #btn-submit { grid-area: bt; cursor: pointer; background: cyan; transition: 0.2s; } #btn-submit:hover { background: darkblue; color: white; } .absolute { position: relative; } #circle1 { height: 80px; width: 80px; background: skyblue; position: absolute; border-radius: 150px; top: -20px; right: -20px; } #circle2 { height: 40px; width: 40px; border-radius: 150px; background: teal; position: absolute; left: 50%; transform: translateX(-50%); top: 100px; } /* RESPONSIVE: a partir des tailles d'ecran permet de surcharger les reglages definis plus haut */ @media screen and (max-width: 900px) { .grid-container { display: block; } .grid-container img { width: 40%; } } @media screen and (max-width: 610px) { .flexbox ul { flex-direction: column; align-items: center; } form { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "i1" "i2" "ta" "bt"; } input, textarea { font-size: 0.8rem; } }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!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">Début CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_conclusion">Débug & Conclusion</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">/* all elements: supprime les comportements par défaut*/ * { /* les marges à zéro*/ margin: 0; /* les parge internes(padding) à zéro*/ padding: 0; /* tous les bords avec un cadre rouge de 2px. qui est ou et qui fait quoi...*/ border: 2px solid red; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Début CSS</span></a></p> </div> </div> </div> https://pages-content.github.io//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">1. Bon liens</a></li> <li><a href="#_répository_et_code_sample">2. Répository et code sample</a></li> </ul> </div> <div class="sect1"> <h2 id="_bon_liens">1. 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">2. 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://pages-content.github.io//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="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> </head> <body> index <script src="01_start.js"></script> <script src="02_arrays.js"></script> <script src="03_functions.js"></script> <script src="04_param_x_scope.js"></script> <script src="05_objects.js"></script> <script src="06_loops.js"></script> <script src="07_const_var_let.js"></script> <script src="08_rest_and_spread_operators.js"></script> <script src="09_destructuring.js"></script> <script src="10_module_import_export.js"></script> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Variables */ //une variable stupide var my_variable = "dummy variable"; console.log(my_variable); //assertion console.assert(my_variable === "dummy variable"); var username = "cheroliv"; console.log(username); console.assert(username === "cheroliv"); //concaténation de string console.assert(username === "cher" + "oliv"); /** * Opérateur arithmétique: + - * / % */ //integer var x = 10; var y = 5; var z = 20; console.log(x + y); console.assert(x + y === 15); console.log(x + y - z); console.assert(x + y - z === -5); console.log(x - y); console.assert(x - y === 5); console.log(x * y); console.assert(x * y === 50); console.log(x / y); console.assert(x / y === 2); console.log("---------"); x = 20; y = 10; console.log(x + y); console.assert(x + y === 30); console.log(x + y - z); console.assert(x + y - z === 10); console.log(x - y); console.assert(x - y === 10); console.log(x * y); console.assert(x * y === 200); console.log(x / z); console.assert(x / z === 1); //Littéraux de gabarits pour string avec backstick ` //Template literals (Template strings) console.assert(`typeof z: ${typeof z}` === "typeof z: number"); console.log(`x is type of : ${typeof x}`); console.log(`y is type of : ${typeof y}`); console.log(`z is type of : ${typeof z}`); //typeof: donne le type de la variable console.assert(typeof x === "number"); console.assert(typeof y === "number"); console.assert(typeof z === "number"); console.log("---------"); /** * Incrémenation/décrémentation */ //incrémantation/décrémentation préfixe console.log(++x) //incrémenté puis affiché: 21 console.log(x) //la valeur incrémenté: 21 //incrémantation/décrémentation suffixe console.log(y++) //affiche la valeur sans incrémenation puis incrémente: 10 console.log(y) //la valeur incrémenté: 11 //décrémentation x--; y--; console.assert(x === 20); console.assert(y === 10); /** * String: chaine de caractères */ console.log(`username: ${username}`); //taille de la string console.log(`username.length: ${username.length}`); console.assert(username.length === 8); console.assert(username.length === "cheroliv".length); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Les arrays */ // auteurs [["nom ", "prénom", "pays"]] var writers = [ ["Karl", "Marx", "de"], ["Jean-Jacques", "Rousseau", "fr"], ["Victor", "Hugo", "fr"], ["René", "Descartes", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["Georg", "Hegel", "de"], ["Friedrich", "Engels", "de"], ] console.table(writers); // accés aux élèments du tableau console.log(writers[0]); console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karl, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); //sauvegarder la valeur du prénom de Marx var karl = writers[0][0] //éditer un élement du tableau, le prénom de Marx writers[0][0] = "Karlito" console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karlito, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karl" === karl); //remettre la valeur initale du prénom de Marx writers[0][0] = karl; console.assert(`${karl}, Marx (de)` === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.log("---------"); /** * Arrays: map/forEach/pop/push/slice/sort/shift/unshift */ var numbers = [1, 5, 4, 3, 2]; console.log("Iterate with forEach"); // parcourir avec array.forEach numbers.forEach((it) => console.log(it)); console.log("---------"); console.log("Iterate with map"); // parcourir avec array.map numbers.map((it) => console.log(it)); console.log("---------"); //afficher les éléments sur une ligne //génère la string avec le formatage des nombres const numbersString = (numberArray) => { var consoleOutput = new String(); numberArray.forEach(number => consoleOutput += `${number}, `); return consoleOutput = consoleOutput.substring(0, consoleOutput.length - 2); }; //affiche la chaine entre crochets dans la console const displayNumbers = (numbersStr) => { console.log(`[${numbersString(numbersStr)}]`); }; console.log("orginal number array") displayNumbers(numbers); console.log("---------"); //push: ajoute à la fin console.log("push"); numbers.push(6); displayNumbers(numbers); console.log("---------"); //pop: suprime le dernier console.log("pop"); numbers.pop(); displayNumbers(numbers); console.log("---------"); //unshift: ajouter le parametre au debut de l'array console.log("unshift"); numbers.unshift(0); displayNumbers(numbers); console.log("---------"); //shift: supprime le premier element de l'array console.log("shift"); numbers.shift(); displayNumbers(numbers); console.log("---------"); //slice: renvoi l'array entre les positions en argument console.log("slice"); var sliceNumbersResult = numbers.slice(2, 4); displayNumbers(sliceNumbersResult); console.log("---------"); //sort asc console.log("sort asc"); var ascSort = numbers.sort((a, b) => a - b); displayNumbers(ascSort); console.log("---------"); //sort desc console.log("sort desc"); var descSort = numbers.sort((a, b) => b - a); displayNumbers(descSort); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Les fonctions */ //function style legacy function sayHelloWorldLegacy() { console.log("Hello world legacy!"); } sayHelloWorldLegacy(); function sayHelloLegacy(firstName, lastName, style) { console.log(`Hello ${firstName}, ${lastName} (${style})`); } sayHelloLegacy("Cher", "Oliv", "legacy"); console.log("---------"); //function style arrow const sayHelloWorld = () => console.log("Hello world!"); sayHelloWorld(); const sayHello = (firstName, lastName) => console.log(`Hello ${firstName}, ${lastName}`); sayHello("Cher", "Oliv"); console.log("---------"); var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ] const displayAuthors = (authorsArray) => authorsArray.forEach(author => console.log(`${author[0]} ${author[1]}, (${author[2]})`) ); displayAuthors(authors); console.log("---------"); /** * valeur par défaut des parametres d'une fonctions */ const add = (a = 0, b = 0) => a + b; console.assert(add() === 0) console.assert(add(1) === 1) console.assert(add(1, 1) === 2) console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">//global scope: visible partout, dans et hors functions var global; const foo = () => { //local scope: visible uniquement dans la fonction foo var bar = "bar" console.log(bar) } foo(); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Les objects */ var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ]; var hugo = { firstName: authors[7][0], lastName: authors[7][1], country: authors[7][2], }; var book = { author: hugo, title: "Les misérables" }; console.log(hugo); console.log(book); //accéder à un membre de l'objet par point console.log(hugo.country); //accéder à un membre de l'objet par crochet console.log(book["title"]); console.log(book.author.lastName); console.log(book["author"]["firstName"]); //ajouter une clé a un objet hugo.gender = "non binary"; console.assert(hugo.gender === "non binary"); //mettre à jour une clé hugo.gender = "male"; console.assert(hugo.gender !== "non binary"); console.assert(hugo["gender"] === "male"); //supprimer une clé delete hugo.gender; //verfier que l'objet ne contient pas la clé gender console.assert(!Object.keys(hugo).includes("gender")); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Les boucles: Itérer sur arrays et objets. */ console.log("for loop over array"); var numbers = [12, 10, 8, 6, 4, 2, 0]; for (number of numbers) { console.log(number); } console.log("---------"); console.log("for loop over object key"); var obj = { a: 1, b: 2, c: 3, d: 4 }; for (key in obj) { console.log(key); } console.log("---------"); console.log("for loop over object value"); for (value in obj) { console.log(obj[value]); } console.log("---------"); console.log("another for loop over authors array") var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ]; for (const [i, value] of authors.entries()) { console.log(`${value[0]}, ${value[1]} (${value[2]})`); } console.log("---------"); console.log("while loop over array") var i = 0 while (i < authors.length) { console.log(`${authors[i][0]}, ${authors[i][1]} (${authors[i][2]})`); i++; } console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * const X var X let */ //var x du if n'est pas confiné au scope du if const varTest = () => { var x = 1; console.log(x); console.assert(x === 1); if (true) { var x = 2; console.log(x); console.assert(x === 2); } console.log(x); console.assert(x !== 1); console.assert(x === 2); } varTest(); console.log("---------"); //var x est global à tous les fichier js //chargés dans la page html //var x issue du fichier 1_start.js //ligne 46 console.log(x); console.assert(x === 20); console.log("---------"); //premier let x est confiné au scope de la fonction //le let x du if est confiné au scope du if const letTest = () => { let x = 1; console.log(x); console.assert(x === 1); if (true) { let x = 2; console.log(x); console.assert(x === 2); } console.log(x); console.assert(x === 1); console.assert(x !== 2); } letTest(); console.log("---------"); /** * const: déclare un emplacement mémoire non réattribuable * c'est modifiable pour un array, * mais non réinitialisable; * ex: * const arr = [25, 27, 29] * arr = [5, 7] //impossible * arr[0]=20 // possible * ex: * const n = 1; * n = 3; //impossible */ const arr = [25, 27, 29] console.table(arr); arr[0] = 20 // possible console.table(arr); arr.pop() console.table(arr); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Opérateur de rest: * const add = (...operandes) => a + b; * ou avec parametres avec valeur par défaut * const add = (a=0, b=0, ...operandes) => a + b; */ /** * spread opérateur: * récupère l'ensemble des elements d'une collection, * dans un array */ const user_ages = [25, 56, 12, 58, 41, 62, 26]; const max_user_age = Math.max(...user_ages); const min_user_age = Math.min(...user_ages); console.assert(max_user_age == 62); console.assert(min_user_age == 12); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * L'affectation par décomposition (destructuring) */ const user = { first_name: "Oliv", last_name: "Cher", nick_name: "cheroliv", gender: "male", is_adult: true }; console.log(user); //première façon d'initaliser des variables sans destructuration let first_name_legacy = user.first_name; let last_name_legacy = user.last_name; let nick_name_legacy = user.nick_name; let gender_legacy = user.gender; let is_adult_legacy = user.is_adult; console.assert("Oliv" === first_name_legacy); console.assert("Cher" === last_name_legacy); console.assert("cheroliv" === nick_name_legacy); console.assert("male" === gender_legacy); console.assert(true === is_adult_legacy); console.log("---------"); /** * Initialisation par déstructuration */ const { first_name, last_name, nick_name, gender, is_adult } = user; console.assert(user.first_name === first_name); console.assert(user.last_name === last_name); console.assert(user.nick_name === nick_name); console.assert(user.gender === gender); console.assert(user.is_adult === is_adult); /** * Intialisation par déstructuration des arrays */ //cible explicite const [a1, a2] = [15, 25, 17, 81, 51, 46]; console.assert(a1 === 15); console.assert(a2 === 25); //cible avec position par rapport aux index par virgules //je veux b3 à 46 const [b1, b2, , , , b3] = [15, 25, 17, 81, 51, 46]; console.assert(b1 === 15); console.assert(b2 === 25); console.assert(b3 === 46); //déstructuration avec operateur de rest // je contruit un autre avec avec les elements // à partir du premier élèment non destructuré const [c1, c2, ...sub_arr] = [15, 25, 17, 81, 51, 46]; console.assert(b1 === 15); console.assert(b2 === 25); console.assert(sub_arr.length === 4); console.assert(sub_arr[0] === 17); console.assert(sub_arr[1] === 81); console.assert(sub_arr[2] === 51); console.assert(sub_arr[3] === 46); // Une boucle pour comparer le resultat attendu for (const [i, value] of[15, 25, 17, 81, 51, 46].entries()) { //on reconstruit le tableau à chaque iteration console.assert([c1, c2].concat(sub_arr)[i] === value); }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Import et export de module * * Dans le fichier html * au niveau de la balise d'import de script * spécifier le type module * * 1er technique: import nommé des fonctions: * import { sum, minus, times, div, rem } from "./dummy_math_functions.js"; * * 2eme technique: import global des fonction avec l'asterisque(*) * en préfixant l'import par un nommage du fichier importé: * import * as math from "./dummy_math_functions.js"; * * 3eme technique: import par alias avec le mot clé "as" * import { * sum as add, * minus as substract, * times as multiply, * div as divide, * rem as modulo * } from "./dummy_math_functions.js"; */ import { sum, minus, times, div, rem } from "./dummy_math_functions.js"; console.assert(sum(1, 1) === 2); console.assert(minus(4, 2) === 2); console.assert(times(2, 2) === 4); console.assert(div(4, 2) === 2); console.assert(rem(4, 2) === 0);</code></pre> </div> </div> <div class="paragraph"> <p>dummy_math_functions.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">//sum const sum = (x, y) => x + y; // subtraction const minus = (x, y) => x - y; // multiplication const times = (x, y) => x * y; // division const div = (x, y) => x / y; // remainder: reste de la division euclidiene const rem = (x, y) => x % y; // log sum const sum_log = (x, y) => console.log(sum(x, y)); // log subtraction const minus_log = (x, y) => console.log(minus(x, y)); // log multiplication const times_log = (x, y) => console.log(times(x, y)); // log division const div_log = (x, y) => console.log(div(x, y)); // log remainder const rem_log = (x, y) => console.log(rem(x, y)); export { sum, minus, times, div, rem, sum_log, minus_log, times_log, div_log, rem_log };</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">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="highlight"><code class="language-javascript" data-lang="javascript">/** * Utilisation des classes */ //creation d'un objet class Account { constructor(username) { this.username = username; } }; const acc1 = new Account("cheroliv"); console.table(acc1); console.assert(acc1.username === "cheroliv"); console.log("---------"); //création d'un objet et ajout de getter et setter(accesseurs) class AccountInfo { constructor(username) { this._username = username; } get username() { return this._username; } /** * @param {(arg0: string) => void} new_username */ set new_username(new_username) { this._username = new_username; } }; const acc_info1 = new AccountInfo("cheroliv"); console.table(acc_info1); //accés au membre _username avec le getter username() console.assert(acc_info1.username === "cheroliv"); //update la valeur username de acc_info1 avec le setter acc_info1.new_username = "imrandeh"; console.assert(acc_info1.username === "imrandeh"); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> https://pages-content.github.io//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="_cadrage">cadrage</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_atelier_1_vision">Atelier 1 : Vision</h3> <div class="sect3"> <h4 id="_1_le_pattern_qqoqcp_qui_quoi_où_quand_comment_pourquoi">1. Le pattern “QQOQCP” – Qui, Quoi, Où, Quand, Comment, Pourquoi</h4> </div> <div class="sect3"> <h4 id="_2_le_product_vision_board">2. Le Product Vision Board</h4> <div class="sect4"> <h5 id="_target_group">Target Group</h5> <div class="paragraph"> <p>Qui sont les utilisateurs qui utilisent le produit ou l’offre ? (direct, indirect)</p> </div> </div> <div class="sect4"> <h5 id="_needs">Needs</h5> <div class="paragraph"> <p>Quels sont les 5 besoins principaux des utilisateurs clés de l’application ?</p> </div> </div> <div class="sect4"> <h5 id="_product">Product</h5> <div class="paragraph"> <p>Quelle est ma proposition de valeur ? Quelles sont les 5 fonctionnalités principales du produit qui permettent de répondre aux besoins</p> </div> </div> <div class="sect4"> <h5 id="_business_goal">Business Goal</h5> <div class="paragraph"> <p>Quelles sont les critères de succès ?</p> </div> </div> <div class="sect4"> <h5 id="_vision">Vision</h5> <div class="paragraph"> <p>Quand les 4 colonnes sont complètes, il vous faudra remplir la partie vision du Product Vision Board en une phrase complète.</p> </div> </div> </div> </div> <div class="sect2"> <h3 id="_atelier_2_personasparcours_utilisateurs">Atelier 2: Personas/Parcours utilisateurs</h3> <div class="ulist"> <div class="title">Définir pour chaque persona un parcours utilisateur:</div> <ul> <li> <p>Qui va utiliser mon service? (Cible)</p> </li> <li> <p>Que veut-il faire ? (But)</p> </li> <li> <p>Comment va t-il faire ? (Parcours Utilisateur)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_atelier_3_zoning_storyboard_sitemap">Atelier 3: Zoning, Storyboard, Sitemap</h3> <div class="sect3"> <h4 id="_1_zoning">1. Zoning</h4> </div> <div class="sect3"> <h4 id="_2_storyboard">2. StoryBoard</h4> </div> <div class="sect3"> <h4 id="_3_sitemap">3. SiteMap</h4> </div> </div> <div class="sect2"> <h3 id="_atelier_4_wireframemoodboard">Atelier 4: Wireframe/Moodboard</h3> <div class="sect3"> <h4 id="_1_wireframes">1. Wireframes</h4> </div> <div class="sect3"> <h4 id="_2_moodboard">2. Moodboard</h4> </div> </div> <div class="sect2"> <h3 id="_atelier_5_story_mapping_user_stories">Atelier 5: Story Mapping/ User stories</h3> <div class="sect3"> <h4 id="_story_mapping_priorisation_des_us">Story mapping (priorisation des US)</h4> </div> <div class="sect3"> <h4 id="_en_tant_que_type_dutilisateur_je_veux_un_objectif_afin_que_une_raison">En tant que <type d’utilisateur>, je veux <un objectif> afin que <une raison>.</h4> </div> </div> <div class="sect2"> <h3 id="_atelier_6_backlog">Atelier 6: Backlog</h3> <div class="paragraph"> <p><a href="https://www.atlassian.com/fr/agile/scrum/backlogs">backlogs</a></p> </div> </div> <div class="sect2"> <h3 id="_atelier_7_technique_et_architecture">Atelier 7: Technique et Architecture</h3> </div> </div> </div> https://pages-content.github.io//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="_good_links">Good links</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://play.kotlinlang.org/">kotlinlang playground</a><br></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 View Intent</a><br></p> </div> <div class="paragraph"> <p><a href="https://github.com/arkivanov/Essenty">Essenty</a><br></p> </div> <div class="paragraph"> <p><a href="https://arkivanov.github.io/Decompose/">Decompose</a><br></p> </div> </div> </div> <div class="sect1"> <h2 id="_bout_de_code_divers">Bout de code divers</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_map_reduce">map reduce</h3> <div class="paragraph"> <p>Convertir une list de bite vers une list de string et résumer la list de string<br> dans une string contenant la concatenation. Comment logger la request envoyé(requestBodyContent:byte[])</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">log.info( requestBodyContent!!.map { it.toInt().toChar().toString() } .reduce { request: String, s: String -> request + s } )</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_enum_et_sealed_classes">enum et sealed classes</h3> <div class="paragraph"> <p>post: <a href="0038_training_kotlin_enum_sealed_class_post" target="_blank" rel="noopener">training kotlin enum sealed class</a></p> </div> </div> <div class="sect2"> <h3 id="_functionnal_interface_et_method_reference">functionnal interface et method reference</h3> <div class="paragraph"> <p>On peut transformer une entité en model domain de dto avec un methode reference(functionnal style- java 8)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun findAllByLoginNot( pageable:Pageable, login:String) :Page<UserDto> { return userDao.findAllByLoginNot( pageable, login).map(::fromEntity) }</code></pre> </div> </div> <div class="paragraph"> <p>une <a href="https://stackoverflow.com/a/22245383/837404">bonne explication</a></p> </div> </div> <div class="sect2"> <h3 id="_capturer_la_sortie_standard">Capturer la sortie standard</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">package functional import java.io.ByteArrayOutputStream import java.io.PrintStream import java.lang.System.out import java.lang.System.setOut import kotlin.test.AfterTest import kotlin.test.BeforeTest import kotlin.test.Test import kotlin.test.assertEquals class BasicsHOF { private val standardOut: PrintStream? = out private val outputStreamCaptor = ByteArrayOutputStream() @BeforeTest fun setUp() = setOut(PrintStream(outputStreamCaptor)) @AfterTest fun tearDown() = setOut(standardOut) @Test fun `three times dope`() { 3.times { println("Hello") } assertEquals( buildString { repeat(3) { append("Hello\n") } deleteAt(length - 1) }, outputStreamCaptor .toString() .trim() ) } fun Int.times(fn: () -> Unit) = (1..this).forEach { _ -> fn() } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_quelle_est_la_différence_en_kotlin_entre_apply_run_let_also_use_et_with">Quelle est la différence en kotlin entre apply, run, let, also, use et with ?</h3> <div class="paragraph"> <p><strong>Comparaison des fonctions Kotlin et Utilisation des Formes Lambda Reference</strong></p> </div> <div class="paragraph"> <div class="title">Introduction</div> <p>Les fonctions Kotlin <code>apply</code>, <code>run</code>, <code>let</code>, <code>also</code>, <code>use</code>, et <code>with</code> offrent des moyens différents de traiter les objets. Chacune a ses propres cas d’utilisation et comportements. En outre, les formes lambda reference permettent de rendre le code plus lisible et réutilisable en faisant référence à des fonctions lambda existantes.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_apply">apply</h2> <div class="sectionbody"> <div class="paragraph"> <p>La fonction <code>apply</code> est utilisée pour configurer un objet pendant sa création. Elle retourne l’objet sur lequel elle est appelée.</p> </div> <div class="paragraph"> <p>Exemple avec lambda reference :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val someObject = SomeClass().apply(::configureObject)</code></pre> </div> </div> <div class="paragraph"> <p>Exemple avec lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val someObject = SomeClass().apply { // configuration des propriétés de someObject }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_run">run</h2> <div class="sectionbody"> <div class="paragraph"> <p>La fonction <code>run</code> est utilisée pour exécuter un bloc de code sur un objet et retourne le résultat du bloc de code.</p> </div> <div class="paragraph"> <p>Exemple avec lambda reference :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.run(::someFunction)</code></pre> </div> </div> <div class="paragraph"> <p>Exemple avec lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.run { // bloc de code à exécuter sur someObject // la dernière expression est renvoyée }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_let">let</h2> <div class="sectionbody"> <div class="paragraph"> <p>La fonction <code>let</code> est utilisée pour exécuter un bloc de code sur un objet et retourne le résultat du bloc de code.</p> </div> <div class="paragraph"> <p>Exemple avec lambda reference :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.let(::processObject)</code></pre> </div> </div> <div class="paragraph"> <p>Exemple avec lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.let { // bloc de code à exécuter sur someObject // la dernière expression est renvoyée }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_also">also</h2> <div class="sectionbody"> <div class="paragraph"> <p>La fonction <code>also</code> est utilisée pour effectuer une action additionnelle sur un objet et retourne l’objet sur lequel elle est appelée.</p> </div> <div class="paragraph"> <p>Exemple avec lambda reference :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someObject.also(::performAdditionalAction)</code></pre> </div> </div> <div class="paragraph"> <p>Exemple avec lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someObject.also { // action additionnelle sur someObject }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_use">use</h2> <div class="sectionbody"> <div class="paragraph"> <p>La fonction <code>use</code> est utilisée pour travailler avec des ressources qui doivent être fermées après utilisation. Elle appelle automatiquement la fonction <code>close</code> à la fin du bloc.</p> </div> <div class="paragraph"> <p>Exemple avec lambda reference :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someResource.use(::useResource)</code></pre> </div> </div> <div class="paragraph"> <p>Exemple avec lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someResource.use { // travailler avec la ressource }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_with">with</h2> <div class="sectionbody"> <div class="paragraph"> <p>La fonction <code>with</code> est utilisée pour appeler plusieurs méthodes sur un objet sans répéter son nom et retourne le résultat de la dernière expression.</p> </div> <div class="paragraph"> <p>Exemple avec lambda reference :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = with(someObject, ::processWithObject)</code></pre> </div> </div> <div class="paragraph"> <p>Exemple avec lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = with(someObject) { // appeler des méthodes sur someObject // la dernière expression est renvoyée }</code></pre> </div> </div> <div class="paragraph"> <p>En utilisant les formes lambda reference ou les blocs <code>{}</code>, vous pouvez encapsuler la logique dans des fonctions distinctes, améliorant ainsi la lisibilité et la réutilisabilité du code.</p> </div> </div> </div> <div class="sect1"> <h2 id="_let_function_en_kotlin">let Function en Kotlin</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Est-ce que let renvoi l’objet avec les effets de bord opérés dessus ou dans l’état initiale d’entré en fonction(let) ?</div> <p>La fonction <code>let</code> en Kotlin est utilisée pour effectuer des opérations sur un objet et renvoyer un résultat différent. Cependant, il est important de noter que la fonction <code>let</code> ne modifie pas l’état initial de l’objet sur lequel elle est appelée.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 100%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top"><strong>Signature</strong></th> </tr> </thead> <tbody> <tr> <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: 100%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top"><strong>Usage</strong></th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">La fonction <code>let</code> est couramment utilisée pour appliquer des transformations à un objet et obtenir un résultat basé sur ces transformations.</p></td> </tr> </tbody> </table> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 100%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top"><strong>Résultat</strong></th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">La valeur renvoyée par la fonction <code>let</code> est le résultat de l’expression lambda passée en argument, généralement le résultat des opérations effectuées sur l’objet.</p></td> </tr> </tbody> </table> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 100%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top"><strong>Effets de Bord</strong></th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Bien que la fonction <code>let</code> puisse avoir des effets de bord sur l’objet lorsqu’elle est utilisée dans l’expression lambda, elle ne modifie pas l’état initial de l’objet lui-même.</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Ainsi, la fonction <code>let</code> est une façon élégante d’effectuer des opérations sur un objet tout en obtenant un résultat dérivé, tout en préservant l’intégrité de l’objet d’origine.</p> </div> </div> </div> https://pages-content.github.io//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="highlight"><code class="language-kotlin" data-lang="kotlin">import java.text.Collator import java.util.* import kotlin.test.* class StringsTest { @Test fun `chaines de caractères et caractères`() { //inférence de type val s = "C'est" assertEquals("C'est", s) //concaténation val t: String = s + " le moment." assertEquals("C'est le moment.", t) // StringBuilder val t1: String = s + buildString { append(" le moment.") } assertEquals("C'est le moment.", t1) //interpolation val t2 = "$s le moment." assertEquals("C'est le moment.", t2) //multiligne chaine de caractères val t3 = """$s le moment.""" assertEquals("C'est le moment.", t3) //conversion de type val t4 = t + " " + 23.4 assertEquals("C'est le moment. 23.4", t4) val t5 = 'C'.toString() assertEquals("C", t5) //taille de la chaine de caractères assertEquals(16, t.length) //sous-chaine d'une chaine de caractères //retourne une chaine de caractères contenant, //les caractères aux positions x à y-1 //sub = t.substring(x, y) //t = "C'est le moment." //retourne les caractères 6 et 7 var sub = t.substring(6, 8) assertEquals("le", sub) //retourne les caractères 0 à 4 sub = t.substring(0, 5) assertEquals("C'est", sub) //la longueur d'une sous-chaine est toujours égale (y-x) val numChars = sub.length assertEquals(5 - 0, numChars) //extraction des caractères d'une chaine assertEquals('e', t.elementAt(2)) assertEquals('e', t.get(2)) assertEquals('e', t[2]) //conversion d'une chaine en tableau de caractères val ca = t.toCharArray() assertEquals(t.length, ca.size) t.mapIndexed { index, char -> assertEquals(char, ca[index]) } //place les 4 premiers caractères de t1 //dans le tableau ca a la position 2 (t as java.lang.String).getChars( /* srcBegin = */ 0, /* srcEnd = */ 3, /* dst = */ ca, /* dstBegin = */ 1 ) assertEquals("CC'et le moment.", String(ca)) //colle tous les caractères dans un meme string assertEquals("CC'et le moment.", ca.concatToString()) //to lower case assertEquals("c'est le moment.", t.toLowerCase()) assertEquals("c'est le moment.", t.lowercase()) //to upper case assertEquals("C'EST LE MOMENT.", t.toUpperCase()) assertEquals("C'EST LE MOMENT.", t.uppercase()) //comparaison de chaines de caractères //t = "C'est le moment." assertFalse(t.equals("hello")) assertFalse(t == "hello") //ignore la casse assertTrue(t.equalsIgnoreCase("C'EST LE MOMENT.")) assertTrue(t.equals("C'EST LE MOMENT.", ignoreCase = true)) //démarre par assertTrue(t.startsWith("C'est")) //se finit par assertTrue(t.endsWith("le moment.")) //compareTo //retourne une valeur < 0, car s est //alphabétiquement avant "N'est" val r1: Int = s.compareTo("N'est") assertTrue(r1 < 0) //variante ignorant la casse val r1Prime: Int = (s as java.lang.String).compareToIgnoreCase("n'est") assertTrue(r1Prime < 0) //retourne 0 si les chaines sont equivalente val r2: Int = s.compareTo("C'est") assertEquals(0, r2) //retourne une valeur > 0 car s vient apres "B'est" val r3: Int = s.compareTo("B'est") assertTrue(r3 > 0) //Recherche de caractères et de sous-chaines de caractères //recherche de caractères //position du premier caractères 't' var pos = t.indexOf('t') assertEquals(4, pos) //position du suivant pos = t.indexOf('t', pos + 1) assertEquals(14, pos) //retour d'érreur -1 si absence de suivant pos = t.indexOf('t', pos + 1) assertEquals(-1, pos) //position du dernier 't' dans la chaine: 14 pos = t.lastIndexOf('t') assertEquals(14, pos) //recherche de 't' vers l'arrière a partir du caractères 13 pos = t.lastIndexOf('t', pos - 1) assertEquals(4, pos) //recherche de sous-chaines //retourne 2 pos = t.indexOf("est") assertEquals(2, pos) //"est" n'apparait qu'une seule fois: retourne -1 pos = t.indexOf("est", pos + 1) assertEquals(-1, pos) //recherche d'une sous-chaine depuis l'arrière //t = "C'est le moment." //retourne 6 pos = t.lastIndexOf("le ") assertEquals(6, pos) //extrait depuis la position 9, //renvoi toute la chaine après "le " val noun = t.substring(pos + 3) assertEquals(-1, noun.indexOf("le ")) //remplacement de toutes les instances d'un caractère //par un autre caractère //ne fonctionne que avec les caractères, pas les chaines val exclaim: String = t.replace('.', '!') assertEquals('!', exclaim.get(exclaim.length - 1)) assertEquals(exclaim.length - 1, exclaim.indexOf('!')) assertEquals(-1, exclaim.indexOf('.')) //suppression des espaces blancs //au début et à la fin d'une chaine val noextraspaces = t.trim() assertNotEquals(' ', noextraspaces.get(0)) assertNotEquals(' ', noextraspaces.get(noextraspaces.length - 1)) //extraction des instances uniques de chaines de caractères //avec intern() val s1 = s.intern() assertEquals(s, s1) val s2 = "C'est".intern() assertEquals("C'est", s2) assertEquals(s1, s2) //StringBuilder pour manipuler les caractères d'une chaine de caractères //crée un tampon StringBuilder à partir d'une chaine de caractères val b = StringBuilder("N'est") //extrait et définit des caractères individuel du tampon StringBuilder //le caractères à l'index 0 val c: Char = b.get(0) assertEquals('N', c) //modifier le premier caractère de la chaine b.setCharAt(0, 'C') assertEquals(s, b.toString()) //ajouter des données à un StringBuilder b.append(' ') b.append("le moment.") b.append(23) //insère des chaines de caractères ou autre dans le StringBuilder b.insert(6, "pas ") assertEquals("C'est pas le moment.23", b.toString()) //remplace un sous ensemble de caractères //avec une chaine de caractères donnée b.replace(2, 9, "est") assertEquals("C'est le moment.23", b.toString()) //supprime les caractères b.delete(15, 18) assertEquals("C'est le moment", b.toString()) b.deleteCharAt(2) assertEquals("C'st le moment", b.toString()) //insert à la postion 2 et décale reste à droite(sans perte de données) b.insert(2, 'e') //tronque la taille de la donnée b.setLength(5) assertEquals("C'est", b.toString()) //inverse les caractères de la chaine b.reverse() assertEquals("tse'C", b.toString()) //écrase le StringBuilder, pret à etre réutilisé b.setLength(0) assertEquals("", b.toString()) //java.util.StringTokenizer pour fragmenter une chaine //de caractères en un ensemble de mots var st = StringTokenizer(t) //nb d'items encore présentent dans la file assertEquals(3, st.countTokens()) //est ce que il y a encore des items dans la file assertTrue(st.hasMoreTokens()) //récupérer le token courrant assertEquals("C'est", st.nextToken()) assertEquals("le", st.nextToken()) assertEquals("moment.", st.nextToken()) assertFalse(st.hasMoreTokens()) assertEquals(0, st.countTokens()) //extraire des occurences de mots délimités //par des caractères autres que des expaces. val str = "a:b:c:d" st = StringTokenizer(str, ":") assertEquals(4, st.countTokens()) assertTrue(st.hasMoreTokens()) assertEquals("a", st.nextToken()) assertEquals("b", st.nextToken()) assertEquals("c", st.nextToken()) assertEquals("d", st.nextToken()) assertFalse(st.hasMoreTokens()) assertEquals(0, st.countTokens()) //text="C'est le moment." val text = t.toCharArray() var p = 0 //sauter les espaces de tete //pour ramener p à la position du premier caractère imprimable while ((p < text.size) && (Character.isWhitespace(text[p])) ) p++ assertEquals(0, p) assertEquals("C'est le moment.", text.concatToString()) //met le premier mot du texte en majuscule while (p < text.size && Character.isLetter(text[p])) { text[p] = Character.toUpperCase(text[p]) p++ } assertEquals(1, p) assertEquals('C', text[0]) assertTrue(Character.isUpperCase(text[0])) assertFalse(Character.isLetter(text[1])) //comparer des chaines de caractères // avec les contrainte la locale système val col = Collator.getInstance() //le résulat est négatif car chica //est avant chico dans l'ordre alphabétique assertTrue(col.compare("chica", "chico") < 0) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">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="highlight"><code class="language-kotlin" data-lang="kotlin">import java.math.BigInteger import java.security.SecureRandom import java.text.NumberFormat import java.util.* import kotlin.test.* class NumbersMathTest { @Test fun `Nombres et Math`() { //Constantes utiles Byte.MIN_VALUE Byte.MAX_VALUE Short.MIN_VALUE Short.MAX_VALUE Float.MIN_VALUE Float.MAX_VALUE Math.PI Math.E val s = "-42" //conversion de chaine de caractères //vers un nombre, si possible. var b: Byte = java.lang.Byte.parseByte(s) var sh: Short = java.lang.Short.parseShort(s) var i: Int = java.lang.Integer.parseInt(s) var l: Long = java.lang.Long.parseLong(s) var f: Float = java.lang.Float.parseFloat(s) var d: Double = java.lang.Double.parseDouble(s) //valeur exacte val f_exac = java.lang.Float.valueOf(s) val d_exac = java.lang.Double.valueOf(s) //les routines de conversions entière gérent //les nombres dans diverses bases. //1011 en binare est égal a 11 en base dix b = java.lang.Byte.parseByte("1011", 2) assertEquals(11, b) //ff en base 16(hexa) est égal à 255 en base dix. sh = java.lang.Short.parseShort("ff", 16) assertEquals(255, sh) //la méthode valueOf() peut gérer des bases arbitraires. i = java.lang.Integer.valueOf("egg", 17).toInt() assertEquals(4334, i) //la méthode decode() gére les representations octale, //décimal, hexadécimal, en fonction du préfixe numérique //de la chaine de caractères //un 0 de tete signifie base 8 //un 0x de tete signifie base 16 //les autres sont en base 10 val sho = java.lang.Short.decode("0377") //la classe Integer peut convertir les nombres //en diverses chaines de caractères. val decimal = java.lang.Integer.toString(42) assertEquals("42", decimal) val decimal_ = 42.toString() assertEquals("42", decimal_) val binary = java.lang.Integer.toBinaryString(42) assertEquals("101010", binary) val octal = java.lang.Integer.toOctalString(42) assertEquals("52", octal) val hex = java.lang.Integer.toHexString(42) assertEquals("2a", hex) val base36 = java.lang.Integer.toString(42, 36) assertEquals("16", base36) val base36_ = 42.toString(36) assertEquals("16", base36_) //java.text.NumberFormat effectue la conversion // d'une maniere spécifique aux parametres locaux //sans parametre prend la local systeme comme reference val nf = NumberFormat.getNumberInstance(Locale.FRANCE) val formatted_number = nf.format(9876543.21) assertNotEquals("9876543.21", formatted_number) //parse la chaine de caractères en fonction des parametres locaux(fr) val n = nf.parse("1234567,89") assertEquals(1234567.89, n) //les valeurs monétaires sont parfois formaté // d'une maniere differente des nombres val money_format = NumberFormat.getCurrencyInstance(Locale.FRANCE) assertEquals("123,40 €", money_format.format(1234.56)) //java.lang.Math d = Math.toRadians(27.0) d = Math.cos(d) d = Math.sqrt(d) d = Math.log(d) d = Math.exp(d) d = Math.pow(10.0, d) d = Math.atan(d) d = Math.toDegrees(d) //arrondi au dessus val up = Math.ceil(d) //arrondi au dessous val down = Math.floor(d) //arrondi au plus près val nearest = Math.round(d) //java.lang.Math.Random() val r = Math.random() assertTrue(r >= 0.0 && r < 1.0) //créé un nouvel objet Random, en l'initialisant //avec l'heure courante val generator = java.util.Random(System.currentTimeMillis()) //prochaine valeur aléatoire de taille double d = generator.nextDouble() assertTrue((d >= 0.0) && (d < 1.0)) //prochaine valeur aléatoire de taille float f = generator.nextFloat() assertTrue((f >= 0.0) && (f < 1.0)) //prochaine valeur aléatoire de taille long l = generator.nextLong() assertTrue( (Math.abs(l) <= Long.MAX_VALUE) && (Math.abs(l) >= 0) ) //prochaine valeur aléatoire de taille int i = generator.nextInt() assertTrue( (Math.abs(i) <= java.lang.Integer.MAX_VALUE) && (Math.abs(i) >= 0) ) val limit = 100 //prochaine valeur aléatoire de taille int //la limit max du ramdom est ramené à limit //et la limit min est 0 i = generator.nextInt(limit) assertTrue(i in 0 until limit) //prochaine valeur aléatoire de taille booléen val bool = generator.nextBoolean() assertNotNull(bool) //valeur moyenne 0.0, déviation standard 1.0 d = generator.nextGaussian() //randoms bytes //rempli un tableau avec des valeurs byte aléatoires val b_arr = ByteArray(128) generator.nextBytes(b_arr) b_arr.iterator().forEachRemaining { assertTrue( it <= Byte.MAX_VALUE && it >= Byte.MIN_VALUE ) } //java.security.SecureRandom pour les nombres aléatoires //utilisé en cryptographie val secure_generator = SecureRandom() //le générateur génère sa propre tete de liste sur 16 octets secure_generator.setSeed(secure_generator.generateSeed(16)) val sec_b_arr = ByteArray(128) secure_generator.nextBytes(sec_b_arr) sec_b_arr.iterator().forEachRemaining { assertTrue( it <= java.lang.Byte.MAX_VALUE && it >= java.lang.Byte.MIN_VALUE ) } //java.math.BigDecimal java.math.BigInteger //pour travailler sur des grandes valeurs. //calcule de la factorielle de 1000 var total = BigInteger.valueOf(1) (2..1000).forEach { total = total.multiply(BigInteger.valueOf(it.toLong())) } assertTrue(total.toString().length == 2568) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">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="highlight"><code class="language-kotlin" data-lang="kotlin">import java.text.DateFormat import java.text.SimpleDateFormat import java.time.Instant import java.util.* import kotlin.test.Test import kotlin.test.assertEquals import kotlin.test.assertTrue class DatesHoursTest { @Test fun `Dates et heures`() { //l'heure courante en millisecondes val t0 = System.currentTimeMillis() //une autre représentation de la meme information val now = java.util.Date() //converti un objet java.util.Date en une valeur long. val t1 = now.getTime() assertTrue(t1 > Instant.EPOCH.toEpochMilli()) //kotlin property access syntaxe style val t1_prime = now.time //java.text.DateFormat //affiche la date d'aujourd'hui en utilisant le format //par défaut des parametres locaux val defaultDateFormat = DateFormat.getDateInstance() //personnalisation du formatage et de la locale val df = DateFormat.getDateInstance(DateFormat.LONG, Locale.FRANCE) val localeFormattedDate = df.format(Date()) //constantes pour les styles de pattern de formatage assertEquals(0, DateFormat.FULL) assertEquals(1, DateFormat.LONG) assertEquals(2, DateFormat.MEDIUM) assertEquals(3, DateFormat.SHORT) assertEquals(2, DateFormat.DEFAULT) //utilise pour l'heure un format abrégé avec //des parametres personnalisés val tf = DateFormat.getTimeInstance( DateFormat.SHORT, Locale.FRANCE ) //affiche l'heure en utilisant le format de tf val shortTime = tf.format(Date()) assertTrue(shortTime.contains(':')) //affiche la date et l'heure en utilisant //un format détaillé val longTimeStamp = DateFormat.getDateTimeInstance( DateFormat.FULL, DateFormat.FULL, ) assert(longTimeStamp.format(Date()).isNotEmpty()) //utilisez java.text.SimpleDateFormat //pour définir votre propre modele de formatage val customFormat = SimpleDateFormat("yyyy.MM.dd") assertEquals(10, customFormat.format(Date()).length) //DateFormat peut également parser les date contenu dans des chaines val kotlinAnnounceDate = customFormat.parse("2019.05.08") //la class Date et sa représentation en millisecondes //n'autorise qu'une forme trés simple d'arithmétique //on ajoute 3 600 000 millisecondes à l'heure courante val anHourFromNow = now.getTime() + (60 * 60 * 1000) assert(anHourFromNow > now.getTime()) //java.util.Calendar //pour manipuler les dates et heures de facon plus sophistiquée //instanciation selon les parametres locaux //et le fuseau horaire local val calendar = Calendar.getInstance() //initialisation du calendrier à la date de maintenant calendar.setTime(now) //détermine le jour de l'année auquel correspond la date courante val dayOfYear = calendar.get(Calendar.DAY_OF_YEAR) assert(dayOfYear < 366) //réinitialisation de la date courante calendar.set(2019, Calendar.MAY, 8) assertEquals(4, calendar.get(Calendar.DAY_OF_WEEK)) //à quel jour du mois correspond le deuxieme mercredi de mai 2019 //set(key,value) calendar.set(Calendar.YEAR, 2019) calendar.set(Calendar.MONTH, Calendar.MAY) calendar.set(Calendar.DAY_OF_WEEK, Calendar.WEDNESDAY) //defini à quel (n=2) semaine du mois est la date calendar.set(Calendar.DAY_OF_WEEK_IN_MONTH, 2) //extrait le jour du mois val dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH) assertEquals(8, dayOfMonth) calendar.setTime(kotlinAnnounceDate) //ajoute 30j à la date calendar.add(Calendar.DATE, 30) val monthAfter = calendar.getTime() //date est elle avant ou apres? assertTrue(monthAfter.after(kotlinAnnounceDate)) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">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="highlight"><code class="language-kotlin" data-lang="kotlin">import java.time.LocalDate import java.time.Month import java.time.Period import java.time.YearMonth import java.time.temporal.* import java.util.HashMap import java.util.stream.Collectors import kotlin.test.Test class DatesHoursJava8Test { class BirthdayDiary { private val birthdays: MutableMap<String, LocalDate> init { birthdays = HashMap() } fun addBirthday( name: String, day: Int, month: Int, year: Int ): LocalDate { val birthday: LocalDate = LocalDate.of(year, month, day) birthdays[name] = birthday return birthday } fun getBirthdayFor(name: String): LocalDate? { return birthdays[name] } fun getAgeInYear(name: String, year: Int): Int { val period: Period = Period.between( birthdays[name], birthdays[name]!!.withYear(year) ) return period.getYears() } fun getFriendsOfAgeIn(age: Int, year: Int): Set<String> { return birthdays.keys.stream() .filter { p: String -> getAgeInYear(p, year) == age } .collect(Collectors.toSet()) } fun getDaysUntilBirthday(name: String): Int { val period: Period = Period.between( LocalDate.now(), birthdays[name] ) return period.getDays() } fun getBirthdaysIn(month: Month): Set<String> { return birthdays.entries.stream() .filter { (_, value): Map.Entry<String, LocalDate> -> value.getMonth() === month } .map<String> { (key): Map.Entry<String, LocalDate> -> key } .collect(Collectors.toSet()) } val birthdaysInCurrentMonth: Set<String> get() = getBirthdaysIn(LocalDate.now().getMonth()) val totalAgeInYears: Int get() = birthdays.keys.stream() .mapToInt { p: String -> getAgeInYear( p, LocalDate.now().getYear() ) } .sum() } //Les ajusteurs modifient les objets de date et d'heure. Supposons, par exemple, que nous voulions //renvoie le premier jour d'un trimestre qui contient un horodatage particulier : class FirstDayOfQuarter : TemporalAdjuster { override fun adjustInto(temporal: Temporal): Temporal? { val currentQuarter: Int = YearMonth.from(temporal) .get(IsoFields.QUARTER_OF_YEAR) return when (currentQuarter) { 1 -> LocalDate.from(temporal) .with(TemporalAdjusters.firstDayOfYear()) 2 -> LocalDate.from(temporal) .withMonth(Month.APRIL.value) .with(TemporalAdjusters.firstDayOfMonth()) 3 -> LocalDate.from(temporal) .withMonth(Month.JULY.value) .with(TemporalAdjusters.firstDayOfMonth()) 4 -> LocalDate.from(temporal) .withMonth(Month.OCTOBER.value) .with(TemporalAdjusters.firstDayOfMonth()) else -> null } } } enum class Quarter { FIRST, SECOND, THIRD, FOURTH } //Dans quel trimestre de l'année cette date se situe-t-elle ? class QuarterOfYearQuery : TemporalQuery<Quarter> { override fun queryFrom(temporal: TemporalAccessor): Quarter { val now = LocalDate.from(temporal) return if (now.isBefore(now.with(Month.APRIL).withDayOfMonth(1))) Quarter.FIRST else if (now.isBefore( now.with(Month.JULY) .withDayOfMonth(1) ) ) Quarter.SECOND else if (now.isBefore( now.with(Month.NOVEMBER) .withDayOfMonth(1) ) ) Quarter.THIRD else Quarter.FOURTH } } @Test fun `Dates et heures après java 8`() { val today = LocalDate.now() val currentMonth = today.month val firstMonthOfQuarter = currentMonth.firstMonthOfQuarter() val q = QuarterOfYearQuery() // Direct var quarter: Quarter? = q.queryFrom(LocalDate.now()) println(quarter) // Indirect quarter = LocalDate.now().query(q) println(quarter) val now = LocalDate.now() val fdoq: Temporal = now.with(FirstDayOfQuarter()) println(fdoq) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">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="highlight"><code class="language-kotlin" data-lang="kotlin">package playground.programming import java.util.* import kotlin.test.Test import kotlin.test.assertEquals import kotlin.test.assertFalse import kotlin.test.assertTrue class ArrayCollectionTest { @Test fun `Tableaux, collections`() { //Tableau //java.util.Arrays définit d'utiles méthodes de manipulation de tableaux, //y compris de tri et de recherche au sein d'un tableau val intArray = arrayOf(10, 5, 7, -3) //tri le tableau Arrays.sort(intArray) var pos = Arrays.binarySearch(intArray, 7) //la valeur 7 est trouvé a l'index 2 assertEquals(2, pos) //12 pas trouvé retourne une valeur negative assert(Arrays.binarySearch(intArray, 12) < 0) //les tableaux peuvent également etre triés //et faire l'objet d'une recherche val stringArray = arrayOf("le", "moment", "c'est") assertEquals("c'est", stringArray[2]) assertEquals("le", stringArray[0]) assertEquals("moment", stringArray[1]) Arrays.sort(stringArray) assertEquals("c'est", stringArray[0]) assertEquals("le", stringArray[1]) assertEquals("moment", stringArray[2]) //Arrays.equals() compare tous les éléments de deux tableaux //Arrays.clone() copie tous les elements du tableau dans un autre stringArray.forEachIndexed { i, it -> assertEquals(it, stringArray.clone()[i]) } val data = ByteArray(100) //Arrays.fill() initialise tous les éléments des deux tableaux //initalise tous les éléments à -1 Arrays.fill(data, -1) data.forEach { assertEquals(-1, it) } //attribue aux éléments 5, 6, 7, 8 et 9 la valeur -2 Arrays.fill(data, 5, 10, -2) ((5 until (10 - 1))).forEach { assertEquals(-2, data[it]) } //récupère le type de data val type = data::class.java //est ce que data est un tableau? assertTrue(type.isArray()) //est ce que data est un tableau de byte assertEquals(Byte::class.java, type.getComponentType()) //Collection val s = java.util.HashSet<String>() s.add("test") assertTrue(s.contains("test")) assertFalse(s.contains("test2")) s.remove("test") assertFalse(s.contains("test")) val ss = TreeSet<String>() ss.add("b") ss.add("a") ss.iterator().forEach { assertTrue(it == "a" || it == "b") } //liste doublement chainée var dll: List<String> = LinkedList<String>() //plus efficace val l = java.util.ArrayList<String>() l.addAll(ss) l.addAll(1, ss) val obj = l.get(1) val obj_prime = l[1] assertEquals(obj, obj_prime) l.set(3, "nouvel élément") l.add("test") l.add(0, "test2") l.removeAt(1) l.remove("a") assertFalse(l.contains("a")) l.removeAll(ss) assertFalse(l.containsAll(ss)) assertFalse(l.isEmpty()) assertTrue(l.isNotEmpty()) val sublist = l.subList(1, 3) val elements = l.toArray() l.clear() val m = HashMap<String, Integer>() m.put("clé", Integer(42)) m["clé"] = Integer(42) val value: Integer = m.get("clé")!! assertEquals(Integer(42), value) m.remove("clé") assertTrue(m.isEmpty()) val keys = m.keys assertTrue(keys.isEmpty()) val set = HashSet<String>() set.add("key_1") set.add("key_2") set.add("key_3") val members = set.toArray() assertEquals(3, members.size) val list = ArrayList<String>() list.add("items1") list.add("items2") list.add("items3") val items = list.toArray() assertEquals(3, items.size) //trie et recherche d'éléments sur les collections list.add("clé") //en premier on trie Collections.sort(list) //en kotlin list.sort() //en deuxieme on cherche //retourne l'index du premier trouvé sinon -1 pos = Collections.binarySearch(list, "clé") assertEquals(0, pos) val list1 = mutableListOf(1, 2, 3, 4, 5) val list2 = mutableListOf<Int>(0, 0, 0, 0, 0) //d'autres méthodes intéressantes concernant Collections //copie list1 dans list2, 2e parametre dans 1er parametre Collections.copy(list2, list1) //comparaison de la copy avec filter assertTrue(list1.filterIndexed { i: Int, it: Int -> it != list2[i] }.isEmpty()) //comparaison de la copy avec map list1.mapIndexed { index: Int, it: Int -> assertEquals(it, list2[index]) } //rempli avec des 0 Collections.fill(list2, 0) assertTrue(list2.none { it != 0 }) //le maximum assertEquals(5, Collections.max(list1)) //le minimum assertEquals(1, Collections.min(list1)) //renverse Collections.reverse(list) listOf("items3", "items2", "items1", "clé").mapIndexed { i: Int, it: String -> assertEquals(it, list[i]) } //mélange la list Collections.shuffle(list) //retourne un ensemble immuable possédant un seul élément 0 Collections.singleton(0) //renvoi un emballage immuable autour d'une liste Collections.unmodifiableList(list) //renvoi un emballage synchronisé autour d'une map, ensemble clé valeur Collections.synchronizedMap(m) //java.util.Properties un est objet key value } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">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: 50%;"> <col style="width: 50%;"> </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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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="highlight"><code class="language-kotlin" data-lang="kotlin">import java.text.DateFormat import java.util.* import kotlin.test.Test class ThreadsTest { @Test fun `threads test`() { //java.lang.Thread représente le thread fondamentale de l'API java //il existe deux manière de définir un thread //1) étendre la classe Thread ou une lambda en kotlin //2) implémenter l'interface Runnable, // puis passer une instance de cet objet Runnable au constructeur de Thread. val list1: List<Int> = List( size = 45, init = { (1..31).random() } ) println("list1$list1") //facon 1 val t = Thread { Collections.sort(list1) println("list1 sorted$list1") } t.start() val list2 = List( size = 45, init = { (1..31).random() } ) println("list2$list2") //facon 2 val sorter = BackgroundSorter(list2) sorter.start() //priorité des threads //tant qu'un thread de niveau de priorité supérieure n'est pas fini //alors celui de niveau inférieur ne peut s'exécuter //on définit un thread avec une priorité inférieur à la normale t.setPriority(Thread.NORM_PRIORITY - 1) //ici on définit un thread avec une priorité inférieur à la priorité //du thread courant t.setPriority(Thread.currentThread().getPriority() - 1) //Thread.yield() fait une pause pour laisser les autres threads de meme priorité s'exécuter } class BackgroundSorter(private val l: List<Int>) : Thread() { override fun run() { Collections.sort(l) println("list2 sorted$l") } } //pour l'arrêt du thread, plutôt qu'utiliser la fonction Thread.stop() // qui laisse la memoire dans un état non controlé. //utiliser la méthode tel que l'exemple pleaseStop() class DummyClock( private val df: DateFormat = DateFormat.getTimeInstance(DateFormat.MEDIUM), private var keepRunning: Boolean = true ) : Thread() { init { isDaemon = true start() } override fun run() { while (keepRunning) { println(df.format(Date())) try { sleep(1000) } catch (e: InterruptedException) { println(e.message) } } } fun pleaseStop() { keepRunning = false } } //java.util.Timer //java.util.TimerTask //ces classes permettent l'exécution de taches répétitives @Test fun `Timer et TimerTask test`() { DummyClock() } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">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="highlight"><code class="language-kotlin" data-lang="kotlin">import java.util.* import java.util.regex.Matcher import java.util.regex.Pattern import java.util.stream.Collectors import kotlin.test.Test import kotlin.test.assertEquals class RegularExpressionsTest { @Test fun `expressions régulières`() { val p: Pattern = Pattern.compile("honou?r") val caesarUK = "For Brutus is an honourable man" val mUK: Matcher = p.matcher(caesarUK) assertEquals(true, mUK.find(), "Should matches UK spelling") val caesarUS = "For Brutus is an honorable man" val mUS: Matcher = p.matcher(caesarUS) assertEquals(true, mUS.find(), "Should matches US spelling") } @Test fun `expressions régulières plus complexes`() { //Notez que nous devons utiliser \\ car nous avons besoin d'un littéral \ //et Java utilise un seul \ comme caractère d'échappement var pStr = "\\d" // Un chiffre numérique var text = "Apollo 13" var p = Pattern.compile(pStr) var m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) pStr = "[a..zA..Z]" //N'importe quelle lettre p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) //N'importe quel nombre de lettres, qui doivent toutes être comprises entre 'a' et 'j' //mais peut-être en majuscule ou en minuscule. pStr = "([a..jA..J]*)" p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) text = "abacab" //'a' suivi de quatre caractères quelconques, suivi de 'b' pStr = "a....b" p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) } @Test fun `Quelles chaînes correspondent à la regex ?`() { val pStr = "\\d" // Un chiffre numérique val p = Pattern.compile(pStr) val ls: List<String> = Arrays.asList("Cat", "Dog", "Ice-9", "99 Luftballoons") val containDigits: List<String> = ls.stream() .filter(p.asPredicate()) .collect(Collectors.toList()) assert(containDigits.contains("Ice-9")) assert(containDigits.contains("99 Luftballoons")) assertEquals(2, containDigits.size) } }</code></pre> </div> </div> <div class="sect2"> <h3 id="_tableau_regex_metacharacters">Tableau regex metacharacters</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> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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://pages-content.github.io//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="#_afficher_laide">1. Afficher l’aide</a></li> <li><a href="#_définir_la_propriété_système_de_la_jvm_d_system_prop">2. Définir la propriété système de la JVM : <code>-D, --system-prop</code></a></li> <li><a href="#_définir_la_propriété_du_projet_pour_le_build_script_pmypropmyvalue">3. Définir la propriété du projet pour le build script : <code>-Pmyprop=myvalue</code></a></li> <li><a href="#_spécifie_le_répertoire_de_démarrage_de_gradle_la_valeur_par_défaut_est_le_répertoire_actuel">4. Spécifie le répertoire de démarrage de Gradle. La valeur par défaut est le répertoire actuel.</a></li> <li><a href="#_surcharger_la_property_param_component_par_la_ligne_de_commande">5. Surcharger la property 'param_component' par la ligne de commande :</a></li> <li><a href="#_ajouter_un_dossier_à_un_source_set_dans_un_projet_normal_avec_le_kotlin_dsl">6. Ajouter un dossier à un source-set dans un projet normal avec le kotlin dsl</a></li> <li><a href="#_ajouter_un_dossier_à_un_source_set_dans_un_projet_android_avec_le_groovy_dsl">7. Ajouter un dossier à un source-set dans un projet android avec le groovy dsl</a></li> <li><a href="#_éviter_de_construire_et_tester_un_sous_module">8. Éviter de construire et tester un sous module</a></li> <li><a href="#_tar_un_dossier">9. Tar un dossier</a></li> <li><a href="#_afficher_les_dépendances_dun_build">10. Afficher les dépendances d’un build</a></li> <li><a href="#_exemple_dutilisation_de_reduce_concaténation_dune_list_dans_un_string">11. Exemple d’utilisation de reduce : concaténation d’une list dans un string</a></li> <li><a href="#_récupérer_la_description_dune_tache_en_particulier">12. Récupérer la description d’une tache en particulier</a></li> <li><a href="#_pour_lancer_une_tache_depuis_le_workingdir_root_alors_préfixer_la_tache_pas_un">13. Pour lancer une tache depuis le workingDir root, alors préfixer la tache pas un <code>:</code></a></li> <li><a href="#_pour_relancer_les_taches_qui_ont_échouées_utiliser_loption_rerun_tasks">14. Pour relancer les taches qui ont échouées, utiliser l’option <code>--rerun-tasks</code></a></li> <li><a href="#_lancer_une_tâche_dans_un_projet_spécifique_depuis_un_autre_répertoire">15. Lancer une tâche dans un projet spécifique depuis un autre répertoire</a></li> </ul> </div> <div class="sect1"> <h2 id="_afficher_laide">1. Afficher l’aide</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew --help</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_définir_la_propriété_système_de_la_jvm_d_system_prop">2. Définir la propriété système de la JVM : <code>-D, --system-prop</code></h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -Dmyprop=myvalue #ou ./gradlew --system-prop myvalue</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_définir_la_propriété_du_projet_pour_le_build_script_pmypropmyvalue">3. Définir la propriété du projet pour le build script : <code>-Pmyprop=myvalue</code></h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -Pmyprop=myvalue #ou ./gradlew --project-prop myvalue</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_spécifie_le_répertoire_de_démarrage_de_gradle_la_valeur_par_défaut_est_le_répertoire_actuel">4. Spécifie le répertoire de démarrage de Gradle. La valeur par défaut est le répertoire actuel.</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -p ~/src/next_startup #ou ./gradlew --project-dir ~/src/next_startup</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_surcharger_la_property_param_component_par_la_ligne_de_commande">5. Surcharger la property 'param_component' par la ligne de commande :</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -Pparam_component=CUSTOM_VALUE</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ajouter_un_dossier_à_un_source_set_dans_un_projet_normal_avec_le_kotlin_dsl">6. Ajouter un dossier à un source-set dans un projet normal avec le kotlin dsl</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">sourceSets { getByName("test"){ java.srcDir("src/scripts/groovy") } getByName("test"){ java.srcDir("src/scripts/kscript") } getByName("test"){ java.srcDir("src/test/javascript") } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ajouter_un_dossier_à_un_source_set_dans_un_projet_android_avec_le_groovy_dsl">7. Ajouter un dossier à un source-set dans un projet android avec le groovy dsl</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">android { sourceSets { main.java.srcDirs += "src/main/../../../../ceelo/domain/src/main/java/" test.java.srcDirs += "src/test/../../../../ceelo/domain/src/test/java/" } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_éviter_de_construire_et_tester_un_sous_module">8. Éviter de construire et tester un sous module</h2> <div class="sectionbody"> <div class="paragraph"> <p>gradle build -x :excluded-module:check -x :excluded-module:assemble -x :excluded-module:build</p> </div> <div class="listingblock"> <div class="title">Déplacer des fichiers</div> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register("moveWebappNode") { doLast { ant.withGroovyBuilder { "move"( "webapp/node_modules" to "$rootDir/webapp-src/node_modules", ) } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tar_un_dossier">9. Tar un dossier</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register<Tar>("tarWebapp") { dependsOn("moveWebappNpm") group = WEBAPP description = "tar webapp" doLast { setOf( "build", "target", "node_modules" ).forEach { dir -> exclude { it.name .dir } } archiveFileName.set("webapp.tar") destinationDirectory.set(File("${rootDir.absolutePath}$sep$WEBAPP_SRC")) } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_afficher_les_dépendances_dun_build">10. Afficher les dépendances d’un build</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register("printDependencies") { description = "print project dependencies" group = WEBAPP doLast { println("${project.name} dependencies") mutableMapOf<String, Map<String, String>>( "buildDependencies" to buildDependencies, "domainDeps" to domainDeps, "domainTestDeps" to domainTestDeps, ).apply { putAll(appModules) } .forEach { module -> if (module.value.isNotEmpty()) { println("${module.key}:") module.value.forEach { println(dependency(it)) } println() } } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_exemple_dutilisation_de_reduce_concaténation_dune_list_dans_un_string">11. Exemple d’utilisation de reduce : concaténation d’une list dans un string</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register("printWebappSrc") { description = "print webapp sources" group = WEBAPP doLast { webAppSrc .reduce { acc, s -> "$acc\n\t$s" } .run { println("$WEBAPP_SRC: $this\n") } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_récupérer_la_description_dune_tache_en_particulier">12. Récupérer la description d’une tache en particulier</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -q help --task foo</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pour_lancer_une_tache_depuis_le_workingdir_root_alors_préfixer_la_tache_pas_un">13. Pour lancer une tache depuis le workingDir root, alors préfixer la tache pas un <code>:</code></h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew :foo</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pour_relancer_les_taches_qui_ont_échouées_utiliser_loption_rerun_tasks">14. Pour relancer les taches qui ont échouées, utiliser l’option <code>--rerun-tasks</code></h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew check --rerun-tasks</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_lancer_une_tâche_dans_un_projet_spécifique_depuis_un_autre_répertoire">15. Lancer une tâche dans un projet spécifique depuis un autre répertoire</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’option <code>-p</code> (ou <code>--project-dir</code>) permet de spécifier le chemin d’accès à un projet Gradle et d’y exécuter une tâche, même si le répertoire courant est différent.</p> </div> <div class="paragraph"> <p>Par exemple, pour lancer la tâche <code>build</code> du projet situé dans <code>~/projets/mon-autre-projet</code> tout en étant dans un autre répertoire :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -p ~/projets/mon-autre-projet build</code></pre> </div> </div> <div class="paragraph"> <p>Cela est particulièrement utile pour scripter des actions sur plusieurs projets depuis un emplacement central.</p> </div> <hr> <div class="ulist"> <div class="title">voir aussi :</div> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/command_line_interface.html#sec:command_line_warnings">ref</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/command_line_interface.html#sec:command_line_options">ref</a></p> </li> <li> <p><a href="https://stackoverflow.com/a/36178581/837404">discussion</a></p> </li> </ul> </div> </div> </div> https://pages-content.github.io//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>les sealed classes, ne sont pas des énumérations(mot clef:enum).<br> Venant de Java, vous pourriez être tenté de surcharger votre énumération d’apport de fonctionnalités:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-java" data-lang="java">enum PizzaOrderStatus { ORDER_RECEIVED, PIZZA_BEING_MADE, OUT_FOR_DELIVERY, COMPLETED; public PizzaOrderStatus nextStatus() { switch (this) { case ORDER_RECEIVED: return PIZZA_BEING_MADE; case PIZZA_BEING_MADE: return OUT_FOR_DELIVERY; case OUT_FOR_DELIVERY: return COMPLETED; case COMPLETED:return COMPLETED; } } }</code></pre> </div> </div> <div class="paragraph"> <p>Au lieu de cela, vous pouvez utiliser la sealed classe :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">sealed class PizzaOrderStatus(protected val orderId: Int) { abstract fun nextStatus() : PizzaOrderStatus class OrderReceived(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return PizzaBeingMade(orderId) } } class PizzaBeingMade(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return OutForDelivery(orderId) } } class OutForDelivery(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return Completed(orderId) } } class Completed(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return this } } }</code></pre> </div> </div> <div class="paragraph"> <p>L’avantage de cette approche est que nous pouvons maintenant transmettre des données avec le statut:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">var status: PizzaOrderStatus = OrderReceived(123) while (status !is Completed) { status = when (status) { is OrderReceived -> status.nextStatus() is PizzaBeingMade -> status.nextStatus() is OutForDelivery -> status.nextStatus() is Completed -> status } }</code></pre> </div> </div> <div class="paragraph"> <p>En général, les sealed classes sont bonnes si vous voulez avoir des données associées à un Etat.</p> </div> https://pages-content.github.io//blog/2022/0036_training_kotlin_post.html Thu, 12 May 2022 00:00:00 +0000 blog/2022/0036_training_kotlin_post.html <div class="sect1"> <h2 id="_mind_map">Mind map</h2> <div class="sectionbody"> <div class="paragraph"> <p><span class="image"><img src="../../diagram/training_kotlin.png" alt="training_kotlin"></span></p> </div> </div> </div> <div class="sect1"> <h2 id="_programmation_fonctionnelle">Programmation fonctionnelle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Les execrices sont tirés du livre:<br> Functional programing in kotlin by tutorials<br> Written by 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="_syntaxe">Syntaxe</h3> <div class="sect3"> <h4 id="_firstprogramtest">FirstProgramTest</h4> <div class="paragraph"> <p>notions: affichage écran, fonction<br> FirstProgramTest: <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/FirstProgramTest.kt">source</a><br></p> </div> </div> <div class="sect3"> <h4 id="_concatfunctiontest">ConcatFunctionTest</h4> <div class="paragraph"> <p>notions: memoire, variable, valeur, objet, extension de fonction<br> ExampleUnitTest: <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/ConcatFunctionTest.kt">source</a><br></p> </div> </div> <div class="sect3"> <h4 id="_birthdaymessagetestoutput">BirthdayMessageTestOutput</h4> <div class="paragraph"> <p>notions: ensembles, boucles<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">Introduction to kotlin</a><br> BirthdayMessageTestOutput: <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/BirthdayMessageTestOutput.kt">source</a><br></p> </div> </div> </div> <div class="sect2"> <h3 id="_cours_de_kotlin">Cours de 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="_tutotiel_sur_les_collections_en_java">Tutotiel sur les collections en java</h3> <div class="paragraph"> <p><a href="https://docs.oracle.com/javase/tutorial/collections/index.html" target="_blank" rel="noopener">Collections</a></p> </div> <div class="paragraph"> <p>Le coeur des interfaces de collection<br> <span class="image"><img src="../../img/0036_training_kotlin_post/colls-coreInterfaces.gif" alt="Collections"></span><br></p> </div> </div> <div class="sect2"> <h3 id="_basiques_fonctionnels">Basiques fonctionnels</h3> <div class="sect3"> <h4 id="_declarative_x_imperative_approach">Declarative X imperative approach</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">package functional import kotlin.test.Test import kotlin.test.assertEquals class DeclarativeTests { val input = listOf( "123", "abc", "1ds", "987", "abdf", "1d3", "de1", "88", "101" ) fun imperativeSum(list: List<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="_exercice_1_1">Exercice 1.1</h4> <div class="paragraph"> <p>Implémenter la fonction sumInRange, qui additionne les valeurs dans<br> une List<String> dans un intervalle donné. La signature est :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun sumInRange(input: List<String>, range: IntRange): Int</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@Test fun `Exercise 1_1`() { assertEquals(4, sumInRange( listOf("1", "10", "a", "7", "ad2", "3"), 1..5 ).apply { println("sumInRange 1..5: $this") } ) }</code></pre> </div> </div> <div class="paragraph"> <p>Essayez-le et vérifiez votre réponse avec la <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/DeclarativeTests.kt">solution</a>.</p> </div> </div> <div class="sect3"> <h4 id="_higher_order_functions">Higher-order functions</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">package functional import java.io.ByteArrayOutputStream import java.io.PrintStream import java.lang.System.* import java.lang.Thread.sleep import kotlin.math.sign import kotlin.test.Test import kotlin.test.assertEquals class BasicsHOFTests { val ONE_SECOND = 1000L @Test fun `high order function`() { //capture de la sortie standard val standardOut: PrintStream? = out val outputStreamCaptor = ByteArrayOutputStream() setOut(PrintStream(outputStreamCaptor)) 3.times { println("Hello") } assertEquals( buildString { repeat(3) { append("Hello\n") } deleteAt(length - 1) }, outputStreamCaptor .toString() .trim() ) //libération de la sortie standard setOut(standardOut) } fun Int.times1(fn: () -> 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="_exercice_1_2">Exercice 1.2</h4> <div class="paragraph"> <p>Implémenter chrono, qui accepte une fonction de type <code>() →</code><br> Unit en entrée et renvoie le temps passé à l’exécuter. La signature est :<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun chrono(fn : () -> Unité) : Long</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@Test fun `Exercise 1_2`() { val waitOneSec = { sleep(ONE_SECOND) } chrono(waitOneSec).apply { println("chrono: $this") assertEquals(1, sign) } }</code></pre> </div> </div> <div class="paragraph"> <p>Essayez-le et vérifiez votre réponse avec la <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt">solution</a>.</p> </div> </div> <div class="sect3"> <h4 id="_composition">Composition</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">package functional import kotlin.test.Test import kotlin.test.assertEquals fun double(x: Int): Int = 2 * x fun square(x: Int): Int = x * x fun squareAndDouble1(x: Int) = double(square(x)) infix fun <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="_pure_functions_and_testability">Pure functions and testability</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">package functional import java.io.ByteArrayOutputStream import java.io.PrintStream import java.lang.System.out import java.lang.System.setOut import kotlin.test.Test import kotlin.test.assertEquals var count = 0 //impure car une variable global subit un effet de bord fun impure(value: Int): Int { count++ return value + count } //impure car utilisation de la sortie standard qui fait muter le system fun addOneAndLog(x: Int): Int { val result = x + 1 println("New Value is $result") return result } //pure fun addOne(x: Int) = (x + 1).run { Pair(this, "New Value is $this") } class PureTests { @Test fun `impure fonction`() { assertEquals(3, impure(2)) val standardOut = out val outputStreamCaptor = ByteArrayOutputStream() setOut(PrintStream(outputStreamCaptor)) addOneAndLog(3) assertEquals( "New Value is 4", outputStreamCaptor .toString() .trim() ) setOut(standardOut) } @Test fun `pure fonction`() { addOne(3).run { assertEquals(4, first) assertEquals("New Value is 4", second) } } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_exception_handling">Exception handling</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">package functional import org.junit.jupiter.api.assertThrows import kotlin.Result.Companion.failure import kotlin.Result.Companion.success import kotlin.test.Test import kotlin.test.assertEquals //NumberFormatException est un effet de bord qui rend la fonction impure fun strToInt(str: String) = str.toInt() //pure fun strToIntOrNull(str: String) = try { str.toInt() } catch (nfe: NumberFormatException) { null } //pure avec gestion de l'exception plus élégante fun strToIntResult(str: String): Result<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="_points_clés">Points clés</h3> <div class="ulist"> <ul> <li> <p>Alors que la programmation orientée objet signifie programmer avec des objets, la programmation fonctionnelle signifie programmer avec des fonctions. Vous décomposez un problème en plusieurs sous-problèmes, que vous modélisez avec les fonctions.</p> </li> <li> <p>Les fonctions d’ordre supérieur acceptent d’autres fonctions en entrée ou renvoient d’autres fonctionnent comme des valeurs de retour. La théorie des catégories est la théorie de la composition, et vous l’utilisez pour comprendre comment composer vos fonctions dans un programme de travail. La valeur de sortie d’une fonction pure ne dépend que de ses paramètres d’entrée, et elle n’a pas d’effets secondaires.</p> </li> <li> <p>Un effet secondaire est quelque chose qu’une fonction fait au monde extérieur. Ce peut être un journal dans la sortie standard ou la modification de la valeur d’une variable globale. La programmation fonctionnelle fonctionne pour les fonctions pures, mais elle fournit également les des outils pour transformer des fonctions impures en fonctions pures. Vous pouvez rendre une fonction impure pure en déplaçant les effets pour les rendre partie de la valeur de retour.</p> </li> <li> <p>La programmation fonctionnelle est une question de composition. La gestion des erreurs est un cas typique d’effets secondaires, et Kotlin vous donne les outils pour les gérer de manière fonctionnelle.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_approfondir_java8_lambdas_expressions_et_interface_fonctionnelles">Approfondir java8: lambdas expressions et interface fonctionnelles</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="_théorie_des_catégories">Théorie des catégories</h3> <div class="paragraph"> <p>La théorie mathématique des catégories:</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="_fondamentaux_des_fonctions">Fondamentaux des fonctions</h3> <div class="sect3"> <h4 id="_exercice_2_1">Exercice 2.1</h4> <div class="paragraph"> <p>Pouvez-vous écrire un exemple de fonction mappant des valeurs distinctes<br> dont le domaine à des valeurs non distinctes dans la plage, comme f(b) et f(c) dans la figure ci-dessous ?<br></p> </div> <div class="paragraph"> <p>Essayez-le, puis vérifiez le projet de défi pour une solution à voir comment tu as fait.<br> Vous trouverez des conseils et une explication en suivant le lien vers la <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt">solution</a>.<br></p> </div> </div> <div class="sect3"> <h4 id="_exercise_2_2">Exercise 2.2</h4> <div class="paragraph"> <p>Can you write the inverse function of twice ?<br> What are the domain and range for the inverse function?<br> Check out the challenge project and Appendix B for the solution.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun chrono(fn : () -> Unité) : Long</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@Test fun `Exercise 1_2`() { val waitOneSec = { sleep(ONE_SECOND) } chrono(waitOneSec).apply { println("chrono: $this") assertEquals(1, sign) } }</code></pre> </div> </div> <div class="paragraph"> <p>Essayez-le et vérifiez votre réponse avec la <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt">solution</a>.</p> </div> </div> </div> </div> </div> https://pages-content.github.io//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="_tools">Tools</h2> <div class="sectionbody"> <div class="dlist"> <div class="title"><strong>Illustrations</strong></div> <dl> <dt class="hdlist1"><a href="https://undraw.co/">undraw.co</a></dt> <dd> <p>Illustrations open source pour toutes les idées que vous pouvez imaginer et créer.</p> </dd> <dt class="hdlist1"><a href="https://absurd.design/">absurd.design</a></dt> <dd> <p>Des illustrations absurdes qui ont du sens.</p> </dd> <dt class="hdlist1"><a href="https://drawkit.com/">drawkit.com</a></dt> <dd> <p>Magnifiques illustrations gratuites. Mises à jour hebdomadaires.</p> </dd> <dt class="hdlist1"><a href="https://icons8.com/">icons8.com</a></dt> <dd> <p>Icons, illustrations, photos, music, and design tools.</p> </dd> <dt class="hdlist1"><a href="https://blush.design/">blush.design</a></dt> <dd> <p>Icônes, illustrations, photos, musique et outils de conception.</p> </dd> <dt class="hdlist1"><a href="https://www.humaaans.com/">humaaans.com</a></dt> <dd> <p>Mélangez et assortissez des illustrations de personnes avec une bibliothèque de conception.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Couleurs</strong></div> <dl> <dt class="hdlist1"><a href="https://coolors.co/">coolors.co</a></dt> <dd> <p>Le générateur de schémas de couleurs ultra-rapide !</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Tendances</strong></div> <dl> <dt class="hdlist1"><a href="https://fr.pinterest.com">pinterest</a></dt> <dd> <p>Découverte visuelle d’idées : images, vidéos, collections thématiques.</p> </dd> <dt class="hdlist1"><a href="https://dribbble.com">Dribble</a></dt> <dd> <p>Plateforme pour designers partageant leurs créations et interagissant.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>UX/UI et Design Systems</strong></div> <dl> <dt class="hdlist1"><a href="https://material.io/">Google Material Design</a></dt> <dd> <p>Système de design de Google pour des interfaces utilisateur unifiées et adaptables.</p> </dd> <dt class="hdlist1"><a href="https://developer.apple.com/design/human-interface-guidelines/">Apple Human Interface Guidelines</a></dt> <dd> <p>Recommandations d’Apple pour concevoir des applications iOS et macOS intuitives.</p> </dd> <dt class="hdlist1"><a href="https://www.uxpin.com/">UXPin</a></dt> <dd> <p>Plateforme de design et de collaboration pour créer des prototypes et des design systems.</p> </dd> <dt class="hdlist1"><a href="https://www.frontify.com/">Frontify</a></dt> <dd> <p>Plateforme de gestion de marque et de design systems pour assurer la cohérence.</p> </dd> <dt class="hdlist1"><a href="https://designsystemsrepo.com/design-systems/">Design Systems Repo</a></dt> <dd> <p>Collection de ressources et d’exemples de design systems pour l’inspiration.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Développement Frontend</strong></div> <dl> <dt class="hdlist1"><a href="https://htmlcheatsheet.com" target="_blank" rel="noopener">htmlcheatsheet.com</a></dt> <dd> <p>HTML Cheatsheet</p> </dd> <dt class="hdlist1"><a href="https://fontawesome.com" target="_blank" rel="noopener">fontawesome.com</a></dt> <dd> <p>bibliothèque d’icones</p> </dd> <dt class="hdlist1"><a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank" rel="noopener">toptal.com/designers/htmlarrows/symbols</a></dt> <dd> <p>Icones natives en HTML</p> </dd> <dt class="hdlist1"><a href="https://css-tricks.com/">CSS-Tricks</a></dt> <dd> <p>Incontournable pour CSS, avec des articles, tutoriels et astuces frontend modernes.</p> </dd> <dt class="hdlist1"><a href="https://www.frontendmentor.io/">Frontend Mentor</a></dt> <dd> <p>Défis de code frontend basés sur des projets réels pour améliorer vos compétences.</p> </dd> <dt class="hdlist1"><a href="https://dev.to/">Dev.to</a></dt> <dd> <p>Communauté de développeurs pour partager des articles, tutoriels et projets.</p> </dd> <dt class="hdlist1"><a href="https://codepen.io/">CodePen</a></dt> <dd> <p>Éditeur de code en ligne et communauté pour partager des extraits de code et des démos.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Développement Frontend assisté par IA</strong></div> <dl> <dt class="hdlist1"><a href="https://v0.dev/">v0.dev</a></dt> <dd> <p>v0 convertit les descriptions en langage naturel en code et interface utilisateur.</p> </dd> <dt class="hdlist1"><a href="https://uizard.io/">Uizard</a></dt> <dd> <p>Uizard se concentre sur la transformation de maquettes (images, croquis) en code HTML, CSS et React.</p> </dd> <dt class="hdlist1"><a href="https://www.usegalileo.ai/explore">usegalileo.ai</a></dt> <dd> <p>Galileo AI vous permet de décrire l’interface que vous souhaitez en langage naturel, et l’IA génère des designs Figma éditables.</p> </dd> <dt class="hdlist1"><a href="https://play.teleporthq.io/">TeleportHQ</a></dt> <dd> <p>TeleportHQ est une plateforme de développement front-end low-code qui utilise l’IA pour vous aider à construire et déployer des sites web visuellement.</p> </dd> </dl> </div> </div> </div> https://pages-content.github.io//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/">doc officiel de microk8s</a><br></p> </div> </div> </div> <div class="sect3"> <h4 id="_installation_du_paquet_microk8s">Installation du paquet microk8s:</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>sudo snap install microk8s --classic --channel=1.19</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_ajout_de_lutilisateur_courrant_au_group_du_processus_microk8s">Ajout de l’utilisateur courrant au group du processus microk8s</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>sudo usermod -a -G microk8s $USER sudo chown -f -R $USER ~/.kube su - $USER</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_afficher_létat_de_microk8s">Afficher l’état de microk8s</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s status --wait-ready</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_acceder_à_kubernetes">Acceder à Kubernetes</h4> <div class="paragraph"> <p>Récuperer les nodes(noeuds):<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s kubectl get nodes</code></pre> </div> </div> <div class="paragraph"> <p>Récuperer les services en cours:<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s kubectl get services</code></pre> </div> </div> <div class="paragraph"> <p>Récuperer les pods en cours:<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s kubectl get pods</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_ajouter_un_alias_à_son_shell">Ajouter un alias à son shell</h4> <div class="sect4"> <h5 id="_pour_zsh">pour zsh</h5> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>touch ~/.zsh_alias; echo "alias kubectl='microk8s kubectl'" >> ~/.zsh_alias;</code></pre> </div> </div> </div> <div class="sect4"> <h5 id="_pour_bash">pour bash</h5> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>touch ~/.bash_alias; echo "alias kubectl='microk8s kubectl'" >> ~/.bash_alias;</code></pre> </div> </div> </div> </div> <div class="sect3"> <h4 id="_installer_des_add_ons">Installer des add-ons</h4> <div class="paragraph"> <p>Pour commencer, il est recommandé d’ajouter la gestion DNS pour faciliter la communication entre les services. Pour les applications nécessitant du stockage, le module complémentaire «stockage» fournit un espace de répertoire sur l’hôte. Ceux-ci sont faciles à configurer:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s enable dns storage</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_démarrer_et_arreter_microk8s">Démarrer et arreter MicroK8s</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s stop</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s start</code></pre> </div> </div> <div class="paragraph"> <p>Notez que si vous laissez MicroK8 en marche, il redémarrera automatiquement après un redémarrage. Si vous ne voulez pas que cela se produise, n’oubliez pas de lancer l’arrêt microk8s avant de l’éteindre.</p> </div> </div> <div class="sect3"> <h4 id="_deployer_une_app">Deployer une app</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s kubectl create deployment nginx --image=nginx</code></pre> </div> </div> <div class="paragraph"> <p>Pour vérifier l’état du déploiement:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>microk8s kubectl get pods</code></pre> </div> </div> </div> https://pages-content.github.io//blog/2020/0028_gradle_executer_un_processus_externe_depuis_une_tache_gradle_post.html Mon, 28 Sep 2020 00:00:00 +0000 blog/2020/0028_gradle_executer_un_processus_externe_depuis_une_tache_gradle_post.html <div class="sect3"> <h4 id="_gradle_kotlin_dsl">Gradle-Kotlin-DSL:</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>open class PrintHerokuVersion : Exec() { init { this.workingDir = project.rootDir this.commandLine("/snap/bin/heroku", "-v") this.standardOutput = ByteArrayOutputStream() } } project.tasks.register<PrintHerokuVersion>("printHerokuVersion") project.tasks.withType<PrintHerokuVersion> { doLast { logger.info(standardOutput.toString()) } }</code></pre> </div> </div> <div class="paragraph"> <p>Pour exécuter la tâche:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>$ ./gradlew pHV</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_gradle_groovy_dsl">Gradle-Groovy-DSL:</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>task printHerokuVersionGroovy(type: Exec) { workingDir(project.projectDir) commandLine("/snap/bin/heroku", "-v") standardOutput = new ByteArrayOutputStream() doLast { logger.info(standardOutput.toString()) } }</code></pre> </div> </div> <div class="paragraph"> <p>Pour exécuter la tâche:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>$ ./gradlew pHVG</code></pre> </div> </div> </div> https://pages-content.github.io//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://pages-content.github.io//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://pages-content.github.io//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 <div class="paragraph"> <p>ajouter l’argument --rerun-tasks à la ligne commande.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>$ ./gradlew test --rerun-tasks</code></pre> </div> </div> https://pages-content.github.io//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://pages-content.github.io//blog/2020/0023_gherkin_en_francais_post.html Wed, 23 Sep 2020 00:00:00 +0000 blog/2020/0023_gherkin_en_francais_post.html <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-json" data-lang="json">{"fr": { "and": [ "* ", "Et que ", "Et qu'", "Et " ], "background": [ "Contexte" ], "but": [ "* ", "Mais que ", "Mais qu'", "Mais " ], "examples": [ "Exemples" ], "feature": [ "Fonctionnalité" ], "given": [ "* ", "Soit ", "Sachant que ", "Sachant qu'", "Sachant ", "Etant donné que ", "Etant donné qu'", "Etant donné ", "Etant donnée ", "Etant donnés ", "Etant données ", "Étant donné que ", "Étant donné qu'", "Étant donné ", "Étant donnée ", "Étant donnés ", "Étant données " ], "name": "French", "native": "français", "rule": [ "Règle" ], "scenario": [ "Exemple", "Scénario" ], "scenarioOutline": [ "Plan du scénario", "Plan du Scénario" ], "then": [ "* ", "Alors ", "Donc " ], "when": [ "* ", "Quand ", "Lorsque ", "Lorsqu'" ] } }</code></pre> </div> </div> https://pages-content.github.io//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="sect4"> <h5 id="_surcharger_un_parametre_par_la_ligne_de_commande">Surcharger un parametre par la ligne de commande :</h5> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>$ ./gradlew -Pparam_component=CUSTOM</code></pre> </div> </div> </div> https://pages-content.github.io//blog/2020/0021_memo_git_post.html Mon, 21 Sep 2020 00:00:00 +0000 blog/2020/0021_memo_git_post.html <div class="sect1"> <h2 id="_changer_de_depot_distant_dans_git">Changer de depot distant dans git</h2> <div class="sectionbody"> <div class="sect3"> <h4 id="_sources">Sources:</h4> <div class="ulist"> <ul> <li> <p><a href="https://xenovation.com/blog/source-control-management/git/how-to-change-remote-git-repository">xenovation</a></p> </li> <li> <p><a href="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</a></p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_changer_de_repo_distant_dans_git">changer de repo distant dans git</h4> <div class="paragraph"> <p>afficher l’url du repo distant courrant:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git config --get remote.origin.url</code></pre> </div> </div> <div class="paragraph"> <p>Pour plus d’information sur le depot distant:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git remote show origin</code></pre> </div> </div> <div class="paragraph"> <p>Lister les depots distants</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git remote -v</code></pre> </div> </div> <div class="paragraph"> <p>Changer de dépot distants</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git remote set-url origin git@github.com:kotlin-codes/hands-on-design-pattern-kotlin.git</code></pre> </div> </div> <div class="paragraph"> <p>Ajouter quand le dépot n’existe pas</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git remote add origin git@github.com:kotlin-codes/foo.git</code></pre> </div> </div> <div class="paragraph"> <p>Pusher</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git push -u origin master</code></pre> </div> </div> <div class="paragraph"> <p>ou</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git push -u origin main</code></pre> </div> </div> <div class="paragraph"> <p><em>changement d’adresse ip</em><br> relancer la commande suivante pour que les pushs passent.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>git remote set-url origin git@github.com:USER_ACCOUNT/PROJECT.git</code></pre> </div> </div> </div> </div> </div> https://pages-content.github.io//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="sect3"> <h4 id="_liens_stackoverflow">Liens: <a href="https://stackoverflow.com/a/1078539/837404">stackoverflow</a></h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>$ wget -r -k -np http://site.com/docs/manual/</code></pre> </div> </div> <div class="paragraph"> <p>Pour définir un dossier cible ajouter l’argument -P puis donner le chemin.</p> </div> </div> https://pages-content.github.io//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://pages-content.github.io//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="_liens_askubuntu">Liens: <a href="https://askubuntu.com/questions/86849/how-to-unzip-a-zip-file-from-the-terminal">askubuntu</a></h4> <div class="paragraph"> <p>Si vous souhaitez extraire vers un dossier de destination particulier, vous pouvez utiliser :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>$ unzip fichier.zip -d dossier_destination</code></pre> </div> </div> <div class="paragraph"> <p>Si les répertoires source et de destination sont identiques, vous pouvez simplement faire:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>$ unzip file.zip</code></pre> </div> </div> </div> https://pages-content.github.io//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="highlight"><code>$ du -ach --exclude "./.*" /home/troll/</code></pre> </div> </div> </div> https://pages-content.github.io//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://pages-content.github.io//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 ?</div> <p>Ici, je m’oriente vers asciidoc, car j’ai déjà quelques tickets écris en asciidoc.<br> 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> <div class="paragraph"> <div class="title">asciidoc:</div> <p><a href="https://docs.asciidoctor.org/asciidoc/latest/attributes/character-replacement-ref/" target="_blank" rel="noopener">character-replacement-ref</a></p> </div> https://pages-content.github.io//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>Pour installer un paquet debian depuis un fichier .deb en ligne de commandes.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ sudo dpkg -i /chemin/du/fichier/deb/</code></pre> </div> </div> <div class="paragraph"> <p>voir içi pour la <a href="https://unix.stackexchange.com/questions/159094/how-to-install-a-deb-file-by-dpkg-i-or-by-apt">référence</a><br></p> </div> https://pages-content.github.io//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="highlight"><code class="language-groovy" data-lang="groovy">plugins { id "java" id "groovy" id "org.jbake.site" version "5.0.0" id "org.ajoberstar.git-publish" version "2.1.1" } repositories { mavenCentral() jcenter() } group project_group version project_version sourceSets { main { java { srcDirs = [] } groovy { srcDirs =["src/main/java", "src/main/groovy"] } resources { srcDirs =[ "src/main/resources", "src/jbake"//in order to get site src content in the IDE ] } } test { java { srcDirs = [] } groovy { srcDirs =["src/test/java", "src/test/groovy"] } } } test { useJUnitPlatform() } configurations { ivy } dependencies { ivy "org.apache.ivy:ivy:$ivy_version" implementation "org.codehaus.groovy:groovy-all:$groovy_version" implementation "org.asciidoctor:asciidoctor-java-integration:$asciidoctor_java_integration_version" implementation "org.freemarker:freemarker:$freemarker_version" testImplementation "org.junit.jupiter:junit-jupiter-api:$junit5_version" testRuntimeOnly "org.junit.jupiter:junit-jupiter-engine:$junit5_version" } gitPublish { repoUri = github_pages_blog_repository branch = git_branch contents { from(file(jbake_content_from)) { into jbake_content_to } } } tasks.withType(GroovyCompile) { groovyClasspath += configurations.ivy }</code></pre> </div> </div> https://pages-content.github.io//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>Le sujet du ticket est la configuration d’un script de build Gradle.<br> Je veux pouvoir utiliser un script Groovy sans faire référence<br> au projet Gradle dans lequel je l’ai attaché.<br> Je veux avoir la possibilité de lancer ce script Groovy hors de Gradle<br> sans que les annotations ivy de récupération de dépendance externe<br> ne viennent poser problème de performance ou de compilation<br> du script de build Gradle.<br> Pour illustrer la configuration je m’appuie sur deux scripts:<br> un script de build Gradle et un script Groovy.<br> Le script Groovy contient au début à la ligne 2,<br> une instruction pour tirer une dépendance externe<br> à l’aide du gestionnaire de dépendance ivy.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-Groovy" data-lang="Groovy">#!/usr/bin/env groovy @Grab("commons-io:commons-io:2.6") import org.apache.commons.io.FileUtils static String getSeparator() { System.getProperty("file.separator") } String from = "${System.getProperty("user.home")}${separator}.config${separator}transmission${separator}torrents" String to = "${System.getProperty("user.home")}${separator}Documents${separator}torrents_completed" File fromDlDir = new File("${System.getProperty("user.home")}${separator}Téléchargements") File fromDir = new File(from) File toDir = new File(to) Collection<File> torrentFiles = FileUtils.listFiles( fromDir, ["torrent"] as String[], false) torrentFiles.addAll(FileUtils.listFiles( fromDlDir, ["torrent", "torrent.added"] as String[], false)) torrentFiles.empty ?: torrentFiles.each { it -> FileUtils.copyFileToDirectory(it, toDir) } println torrentFiles.size()</code></pre> </div> </div> <div class="paragraph"> <p>Dans le fichier build.gradle, maintenant voyons comment mettre en harmonie<br> les deux gestionnaires de dépendances, ivy et Gradle. L’accord entre les deux se fait aux lignes :<br> 26, 30, 37, 38 et 39<br> Ainsi je peux lancer mon script Groovy manuellement,<br> et la compilation de Gradle n’est pas gênée par le @Grab.<br> Les dépendances du script Groovy ne sont pas à fournir dans Gradle.<br> Par contre je ne peux pas lancer le script Groovy depuis Gradle.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-Groovy" data-lang="Groovy">plugins { id "java" id "groovy" } 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>référence du ticket sur <a href="https://stackoverflow.com/a/18174033/837404">stackoverflow</a></p> </div> https://pages-content.github.io//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="_le_pgcd">Le PGCD</h3> <div class="paragraph"> <p><a href="https://fr.wikipedia.org/wiki/Plus_grand_commun_diviseur">wiki PGCD ou Plus Grand Commun Diviseur</a></p> </div> </div> <div class="sect2"> <h3 id="_le_ppmc">Le PPMC</h3> <div class="paragraph"> <p><a href="https://fr.wikipedia.org/wiki/Plus_petit_commun_multiple">wiki PPMC ou Plus Petit Commun Multiple</a></p> </div> <div class="paragraph"> <p>AlgebraUtils.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">package com.cheroliv.misc import groovy.transform.CompileStatic @CompileStatic class AlgebraUtils { /** * Great common divisor * Plus grand commun diviseur(pgcd) * Great Common Divisor * @param a * @param b * @return */ static Integer gcd(Integer a, Integer b) { !b ? a : gcd(b, a % b) } /** * Least common multiple * Plus petit commun multiplicateur(ppmc) * @param a * @param b * @return */ static BigInteger lcm(Integer a, Integer b) { (a * b / gcd(a, b)) as BigInteger } static void main(String... args) { Integer a = 96 Integer b = 28 println "gcd($a, $b) = ${gcd(a, b)}" a = 790 b = 990 println "lcm($a, $b) = ${lcm(a, b)}" } }</code></pre> </div> </div> <div class="paragraph"> <p>résultat:</p> </div> <div class="listingblock"> <div class="content"> <pre>gcd(96, 28) = 4 lcm(790, 990) = 78210</pre> </div> </div> </div> https://pages-content.github.io//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>Je recherche des fichiers par critères de nom: la liste des fichier qui ont pour extension .h et .cpp</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ find . -name '*.h' -o -name '*.cpp' + +</code></pre> </div> </div> <div class="paragraph"> <p>la liste des fichier qui ont pour extension .h et .cpp<br> le résultat est sauvegardé dans le fichier list_of_txt_files.list</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ find . -name '*.h' -o -name '*.cpp' -print > list_of_txt_files.list</code></pre> </div> </div> <div class="paragraph"> <p>Je recheche la liste des fichiers dont l’extension est .chm<br> et je détruit cette liste.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ find . -name "*.chm" -type f -delete</code></pre> </div> </div> https://pages-content.github.io//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://pages-content.github.io//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>Je n’ai pas envie d’installer <a href="https://www.pgadmin.org/">pgAdmin</a> ou <a href="http://phppgadmin.sourceforge.net/">phppgadmin</a> alors que tout est présent en ligne de commande.<br> Pour cela nous devons lancer le terminal et nous connecter en tant que user postgres.<br> le user postgres est le seul à avoir par défaut le droit de lancer l’application psql qui est le client ligne de commande (<a href="https://fr.wikipedia.org/wiki/Interface_en_ligne_de_commande">CLI</a>) postgresql,<br> pour pouvoir parler à la base de donnees en ligne de commande depuis le terminal.<br> Pour se connecter, lancer le terminal et taper ceci:<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ sudo -i -u postgres</code></pre> </div> </div> <div class="paragraph"> <p>Pour se connecter et arriver directement à l’invite de commande postgresql, taper ceci :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ sudo -i -u postgres psql</code></pre> </div> </div> <div class="paragraph"> <p>Pour lister les bases de données d’une instance de postgresql, voici la commande :<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-SQL" data-lang="SQL">postgres=# \l</code></pre> </div> </div> <div class="paragraph"> <p>résultat:</p> </div> <div class="listingblock"> <div class="content"> <pre> Liste des bases de données Nom | Propriétaire | Encodage | Collationnement | Type caract. | Droits d'accès -----------+--------------+----------+-----------------+--------------+----------------------- fiber | tech | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =Tc/tech + | | | | | tech=CTc/tech fiberdev | tech | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =Tc/tech + | | | | | tech=CTc/tech fiberweb | tech | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =Tc/tech + | | | | | 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 + | | | | | postgres=CTc/postgres template1 | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =c/postgres + | | | | | postgres=CTc/postgres (6 lignes)</pre> </div> </div> <div class="paragraph"> <p>taper q pour sortir de l’affichage des resulats<br> <br> pour lister les schémas d’une instance de postgresl.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-sql" data-lang="sql">postgres=# SELECT schema_name FROM information_schema.schemata;</code></pre> </div> </div> <div class="paragraph"> <p>résultat</p> </div> <div class="listingblock"> <div class="content"> <pre>-------------------- public information_schema pg_catalog pg_toast_temp_1 pg_temp_1 pg_toast (6 lignes)</pre> </div> </div> <div class="paragraph"> <p>ou</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-sql" data-lang="sql">postgres=# SELECT nspname FROM pg_catalog.pg_namespace;</code></pre> </div> </div> <div class="paragraph"> <p>résultat</p> </div> <div class="listingblock"> <div class="content"> <pre>-------------------- pg_toast pg_temp_1 pg_toast_temp_1 pg_catalog information_schema public (6 lignes)</pre> </div> </div> https://pages-content.github.io//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="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy /** * get a crossplateform separator * @return */ static String getSeparator() { System.getProperty("file.separator") } /** * rename file * @param file * @param newName * @return the renamed file */ static File rename(File file, String newName) { assert file.renameTo(file .parentFile.path + getSeparator() + newName) new File(file .parentFile.path + getSeparator() + newName) } String rootFolderPath = System.getProperty("user.home") + "/Bureau/ng-courses/Udemy - Angular 7 " + "(formerly Angular 2) - The Complete Guide" File rootFolder = new File(rootFolderPath) assert rootFolder.exists() assert rootFolder.directory assert rootFolder.canRead() List<File> dirList = new ArrayList<>() //Adding rootFolder in dirList // just in case there is some files in it dirList.add(rootFolder) //looping to get list of directories //recursively inside rootFolder rootFolder.traverse { File file -> !file.directory ?: dirList.add(file) } //looping through dirList //to rename directories filling criterias for (int i = dirList.size() - 1; i >= 0; i--) { Character[] chars = dirList.get(i).name.chars !(chars[0].digit && !chars[1].digit) ?: dirList.set(i, rename(dirList.get(i), "0${dirList.get(i).name}")) if (dirList.get(i).directory) { //looping through directory //to rename file filling criterias dirList.get(i).listFiles().each { File f -> Character[] cs = f.name.chars !(cs[0].digit && !cs[1].digit) ?: rename(f, "0${f.name}") } } }</code></pre> </div> </div> https://pages-content.github.io//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="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy @Grab("commons-io:commons-io:2.6") import groovy.io.FileType import org.apache.commons.io.FileUtils /** * un separateur OS independant * @return */ static String getSep() { System.getProperty("file.separator") } /** * la liste des fichiers dont le titre contient un item * de la liste des motifs * * @param path * @param motifs * @return la liste des chemins complet de fichiers */ static List<String> findFilesContainingMotifs( String path, List<String> motifs) { List<String> filePathResultList = new ArrayList<>() new File(path) .eachFileRecurse(FileType.FILES) { if (it.name.toLowerCase().contains('cucumber')) { filePathResultList.add it.path } } filePathResultList } /** * copy vers la liste des fichiers * @param files * @param to */ static void copyFilesTo(List<String> files, String to) { File toDirDest = new File(to) files.each { String filepath -> File file = new File(filepath) //si le dernier caractere de to n'est pas un separateur // alors ajoute le a la chaine (to.substring(to.length() - 1) == sep) ?: to.concat(sep) if (to + file.name != filepath) { FileUtils.copyFileToDirectory(file, toDirDest) file.delete() } } } /** * la list des arguments */ String userName = System.getProperty("user.name") List<String> motifs = ['cucumber'] String path = "/media/$userName/320/Books/" String to = "/media/$userName/320/Books/bdd/" /** * lappel aux methodes */ copyFilesTo(findFilesContainingMotifs(path, motifs), to) //affiche moi les fichiers déplacés findFilesContainingMotifs(path, motifs).each { println it }</code></pre> </div> </div> https://pages-content.github.io//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="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy //Mes criteres de selection des fichiers à detruire String strCriteria = "Dummies Dummie ajax Objective-C Windows blackberry " + "wordpress joomla ios c# f# rails ruby flex asp flash Dreamweaver adobe " + "CoffeeScript c++ .chm .epub .rar .zip .tar drupal drupals .net php javascript " + ".js iphone ipad js _js facebook gwt vaadin linq python py zope window " + "3D scala gaming active_directory tomcat jboss glassfish microsoft 2d " + "lego blogger blog cocoa dojo dom dotnetnuke eclipse .gz unity sharepoint " + ".tgz iwork filemaker .doc .txt" //repertoire personnel String userDir = System.getProperty("user.home") //un separateur de chemin crossplatform String sep = System.getProperty("file.separator") //la variable symbolique String sym_books_vrac_path = "books_vrac_path" //le chemin de mon fichier gradle.properties hors projet String propertiesFilePath = userDir .concat("${sep}.gradle${sep}gradle.properties") File propertiesFile = new File(propertiesFilePath) //je m'aassure que le fichier existe et que ce n'est pas un dossier assert propertiesFile.exists() && !propertiesFile.directory Properties gradleProperties = new Properties() //on boucle avec un inpustream sur le fichier //gradle.properties pour peupler ma variable gradleProperties propertiesFile.withInputStream { InputStream it -> gradleProperties.load(it) } //le chemin du dossier books_vrac est la valeur de notre clé books_vrac_path String pathVracDir = gradleProperties.get(sym_books_vrac_path) //j'ai récuperé tous ces livres en tapant cette commande dans le terminal //wget -m -np -c -R "index.html*" "http://the-eye.eu/public/Books/IT%20Various/" //on ouvre le dossier dont le chemin est dans la variable pathVracDir // on s'assure qu'il existe et que c'est un dossier File vracDir = new File(pathVracDir) assert vracDir.exists() && vracDir.directory //separer les élèments de ma liste de critère StringTokenizer tokenizer = new StringTokenizer(strCriteria) //la liste de critere List<String> criteriaList = new ArrayList<>() //j'itère sur les tokens et je construit ma liste de token, // mot clef critère de recherche tokenizer.each { String it -> criteriaList.add(it.toLowerCase()) } //je collect tous les noms de fichier dans le dossier List<String> fileNameList = vracDir .listFiles() .collect { File it -> it.directory ?: it.name } // je collect les noms de fichier qui contiendraient un des criteres List<String> resultList = fileNameList.findAll { String name -> criteriaList.findAll { String crit -> name.toLowerCase().contains(crit) } } // je parcours ma liste de résultat pour les effacer resultList.each { String fileName -> assert new File(vracDir.path + sep + fileName).delete() } println fileNameList.size() println resultList.size() resultList.empty ?: println(vracDir.path + sep + resultList.first())</code></pre> </div> </div> https://pages-content.github.io//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="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy println System.getProperty("user.home") static String getSeparator_() { System.getProperty("file.separator") } String separator = separator_ String path = System.getProperty("user.home") .concat("${separator}.gradle" + separator + "gradle.properties") File propertiesFile = new File(path) assert propertiesFile.exists() && !propertiesFile.directory Properties gradleProperties = new Properties() propertiesFile.withInputStream { InputStream it -> gradleProperties.load(it) } String user_name = gradleProperties.getProperty("user_name") String text String resultText text = new File("${System.getProperty("user.home")}" + separator + "src" + separator + "cheroliv.github.io" + separator + "src" + separator + "main" + separator + "resources" + separator + "eco_space.txt").text String to = separator + "media" + separator + "${user_name}" + separator + "320" + separator + "videoCours" + separator String from = "${System.getProperty("user.home")}" + separator + "p2p" + separator resultText = text.replace(to, from) println resultText //execute command line in a string println "rsync -avr ${resultText} ${to}".execute().text</code></pre> </div> </div> https://pages-content.github.io//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="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy import java.nio.charset.StandardCharsets List<Character> chars = new ArrayList<>() int j = 0 Character jumpLine = '\n' 256.times { Integer idx -> if (Character.isAlphabetic(idx) || Character.isDigit(idx)) { if (j % 10 == 0 && j != 0) { chars.add(jumpLine) chars.add(idx as char) } else chars.add(idx as char) j++ } } String seperator = System.getProperty("file.separator") String path = "${System.getProperty("user.home")}${seperator}ascii.txt" File speCharFile = new File(path) if (speCharFile.exists() && !speCharFile.directory) { speCharFile.text = "" } else { speCharFile.createNewFile() } String text = new String() chars.each { Character it -> text = it == jumpLine ? "$text$it" : "$text $it " } speCharFile.setText(text, StandardCharsets.UTF_8.toString())</code></pre> </div> </div> <div class="paragraph"> <p>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="highlight"><code class="language-bash" data-lang="bash">$ groovy spe_char.groovy</code></pre> </div> </div> <div class="paragraph"> <p>résultat:</p> </div> <div class="listingblock"> <div class="content"> <pre> 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 ª µ º À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ</pre> </div> </div>