Cloud en français

Ajouter Keycloak à une application .NET Aspire existante

Tue, 31 Mar 2026 00:00:00 GMT

À la fin de ce post, vous aurez un flux de connexion/déconnexion fonctionnel, appuyé par Keycloak, qui roule localement via Aspire et peut être déployé avec Docker Compose.

Si votre application Aspire n'a pas encore d'authentification, c'est la voie la plus rapide vers un vrai fournisseur d'identité. Ce tutoriel vous guide à travers l'intégration de Keycloak OIDC dans une application .NET Aspire + Blazor Server existante: de l'enregistrement dans AppHost jusqu'à l'interface de connexion/déconnexion, en s'appuyant sur le code de production de NoteBookmark, un gestionnaire de signets open source bâti avec .NET Aspire et Blazor.

Étape 1: Ajouter Aspire.Hosting.Keycloak à AppHost

Aspire intègre nativement Keycloak via le paquet Aspire.Hosting.Keycloak. Ajoutez-le à votre projet AppHost :

Pour le projet AppHost

dotnet add package Aspire.Hosting.Keycloak

Ensuite, lancez dotnet restore.

Étape 2: Enregistrer Keycloak dans AppHost.cs

Une fois le paquet installé, enregistrez Keycloak comme ressource dans votre AppHost. Aspire démarre un conteneur Keycloak, injecte ses détails de connexion dans les projets dépendants et s'assure que le démarrage se fait dans le bon ordre.


// ...

// Ajouter le serveur d'authentification Keycloak
var keycloak = builder.AddKeycloak("keycloak", port: 8080)
    .WithDataVolume(); // Persiste les données Keycloak entre les redémarrages

if (builder.Environment.IsDevelopment())
{
    // ...

    builder.AddProject<NoteBookmark_BlazorApp>("blazor-app")
        // ...
        .WithReference(keycloak)  // <-- référence Keycloak
        .WaitFor(keycloak)  // <-- attend que Keycloak soit prêt
        .WithExternalHttpEndpoints()
        .PublishAsDockerComposeService((resource, service) =>
        {
            service.ContainerName = "notebookmark-blazor";
        });
}

Changements clés :

AddKeycloak("keycloak", port: 8080): Enregistre une ressource Keycloak qui écoute sur le port 8080.
WithDataVolume(): Persiste la configuration de Keycloak et les données de realm entre les redémarrages du conteneur. Sans ça, vous perdriez votre configuration à chaque arrêt du conteneur.
.WithReference(keycloak): Injecte les paramètres de connexion Keycloak (URL de base, etc.) dans BlazorApp sous forme de variables d'environnement.
.WaitFor(keycloak): Garantit que Keycloak est prêt avant le démarrage de Blazor. Si l'app démarre avant Keycloak, la découverte OIDC plante.

Note : On ajoute la référence Keycloak seulement quand IsDevelopment() est vrai. Ainsi, votre environnement de développement se met en place tout seul à chaque démarrage, avec un conteneur Keycloak créé automatiquement.

Étape 3: Configurer Keycloak pour les déploiements hors Aspire (prod)

Ce billet mise sur le développement avec Aspire, mais la production (Docker Compose, Kubernetes) exige un Keycloak autonome. Voici comment ça se présente et pourquoi.

Aspire peut d'ailleurs vous aider à faire la transition. AddDockerComposeEnvironment() dans AppHost génère un fichier Docker Compose préliminaire à partir de votre modèle Aspire, un excellent point de départ avant de personnaliser pour la production. Ça vaut le coup d'œil si vous voulez prendre de l'avance.

Les fichiers Compose finaux pour Keycloak et l'application NoteBookmark sont disponibles dans le dépôt NoteBookmark :

keycloak-compose.yaml: Keycloak + Postgres, avec support de certificats TLS
note-compose.yaml: L'API NoteBookmark et l'application Blazor

Quelques points à retenir sur cette configuration :

Postgres comme base de données: Keycloak utilise une instance Postgres dédiée (pas la base de données de l'application) pour persister la configuration du realm, les utilisateurs et les sessions.
Variables d'environnement via .env: Les identifiants (POSTGRES_USER, POSTGRES_PASSWORD, KEYCLOAK_USER, KEYCLOAK_PASSWORD, KEYCLOAK_URL) sont sortis du fichier Compose et chargés depuis un fichier .env dans le même répertoire.
KC_HTTP_ENABLED: "true": Autorise le trafic HTTP en interne. En production, Keycloak est derrière un reverse proxy (nginx, Traefik) qui gère la terminaison TLS: HTTPS à l'extérieur, HTTP à l'intérieur.
KC_FEATURES: "token-exchange": Active la fonctionnalité d'échange de jetons, nécessaire si vous voulez des flux d'authentification service-à-service.
Réseau externe: Les deux fichiers Compose partagent le même réseau Docker externe, permettant aux conteneurs de l'application d'atteindre Keycloak par son nom de conteneur.

Étape 4: Configurer le Realm Keycloak et le client OIDC

Cette étape s'applique autant en développement qu'en production, mais une seule fois par environnement. En développement, .WithDataVolume() fait en sorte que la configuration Keycloak survit entre les sessions: vous configurez une fois, et c'est réglé.

Une fois Keycloak en marche, configurez-le :

Naviguez vers http://localhost:8080 et connectez-vous avec vos identifiants d'administrateur.
Créez un nouveau realm :
- Cliquez sur Create Realm
- Nom: notebookmark (doit correspondre au realm dans votre URL d'autorité ci-dessous)
Créez un client OIDC :
- Clients → Create Client
- Client ID: notebookmark
- Client Protocol: openid-connect
- Access Type: confidential (génère un secret client)
- Valid Redirect URIs: http://localhost:5173/* (ajustez selon l'URL de votre application Blazor)
- Web Origins: http://localhost:5173
Allez dans l'onglet Credentials et copiez le Client Secret: vous en aurez besoin dans la configuration de votre application.

Étape 5: Ajouter OpenID Connect à l'application Blazor

Place au pipeline d'authentification dans votre application Blazor Server.

Ajouter le paquet NuGet

Pour le projet BlazorApp

dotnet add package Microsoft.AspNetCore.Authentication.OpenIdConnect

Mettre à jour Program.cs

BlazorApp/Program.cs :

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;

//...

// Ajouter l'authentification
builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie(CookieAuthenticationDefaults.AuthenticationScheme)
.AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, options =>
{
    var authority = builder.Configuration["Keycloak:Authority"];
    options.Authority = authority;
    options.ClientId = builder.Configuration["Keycloak:ClientId"];
    options.ClientSecret = builder.Configuration["Keycloak:ClientSecret"];
    options.ResponseType = "code";
    options.SaveTokens = true;
    options.GetClaimsFromUserInfoEndpoint = true;

    // Permet de remplacer RequireHttpsMetadata via la configuration.
    // Assouplit l'exigence en conteneur contre un Keycloak en HTTP.
    var requireHttpsConfigured = builder.Configuration.GetValue<bool?>("Keycloak:RequireHttpsMetadata");
    var isRunningInContainer = string.Equals(
        System.Environment.GetEnvironmentVariable("DOTNET_RUNNING_IN_CONTAINER"),
        "true",
        StringComparison.OrdinalIgnoreCase);

    if (requireHttpsConfigured.HasValue)
    {
        options.RequireHttpsMetadata = requireHttpsConfigured.Value;
    }
    else
    {
        var defaultRequireHttps = !builder.Environment.IsDevelopment();
        if (isRunningInContainer &&
            !string.IsNullOrEmpty(authority) &&
            authority.StartsWith("http://", StringComparison.OrdinalIgnoreCase))
        {
            defaultRequireHttps = false;
        }
        options.RequireHttpsMetadata = defaultRequireHttps;
    }

    options.Scope.Clear();
    options.Scope.Add("openid");
    options.Scope.Add("profile");
    options.Scope.Add("email");

    options.TokenValidationParameters = new()
    {
        NameClaimType = "preferred_username",
        RoleClaimType = "roles"
    };

    // Configure la déconnexion pour passer id_token_hint à Keycloak
    options.Events = new OpenIdConnectEvents
    {
        OnRedirectToIdentityProviderForSignOut = async context =>
        {
            var idToken = await context.HttpContext.GetTokenAsync("id_token");
            if (!string.IsNullOrEmpty(idToken))
            {
                context.ProtocolMessage.IdTokenHint = idToken;
            }
        }
    };
});

builder.Services.AddAuthorization();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddHttpContextAccessor();

// ... Razor Components, FluentUI, etc. existants ...

var app = builder.Build();
app.MapDefaultEndpoints();

// ... middleware existant ...

// CRITIQUE: UseAuthentication AVANT UseAuthorization
app.UseAuthentication();
app.UseAuthorization();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

// Points de terminaison d'authentification
app.MapGet("/authentication/login", async (HttpContext context, string? returnUrl) =>
{
    var authProperties = new AuthenticationProperties { RedirectUri = returnUrl ?? "/" };
    await context.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme, authProperties);
});

app.MapGet("/authentication/logout", async (HttpContext context) =>
{
    var authProperties = new AuthenticationProperties { RedirectUri = "/" };
    await context.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
    await context.SignOutAsync(OpenIdConnectDefaults.AuthenticationScheme, authProperties);
});

app.Run();

Configuration

Créez ou mettez à jour appsettings.json dans le projet BlazorApp :

{
  "Keycloak": {
    "Authority": "http://localhost:8080/realms/notebookmark",
    "ClientId": "notebookmark",
    "ClientSecret": "votre-secret-client-depuis-keycloak",
    "RequireHttpsMetadata": false
  }
}

Pour vos déploiements Docker Compose en production, utilisez des variables d'environnement dans votre docker-compose.yaml :

environment:
  Keycloak__Authority: ${KEYCLOAK_AUTHORITY}
  Keycloak__ClientId: ${KEYCLOAK_CLIENT_ID}
  Keycloak__ClientSecret: ${KEYCLOAK_CLIENT_SECRET}

En environnement de développement, .WithReference(keycloak) d'Aspire injecte automatiquement des variables d'environnement comme services__keycloak__http__0 pour l'URL de base de Keycloak. Vous pouvez les lire dans votre configuration ou définir manuellement l'URL d'autorité comme indiqué ci-dessus.

Le piège de RequireHttpsMetadata: HTTP vs HTTPS

Par défaut, le middleware OpenID Connect exige HTTPS pour la découverte des métadonnées (RequireHttpsMetadata = true). Parfait en production, mais ça coince dans les environnements de développement local ou en conteneur où Keycloak tourne en HTTP.

Le code ci-dessus met en place un repli intelligent :

La config explicite a priorité: Si Keycloak:RequireHttpsMetadata est défini dans la config, on utilise cette valeur.
Détection de l'environnement conteneur: Si l'application tourne dans un conteneur (DOTNET_RUNNING_IN_CONTAINER=true) et que l'URL d'autorité est en HTTP, l'exigence HTTPS est désactivée.
HTTPS par défaut en production: En dehors du mode Development, HTTPS est exigé par défaut.

Au final :

Le développement local fonctionne sans friction avec Keycloak en HTTP
La communication conteneur-à-conteneur fonctionne (HTTP en interne)
La production exige HTTPS (en supposant que vous l'avez bien configuré)

Note: En production, faites tourner Keycloak derrière un reverse proxy (nginx, Traefik, etc.) qui gère la terminaison TLS. Votre application voit https://votredomaine.com, Keycloak roule en HTTP en interne.

La configuration côté serveur est bouclée. Place aux composants Blazor qui rendent tout ça visible pour l'utilisateur.

Étape 6: Interface Blazor (connexion, déconnexion et protection des routes)

Le pipeline backend en place, on peut maintenant bâtir les composants UI pour la connexion, la déconnexion et l'accès au contenu protégé. Trois éléments clés: les pages de connexion/déconnexion, un composant d'affichage et la gestion du routage avec les autorisations.

Les pages Razor de connexion et déconnexion

D'abord, des pages pour déclencher les flux d'authentification. Pas de balisage ici: ce sont de simples déclencheurs de redirection qui cèdent le contrôle à Keycloak.

Créez Components/Pages/Login.razor :

@page "/login"
@attribute [AllowAnonymous]
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Authentication.OpenIdConnect
@inject NavigationManager Navigation
@inject IHttpContextAccessor HttpContextAccessor

@code {
    protected override async Task OnInitializedAsync()
    {
        var uri = new Uri(Navigation.Uri);
        var query = System.Web.HttpUtility.ParseQueryString(uri.Query);
        var returnUrl = query["returnUrl"] ?? "/";

        var httpContext = HttpContextAccessor.HttpContext;
        if (httpContext != null)
        {
            var authProperties = new AuthenticationProperties
            {
                RedirectUri = returnUrl
            };
            await httpContext.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme, authProperties);
        }
    }
}

Ce qui se passe ici ?

Pas de markup: Cette page ne rend rien. Elle déclenche le défi OIDC, ce qui redirige le navigateur vers Keycloak.
ChallengeAsync: Déclenche le middleware OIDC pour rediriger l'utilisateur vers la page de connexion Keycloak.
URL de retour: On capte le paramètre returnUrl pour que les utilisateurs reviennent là où ils étaient après la connexion.
[AllowAnonymous]: Critique ! Sans ça, la page exigerait une authentification pour y accéder, créant une boucle de redirection infinie.

Logout.razor

Créez Components/Pages/Logout.razor :

@page "/logout"
@attribute [AllowAnonymous]
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Authentication.Cookies
@using Microsoft.AspNetCore.Authentication.OpenIdConnect
@inject IHttpContextAccessor HttpContextAccessor

@code {
    protected override async Task OnInitializedAsync()
    {
        var httpContext = HttpContextAccessor.HttpContext;
        if (httpContext != null)
        {
            var properties = new AuthenticationProperties
            {
                RedirectUri = "/"
            };
            await httpContext.SignOutAsync(OpenIdConnectDefaults.AuthenticationScheme, properties);
            await httpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
        }
    }
}

Pourquoi se déconnecter de DEUX schémas ?

C'est souvent là que ça déraille. OpenID Connect utilise un schéma d'authentification double :

Schéma OpenIdConnect: Gère le protocole avec Keycloak (redirections, échange de jetons, déconnexion).
Schéma Cookie: Gère la session locale dans votre application Blazor.

Pour la déconnexion, vous devez vous déconnecter des deux, dans cet ordre :

OIDC en premier: Redirige vers le point de terminaison de déconnexion de Keycloak, mettant fin à la session SSO.
Cookie en second: Efface le cookie d'authentification local.

Effacer seulement le cookie laisse la session Keycloak active, l'utilisateur peut cliquer sur « Connexion » et revenir instantanément, sans ressaisir ses identifiants. Se déconnecter seulement d'OIDC laisse le cookie local intact, et l'app continue de croire que l'utilisateur est connecté.

Étape 7: Le composant LoginDisplay

Il nous faut maintenant un élément d'interface pour afficher l'état de connexion et fournir les actions de connexion/déconnexion. Il se trouve généralement dans l'en-tête ou la barre de navigation de votre application.

Note : NoteBookmark utilise FluentUI Blazor (les composants <Fluent...>), ce n'est pas une obligation, mais ça a vraiment de l'allure ;)

Créez Components/Layout/LoginDisplay.razor :

@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.Authorization
@inject NavigationManager Navigation

<AuthorizeView>
    <Authorized>
        <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="8"
                     HorizontalAlignment="HorizontalAlignment.Right"
                     VerticalAlignment="VerticalAlignment.Center">
            <span>Bonjour, @context.User.Identity?.Name</span>
            <FluentButton Appearance="Appearance.Lightweight" OnClick="Logout"
                          IconStart="@(new Icons.Regular.Size16.ArrowExit())">
                Déconnexion
            </FluentButton>
        </FluentStack>
    </Authorized>
    <NotAuthorized>
        <FluentButton Appearance="Appearance.Accent" OnClick="Login"
                      IconStart="@(new Icons.Regular.Size16.Person())">
            Connexion
        </FluentButton>
    </NotAuthorized>
</AuthorizeView>

@code {
    private void Login()
    {
        var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
        if (string.IsNullOrEmpty(returnUrl)) returnUrl = "/";
        Navigation.NavigateTo($"/login?returnUrl={Uri.EscapeDataString(returnUrl)}", forceLoad: false);
    }

    private void Logout()
    {
        Navigation.NavigateTo("/logout", forceLoad: false);
    }
}

Détails d'implémentation clés :

@rendermode InteractiveServer: Indispensable. <AuthorizeView> dépend de AuthenticationStateProvider, qui nécessite un rendu interactif. Sans ça, le composant s'affiche en HTML statique et reste sourd aux changements d'état d'authentification.
<AuthorizeView>: Ce composant affiche/masque automatiquement le contenu selon l'état d'authentification. Le paramètre context donne accès au principal des claims de l'utilisateur.
URL de retour à la connexion: On passe l'URL de la page courante pour que les utilisateurs reviennent là où ils étaient après l'authentification.
forceLoad: false: On utilise la navigation interne à l'application. Les pages Login.razor et Logout.razor gèrent les vraies redirections HTTP.

Ajoutez ce composant à votre MainLayout.razor ou à votre composant d'en-tête: <LoginDisplay />

Étape 8: Protéger les routes et les pages

Avec la connexion/déconnexion en marche, il faut appliquer les règles d'autorisation. Blazor met à disposition deux mécanismes: la protection au niveau de la page avec [Authorize] et la protection de contenu inline avec <AuthorizeView>.

Mettre à jour Routes.razor

Modifiez d'abord Components/Routes.razor pour gérer le routage avec les autorisations :

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Authorization

<FluentDesignTheme StorageName="theme" @rendermode="@InteractiveServer" />

<CascadingAuthenticationState>
    <Router AppAssembly="typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
                <NotAuthorized>
                    @if (context.User.Identity?.IsAuthenticated != true)
                    {
                        <FluentStack Orientation="Orientation.Vertical" VerticalGap="20"
                                     HorizontalAlignment="HorizontalAlignment.Center"
                                     Style="margin-top: 100px;">
                            <FluentIcon Value="@(new Icons.Regular.Size48.LockClosed())" Color="Color.Accent" />
                            <h2>Authentification requise</h2>
                            <p>Vous devez être connecté pour accéder à cette page.</p>
                            <FluentButton Appearance="Appearance.Accent"
                                OnClick="@(() => NavigationManager.NavigateTo(
                                    "/login?returnUrl=" + Uri.EscapeDataString(
                                        NavigationManager.ToBaseRelativePath(NavigationManager.Uri)),
                                    forceLoad: false))">
                                Connexion
                            </FluentButton>
                        </FluentStack>
                    }
                    else
                    {
                        <FluentStack Orientation="Orientation.Vertical" VerticalGap="20"
                                     HorizontalAlignment="HorizontalAlignment.Center"
                                     Style="margin-top: 100px;">
                            <FluentIcon Value="@(new Icons.Regular.Size48.ShieldError())" Color="Color.Error" />
                            <h2>Accès refusé</h2>
                            <p>Vous n'avez pas la permission d'accéder à cette page.</p>
                            <FluentButton Appearance="Appearance.Accent"
                                OnClick="@(() => NavigationManager.NavigateTo("/", forceLoad: false))">
                                Retour à l'accueil
                            </FluentButton>
                        </FluentStack>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="routeData" Selector="h1" />
        </Found>
    </Router>
</CascadingAuthenticationState>

@code {
    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
}

Ce qui a changé ?

<CascadingAuthenticationState>: Enveloppe tout le routeur et rend l'état d'authentification disponible à tous les composants enfants. Sans ça, <AuthorizeView> et les attributs [Authorize] ne fonctionneront pas.
<AuthorizeRouteView>: Remplace le RouteView standard. Ce composant vérifie l'attribut [Authorize] sur les pages routées et applique les règles d'autorisation.
<NotAuthorized> avec deux états: C'est subtil mais important. Le bloc <NotAuthorized> s'affiche quand l'autorisation échoue, mais deux situations se présentent :
- Non authentifié (context.User.Identity?.IsAuthenticated != true): L'utilisateur n'est pas connecté → bouton « Connexion ».
- Authentifié mais non autorisé (sinon): L'utilisateur est connecté mais sans les permissions requises → message « Accès refusé ».

Protéger les pages avec [Authorize]

Pour exiger l'authentification sur une page entière, ajoutez l'attribut [Authorize] :

@page "/posts"
@attribute [Authorize]
@using Microsoft.AspNetCore.Authorization

<PageTitle>Mes billets</PageTitle>

<h1>Mes billets</h1>

<!-- Votre contenu protégé ici -->

Les utilisateurs non authentifiés qui naviguent vers /posts verront le message « Authentification requise » de Routes.razor, pas le contenu de la page.

Note: [Authorize] supporte aussi les rôles et les politiques (ex.: [Authorize(Roles = "Admin")]) pour un contrôle plus fin (matière à un futur billet).

Tester le tout :

Démarrez votre hôte Aspire: dotnet run --project NoteBookmark.AppHost
Naviguez vers votre application Blazor dans le navigateur.
Cliquez sur « Connexion »: vous devriez être redirigé vers Keycloak, vous authentifier et revenir.
Vous verrez « Bonjour, [votre nom] » dans l'en-tête.
Naviguez vers une page marquée [Authorize] sans être connecté: vous verrez le message d'authentification requise.
Cliquez sur « Déconnexion »: vous serez déconnecté de l'application et de Keycloak.

L'authentification OpenID Connect est maintenant complète dans votre application Blazor, avec une séparation nette entre la mécanique (pages Login/Logout), l'interface (LoginDisplay) et l'application des règles (Routes.razor + [Authorize]).

Conclusion

L'intégration de Keycloak dans votre application .NET Aspire est complète. Les éléments clés :

Orchestration Aspire: AddKeycloak(), .WithReference() et .WaitFor() gèrent le cycle de vie des conteneurs et l'injection de configuration.
Pipeline OIDC: Le middleware d'authentification ASP.NET Core standard, configuré pour les points de terminaison OIDC de Keycloak.
Flexibilité HTTP: Logique pour gérer Keycloak en HTTP en développement tout en imposant HTTPS en production.
Données persistantes: WithDataVolume() s'assure que la configuration de votre realm Keycloak survit aux redémarrages.

Cette approche dépasse largement Keycloak. Le modèle de ressources d'Aspire s'applique de la même façon aux bases de données, aux files de messages et à bien d'autres services. Dès que vous maîtrisez .WithReference() et .WaitFor(), vous pouvez assembler des systèmes distribués complexes en toute confiance.

L'implémentation complète et fonctionnelle est disponible dans le dépôt NoteBookmark, incluant la configuration AppHost, les composants Blazor et les fichiers Docker Compose référencés tout au long de ce billet.

Liens utiles

Reka Edge en local: analyser des images et vidéos sans quitter votre machine

Mon, 16 Mar 2026 00:00:00 GMT

On a lancé Reka Edge la semaine dernière chez Reka, et j'avais envie de vous montrer comment le faire tourner. C'est un modèle de vision-langage, en gros, une IA à qui vous pouvez montrer une image ou une vidéo et poser des questions dessus. Ce qui le distingue : tout se passe sur votre machine. Pas de compte, pas de clé API, pas de données qui s'en vont quelque part sur un serveur.

J'ai eu beaucoup de plaisir à préparer ce guide. Ça devrait vous prendre une quinzaine de minutes, café compris.

Ce dont vous avez besoin

Une machine avec ~16 Go de RAM (assez pour un modèle 7b)
Git
uv, un gestionnaire de paquets Python vraiment rapide :
```
curl -LsSf https://astral.sh/uv/install.sh | sh
```
Ça fonctionne sur macOS, Linux et Windows via WSL. Si vous n'avez pas WSL, il y a aussi un installateur Windows natif.

Étape 1 : Cloner le dépôt

Le modèle et le code d'inférence sont hébergés ensemble sur Hugging Face :

git clone https://huggingface.co/RekaAI/reka-edge-2603
cd reka-edge-2603

Étape 2 : Télécharger les poids du modèle

Hugging Face utilise Git LFS pour les gros fichiers. Après le clone, les poids du modèle ne sont pas encore là — seulement des fichiers pointeurs. Il faut les récupérer séparément.

Installez Git LFS si ce n'est pas déjà fait :

# macOS
brew install git-lfs

# Linux / WSL (Ubuntu/Debian)
sudo apt install git-lfs

Puis initialisez et tirez les fichiers :

git lfs install
git lfs pull

Les poids font plusieurs gigaoctets, alors c'est le bon moment pour aller chercher ce café.

Étape 3 : Poser une question au modèle

Le dépôt vient avec des exemples médias dans media/. Pour analyser une image :

uv run example.py \
  --image ./media/hamburger.jpg \
  --prompt "What is in this image?"

Pour une vidéo, c'est le même principe avec --video :

uv run example.py \
  --video ./media/many_penguins.mp4 \
  --prompt "What is in this?"

Le modèle charge, traite votre fichier, et vous sort une description dans le terminal. Rien d'autre ne se passe — pas de requête réseau, pas de télémétrie.

Quelques prompts intéressants à tester :

"Describe this scene in detail."
"What text is visible in this image?"
"Is there anything unusual or unexpected here?"

Ce qui se passe sous le capot

Vous n'avez pas besoin de lire ça pour utiliser le modèle, mais si vous êtes curieux comme moi, voici ce que example.py fait vraiment.

1. Il détecte le meilleur accélérateur disponible. GPU Nvidia (CUDA), Apple Silicon (Metal), ou CPU en dernier recours. La qualité des réponses ne change pas, juste la vitesse.

if torch.cuda.is_available():
    device = torch.device("cuda")
elif mps_ok:
    device = torch.device("mps")
else:
    device = torch.device("cpu")

2. Il charge les poids en mémoire. Les 7 milliards de paramètres sont lus depuis le dossier cloné — ce sont des milliards de nombres qui encodent ce que le modèle a appris. Comptez environ 30 secondes selon votre matériel.

processor = AutoProcessor.from_pretrained(args.model, trust_remote_code=True)
model = AutoModelForImageTextToText.from_pretrained(args.model, ...).eval()

3. Il formate l'entrée comme une conversation. Votre image et votre texte sont combinés dans un message structuré, un peu comme un chat — sauf qu'un des éléments est visuel.

messages = [{
    "role": "user",
    "content": [
        {"type": "image", "image": args.image},
        {"type": "text", "text": args.prompt},
    ],
}]

4. Tout devient des chiffres. L'image est découpée en une grille de patches numériques, le texte est tokenisé. Le modèle ne travaille qu'avec des nombres — cette étape fait la conversion.

inputs = processor.apply_chat_template(
    messages, tokenize=True, return_tensors="pt", return_dict=True
)

5. La réponse se génère token par token. Le modèle prédit le prochain mot le plus probable, encore et encore, jusqu'à 256 tokens ou jusqu'à ce qu'il juge la réponse complète.

output_ids = model.generate(**inputs, max_new_tokens=256, do_sample=False)

6. Les tokens redeviennent du texte. Les identifiants numériques sont décodés et affichés dans votre terminal. Aucune connexion réseau à aucune étape.

output_text = processor.tokenizer.decode(new_tokens, skip_special_tokens=True)
print(output_text)

La suite

Un script, zéro dépendance cloud, et un modèle de vision de 7 milliards de paramètres qui tourne chez vous. Sur Mac, Linux, ou Windows avec WSL — c'est ce que j'utilisais quand j'ai écrit ce guide.

Utilisé comme ça, c'est déjà pratique pour des questions ponctuelles. Mais si vous voulez brancher ça dans une vraie application — une app web, un outil qui surveille un dossier, quelque chose qui appelle le modèle en boucle — un script de ligne de commande commence à montrer ses limites.

Dans le prochain article, je vais vous montrer comment exposer Edge comme une API locale. Même modèle, même confidentialité, mais accessible depuis n'importe quelle app sur votre machine.

Créez automatiquement des clips IA avec ce template n8n

Thu, 29 Jan 2026 00:00:00 GMT

Créez automatiquement des clips IA avec ce template n8n

Je suis ravi de partager que mon nouveau template n8n a été approuvé et est maintenant disponible pour tout le monde! Ce template automatise le processus de création de clips vidéo générés par AI à partir de vidéos YouTube et envoie des notifications directement dans votre boîte courriel.

Essayez le template ici: https://link.reka.ai/n8n-template-api

Qu'est-ce que ce template fait?

Si vous avez toujours voulu créer automatiquement des courts clips à partir de longues vidéos YouTube, ce template est pour vous. Il surveille une chaîne YouTube de votre choix, et chaque fois qu'une nouvelle vidéo est publiée, il utilise l'AI pour générer des courts clips engageants parfaits pour les médias sociaux. Vous recevez une notification par courriel lorsque votre clip est prêt à télécharger.

Comment ça fonctionne

Le flux de travail est simple et s'exécute complètement en pilote automatique:

Surveiller les chaînes YouTube - Le template surveille le flux RSS de n'importe quelle chaîne YouTube que vous spécifiez. Lorsqu'une nouvelle vidéo apparaît, l'automation se déclenche.
Demander la génération de clip AI - En utilisant l'API Vision de Reka, le flux de travail envoie la vidéo pour traitement AI. Vous avez le contrôle complet sur la sortie:
- Rédigez une instruction personnalisée pour guider l'AI sur le type de clip à créer
- Choisissez d'inclure ou non des sous-titres
- Définissez la durée minimale et maximale du clip
Vérification intelligente du statut - Lorsque les clips sont prêts, vous recevez un courriel de succès avec votre lien de téléchargement. Comme mesure de sécurité, si la tâche prend trop de temps, vous recevrez plutôt une notification d'erreur.

Démarrer est facile

Le meilleur? Vous pouvez installer ce template en un seul clic depuis la page des templates n8n. Aucune configuration complexe requise!

Après l'installation, vous n'aurez besoin que de deux choses rapides:

Une clé API Reka AI gratuite (obtenez la vôtre chez Reka)
Un compte Gmail (ou utilisez n'importe quel fournisseur de courriel que vous aimez)

C'est tout! Le template est prêt à utiliser. Ajoutez simplement le flux RSS de votre chaîne YouTube, connectez votre clé API, et vous êtes prêt à commencer à générer des clips automatiquement. La configuration complète ne prend que quelques minutes.

Si vous avez des questions ou voulez partager ce que vous avez créé, rejoignez la communauté Discord de Reka. J'aimerais beaucoup savoir comment vous utilisez ce template!

Regardez-le en action

Dans cette vidéo rapide, je vous montre comment installer et configurer le template n8n pour créer automatiquement le template n8n.

Bon clipping!

De zéro à n8n: créer son premier node personnalisé

Tue, 20 Jan 2026 00:00:00 GMT

De zéro à n8n : créer son premier nœud personnalisé

Récemment, j'ai décidé de créer un cutom node pour n8n, l'outil d'automatisation de flux de travail que j'utilise. Je ne suis pas un expert en développement Node.js, mais je voulais comprendre comment les node n8n fonctionnent sous le capot. Cet article partage mon parcours et les étapes qui ont réellement fonctionné pour moi.

Pourquoi j'ai fait ça

Avant de commencer ce projet, j'étais curieux de savoir comment les node n8n sont construits. La meilleure façon d'apprendre quelque chose est de le faire, alors j'ai décidé de créer un cutom node simple en suivant le tutoriel officiel de n8n. Maintenant que je comprends les bases, je prévois construire un node plus complexe avec des capacités d'IA Vision, mais c'est pour un autre billet sur ce blogue!

Le défi

J'ai commencé avec le tutoriel officiel de n8n: Build a declarative-style node. Bien que le tutoriel soit bien écrit, j'ai rencontré quelques problèmes en cours de route. Les étapes ne fonctionnaient pas exactement comme décrit, alors j'ai dû comprendre ce qui manquait. Cet article documente ce qui a réellement fonctionné pour moi, au cas où vous feriez face à des défis similaires. J'ai déjà une instance de n8n qui roule dans un conteneur. À l'étape 8, j'expliquerai comment j'exécute une deuxième instance pour des fins de développement.

Prérequis

Avant de commencer, vous aurez besoin de :

Node.js et npm - J'ai utilisé Node.js version 24.12.0
Compréhension de base de JavaScript/TypeScript - vous n'avez pas besoin d'être un expert

Étape 1 : Corriger les prérequis manquants

Je n'avais pas Node.js installé sur ma machine, donc ma première étape a été de régler ça. Au lieu d'installer Node.js directement, j'ai utilisé nvm (Node Version Manager), qui facilite la gestion de différentes versions de Node.js. Les détails d'installation sont disponibles sur le dépôt GitHub de nvm. Une fois nvm configuré, j'ai installé Node.js version 24.12.0.

La plupart du temps, j'utilise VS Code comme éditeur de code. J'ai créé un nouveau profil et utilisé le modèle pour le développement Node.js afin d'obtenir les bonnes extensions et paramètres.

Étape 2 : Cloner le dépôt de démarrage

n8n fournit un n8n-nodes-starter sur GitHub qui inclut tous les fichiers de base et les dépendances dont vous avez besoin. Vous pouvez le cloner ou l'utiliser comme modèle pour votre propre projet. Puisque c'était seleument un « exercice d'apprentissage » pour moi, j'ai cloné le dépôt directement :

git clone https://github.com/n8n-io/n8n-nodes-starter
cd n8n-nodes-starter

Étape 3 : Commencer avec le tutoriel

Je ne répéterai pas le tutoriel complet ici; il est assez clair, mais je soulignerai quelques détails en cours de route que j'ai trouvés utiles.

Le tutoriel vous fait créer un node « NasaPics » et fournit un logo pour celui-ci. C'est super, mais je suggère d'utiliser vos propres images de logo et d'avoir des versions claires et sombres. Ajoutez les deux images dans un nouveau dossier icons (au même niveau que les dossiers nodes et credentials). Avoir deux versions du logo rendra votre node plus beau, peu importe le thème que l'utilisateur utilise dans n8n (clair ou sombre). Le tutoriel ajoute seulement le logo dans NasaPics.node.ts, mais j'ai trouvé que l'ajouter aussi dans le fichier de credentials NasaPicsApi.credentials.ts rend le node plus cohérent.

Remplacez ou ajoutez la ligne du logo avec ceci, et ajoutez Icon à la déclaration d'importation en haut du fichier :

icon: Icon = { light: 'file:MyLogo-dark.svg', dark: 'file:MyLogo-light.svg' };

Note : le logo plus foncé devrait être utilisé en mode clair, et vice versa.

Étape 4 : Suivre le tutoriel (avec ajustements)

C'est là que les choses sont devenues intéressantes. J'ai suivi le tutoriel officiel pour créer les fichiers de node, mais j'ai dû faire quelques ajustements qui n'étaient pas mentionnés dans la documentation.

Ajustement 1 : Rendre le node utilisable comme outil

Dans le fichier NasaPics.node.ts, j'ai ajouté cette ligne juste avant le tableau properties :

requestDefaults: {
      baseURL: 'https://api.nasa.gov',
      headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
      },
   },
   usableAsTool: true, // <-- Ajouté cette ligne
   properties: [
      // Resources and operations will go here

Ce paramètre permet au node d'être utilisé comme outil dans les flux de travail n8n et corrige aussi les avertissements de l'outil de lint.

Ajustement 2 : Sécuriser le champ de clé API

Dans le fichier NasaPicsApi.credentials.ts, j'ai ajouté un typeOptions pour faire du champ de clé API un champ de mot de passe. Cela garantit que la clé API est cachée lorsque les utilisateurs la saisissent, ce qui est une bonne pratique de sécurité.

properties: INodeProperties[] = [
   {
      displayName: 'API Key',
      name: 'apiKey',
      type: 'string',
      typeOptions: { password: true }, // <-- Ajouté cette ligne
      default: '',
   },
];

Une note sur les erreurs

J'ai remarqué qu'il y avait quelques autres erreurs qui apparaissaient dans le fichier de credentials. Si vous lisez le message d'erreur, vous verrez qu'il se plaint de propriétés test manquantes. Pour corriger cela, j'ai ajouté une propriété test à la fin de la classe qui implémente ICredentialTestRequest. J'ai aussi ajouté l'importation de l'interface en haut du fichier.

authenticate: IAuthenticateGeneric = {
   type: 'generic',
   properties: {
      qs: {
         api_key: '={{$credentials.apiKey}}',
      },
   },
};

// Ajoutez ceci à la fin de la classe
test: ICredentialTestRequest = {
   request: {
      baseURL: 'https://api.nasa.gov/',
      url: '/user',
      method: 'GET',
   },
};

Étape 5 : Construire et lier le paquet

Une fois que j'avais tous mes fichiers prêts, il était temps de construire le node. Depuis la racine du dossier de mon projet de node, j'ai exécuté :

npm i
npm run build
npm link

Pendant le processus de construction, faites attention au nom du paquet qui est généré. Dans mon cas, c'était n8n-nodes-nasapics. Vous aurez besoin de ce nom dans les prochaines étapes.

> n8n-nodes-nasapics@0.1.0 build
> n8n-node build

┌   n8n-node build
│
◓  Building TypeScript files│
◇  TypeScript build successful
│
◇  Copied static files
│
└  ✓ Build successful

Étape 6 : Configurer le dossier personnalisé de n8n

n8n cherche les node personnalisés dans un emplacement spécifique : ~/.n8n/custom/. Si ce dossier n'existe pas, vous devez le créer :

mkdir -p ~/.n8n/custom
cd ~/.n8n/custom

Ensuite, initialisez un nouveau paquet npm dans ce dossier : exécutez npm init et appuyez sur Entrée pour accepter tous les défauts.

Étape 7 : Lier votre node à n8n

Maintenant vient la partie magique - lier votre cutom node pour que n8n puisse le trouver. Remplacez n8n-nodes-nasapics par le nom de votre paquet. Depuis le dossier ~/.n8n/custom, exécutez :

npm link n8n-nodes-nasapics

Étape 8 : Exécuter n8n

C'est ici que ma configuration diffère du tutoriel standard. Comme mentionné au début, j'ai déjà une instance de n8n qui roule dans un conteneur et je ne voulais pas l'installer. Alors j'ai décidé d'exécuter un deuxième conteneur en utilisant un port différent. Voici la commande que j'ai utilisée :

docker run -d --name n8n-DEV -p 5680:5678 \
  -e N8N_COMMUNITY_PACKAGES_ENABLED=true \
  -v ~/.n8n/custom/node_modules/n8n-nodes-nasapics:/home/node/.n8n/custom/node_modules/n8n-nodes-nasapics \
  n8nio/n8n

Laissez-moi expliquer ce que cette commande fait :

-d : Exécute le conteneur en mode détaché (en arrière-plan)
--name n8n-DEV : Nomme le conteneur pour une référence facile
-p 5680:5678 : Mappe le port 5678 du conteneur au port 5680 sur ma machine pour qu'il n'entre pas en conflit avec mon instance existante de n8n
-e N8N_COMMUNITY_PACKAGES_ENABLED=true : Active les paquets communautaires — vous en avez besoin pour utiliser des node personnalisés
-v : Monte mon dossier de cutom node dans le conteneur, ce qui me permet d'essayer mon cutom node sans avoir à le publier.
n8nio/n8n : L'image de conteneur officielle de n8n

Si vous exécutez n8n directement sur votre machine (pas dans un conteneur), vous pouvez simplement le démarrer.

Étape 9 : Tester votre node

Une fois que n8n-DEV roule, ouvrez votre navigateur et naviguez vers celui-ci. Créez un nouveau flux de travail et recherchez votre node. Dans mon cas, j'ai cherché « NasaPics » et mon cutom node est apparu!

Pour le tester :

Ajoutez votre node au flux de travail
Configurez les credentials avec une clé API de la NASA (vous pouvez en obtenir une gratuitement sur api.nasa.gov)
Exécutez le node
Vérifiez si les données sont récupérées correctement

Mettre à jour votre node

Pendant le développement, vous devrez probablement apporter des modifications à votre code (aka node). Une fois terminé, vous devez reconstruire npm run build et redémarrer le conteneur n8n docker restart n8n-DEV pour voir les changements.

Quelle est la suite?

Maintenant que je comprends les bases de la construction de node personnalisés n8n, je suis prêt à m'attaquer à quelque chose de plus ambitieux. Mon prochain projet sera de créer un node qui utilise des capacités d'IA Vision. Alerte au spoiler : C'est fait et je partagerai les détails dans un prochain article de blogue!

Si vous êtes intéressé à créer vos propres node personnalisés, je vous encourage à essayer. Commencez avec quelque chose de simple, comme je l'ai fait, et construisez à partir de là. N'ayez pas peur d'expérimenter et de faire des erreurs, c'est comme ça qu'on apprend!

Ressources

Exposer des conteneurs d'un homelab avec Traefik et Cloudflare Tunnel

Wed, 07 Jan 2026 00:00:00 GMT

J'adore le cloud, en fait la plupart des gens me connaissent probablement grâce à mon contenu partagé à ce sujet. Mais parfois, nos applications n'ont pas besoin de mise à l'échelle ou de redondance. Parfois, on veut simplement les héberger quelque part.

C'était les vacances, et pendant mon congé, j'ai travaillé sur quelques petits projets personnels. Je les ai empaquetés dans des conteneurs pour faciliter le déploiement n'importe où. Je les ai déployés sur un mini PC que j'ai à la maison et c'est génial... tant que je reste à la maison. Mais que faire si je veux y accéder depuis ailleurs (ex. : la maison de mes beaux parents) ?

J'ai configuré un beau tunnel Cloudflare vers un conteneur Traefik qui achemine le trafic vers le bon conteneur selon le préfixe ou le domaine de second niveau. Donc dev.c5m.ca va au conteneur X et test.c5m.ca va au conteneur Y. Dans ce billet, je voulais partager comment je l'ai fait (et aussi l'avoir quelque part pour moi au cas où j'aurais besoin de le refaire 😉). C'est simple une fois qu'on sait comment toutes les pièces fonctionnent ensemble.

generated by Microsoft designer

La configuration

L'architecture est simple : Cloudflare Tunnel crée une connexion sécurisée de mon réseau domestique vers le réseau périphérique de Cloudflare, et Traefik agit comme un proxy inverse qui route dynamiquement les requêtes entrantes vers le conteneur approprié selon le sous-domaine. De cette façon, je peux accéder à plusieurs services via différents sous-domaines sans exposer mon réseau domestique directement à Internet.

Étape 1 : Cloudflare Tunnel

D'abord, en supposant que vous possédez déjà un nom de domaine, vous devrez créer un tunnel Cloudflare. Vous pouvez le faire via le tableau de bord Cloudflare sous Zero Trust → Networks → Tunnels. Une fois créé, vous obtiendrez un jeton de tunnel que vous utiliserez dans la configuration.

Voici mon cloudflare-docker-compose.yaml :

name: cloudflare-tunnel

services:
  cloudflared:
    image: cloudflare/cloudflared:latest
    container_name: cloudflared
    restart: unless-stopped
    env_file:
      - .env
    environment:
      - TUNNEL_TOKEN=${TUNNEL_TOKEN}
    command: ["tunnel", "--no-autoupdate", "run", "--token", "${TUNNEL_TOKEN}"]

Le jeton de tunnel est stocké dans un fichier .env pour la sécurité. Le drapeau --no-autoupdate empêche le conteneur d'essayer de se mettre à jour automatiquement, ce qui est utile dans un environnement contrôlé.

Étape 2 : Configuration DNS

Dans le tableau de bord Cloudflare, créez un enregistrement CNAME avec un caractère générique *.c5m.ca.

Étape 3 : Configuration Traefik

Traefik est le proxy inverse qui routera le trafic vers vos conteneurs. J'ai deux fichiers de configuration : un pour Traefik lui-même et un pour la configuration Docker Compose.

Voici mon traefik.yaml :

global:
  checkNewVersion: false
  sendAnonymousUsage: false

api:
  dashboard: false #true
  insecure: true

entryPoints:
  web:
    address: :8082
  websecure:
    address: :8043

providers:
  docker:
    endpoint: "unix:///var/run/docker.sock"
    exposedByDefault: false

J'ai configuré deux points d'entrée : web sur le port 8082 (HTTP) et websecure sur le port 8043 (HTTPS). Je l'ai fait ainsi parce que les ports par défaut 80 et 443 étaient déjà pris. Le fournisseur Docker surveille les conteneurs avec des étiquettes Traefik et configure automatiquement le routage. exposedByDefault: false signifie que les conteneurs ne seront pas exposés à moins d'être explicitement activés avec des étiquettes. Vous n'aurez pas à modifier la configuration Traefik pour ajouter plus de conteneurs, tout est dynamique.

Et voici le traefik-docker-compose.yaml :

name: traefik

services:
  traefik:
    image: "traefik:v3.4"
    container_name: "traefik-app"
    restart: unless-stopped
    networks:
      - proxy

    ports:
      - "8888:8080" # Dashboard port
      - "8082:8082"
      - "8043:8043" # remap 443
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
      - "./config/traefik.yaml:/etc/traefik/traefik.yaml:ro"

networks:
  proxy:
    name: proxy

Les points clés ici :

Traefik est connecté à un réseau Docker appelé proxy qui sera partagé avec d'autres conteneurs. Vous pouvez le nommer comme vous voulez.
Le port 8888 mappe au tableau de bord de Traefik (actuellement désactivé dans la config)
Les ports 8082 et 8043 sont exposés pour le trafic HTTP et HTTPS
La socket Docker est montée en lecture seule pour que Traefik puisse découvrir les conteneurs
Le fichier de configuration est monté depuis ./config/traefik.yaml

Étape 4 : Configuration des services

Maintenant, tout conteneur que vous voulez exposer via Traefik doit :

Être sur le même réseau proxy
Avoir des étiquettes Traefik configurées

Voici un exemple simple avec un conteneur nginx (nginx-docker-compose.yaml) :

name: "test-tools"

services:
  nginx:
    image: "nginx:latest"
    container_name: "nginx-test"
    restart: unless-stopped
    networks:
      - proxy
    volumes:
      - "./html:/usr/share/nginx/html:ro"
      
    labels:
      - traefik.enable=true
      - traefik.http.routers.nginxtest.rule=Host(`test.c5m.ca`) 
      - traefik.http.routers.nginxtest.entrypoints=web

networks:
  proxy:
    external: true

Les étiquettes indiquent à Traefik :

traefik.enable=true : Ce conteneur devrait être exposé
nginxtest est le nom unique pour router ce conteneur.
traefik.http.routers.nginxtest.rule=Host(...) : Router les requêtes pour test.c5m.ca vers ce conteneur
traefik.http.routers.nginxtest.entrypoints=web : Utiliser le point d'entrée web (port 8082)

Bonus : Un exemple plus complexe

Pour un scénario plus réaliste, partageons comment je pourrais exposer 2D6 Dungeon App. C'est un projet qui utilise Aspire, donc c'est facile à déployer comme on veut, où on veut. Voici une version simplifiée de mon 2d6-docker-compose.yaml qui inclut une application multi-conteneurs :

name: 2d6-dungeon

services:
  database:
    container_name: 2d6_db
    ports:
      - "${MYSQL_PORT:-3306}:3306"
    networks:
      - proxy
    ...

  dab:
    container_name: 2d6_dab
    ...
    depends_on:
      database:
        condition: service_healthy
    ports:
      - "${DAB_PORT:-5000}:5000"
    networks:
      - proxy

  webapp:
    container_name: 2d6_app
    depends_on:
      - dab
    environment:
      ConnectionStrings__dab: http://dab:5000
      services__dab__http__0: http://dab:5000

    labels:
      - traefik.enable=true
      - traefik.http.routers.twodsix.rule=Host(`2d6.c5m.ca`)
      - traefik.http.routers.twodsix.entrypoints=web,websecure
      - traefik.http.services.twodsix.loadbalancer.server.port=${WEBAPP_PORT:-8080}

    networks:
      - proxy

    ports:
      - "${WEBAPP_PORT:-8080}:${WEBAPP_PORT:-8080}"

networks:
  proxy:
    external: true

Cet exemple montre :

Plusieurs services qui fonctionnent ensemble (base de données, API, application web)
Seule l'application web est exposée via Traefik (la base de données et l'API sont internes)
L'application web utilise les deux points d'entrée web et websecure
Note importante ici : les conteneurs faisant partie du même réseau peuvent utiliser leur port interne (ex. : 5000 pour DAB, 3306 pour MySQL)
Le réseau externe est le proxy créé précédemment

Configuration du tunnel Cloudflare

Dans votre tableau de bord Cloudflare, vous devrez configurer le tunnel pour acheminer le trafic vers Traefik. Créez un nom d'hôte public pointant vers http://<ip-locale>:8082. Utilisez l'adresse IP locale de votre serveur, quelque chose comme "192.168.1.123". Vous pouvez utiliser des caractères génériques comme *.c5m.ca pour acheminer tous les sous-domaines vers Traefik, qui gérera ensuite le routage selon le nom d'hôte.

Conclusion

C'est tout ! Une fois que tout est configuré :

Le tunnel Cloudflare crée une connexion sécurisée de votre domicile vers Cloudflare
Le trafic arrive via Cloudflare et est routé vers Traefik
Traefik lit le nom d'hôte et route vers le conteneur approprié
Chaque service peut être accessible via son propre sous-domaine
Seuls les conteneurs avec les étiquettes Traefik sont accessibles depuis l'extérieur de mon réseau

C'est une configuration simple qui fonctionne très bien pour les projets personnels. Le meilleur aspect est que vous n'avez pas besoin d'exposer de ports sur votre routeur ou de gérer le DNS dynamique, Cloudflare s'occupe de tout ça.

La prochaine étape sera d'ajouter de l'authentification et de l'autorisation (ex. : en utilisant Keycloak), mais c'est pour un autre billet. Pour l'instant, cela me donne un moyen d'accéder à mes services hébergés à la maison depuis n'importe où, et j'ai pensé que ça pourrait être utile à partager.

D'heures à minutes: Construire une IA qui trouve des événements techno pour vous

Mon, 05 Jan 2026 00:00:00 GMT

D'heures à minutes: une IA qui trouve des événements techno pour vous

TL;DR

J'ai construit un agent de recherche IA qui navigue réellement le web en direct et trouve des événements techno—aucune boucle de recherche, aucune logique de réessai, aucune hallucination. Posez simplement une question et obtenez un JSON structuré avec les étapes de raisonnement incluses. Le secret? Une API qui gère automatiquement la recherche en plusieurs étapes. Construit avec .NET/Blazor en une fin de semaine. Regardez la video | Obtenez le code | Clé API gratuite

Bonne année! Je voulais partager quelque chose que j'ai récemment présenté à la conférence AI Agents 2025: comment construire des assistants de recherche intelligents qui peuvent chercher sur le web en direct et retourner des résultats structurés et fiables.

En revenant des vacances, je suis rappelé d'un problème universel: la surcharge d'informations. Que ce soit pour trouver des conférences techno pertinentes, rattraper les nouvelles de l'industrie, ou parcourir des piles de documentation accumulée pendant le congé, nous avons tous besoin d'outils qui peuvent rapidement rechercher et synthétiser l'information pour nous. C'est ce que fait Reka Research—c'est une IA agentique qui navigue le web (ou vos documents privés), répond à des questions complexes, et transforme des heures de recherche en minutes. J'ai construit une démo pratique pour montrer cela en action: un chercheur d'événements qui recherche sur internet en direct les prochaines conférences techno.

La présentation complète est disponible sur YouTube si vous voulez suivre: How to Build Agentic Web Research Assistants

Le problème: Trouver des événements n'est pas qu'une simple recherche

Laissez-moi vous dresser le tableau. Vous voulez trouver des conférences techno sur l'IA dans votre région (ou ailleur). Vous avez besoin d'informations spécifiques: le nom de l'événement, les dates de début et de fin, l'emplacement, et surtout, l'URL d'inscription.

Une simple recherche web ou requête LLM de base ne suffit pas parce que:

Vous pourriez obtenir des informations dépassées
Le premier résultat de recherche contient rarement tous les détails requis
Vous devez croiser plusieurs sources
Sans structure, les données sont difficiles à utiliser dans une application

C'est là que l'API Research de Reka brille. Elle ne fait pas que chercher—elle raisonne à travers plusieurs étapes, agrège l'information, et retourne des résultats structurés et fondés.

La solution: Une recherche en plusieurs étapes qui fonctionne réellement

L'innovation centrale ici est l'ancrage en plusieurs étapes. Au lieu de faire une seule requête en espérant pour le mieux, l'API Research agit comme un chercheur humain diligent:

Elle fait une recherche initiale basée sur votre requête
Vérifie quelle information manque
Effectue des recherches ciblées additionnelles
Agrège et valide les données
Retourne une réponse complète et structurée

En tant que développeur, vous envoyez simplement votre question, et l'API gère l'itération complexe. Pas besoin de construire vos propres boucles de recherche ou logique de réessai.

Comment ça fonctionne: L'expérience développeur

Voici ce qui m'a le plus surpris: la simplicité. Vous définissez votre structure de données, posez une question, et l'API gère toute l'orchestration de recherche complexe. Aucune logique de réessai, aucune gestion de boucle de recherche.

La clé est la sortie structurée. Au lieu d'analyser du texte désordonné, vous dites exactement à l'API quel schéma JSON vous voulez:

public class TechEvent
{
    public string? Name { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public string? City { get; set; }
    public string? Country { get; set; }
    public string? Url { get; set; }
}

Ensuite, vous envoyez votre requête avec le schéma, et elle retourne des données parfaitement structurées à chaque fois. L'API utilise un format compatible OpenAI, donc si vous avez travaillé avec l'API de ChatGPT, ça vous semblera instantanément familier.

La vraie magie? Vous obtenez aussi les étapes de raisonnement en retour—les recherches web réelles qu'elle a effectuées et comment elle est arrivée à la réponse. Parfait pour déboguer et comprendre le processus de pensée de l'agent.

Je parcours l'implémentation complète, incluant le filtrage de domaine, la recherche géolocalisée, et la gestion des appels de recherche asynchrones dans la vidéo. Le code source complet est sur GitHub si vous voulez approfondir.

Essayez-le vous-même

Le code source complet est sur GitHub. Clonez-le, obtenez une clé API gratuite, et vous l'aurez en fonction en moins de 5 minutes.

Je suis curieux de voir ce que vous allez construire avec ceci. Des agents de recherche qui surveillent les nouvelles? Des outils de comparaison de produits? Des synthétiseurs de documentation? L'API fonctionne pour n'importe quelle tâche de recherche web. Si vous construisez quelque chose, identifiez-moi—j'aimerais le voir.

Bonne année! 🎉

Automatiser le clipping vidéo YouTube avec l'IA et n8n

Thu, 18 Dec 2025 00:00:00 GMT

Automatiser le clipping vidéo YouTube avec l'IA et n8n

Vous êtes créateur de contenu ou fan de shorts vidéo? Vous avez sûrement déjà vécu cette situation : une vidéo sort, vous repérez LE moment parfait à clipper, mais quand vous vous mettez au travail, 50 personnes l'ont déjà fait. La course contre la montre, on connaît tous.

Annie, une collègue passionnée de clipping, vivait ça quotidiennement. Je me suis donc posé la question: pourquoi ne pas laisser l'IA faire ce boulot dès qu'une vidéo est publiée?

Spoiler : ça fonctionne. Et je vous montre comment reproduire ce système gratuitement.

Le concept

L'idée est simple : un flow surveille votre chaîne YouTube favorite, détecte les nouvelles vidéos, et génère automatiquement des clips optimisés pour les réseaux sociaux. Sans intervention humaine.

Le système repose sur :

n8n : une plateforme d'automatisation open-source (gratuite)
Reka AI : leur API Clips qui analyse et découpe les vidéos intelligemment
Votre boîte mail : pour recevoir les clips prêts à poster

Trois étapes, zéro effort manuel, 100% gratuit.

L'architecture technique

Le système se compose de deux workflows n8n complémentaires. Pensez-y comme deux employés qui bossent en tandem.

Premier workflow : Le détecteur

Son job? Être à l'affût. Il scrute le flux RSS d'une chaîne YouTube. Nouvelle vidéo détectée? Il déclenche le processus :

Extraction de l'URL
Appel à l'API Reka avec vos instructions personnalisées
Récupération d'un identifiant de tâche
Stockage des infos dans une table n8n

La beauté de cette solution? Tout est paramétrable. Format vertical pour Instagram et TikTok, horizontal pour YouTube Shorts, carré pour d'autres plateformes. Sous-titres activés ou non. Durée du clip modulable de 0 à 30 secondes. Vous contrôlez tout via une simple Vous pouvez personnaliser la façon dont les clips sont créés. Vous voulez des vidéos verticales pour TikTok? C'est fait. Besoin de sous-titres? Pas de problème. Vous pouvez définir la durée du clip entre 0 et 30 secondes. Tout est dans la configuration JSON. Exemple de configuration :

{
  "video_urls": ["{{ $json.link }}"],
  "prompt": "Identifie et extrait les passages les plus percutants de cette vidéo",
  "generation_config": {
    "template": "moments",
    "num_generations": 1,
    "min_duration_seconds": 0,
    "max_duration_seconds": 30
  },
  "rendering_config": {
    "subtitles": true,
    "aspect_ratio": "9:16"
  }
}

Second workflow : Le vérificateur

Pendant que l'IA travaille (l'analyse peut prendre de quelques minutes à plus longtemps selon la vidéo), ce workflow vérifie l'avancement :

Consultation régulière de la base de données pour les tâches en cours
Interrogation de l'API : "C'est prêt?"
Envoi d'un email dès qu'un clip est disponible
Mise à jour du statut pour éviter les vérifications inutiles

Personnellement, je lance cette vérification toutes les 20 minutes. Inutile de harceler l'API toutes les 2 minutes—la patience est une vertu, même en automatisation.

Mise en place pas à pas

La configuration prend moins de 10 minutes. Vraiment. Annie l'a testée en direct lors de notre session d'enregistrement, et tout était opérationnel avant même qu'on finisse nos cafés.

Première étape : Préparez votre base de données

Direction n8n, créez une table de données. Petit piège à éviter : n'utilisez pas "videos" comme nom (vous me remercierez plus tard). Optez pour "clip_jobs", "youtube_reels" ou autre chose de descriptif.

Structure de la table - 4 colonnes (format texte) :

video_title : titre de la vidéo YouTube
video_url : lien direct
job_id : identifiant fourni par Reka
job_status : état d'avancement queued, processing, completed..
job_id - L'ID que Reka nous donne pour suivre le clip

Deuxième étape : Import des workflows

Récupérez les deux templates JSON sur GitHub, puis importez-les dans n8n. Normal qu'ils affichent des erreurs initialement—ils attendent d'être paramétrés.

Troisième étape : Paramétrage du détecteur

Flux RSS : Indiquez l'ID de la chaîne YouTube à surveiller (trouvable dans l'URL de n'importe quelle chaîne).

Authentification API : Rendez-vous sur platform.reka.ai pour obtenir votre clé gratuite. Collez-la dans le champ Bearer Auth. Nommez-la explicitement pour vous y retrouver.

Instructions pour l'IA : Définissez vos critères de clipping. Par défaut, vous obtenez du 9:16 (format vertical) de 30 secondes max avec sous-titres. Mais modifiez selon vos besoins :

Rédigez votre propre prompt
Ajustez la durée minimale et maximale
Choisissez le format (1:1, 9:16, 16:9...)
Activez/désactivez les sous-titres

Connexion base de données : Liez ce workflow à votre table créée précédemment.

Quatrième étape : Paramétrage du vérificateur

Déclencheur : Testez d'abord manuellement. Une fois validé, programmez des vérifications automatiques (intervalle recommandé : 15-30 minutes).

Authentification : Même clé API Reka que précédemment.

Notification : Configurez le nœud email avec votre adresse. Le template par défaut est efficace, mais personnalisez si vous le souhaitez.

Base de données : Vérifiez que tous les nœuds référencent bien votre tablesi vous voulez, mais celui par défaut fonctionne très bien.

Démonstration vidéo

Toute la procédure est filmée avec Annie qui configure le système en temps réel. Chaque clic, chaque paramètre, même nos petites galères—tout est dedans. C'est brut, c'est authentique, et ça montre que vraiment, n'importe qui peut le faire. La vidéo est en anglais, n'hésitez pas à partager vos questions en commantaires, s'il y a de l'intérêt je ferai une version française.

Pour conclure

Cet outil fonctionne à merveille, que vous soyez un passionné de clipping ou un créateur de contenu qui veut générer des clips pour sa propre chaîne. Une fois configuré, ça roule tout seul. Une nouvelle vidéo sort à 3h du matin? Votre clip est déjà en traitement. Vous vous réveillez avec un lien de téléchargement dans votre boîte de réception.

C'est open source et gratuit. Prenez-le, personnalisez-le, faites-en votre affaire. Et si vous avez des améliorations ou des idées, j'adorerais en entendre parler. Partagez vos mises à jour sur GitHub ou rejoignez la conversation sur le Discord de la communauté Reka .Ou contactez-moi directement, je réponds toujours.

Ressources et liens utiles

Pour démarrer immédiatement :

🔗 Templates n8n sur GitHub
🔗 Clé API Reka (gratuite)

Pourquoi votre badge de "Code Coverage" .NET affiche "Unknown" dans GitLab (et comment le réparer)

Thu, 17 Jul 2025 00:00:00 GMT

Dans un récent blog post, j'ai partagé comment configurer un pipeline CI/CD pour un projet .NET Aspire sur GitLab. Le pipeline inclut des tests unitaires, une analyse de sécurité, et la détection de secrets, et si l'un de ces éléments échoue, le pipeline échouerait. Super, mais qu'en est-il de la couverture de code (Code Coverage) pour les tests unitaires ? Le pipeline incluait des commandes de couverture de code, mais la couverture n'était pas visible dans l'interface GitLab. Réglons ça.

Le problème

Une chose que j'ai d'abord pensé c'est que le regex utilisé pour extraire la couverture était incorrect. Le regex utilisé dans le pipeline était:

coverage: '/Total\s*\|\s*(\d+(?:\.\d+)?)%/'

Ce regex venait directement de la documentation GitLab, alors je pensais qu'il devrait fonctionner correctement. Cependant, la couverture n'était toujours pas visible dans l'interface GitLab.

Alors avec l'aide de GitHub Copilot, j'ai écrit quelques commandes pour valider:

Que le coverage.cobertura.xml était dans un emplacement cohérent (au lieu d'être dans un dossier avec un nom GUID)
Que le fichier coverage.cobertura.xml était dans un format valide
Ce que le regex cherchait exactement

Tout était correct, alors pourquoi la couverture n'était-elle pas visible?

La solution

Il s'avère que la commande coverage avec l'expression regex scanne le output console et non le fichier coverage.cobertura.xml. Aha ! Une solution était d'installer d'autre dotnet-tools pour changer où les résultats de test étaient persistés; vers la console au lieu du fichier XML, mais j'ai préféré garder l'environnement .NET inchangé.

La solution que j'ai fini par implémenter était d'exécuter une commande grep pour extraire la couverture du fichier coverage.cobertura.xml et ensuite l'afficher dans la console. Voici à quoi ça ressemble:

- COVERAGE=$(grep -o 'line-rate="[0-9.]*"' TestResults/coverage.cobertura.xml | head -1 | grep -o '[0-9.]*' | awk '{printf "%.1f", $1*100}')
- echo "Total | ${COVERAGE}%"

Résultats

Et maintenant quand le pipeline s'exécute, la couverture est visible dans le pipeline GitLab!

Et le badge est mis à jour pour afficher le pourcentage de couverture.

Configuration complète

Voici la configuration complète du job de test. Bien sûr, le fichier .gitlab-ci.yml complet est disponible dans le dépôt GitLab.

test:
  stage: test
  image: mcr.microsoft.com/dotnet/sdk:9.0
  <<: *dotnet_cache
  dependencies:
    - build
  script:
    - dotnet test $SOLUTION_FILE --configuration Release --logger "junit;LogFilePath=$CI_PROJECT_DIR/TestResults/test-results.xml" --logger "console;verbosity=detailed" --collect:"XPlat Code Coverage" --results-directory $CI_PROJECT_DIR/TestResults
    - find TestResults -name "coverage.cobertura.xml" -exec cp {} TestResults/coverage.cobertura.xml \;
    - COVERAGE=$(grep -o 'line-rate="[0-9.]*"' TestResults/coverage.cobertura.xml | head -1 | grep -o '[0-9.]*' | awk '{printf "%.1f", $1*100}')
    - echo "Total | ${COVERAGE}%"
  artifacts:
    when: always
    reports:
      junit: "TestResults/test-results.xml"
      coverage_report:
        coverage_format: cobertura
        path: "TestResults/coverage.cobertura.xml"
    paths:
      - TestResults/
    expire_in: 1 week
  coverage: '/Total\s*\|\s*(\d+(?:\.\d+)?)%/'

Conclusion

J'espère que ce post aidera d'autres personnes à sauver du temps lors de la configuration de la couverture de code pour leurs projets .NET sur GitLab. L'idée clé c'est que le regex de couverture de GitLab fonctionne sur la sortie console, pas sur les fichiers (XML ou autres formats).

Si vous avez des questions ou des suggestions, n'hésitez pas à me contacter !

Comment avoir un CI/CD GitLab pour un projet .NET Aspire

Mon, 07 Jul 2025 00:00:00 GMT

Obtenir un pipeline CI/CD complet pour votre solution .NET Aspire n'a pas besoin d'être compliqué. J'ai créé un template qui vous donne tout ce dont vous avez besoin pour commencer en quelques minutes.

Partie 1 : Le template prêt à utiliser

J'ai créé un template .NET Aspire qui vient avec tout configuré et prêt à utiliser. Voici ce que vous obtenez :

Ce qui est inclus

Un projet .NET Aspire Starter classique (API et frontend)
Tests unitaires utilisant xUnit (facilement adaptable à d'autres frameworks de test)
Configuration complète du pipeline .gitlab-ci.yml
Analyse de sécurité et détection de secrets
Toute la documentation dont vous avez besoin

Ce que fait le pipeline

Le pipeline exécute deux jobs principaux automatiquement :

Build : Compile votre code
Test : Exécute tous les tests unitaires, analyse les vulnérabilités, et vérifie les secrets accidentellement committés (clés API, mots de passe, etc.)

Vous pouvez voir tous les résultats de tests directement dans l'interface de GitLab, ce qui facilite le suivi de la santé de votre projet.

Comment commencer

C'est simple :

Clonez le repository template : cloud5mins/aspire-template
Remplacez le projet exemple avec votre propre code .NET Aspire
Poussez vers votre repository GitLab
Regardez votre pipeline CI/CD s'exécuter automatiquement

C'est tout ! Vous obtenez immédiatement des builds automatisés, des tests, et de l'analyse de sécurité.

Conseil de pro : Le meilleur moment pour configurer le CI/CD c'est quand vous commencez tout juste votre projet parce que tout est encore simple.

Partie 2 : Construire le template avec GitLab Duo

Maintenant laissez-moi partager mon expérience de création de ce template en utilisant l'assistant IA de GitLab, GitLab Duo.

Commencer simple, grandir intelligemment

Je n'ai pas construit ce pipeline complexe d'un coup. J'ai commencé avec quelque chose de très basique et j'ai utilisé GitLab Duo pour graduellement ajouter des fonctionnalités. L'IA m'a aidé à :

Ajouter la détection de secrets quand j'ai demandé : "Comment puis-je analyser les secrets accidentellement committés ?"
Corriger les problèmes d'exécution de tests quand mes tests unitaires ne roulaient pas correctement
Optimiser la structure du pipeline pour une meilleure performance

Travailler avec GitLab dans VS Code

Bien que vous puissiez éditer les fichiers .gitlab-ci.yml directement dans l'interface web de GitLab, je préfère VS Code. Voici ma configuration :

Installez l'extension officielle GitLab du marketplace VS Code

Une fois connecté, cette extension vous donne :

Accès direct aux issues GitLab et items de travail
Chat alimenté par l'IA avec GitLab Duo

GitLab Duo en action

GitLab Duo est devenu mon partenaire de programmation en paire. Voici comment je l'ai utilisé :

Comprendre le code : Je pouvais taper /explain et demander à Duo d'expliquer ce que n'importe quelle partie de ma configuration de pipeline fait en surlignant cette section.

Résoudre des problèmes : Quand la solution ne compilait pas, j'ai décrit le problème à Duo et j'ai obtenu des suggestions spécifiques. Par exemple, ça m'a aidé à réaliser que certains projets n'étaient pas en .NET 9 parce que dotnet build nécessitait la charge de travail Aspire. Je pouvais soit garder mon projet en .NET 8 et ajouter une instruction before_script pour installer la charge de travail, soit faire la mise à niveau vers .NET 9; j'ai choisi la dernière option.

Ajouter des fonctionnalités : J'ai commencé avec juste build et test, puis j'ai demandé de façon incrémentale à Duo de m'aider à ajouter l'analyse de sécurité, la détection de secrets, et une meilleure gestion d'erreurs.

Ajouter du contexte : Utiliser /include pour ajouter le fichier projet ou le fichier .gitlab-ci.yml en posant des questions a aidé Duo à mieux comprendre le contexte.

Apprendre plus avec la doc : Durant mon parcours, je savais que Duo n'inventait pas des affaires puisqu'il référençait la documentation. Je pouvais continuer mon apprentissage là-bas et lire plus d'exemples de comment before_script est utilisé dans différents contextes.

L'expérience de développement assistée par IA

Ce qui m'a le plus impressionné c'est comment GitLab Duo m'a aidé à apprendre en construisant. Au lieu de juste copier des configurations de la documentation, chaque conversation m'a appris quelque chose de nouveau sur les meilleures pratiques GitLab CI/CD.

Regardez la vidéo (en anglais)

Conclusion

Je pense que ce template peut être utile pour quiconque commence un projet .NET Aspire. Prêt à l'essayer ? Clonez le template à cloud5mins/aspire-template et commencez à construire en toute confiance.

Que vous soyez nouveau à .NET Aspire ou au CI/CD, ce template vous donne une bonne fondation. Et si vous voulez le personnaliser davantage, GitLab Duo est là pour vous aider à comprendre et modifier la configuration.

Si vous pensez qu'on devrait ajouter plus de fonctionnalités ou améliorer le template, n'hésitez pas à ouvrir une issue dans le repository. Vos commentaires sont toujours les bienvenus !

Merci à David Fowler pour son feedback!

Comment convertir du code avec GitHub Copilot, l'IA peut-elle vraiment aider ?

Tue, 01 Jul 2025 00:00:00 GMT

Récemment, quelqu'un m'a posé une question intéressante: "GitHub Copilot ou l'IA peuvent-ils m'aider à convertir une application d'un langage à un autre ?" Ma réponse était un oui catégorique! L'IA peut non seulement aider à écrire du code dans un nouveau langage, mais elle peut aussi améliorer la collaboration en équipe et combler le manque d'expérience des développeurs qui connaissent différents langages de programmation.

Configuration de l'environnement

Pour démontrer cette capacité, j'ai décidé de convertir une application COBOL en Java. Un cas de test parfait puisque je ne connais bien aucun de ces deux langages, ce qui signifie que j'avais vraiment besoin de GitHub Copilot pour faire le gros du travail. Tout le code est disponible sur GitHub.

La première étape était de configurer un environnement de développement approprié. J'ai utilisé un dev container et j'ai demandé à Copilot de m'aider à le construire. J'ai aussi demandé des recommandations sur les meilleures extensions VS Code pour le développement Java. En quelques minutes seulement, j'avais un environnement entièrement configuré et prêt pour le développement Java.

Choisir le bon agent Copilot

Lorsque vous travaillez avec GitHub Copilot pour la conversion de code, vous avez différents mode parmi lesquels choisir :

Ask : Excellent pour les questions générales (comme demander des extensions Java)
Edit : Parfait pour l'édition simple de documents (comme modifier le code généré)
Agent : Le plus puissant pour les tâches complexes impliquant plusieurs fichiers, imports et changements structurels

Pour les projets de conversion de code, l'Agent est votre meilleur ami. Il peut examiner différents fichiers sources, comprendre la structure du projet, éditer le code et même créer de nouveaux fichiers pour vous.

Le processus de conversion

J'ai utilisé Claude 3.5 Sonnet pour cette conversion. Voici la simple instruction que j'ai utilisée :

"Convertis cette application COBOL hello business en Java"

Copilot n'a pas seulement converti le code, il a aussi fourni des informations détaillées sur comment exécuter l'application Java, ce qui était inestimable puisque je n'avais aucune expérience en Java.

Les résultats variaient selon le modèle d'IA utilisé (Claude, GPT, Gemini, etc.), mais la fonctionnalité de base restait cohérente à travers différentes tentatives. Comme l'application originale était simple, je l'ai convertie plusieurs fois en utilisant différentes instructions et modèles pour tester la cohérence. Parfois, il générait un seul fichier, d'autres fois il créait plusieurs fichiers : une application principale et une classe Employee (qui n'était pas dans ma version COBOL originale). Parfois, il mettait à jour le Makefile pour permettre la compilation et l'exécution en utilisant make, tandis que d'autres fois il fournissait des instructions pour utiliser directement les commandes javac et java.

Cette variabilité est attendue avec l'IA générative—les résultats diffèrent entre les exécutions, mais la fonctionnalité de base reste fiable.

Défis du monde réel

Bien sûr, la conversion n'était pas parfaite du premier coup. Par exemple, j'ai rencontré des erreurs d'exécution lors du lancement de l'application. Le problème était avec le format des données—le fichier original utilisait un format de fichier plat avec des enregistrements de longueur fixe (19 caractères par enregistrement) et sans saut de ligne.

Je suis retourné vers Copilot, j'ai mis en évidence le message d'erreur du terminal, et j'ai fourni un contexte supplémentaire sur le format d'enregistrement de 19 caractères. Cette approche itérative est la clé du succès de la conversion assistée par IA.

"Ça ne fonctionne pas comme prévu, vérifie l'erreur dans #terminalSelection. Les enregistrements ont une longueur fixe de 19 caractères sans saut de ligne. Ajuste le code pour gérer ce format"

Les résultats

Après les améliorations itératives, mon application Java a réussi à :

Compiler sans erreurs
Traiter tous les enregistrements d'employés
Générer un rapport avec les données des employés
Calculer le salaire total (un ajout sympa qui n'était pas dans l'original)

Bien que le format de sortie ne soit pas identique à la version COBOL originale (zéros de tête manquants, espacement de ligne différent), la fonctionnalité de base était préservée.

Démonstration vidéo

Regardez le processus de conversion complet en action (vidéo en anglais) :

Meilleures pratiques pour la conversion de code assistée par IA

Basé sur cette expérience, voici mes recommandations :

1. Commencer par de petits morceaux

N'essayez pas de convertir des milliers de lignes d'un coup. Divisez votre conversion en modules ou fonctions gérables.

2. Établir des standards de projet

Considérez créer un dossier .github à la racine de votre projet avec un fichier instructions.md contenant :

Les meilleures pratiques pour votre langage cible
Les modèles et outils à utiliser
Les versions et frameworks spécifiques
Les standards d'entreprise à suivre

3. Rester impliqué dans le processus

Vous n'êtes pas seulement un spectateur - vous êtes un participant actif. Révisez les changements, testez la sortie, et fournissez des commentaires quand les choses ne fonctionnent pas comme prévu.

4. Itérer et améliorer

N'attendez pas la perfection du premier coup. Dans mon cas, l'application convertie fonctionnait mais produisait un formatage de sortie légèrement différent. C'est normal et attendu, après tout vous convertissez entre deux langages différents avec des conventions et styles différents.

L'IA peut-elle vraiment aider avec la conversion de code ?

Absolument, oui ! GitHub Copilot peut significativement :

Accélérer le processus de conversion
Aider avec la syntaxe et les modèles spécifiques au langage
Fournir des conseils sur l'exécution et la compilation du langage cible
Combler les lacunes de connaissances entre les membres de l'équipe
Générer des fichiers de support et de la documentation

Cependant, rappelez-vous que c'est de l'IA générative, les résultats varieront entre les exécutions, et vous ne devriez pas vous attendre à une sortie identique à chaque fois.

Réflexions finales

GitHub Copilot est définitivement un outil dont vous avez besoin dans votre boîte à outils pour les projets de conversion. Il ne remplacera pas le besoin de supervision humaine et de tests, mais il accélérera dramatiquement le processus et aidera les équipes à collaborer plus efficacement à travers différents langages de programmation.

La clé est d'aborder cela comme un processus collaboratif où l'IA fait le gros du travail pendant que vous fournissez des conseils, du contexte et l'assurance qualité. Commencez petit, itérez souvent, et n'ayez pas peur de demander des clarifications ou des corrections quand la sortie n'est pas tout à fait correcte.

Avez-vous essayé d'utiliser l'IA pour la conversion de code ? J'aimerais entendre parler de vos expériences dans les commentaires ci-dessous !