Package Blazor

Blazor, C#

Communauté Même si j’expose pas mal de trucs au reste du monde (articles, démo, tutos…) j’ai jamais vraiment « contribué » à la communauté via des projets open source. Jusqu’à peu.  Faut bien commencer 🙂 En vrai, je m’en faisais tout une montagne. Pour moi faire un package nuget était compliqué. J’avais tord. En fait ça n’a rien de compliqué. Ce qui est vraiment chaud, c’est de gérer la maintenance et « animer » la communauté (répondre aux questions, faire un readme, corriger etc.) Blazor Je travaille sur un projet avec la techno Blazor depuis quelques mois. Je kiffe.  C’est un projet WASM. Donc qui utilise la WebAssembly. Pour moi c’est le futur. Je pense qu’on va vite se passer de Javascript d’ici 5 ans. Personnellement j’en ai plein le cul de ce language. Par contre respect, il a contribué à rendre nos app web carrément plus sympas.  Et donc on peut pas encore s »en passer vraiment, car l’essentiel des supers libs d’aujourd’hui son écrite en JS. Même si certain éditeur commence à sortir des versions WebAssembly. Mais c’est encore trop rare.  Donc faut encore faire avec. Et Blazor permet de faire un pont entre notre code C# et Javascript.  Ok certain vont me dire, à quoi ça sert, autant tout faire sur du JS. Oui. Mais sans moi, pour les raisons du dessus. Donc moi je veux faire du C#. Alors comment faire ? Faut coder un wrapper qui va nous servir d’intermediaire.  Mon premier package nuget J’avais besoin d’un lecteur de QR code dans mon appli. J’ai cherché et j’ai rien trouvé sur le gestionnaire de package Nuget. Alors j’ai décidé de faire le mien. Et puis je me suis dit que ce serait sympas de le partager. Et ça donne ça : Repo Github : https://github.com/YannVasseur35/ReactorBlazorQRCodeScanner Package Nuget : https://www.nuget.org/packages/ReactorBlazorQRCodeScanner/ Création d’une librairie Blazor La première chose à faire est de créer un nouveau projet « Bibliothèque de classes Razor » Si on ouvre le fichier projet, voici ce que j’ai  <Project Sdk= »Microsoft.NET.Sdk.Razor »> <PropertyGroup> <TargetFramework>net6.0</TargetFramework> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings> </PropertyGroup> <ItemGroup> <SupportedPlatform Include= »browser » /> </ItemGroup> <ItemGroup> <PackageReference Include= »Microsoft.AspNetCore.Components.Web » Version= »6.0.11″ /> </ItemGroup> </Project> Composition d’une lib razor (blazor) Voici un exemple de projet vide : Si on analyse une lib razor, voici ce qu’on y trouve : Component1.razor C’est votre composant visuel qui sera afficher dans vos pages. Suffira d’appeler <Component1/> dans votre page razor. Il affichera un cadre par défaut. A vous de customiser votre composant pour qu’il affiche ce que vous voulez qu’il affiche.  ExampleJsInterop.cs Comme son nom l’indique, c’est un exemple de ce que vous pouvez faire à minima avec du code C# qui utilise du javascript. Dans son contructeur : private readonly Lazy<Task<IJSObjectReference>> moduleTask; public ExampleJsInterop(IJSRuntime jsRuntime) { moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>( « import », « ./_content/RazorClassLibrary1/exampleJsInterop.js »).AsTask()); } On voit que ça charge un fichier js. Notez aussi le chargement « Lazy » qui va permet de ne charger les éléments de notre lib qu’au moment où c’est nécessaire.  https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-7.0 Donc quelque part, si vous n’utilisez pas le composant dans vos premières pages, il ne sera pas chargé (téléchargé pour le client). S’en suis dans le code une seule méthode : public async ValueTask<string> Prompt(string message) { var module = await moduleTask.Value; return await module.InvokeAsync<string>(« showPrompt », message); } Ici on nous présente un méthode très simple pour afficher un prompt JS. On appelle, via module.InvokeAsync la méthode javascript « showPrompt » et on lui passe un paramètre « message ».  exampleJsInterop.js export function showPrompt(message) { return prompt(message, ‘Type anything here’); } Le code JS est super simple. On lance un prompt tout bête avec le message qu’on a en paramètre. Voilà pour la présentation d’un composant blazor.  Intégration Maintenant que l’on a un composant blazor on va l’utiliser dans notre app web WASM.  Suffit d’ajouter une référence de projet dans notre projet client. ensuite dans une page, par exemple index.razor, on ajoute ceci :  @page « / » @using RazorClassLibrary1 <Component1 /> Visuellement ça donnera ceci : Ajoutons un peu de code à notre page pour jouer avec un bouton : @page « / » @using RazorClassLibrary1 @inject IJSRuntime _jSRuntime <Component1/> <button onclick= »@Show() »>Click me</button> @code{ private ExampleJsInterop? _exampleJsInterop; protected override void OnInitialized() { _exampleJsInterop = new ExampleJsInterop(_jSRuntime); } protected async Task Show() { await _exampleJsInterop.Prompt(« coucou »); } } On vient de lancer du js avec du C#. Scanner de QR Code. Pour revenir à mon besoin initiale, je dois pouvoir scanner un QR Code. Ya pas encore de lib nuget mais y’en a quelques une sous javascript, dont jsQR https://github.com/cozmo/jsQR La lib peut faire plein de chose, moi j’ai besoin de récuperer que la lecture du code QR. Pour cela j’ai ajouté une Action (delegate) à mon composant pour que lorsque le JS trouve un QR code et arrive à le lire, cela déclanche (un Invoke) une méthode dans mon code. Le but n’est pas de décrire comment j’ai fait, le code source est dispo ici : https://github.com/YannVasseur35/ReactorBlazorQRCodeScanner J’ai bossé comme avec le précendent projet, en « local » à savoir que mon projet « lib blazor » est ajouté à mon projet blazor client.  Pour que ce soit plus simple, pour moi et pour le reste du monde, il faudrait faire un package nuget et l’importer depuis nuget.org   Le Package Et c’est la que je me faisait tout une montagne (alors que c’est plus simple que de publier une app Android ou pire Apple). Il suffit de taper une commande : dotnet pack Et c’est tout 🙂 Bien entendu il faut aussi donner quelques informations sur le package. Ceci est fait dans le fichier projet de la bibliothèque de classe razor. Voici ce que j’ai mis pour mon package de scan de QR code. <Project Sdk= »Microsoft.NET.Sdk.Razor »> <PropertyGroup> <TargetFramework>net6.0</TargetFramework> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings> <PackageId>ReactorBlazorQRCodeScanner</PackageId> <Version>1.0.5</Version> <Authors>Yann Vasseur</Authors> <Company>reactor.fr</Company> <PackageTags>Blazor;Reactor;QRCode;ScannerQR Code</PackageTags> </PropertyGroup> <ItemGroup> <SupportedPlatform Include= »browser » /> </ItemGroup> <ItemGroup> <PackageReference Include= »Microsoft.AspNetCore.Components.Web » Version= »6.0.4″ /> </ItemGroup> </Project> Et bim on a un fichier ReactorBlazorQRCodeScanner.1.0.5.nupkg dans votre bin/debug Push sur nuget.org Pour publier en ligne, il vous faut un compte sur nuget.org. Ensuite il va vous falloir une clé api. https://www.nuget.org/account/apikeys Quand c’est fait, il restera une étape, taper cette commande (dans le dossier ou se trouve votre package) dotnet nuget push…

WooCommerce – configurations avancées (partie 3)

WooCommerce

Intro Cet article fait suite aux articles : https://reactor.fr/un-site-e-commerce-en-moins-dune-heure  https://reactor.fr/woocommerce-configurations-avancees https://reactor.fr/woocommerce-configurations-avancees-partie-2/ J’ai reussi à couvrir 99% de mes besoins. Un utilisateur peut s’acheter une licence de jeu OutQuest. Le souci, c’est qu’il doit copier une clé de licence sur mon appli. J’aimerais un lien qui lui permette de ne pas le faire. Vu que mon app mobile est un site web, il devrait être simple de rediriger l’utilisateur vers mon site en cliquant sur cette clé de license. (ou un lien que j’aurais fait). Sauf que ca ne se fait pas par défaut. Les concepteurs du plugins me l’ont confirmé, ce n’est pas une fonctionnalité, ça le sera peut être un jour, inchallah. Autre besoin, même si j’ai cet email, ou que l’utilisateur saisie manuellement cette clé de licence sur mon app, comment je vérifie celle ci ? C’est l’objet de ce post. API Licences Manager for Woo Commerce Donc l’idée c’est de faire une requête depuis mon app (ou depuis n’importe où finalement) vers mon site web de e-commerce qui gère ces clés de licences. Le plugin précédément installé qui gère ces licences a justement une gestion par une API de ces clés. Dans les réglages de WooCommerces, Onglet « Gestion de licences » en base de page, on a la possibilité de gérer individuellement chaque endpoint de l’API. Le lien de la documentation est celui ci https://www.licensemanager.at/documentation/rest-api/#api-keys La première chose que l’on nous demande c’est de passer nos liens en permaliens. Dans un précédent article nous avons déjà fait cette manipulation et d’ailleurs je ne souvenais plus pourquoi je devais le faire… ba c’est pour l’API de gestion de licences. Ensuite il nous faut générer une clé d’API que l’on utilisera dans chacune de nos requêtes. Pensez à stocker ces clés car elles ne vous seront plus accessible par la suite. Ca y est notre API est prête ! L’API lmfwc (Licence Manager for Woo Commerce) est situé dans ce path par defaut : https://shop.outquest.fr/wp-json/lmfwc/ Si vous ne faites pas la modification des permaliens vous aurez une 404. Ensuite il faut rajouter la route de l’api que l’on souhaite, par exemple https://shop.outquest.fr/wp-json/lmfwc/v2/licenses/sdf Qui demande la clé « sdf » (qui n’existe pas). J’ai cette réponse 401 Unauthorized : { « code »: « lmfwc_rest_authentication_error », « message »: « Clé client ou secrète manquante. », « data »: { « status »: 401 } } J’utilise une extension Visual Studio Thunder Client (c’est comme Postman) qui me permet de faire des requêtes sur mesure. Il faut paramétrer une authorisation « Basic » avec username = clé client et password = clé secrète. En relancant la requête on obtient ceci : { « code »: « lmfwc_rest_data_error », « message »: « License Key: sdf could not be found. », « data »: { « status »: 404 } } On nous indique une 404 car la clé de licence « sdf » n’existe pas. Essayons maintenant avec une vraie clé : https://shop.outquest.fr/wp-json/lmfwc/v2/licenses/LBL-JVP { « success »: true, « data »: { « id »: 1, « orderId »: 40, « productId »: 29, « userId »: 1, « licenseKey »: « LBL-JVP », « expiresAt »: null, « validFor »: 0, « source »: 1, « status »: 2, « timesActivated »: null, « timesActivatedMax »: 0, « createdAt »: « 2022-09-30 16:00:10 », « createdBy »: 1, « updatedAt »: « 2022-09-30 16:00:10 », « updatedBy »: 1 } } Bingo on obtient nos informations de licence ! L’api lmfwc dispose de 3 autres endpoints en get : licenses/validate/ licenses/activate/ licenses/deactivate/ La première vous donne ce type de réponse : { « success »: true, « data »: { « timesActivated »: 0, « timesActivatedMax »: 0, « remainingActivations »: 0 } } En faisant une requete avec licenses/activate { « success »: true, « data »: { « id »: 1, « orderId »: 40, « productId »: 29, « userId »: 1, « licenseKey »: « LBL-JVP », « expiresAt »: null, « validFor »: 0, « source »: 1, « status »: 2, « timesActivated »: 1, « timesActivatedMax »: 0, « createdAt »: « 2022-09-30 16:00:10 », « createdBy »: 1, « updatedAt »: « 2022-10-10 13:04:29 », « updatedBy »: 1 } } puis en refaisant licenses/validate on obtient : { « success »: true, « data »: { « timesActivated »: 1, « timesActivatedMax »: 0, « remainingActivations »: -1 } } Notez qu’on a eu +1 sur timesActivated. Cela permettra de voir si la licence est utilisé plusieurs fois et éventuellement travailler sur de l’anti fraude. en utilisant licenses/deactivate on fait l’opération inverse. API Woo Commerce On vient de voir comment valider une licence. Le souci c’est qu’à ce stade, je n’ai qu’un numéro orderId et un productId. Je pourrais me démerder avec cela si je rentre en dur, coté application les références produits. Seulement si un jour je change de produit ca ne fonctionnera plus. Comment faire ? Il faut requêter l’API Woo Commerce, tout simplement. De la même manière on va devoir générer des clés d’API dans l’onglet « avancé » des réglages de Woo Commerce. Notre requête devra aussi avoir une authorisation basique avec ces clés. Le path api est wp-json/wc/ Voici une requête pour obtenir des informations sur la commande 40 :https://shop.outquest.fr/wp-json/wc/v2/orders/40 { « id »: 40, « parent_id »: 0, « status »: « completed », « currency »: « EUR », « version »: « 6.9.4 », « prices_include_tax »: true, « date_created »: « 2022-09-30T18:00:07 », « date_modified »: « 2022-09-30T18:00:10 », « discount_total »: « 0.00 », « discount_tax »: « 0.00 », « shipping_total »: « 0.00 », « shipping_tax »: « 0.00 », « cart_tax »: « 0.17 », « total »: « 1.00 », « total_tax »: « 0.17 », « customer_id »: 1, « order_key »: « wc_order_Px8132TVZef0E », « billing »: { « first_name »: « Yann », « last_name »: « Vasseur », « company »: «  », « address_1 »: « 2 la en face », « address_2 »: «  », « city »: « Partis », « state »: «  », « postcode »: « 35580 », « country »: « FR », « email »: « xxxxxxx@yahoo.fr », « phone »: « 06 66 66 6 6 6 » }, « shipping »: { « first_name »: «  », « last_name »: «  », « company »: «  », « address_1 »: «  », « address_2 »: «  », « city »: «  », « state »: «  », « postcode »: «  », « country »: «  », « phone »: «  » }, « payment_method »: « woocommerce_payments », « payment_method_title »: « Carte de crédit/carte de débit », « transaction_id »: « pi_3LnldEFq94z7RR2d10UTj3Te », « customer_ip_address »: « 79.95.127.132 », « customer_user_agent »: « Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 », « created_via »: « checkout », « customer_note »: «  », « date_completed »: « 2022-09-30T18:00:10 », « date_paid »: « 2022-09-30T18:00:10 », « cart_hash »: « 7c45d164e8db4f049f791a4cb6bfeded », « number »: « 40 », « meta_data »: [ { « id »: 645, « key »: « is_vat_exempt », « value »: « no » }, { « id »: 646, « key »: « _payment_method_id », « value »: « pm_1LnldCFq94z7RR2dn0VFdrDP » }, { « id »: 647, « key »: « _stripe_customer_id », « value »: « cus_MWiJXN4eXAa94X » }, { « id »: 648, « key »: « _wcpay_mode », « value »: « test » }, { « id »: 649, « key »: « _intent_id », « value »: « pi_3LnldEFq94z7RR2d10UTj3Te » }, { « id »: 650, « key »: « _charge_id », « value »: « ch_3LnldEFq94z7RR2d1CxGKYWX » }, { « id »: 651, « key »: « _intention_status », « value »: « succeeded » }, { « id »: 652, « key »: « _wcpay_intent_currency », « value »: « EUR » }, { « id »: 662, « key »: « lmfwc_order_complete », « value »: « 1 » }, { « id »: 663, « key »: « _wcpdf_invoice_settings », « value »: { « display_shipping_address »: «  », « display_customer_notes »: « 1 », « display_date »: « order_date », « header_logo »: « 19 », « header_logo_height »: «  », « shop_name »: { « default »: « Outquest » }, « shop_address »: { « default »: « 2 la basrn35580 Paris » }, « footer »: { « default »: «  » }, « extra_1 »: { « default »: «  » }, « extra_2 »: { « default »: «  » }, « extra_3 »:…

WooCommerce – configurations avancées (partie 2)

WooCommerce

Intro Cet article fait suite à l’article https://reactor.fr/un-site-e-commerce-en-moins-dune-heure qui est une introduction à Woo Commerce et à son installation. On part donc avec un site WordPress qui a un plugin WooCommerce, un plugin WooCommerce Payments et un theme Virtue. Cet article fait aussi suite à celui la https://reactor.fr/woocommerce-configurations-avancees et je rappelle les besoins : Cet article va traiter des spécifications dont j’ai besoin pour mon site Ouquest. Je souhaite : permettre l’achat d’un jeu part Carte Bancaire / Paypal (fait dans le précédent article) envoyer une facture automatiquement après achat envoyer une clé de license permettant de jouer à un jeu Outquest forcer la quantité à 1 (on achète 1 licence pour 1 jeu)  (fait dans le précédent article) permettre de mettre en place des produits « Bientôt disponible » visible mais pas achetable.  (fait dans le précédent article) Facture PDF Je voudrais envoyer une facture automatiquement au client. J’utilise le plugin suivant :  WooCommerce PDF Invoices & Packing Slips Une fois installé et activé, j’ai changé qq settings, comme l’ajout d’un logo, le nom et l’adresse de la boutique. Ya un assistant qui vous aide.  J’ai choisi d’ajouter un PDF facture à chaque mail concernant une nouvelle commande Et voila, lorsqu’une commande est effectué, l’utilisateur reçois un email comme d’habitude, mais avec un PDF de facture en plus. C’est plus pro ! Clé de licence Le but de ce site e-commerce c’est de permettre l’achat d’un jeu sur OutQuest qui est réalisé via une app mobile.  Il faut donc pouvoir vérifier que l’achat effectué permet de jouer ou pas.  Pour cela j’utilise un autre plugin qui permet de gérer des licences. Comme un jeu vidéo !  Ce plugin c’est License Manager for WooCommerce  Une fois activé on peut se rendre dans les réglages de WooCommerce qui propose un nouvel onglet « Gestion de licences ». J’ai juste coché la case  Une clé de licence peut prendre plusieurs forme, souvent on voit une suite de lettres et de chiffres espacé de tiret comme ceci JHDS-OZINB-5DDF-97SF Pour faire cela, on va utiliser un générateur de clé, dans le menu WooCommerce – Générateurs. On en ajoute un : Je veux une clé facile à retenir pour pouvoir la mémoriser et l’écrire ensuite sur une app par exemple.  Mon format c’est XXX-XXX donc 3 lettres, tiret, 3 lettres. Ca représente 26 ^6 soit plus de 300 millions de combinaisons. Large, je suis pas Ubisoft. La carte des caractères c’est l’ensemble des caractères possible que vous souhaitez voir dans cette clé de licence. J’y ai mis que des lettres. C’est simple et surtout ça évite les confusions de type O 0, I 1, etc…  On enregistre. Et normalement c’est tout bon.  Par default, la livraison d’une commande se fait sur un état terminé. Ca nous servira plus tard.  Automatiquement, à l’installation du plugin, ça doit rajouter une ligne dans Email de WooCommerce ce qui va nous permettre de joindre la clé de licence directement dans l’email de confirmation de commande. (commande terminée) Il faut modifier notre produit pour qu’il gère une clé de licence. Un nouvel onglet est disponible.  Il faut cocher « Vendre des clés de licence pour ce produit ». Quantité 1.  Générer des clés de licence avec le générateur que l’on vient de paramétrer. Maintenant si on passe une commande, on verra une nouvelle ligne dans le résumé de la commande et aussi dans l’email de confirmation de commande. Page web Email : Problème des produits Virtuels et Téléchargeables. Je ne voulais pas parler de cette option avant pour éviter toute confusion. Mais maintenant cela a son importance.  Lorsque vous créer un produit, vous avez la possibilité de le déclarer Virtuel et/ou Téléchargeable.  Dans mes précédentes commande, j’ai un produit qui a les deux : Pourquoi ?  Car en faisant cela, lorsqu’un utilisateur finalise sa commande, le statut de la commande passe à « Terminé ». Et rappellez vous, le plugin ajoute la licence dans l’email sur ce statut.  Or si on ne coche pas « Téléchargeable », la commande de ce produit sera « en cours »  Et donc la license ne sera pas incluse ! Moi je coche la case Téléchargeable car pour moi c’est une commande terminé.  Mais l’autre option c’est de rajouter un statut « En cours » dans les settings de la licence (non testé)

WooCommerce – configurations avancées

WooCommerce

Cet article fait suite à celui la https://reactor.fr/un-site-e-commerce-en-moins-dune-heure qui est une introduction à Woo Commerce et à son installation. On part donc avec un site WordPress qui a un plugin WooCommerce, un plugin WooCommerce Payments et un theme Virtue. Cet article va traiter des spécifications dont j’ai besoin pour mon site Ouquest. Je souhaite : permettre l’achat d’un jeu part Carte Bancaire / Paypal envoyer une facture automatiquement après achat envoyer une clé de license permettant de jouer à un jeu Outquest forcer la quantité à 1 (on achète 1 licence pour 1 jeu) permettre de mettre en place des produits « Bientôt disponible » visible mais pas achetable. Processus d’achat A ce stade, comment se passe le processus d’achat pour l’utilisateur ? Pour le moment la page d’accueil liste un ensemble de produit disponible à la vente. Chaque produit dispose de sa propre page détail.  L’utilisateur est invité à cliquer sur « Ajouter au Panier » ce qui permet, comme indiqué de rajouter le produit dans le panier.  Me concernant, les joueurs ne feront qu’un seul achat, donc je voudrais directement rediriger l’utilisateur vers la page « Validation de Panier », celle ci : Pour rediriger l’utilisateur directement vers la page panier après achat, il faut cocher la case suivante dans la section Produit des réglages de WooCommerce. J’aimerais aussi ne pas afficher le selecteur de quantité pour cela, il faut se rendre dans la page configuration du produit, données produit, Inventaire et cocher la case suivante : Payments Mode Test Avant toute chose, on va démarrer en mode « Test » pour rendre fictif le paiement. Cela permettra de valider le processus avec une carte banquaire bidon. Pour cela, rendez vous dans les réglages de WooCommerce section Paiements et cocher la case ci dessous. Lorsque l’utilisateur valide son panier il arrive sur une page qui lui demande ses informations personnelles nécéssaires pour editer une facture avec les éléments obligatoires légaux.  Ensuite la page résume la liste des produits du panier, affiche la TVA et le total. Si tous les champs sont corrects, au clic sur le bouton commander, l’utilisateur est rediriger vers une page validation de commande avec toutes les informations concernant son achat. De plus un email est automatiquement expédié à l’utilisateur lui validant sa commande. Un autre email est expédié à l’adresse email de l’administrateur de WooCommerce lui indiquant qu’une commande vient d’être effectuée. TVA Vous avez peut etre remarqué une erreur dans le screenshot ci dessus, la TVA est à 0%. C’est pas normal. (enfin ça se discute hein ! ) La solution pour cela est d’activer l’option des taxes automatiques dans les options de TVA dans les réglages de WooCommerce. Le problème (dans mon cas) c’est que ca bloque l’edition des tarifs TTC, on est obligé de saisir les tarrifs en HT.  Cependant, le fait de mettre cette option, puis de l’enlever (remise à default) à débloquer ce pb de TVA à 0%. Note :  J’ai travaillé sur 2 sites WooCommerce, un pour faire mes tests et un autre pour ma prod. Je rédige cet article en mettant en place la production (shop.outquest.fr) progressivement. Et je m’appercois que je n’ai pas les memes comportements vis à vis de cette TVA. (j’ai mis a jour depuis sur une version WooCommerce, c’est peut être lié) Ce que j’ai fait dans le didactel c’est d’abord constuire mes produits, puis changer ma méthode d’application de la TVA (HT à TTC) ensuite. Or, on a ce petit encart qui nous informe que cela n’impactera pas les produits existants.  Dans les faits, ça change rien. J’ai testé sur un « ancien » produit et un produit que j’ai fait apres ces changements. La ou ca change c’est au moment de faire les calculs, sur la page panier par exemple. (un produit anciennement à 1€ HT à qui faut rajouter 0.20€ de TVA devient un produit à 1€ TTC qui comprends la TVA) Donc pour un produit vendu 1€ TTC, j’ai un produit HT à 0.83€ (et pas 0.80€) et donc une TVA à 0.17€. (20% de 0.83€) C’est un « calcul à l’envers » qui est « bizarre » si on essai de calculer sur cette page les taxes. Cependant et c’est le but de cette façon de faire, c’est d’afficher les tarifs TTC.  Donc quand on affiche 1€, c’est 1€ pas 1.20€ au final.  C’est personnel, mais je suis toujours un peu déçu quand j’arrive sur une page qui me dit qu’en fait le prix que tu as vu avant c’était HT. Quand on est consomateur c’est frustrant. Si j’étais acheteur dans le privé, j’aurais mis HT bien entendu.  Mais par défaut, les prix sont affichés en HT. Il faut changer l’option dans les réglages de TVA : <– avant HT après TTC –> Pour Simplifier la lecture, je simplifie les tarifs sur la page panier et commande avec des tarifs TTC Voici au final ce que ça donne. Simple, clair.  La TVA est inscrite discrètement, c’est pas pour dissimuler, mais tout le monde sait qu’il y a de la TVA… Note : je ne sais pas ce qui s’est passé, mais depuis que j’ai fait la section suivante, les prix TTC ne sont plus affichés. Donc c’est pas stable st’histoire.  J’ai joué avec les réglages, en passant et repassant des fonctionalités « on/off », c’est presque redevenu normal. Sauf que j’ai plus de TVA. Fait chier ! Après une pause (d’énervement) j’ai trifouillé qq options dont « Disable automated taxes » et pouf, ca remarche… Produit indisponible J’ai besoin d’un moyen d’afficher des produits mais qui ne sont pas encore disponible à la vente. Ca permet de préparer le terrain et d’informer l’utilisateur que de nouveaux circuits vont être disponibles. Pour cela je vais utiliser un plugin (en fait 2, on verra plus tard pourquoi) qui va me permettre d’afficher ceci  Ce plugin permet de rajouter une bulle « Bientôt Disponible » sur l’image principale. Ce plugin c’est Coming Soon Badge for WooCommerce Une fois installé et activé, ce plugin vous propose tout un tas de customisation.  Il faut activer la fonctionalité par produit dans l’encart « Publier » du produit. Sympas…

Un site e-Commerce en moins d’une heure.

WooCommerce

Pourquoi faire ? Pour vendre un bien numérique (un circuit d’OutQuest), j’ai besoin d’un site e-commerce qui me gère la partie vente.   Qui dit vente, dit emmerdes. Oui car on va devoir gérer des profils (user data, email nom prénom, adresse, tel etc) qui aujourd’hui sont sous le coup de lois (RGPD) et on a pas le droit de faire n’importe quoi avec. Et c’est normal. Mais pour ceux qui code un peu, cette partie est un gros morceau. (sécurité, intégrité, disponibilité…)   De plus on va demander un ou des moyens de paiements, enregistrer des commandes, gérer des factures, des remboursements et pour certain des stocks (et des ruptures de stocks), des bons de réduction etc. Coder une platerforme e-commerce est un boulot de dingue.   Mais heuresement on a des développeurs qui l’on fait déjà fait, et propose des solutions gratuites !!! Je vous aime, chères collègues !   J’ai testé WooCommerce, qui pour l’instant couvre 99% de mes besoins WooCommerce kick ass Le e-Commerce, c’est pas nouveau. Je dirais meme que les solutions sont c’est hyper matures. Woo Commerce en est une. J’ai pas été voir les autres, ni même tenté une étude de marché.  J’ai installé WooCommerce pour testé. Et j’ai couvert 99% de mes besoins. Il me manque un tout petit %, dont je parlerai en fin d’article.  Je vous montre ici une installation de woo commerce + plugins + skin pour mes besoins qui seront peut être les votres aussi.   La base Avant toute chose, il vous faut un nom de domaine et un site wordpress hébergé qq part.  Moi ça sera https://shop.outquest.fr Première chose à faire, modifier les réglages principaux avec vos données : N’oubliez pas de confirmer votre adresse email si vous la changez.   Ensuite il faut installer le plugin WooCommerce.   puis on l’active :, on passe alors à la configuration du site e-commerce.    Config On commence par des informations de base concernant votre site, pas vraiment utile que je détaille ceci ici. On vous demandera de choisir le type de produit. Prendre les deux, c’est un choix qui vous permettra de vendre différent type de produit, au moment d’en créer un. Enfin, on vous propose par défault quelques options complémentaires : Accepter les cartes de crédit et autres méthodes de paiement populaire avec WooCommerce Payments.  C’est un plugin spécial WooCommerce développé par WooCommerce Une fois installé, il va gérer tout ce qui concerne les paiments, les remboursements, les méthodes de paiement (stripe, pay pal…), l’intégration de ceux ci sur votre site web.  WooCommerce Tax, utile si vous vendez dans différents pays.  JetPack : utilitaire très connus qui fait plein d’optimisation MailPoet : je connais pas bien, je teste Google Listing & Ads : pas encore testé Facebook pour WooCommerce : pas encore testé     Pour finir, on nous demande de choisir un theme. Personnellement j’ai choisi le thème « Virtue » qui ne figure pas dans la liste qui vous est proposé. Si vous voulez le même suffit d’aller l’installer manuellement dans la section « theme ». Si vous avez opté pour l’option JetPack, on vous demandera de connecter votre compte JetPack sur votre site.    Mise en route Ca y est votre site e-commerce est configuré. Par défaut, votre site web ressemble à cela. On a un thème par defaut, aucun produit, rien a montrer à part une page principale afficher un pauvre article. Ca reste du WordPress from scratch.  A partir de maintenant, les screenshots suivant seront prit avec le theme Virtue. La page d’accueil ressemble à ça : L’interface d’admin de wordpress vous propose de commencer à alimenter votre site web Vous pouvez suivre toutes les étapes une à une. C’est un bon moyen de démarrer. A tout moment vous pouvez reprendre cette mise en route en cliquant sur Accueil du menu WooCommerce: Réglage apparence Note: vous n’êtes pas obliger de régler maintenant l’apparence, d’autant plus qu’en fin de configuration on vous propose de le faire.  Comme un site wordpress classique, il faut paramétrer un minimum pour démarrer. Cela concerne la home page et les menus. Dans mon cas l’apparence du site est basé sur un theme « Virtue » donc pas certain que vous ayez les memes options. Ce que je veux afficher sur ma home page c’est un logo, un menu et une liste de produit.  Insérer un logo se fait via l’assistance de personnalisation dans « réglage principaux » Pour mettre une liste de produit à la place d’un article de base, il faut se rendre dans « Réglages de la page d’accueil »   et modifier en page statique et choisir  « boutique » Dans la section Apparence – Menu sur l’admin wordpress, j’ai crée un menu comme ceci :  Pour au final un look qui ressemble à ça : Ce qui permet de naviguer sur nos produits et voir le détail d’un produit sur une page dédiée. Ajout de produits Depuis le didactel, choisir « ajouter un produit manuellement dans le cas d’une petite boutique ». Sinon Il existe un menu spécial produit :  On va rapidement créer un premier produit « Quête des Vallons de la Vilaine » qui sera notre premier produit numérique que l’on souhaite vendre. On va lui donner un nom, une description et une image. (on pourra mettre plus d’une image plus tard). Le cadre suivant est très important, c’est ici que l’on détermine quel type de produit et à quel tarif.  On commence par un tarif peu élevé de 1€ que l’on changera plus tard. Cela nous permettra de faire notre premier « auto achat » pour tester. En évitant de payer des impots et taxes inutiles.  On y reviendra plus tard. On publie notre premier produit. Et on en profite pour en faire un ou deux de plus, ce qui nous permettra de comparer plus tard quelques fonctionnalités intéressantes.   WooCommerce Payments On vient d’ajouter nos produits, on avance sur les paiements C’est pas la partie la plus simple. Mais c’est celle qui a été la plus simplifié depuis qq années. En gros ce plugin va nous faciliter. la…

Azure Devops

Azure Devops, CI/CD, DevOps

Qu’est ce qu’Azure Devops ? A quoi ça sert ? Comment l’utiliser ?  Je vais tenter d’expliquer par l’exemple et l’expérience ce que l’on peut faire avec Azure Devops Un bref historique Il est l’héritier de plusieurs anciens outils. Si je remonte loin on a VSS (visual source safe) qui était le svn de Microsoft, un gestionnaire de code source. Ensuite on a eu Team Foundation Server qui était un peu plus sérieux, on commençait à voir des outils annexes comme un board avec des work items. Git étant devenu une référence, Microsoft s’est adapté et a la intégré sur toutes ses plateformes. On a eu aussi VS Online (Visual Studio Online) et dans le même temps Microsoft rachetait HockeyApp qui deviendra App Center (spécialisé dans l’application mobile). C’est indépendant, mais j’imagine que demain tout ne fera qu’un. Et puis est né Azure Devops. Tout ça pour dire qu’il est pas arrivé comme ça. C’est le fruit d’années d’évolution et de savoir faire.   Azure Devops est gratuit.  Azure Devops est multi projets, multi utilisateurs, … voir ici pour le limites A quoi ça sert ? Alors qu’on soit bien clair, Azure Devops n’est pas indispenable… jusqu’à ce qu’on s’en serve… Azure Devops c’est une plateforme web qui regroupe plusieurs gros services : Board : un outil qui permet de créer des work items et de les organiser suivant des méthodes agile (scrum, kanban) Repos : un repo git, où l’on peut y voir les commits, pushes, branches, tags, pull requests Pipelines : orchestrateur automatique. Permet de lancer des « scripts » yaml et d’automatiser notre chaine de livraison continue.  Test Plans : La section test. Artefacts : ce que vous aller produire se retrouve ici.  Les deux derniers, j’en parlerai pas, je connais pas bien. Les 3 premiers sont des supers outils, ils sont liés.  En premier lieux on va utiliser Board pour s’organiser, créer des tâches et les répartir aux membres de l’équipe. Bien entendu il nous faut un repos Git. Ils nous permet de gérer notre code source. Enfin, quand le projet avance, on ajoute de l’automatisation pour que notre chaine de livraison continue fonctionne toute seule.  Comment l’utiliser ? Pour cela j’ai écris 9 articles qui se focalise sur la chaine de livraison/déploement continue CI/CD 1 – Première pipeline, On y apprend à faire un build tout simple : Azure Devops Pipeline (CI/CD) – First Build 2 – Deploiement via SSH Azure Devops Pipeline (CI/CD) – Deploy 3- Versioning Azure Devops Pipeline (CI/CD) – Versioning 4- Gestion des environnements Azure Devops Pipeline (CI/CD) – Environnement Azure Devops Pipeline (CI/CD) – Relancer les services 5- Git Flow Azure Devops – Git Flow intro 6- Pull Request Azure Devops – Pull Request Azure Devops – Pull Request (part 2) Voilà, j’espère que ça pourra servir à quelqu’un 🙂 

Azure Devops – Pull Request (part 2)

Azure Devops, CI/CD, DevOps, Git, Git Flow, pipeline

Cet article est la suite de https://reactor.fr/azure-devops-pull-request/ On avait créé des règles de branche sur la master : interdiction d’effacer cette branche pas de git push direct sur cette branche règle de Pull Request (light) Ceci nous permet de sécuriser la branche master. Faisons de même avec la branche develop. Rappels Git Flow On a vu la PR develop –> master.  Maintenant, on va ajouter une PR sur chaque commit vers la branche develop. Si on applique Git Flow, on aura une branche feature qui devra à un moment livrer son contenu sur la develop.  La PR intervient à ce moment.  Règle de branche develop sur Azure Devops On va donc fairre un clic sur le menu de la ligne représentant la branche develop dans Repos – Branches, puis on sélection "Branch Policies" Pour la branch dévelop, j’ai rajouté plus de contraintes que la master. En effet je veux qu’en premier lieu chaque commit sur la branch dévelop corresponde à un work item. Ensuite si il y a une intervention d’un reviewer, celle ci doit être résolut par un commentaire. Dans la pratique ça peut simplement être une question qui ne demande pas vraiment d’intervention. Mais ça peut aller jusqu’à ce que le reviewer demande un refacto voir refuse carrément le code (c’est rare…) Je limite aussi le type de merge afin d’avoir un historique lisible et en cohérence avec la branche master. Ensuite j’ajoute une règle de build. Je sélectionne une nouvelle Pipeline que je viens de juste de crée : pool: vmImage: ubuntu-latest variables: buildConfiguration: ‘Release’ projectBlazorWasmServer: ‘src/BlazorDemo/BlazorDemo/Server/BlazorDemo.Server.csproj’ steps: # Publish Blazor Demo Server – task: DotNetCoreCLI@2 displayName: Publish inputs: command: publish publishWebProjects: false projects: ‘$(projectBlazorWasmServer)’ arguments: ‘–configuration $(buildConfiguration) –output $(build.artifactstagingdirectory)’ zipAfterPublish: false modifyOutputPath: false La seule différence avec l’autre pipeline de build, c’est que je ne précise pas le trigger. En effet, je ne connais pas le nom de la branche feature. Donc par défault ce sera la source de la PR concernée. Mise en situation Mon tech lead m’a affecté une tâche. On va aller la créer pour la simuler, normalement elle est déjà existante : Je suis développeur, je dois donc créer une branche si elle n’existe pas déjà. Sut mon terminal je tape : git checkout -b feat/LoginPage Je développe, quand j’ai fini : git add . git commit -m « mon travail sur la page login » git push –set-upstream origin feat/LoginPage Je peux bien évidement avoir plusieurs commit et/ou avoir d’autre commit d’autre développeurs. D’ailleurs (si vous avez les droits) n’importe qui peut aller voir ce qu’il se passe sur cette branche depuis Azure Devops : La Pull Request feat -> develop Azure Devops sait qu’une branche feat/LoginPage est en cours et vous propose directement de choisir celle ci et de créer une pull request à partir de celle ci. Dans mon cas j’ai eu ceci : C’était pas voulu, mais j’ai eu la surprise de voir que j’ai un conflit de merge. Et c’est finalement un point intéressant à montrer.  J’ai pas récupéré la branche develop dans mon dev sur ma branche feature. Et honnetement ça arrive TOUT LE TEMPS.  Normal, qq a pu entre temps livrer qq chose sur la branche develop. Il faut donc s’assurer que ce nouveau code s’intègre au mien. Il faut alors lancer toute une série de commandes git: git checkout develop git pull git checkout feat/LoginPage git rebase develop git pull git push Explication : on change de branche pour aller sur develop. On récupère la dernière version de cette branche. On re bascule sur notre branche feat. On applique ces nouveautés (rebase permet de garder un historique chronlogique en mettant nos modifs après celle de develop). A ce stade on est iso en local. Faut faire un pull pour que ça lance un merge automatique (ca met au carré le repo local et le distant et prépare au push) Et enfin on push sur le repo distant.   Maintenant on retourne sur Azure devops : Ya plus de conflit ! 🙂 si on regarde de plus prêt Il ne reste plus qu’à associer notre PR à un Work Item : Ce qui résoud le problème : On peut valider le PR : Ceci effacera la branche feat/LoginPage Au final : Conclusion Pourquoi c’est génial ? C’est vrai qu’avant on publiait directement sur develop et tout allait bien. Et vous avez pas tort. Chacun travail comme il le souhaite.  Avec cette façon de faire, vous allez prendre un petit plus de temps à faire un "peu de paprasse". Mais on a un suivi très intéressant sur chaque étape de la construction de morceau d’application. Tout est lié, et tout le monde peu savoir ce qu’il se passe. Qui travaille sur quoi et quand. Attention, faut pas le voir comme un outil de flicage, mais plutot un outil d’orchestration dans une équipe logiciel.  L’élément que j’ai peu évoqué ici, et qui est relié à a chaque PR c’est le board. Le Board permet de suivre des work items de plusieurs types : Chacun s’organise comme il veut. On peut créer autant de work item que l’on veut et utiliser scrum ou kanban Le développeur se focalise sur sa feature et traite de bout en bout celle ci (jusqu’à la branche develop) Le tech lead suit tout ça. A chaque fin de sprint, ou quand il le souhaite, il peut faire une release. Le product owner est au courant des évolutions de son app.  Azure Devops est vraiment un super outil.  Et j’ai pas fait le tour de toutes ses possibilités.

Azure Devops – Pull Request

.net 6.0, Azure Devops, DevOps, Git, Git Flow, pipeline

Dans mon dernier article, j’ai introduis Git Flow avec un exemple, la naissance d’une application.  A un moment, je raconte l’évolution de l’équipe de dev et de leur organisation autour du code source. On y parle de Pull Request.  La PR est une procédure de validation d’un ensemble de commits regroupés dans une branche feature (quand on applique Git Flow). On peut aussi appliquer une PR de la branche develop vers master. C’est ce qu’on appelle une "release".  Chacun ayant ses stratégies, je vous propose la mienne, qui va bien pour un petit/moyen projet :  Situation J’ai 2 branches principales : master. A considérer comme la branche release car c’est ce code qui part en prod. develop. Son code part en staging. Ca sert aux dev pour voir le résultat de leur travail sans influencer la prod. Quand j’estime que la branche develop a quelque chose d’intéressant, je pousse le code vers la master (merge).  Cette action est réalisé via une Pull Request depuis Azure Devops. Je ne fais aucune manipulation git. Tout ce passe sur Azure Devops. D’ailleurs j’ai interdit toute manipulation de la branche master en dehors d’une PR. Voyons voir comment faire cela : Règle de branche master Sur Azure Devops, il faut se rendre sur l’onglet "Repos" puis "Branches" : Cliquez sur le bouton à droite de la branche master, ce qui ouvre un menu. Cliquez sur Branch Policies. Nous y voila, si on lit la première ligne, elle nous dit que si une seule des options est cochée, alors la branche ne peut pas être effacée et toute modification devra passer par une PR. Quelque part, je pourrais m’arréter la car c’est tout ce dont j’ai besoin. Mais on va voir qu’il y a quelques options bien intéressantes : Require a minimum number of reviewers. J’ai une équipe de 1 dev, moi. donc je vais m’auto évalué, ça n’a pas de sens. Je n’ai pas coché cette case. Mais c’est intéressant dès lors qu’on valide par un second dev (lead tech pour la master).  – Check for linked work items. Cette option est intéressante dès lors que l’on travaille avec un backlog. Ce qui n’est pas mon cas pour ce projet "demo". Mais c’est conseillé. En effet, vous allez améliorer chaque PR avec un "work item" qui sera donné par votre product owner ou votre tech lead. C’est hyper quali de faire ça. Surtout intéressante depuis une branche feature vers la develop. Ici depuis la branche develop vers la master, on aurait plus un ensemble de feature. A voir avec les types de work item. Si ca se trouve ça peut coller.  Check for comment resolution option pas obligatoire. Si coché, cela force à valider tout commentaire dans le code. On le verra plus tard, mais si un reviewer constate un manquement, une erreur ou une objection dans le code, il le signifie par un "commentaire". Si celui ci n’est pas "résolut", alors on peut pas valider la PR. A tester avec votre équipe. La encore, c’est intéressant pour une PR vers la branche develop  Limit merge types cette option permet de laisser le choix lorsque la PR est validé, de choisir le type de merge que l’on souhaite appliquer à la branche cible. Pour mon cas, je ne laisse pas le choix, j’impose un squash merge. La encore, c’est les goûts et les couleurs. It’s up to you. Je pense qu’un article entier peut y être consacré. On en discute encore dans l’équipe où je bosse…  On va maintenant rajouter des règles de build : On ajoute une règle qui impose qu’un build s’execute correctement. Pour cela on doit construire une pipeline de build. Si la branche develop ne build pas, alors on ne fait pas le merge. Pour ma part, le build est un publish. Ce qui revient a peu prêt au même (un publish est un build + génération des fichiers statics web dans le cas d’une app Blazor WASM).  Ma première Pull Request On va tester tout ça. On va dans Repos – Pull request Cliquez sur New pull request : Il faut choisir sa source et sa destination, pour nous, develop –> master Notez que j’ai juste mis un titre. On peut ajouter des reviewers et bien sûr un work item. Tout ca on le verra dans une pull request de type feature –> develop. Cliquez sur Create. Voici ce qui se passe : Première chose, on a un élément requis qui doit se lancer. Celui ci c’est notre "règle de build" écrite juste avant.  Notez aussi qu’il y a un check "No merge conflict". Ce qui permet de vérifier en amont qu’on a pas foiré un merge/rebase malencontreux.  Si on attends qq secondes : On voit notre pipeline qui se lance et qui passe au vert si notre publish est ok.  En haut a droite on a un bouton approve qui va concerner des validations "humaines". Tout est vert. On a un pre-merge ok. Un build ok. Pas de reviewer, et pas d’autre règle (j’ai volontairement fait en sorte que ce soit pas trop compliqué pour cet exemple)  Si on clic sur Complete On a un message qui veut supprimer develop. On veut pas. Surtout pas. D’ailleurs on fera en sorte par la suite de rendre develop ineffacable.  Le squash commit est l’unique option, comme indiqué dans les règles de la branche master que l’on vient de définir. On peut si on veut rajouter un commentaire personalisé de commit.   On clique sur Complete merge, quand il est fini, on a cette info : Et si on vérifie nos pipeline, notre DEPLOY master to prod est lancée ! On vient d’automatiser notre branche master. Elle est sécurisée (personne hormis une PR peut la modifier). Elle est tracable et on peut échanger via une interface web sur une operation qui d’habitude se passe en ligne de commande dans un coin.  De plus en rajoutant une seconde pipeline, lorsque la PR est validé puis mergé, on a un deploy automatique vers la prod.…

Azure Devops – Git Flow intro

.net 6.0, CI/CD, DevOps, Git, Git Flow, Non classé

Intro Git Flow tu connais ? non ? Et Git tu connais ? non…ouais faut faire un effort la monsieur (ou madame). Alors git j’explique pas. Si tu connais pas reviens me voir, mais va tout de suite apprendre qq commandes car c’est juste une tuerie ce truc. Quand t’as connus vss, svn ou team foundation server, tu sais que git te sauve la vie. Il est juste incontournable aujourd’hui. Ho tu pourras faire semblant qq heures, mais tu vas vite te retrouver dans l’impasse. Un conseil, tarde pas trop, apprends git ! Et en ligne de commande, pas avec un outil (quoi qu’un outil peut éventuellement t’aider, mais crois moi, fait tout en ligne de commande…) J’ai personnellement tardé à y passer. Trop. Et j’ai aussi utilisé des outils graphiques. Personne n’est parfait ! Alors si tu es encore la, tu sais ce qu’est une branche, un merge ou un rebase, un commit…   C’est quoi Git Flow ? A lire, surtout le premier : voici 3 liens : https://danielkummer.github.io/git-flow-cheatsheet/index.fr_FR.html https://grafikart.fr/tutoriels/git-flow-742 https://git-flow.readthedocs.io/fr/latest/presentation.html Ca cause Git Flow mieux que moi. Je suis ici pour vulgariser. Alors Git Flow c’est un ensemble de commandes git qui permettent de s’organiser autour du code source d’une application. Git Flow propose une stratégie pour gérer le cycle de vie d’une application coté code source, du développement locale jusqu’aux versions releases finale en passant par des branches qui auront un but précis.  En vrai, c’est juste des commandes git ! C’est une surcouche qui facilite la vie. Enfin en théorie. Perso j’utilise les principes de Git Flow mais pas ses commandes.  Pour expliquer Git Flow, on va se mettre dans un contexte, imaginons la vie d’une application, par exemple Tonder, une app web pour flirter.   V0.0.1 alpha – naissance d’une app Il était une fois un développeur en recherche d’amour (il veut ken à donf) et il lui vient une idée d’application qu’il nomma Tonder. Le dev est tout seul sur son projet. Il bosse dessus comme un ouf et sort sa premiere app Tonder Alpha 0.0.1 Il est content, mais c’est une version alpha. Elle tourne sur un serveur à lui dans sa piaule, bancale, comme son code.  V0.1.0 bêta Arpès quelques jours de discussion avec son hamster, son app ressemble à quelque chose, il veut faire tester son app et la rend disponible en version bêta privé. Il a donc une « prod » (toujours dans sa piaule) et il s’appercoit qu’il devient difficile de travailler directement sur sa prod sans prendre le risque de tout péter. Alors il crée une version « staging » sur laquelle il bosse.  Mais pour le moment, il existe qu’une « version » de son code. Aucun historique, tout est en local sur un disque dur de sa machine. Un virus, un feu domestique, un coup de foudre, pire trouver une meuf et avoir des gosses… il peut tout perdre.  Notre dev se dit qu’il serait bien d’avoir un controleur de code source qui lui permettra de  sauvegarder son code sur un cloud le rendre accessible à d’autre dev via ce cloud pouvoir gérer l’historique de son code  Alors il crée son repo Git, qq part où il sait qu’il sera accessible et disponible.  V1.0.0 Première release officielle Ca y est, notre dev sort enfin au grand publique sa super App. Il est fiert. Il est content. Son poil brille (il a pas pris de douche depuis 72h, 15 cannettes de coca trainent sur le bureau, il ne sait même plus quel jour on est, et si d’ailleurs c’est le jour ou la nuit …) Les retours utilisateurs arrivent. Il les traite comme il peut, avec le mécanisme suivant : « je code en dev locale, puis si ca marche je passe sur staging puis si ca plante pas je balance sur la production ». Il fait tout à la main, pas d’automatisation, il se dit qu’il a pas le temps pour ça et que c’est qu’une petite release de plus, ça prendra 5 min… Ils se dit qu’il aimerait bien un peu d’aide… et prendre l’air… V1.0.547 Ca build à donf Notre développeur ne compte plus le nombre de build qu’il a fait. Toujours à la main. Ce coup ci il décide d’automatiser sa chaine de livraison/deploiement continue. Il passe par : son premier build automatisé : https://reactor.fr/azure-devops-pipeline-ci-cd-first-build son premier deploiement automatisé : https://reactor.fr/azure-devops-pipeline-ci-cd-deploy ses versions automatisées : https://reactor.fr/azure-devops-pipeline-ci-cd-versioning multi environnement : https://reactor.fr/azure-devops-pipeline-ci-cd-environnement Il est vraiment satisfait. Certe il vient d’y passé quelques heures. Mais a présent il ne s’occupe ni de son staging, ni de sa prod. Tout est fait automatiquement. Et du coup il peut prendre l’air… ça lui rappel d’ailleurs qu’il a un chien… mais il est où son chien ? V1.1.41 1er co développeur Enfin un peu d’aide ! Un nouveau dev arrive en renfort. Git devient indispensable.  Jusque là, le repo git contient 2 branches, une master et une develop.  La branche develop est celle que les développeurs utilisent.  La master sert de branche « release ». Quand on estime que l’on a quelque chose, on pousse du code depuis la branche develop vers la master.  Une pipeline s’occupe de mettre à jour le staging dès que la branche develop reçoit un commit. Une pipeline s’occupe de mettre à jour la prod dès que la branche master reçoit un commit. Nos deux devs travaillent en simultané sur la branche dev. A chaque commit, on a run de pipeline, ca fait bcp de deploiement pour parfois pas grand chose. Alors nos deux devs décident de travailler en branche.  Chacun aura sa branche au départ. Mais nos développeurs se rendront compte qu’avoir une branche chacun revient à avoir deux versions de la branche develop (en plus de celle ci). Il ne profite pas des avancés de chacun et attendent que la branche develop soit à jour pour récupérer le travail de l’autre, via des cherry-pick ou des rebases hasardeux. C’est un peu confu, et nos deux devs décident d’appliquer Git Flow avec des branches feature (fonctionalités).  Ainsi, ils peuvent travailler tous les deux sur une feature si il…

Azure Devops Pipeline (CI/CD) – Relancer les services

.net 6.0, Asp.net Core, Azure, Azure Devops, CI/CD, Debian, Nginx, Non classé, pipeline

Services Debian systemctl Suite à mon dernier article, j’ai été confronté à un problème que j’ai mis longtemps à identifier. Lorsque je mets à jour mon site web, mettons celui du staging avec une nouvelle publication, je modifie les fichiers à la racine du projet, c’est à dire var/etc/www/staging.blazordemo.reactor.fr/ dans mon cas. Pour ma part j’applique une politique du "j’effface tout" et "j’upload tout". Pas de remplacement de fichier. C’est plus long mais je suis certain qu’il y a pas un mauvais fichier en ligne.  Hormis des pb de cache ou de rafraichissement, mon site web est bien à jour.  Mais pas mon service Kernel. En tout cas sur linux Nginx, lorsque je rajoute par exemple un controler "api/plateform" coté serveur, si je ne relance pas mon service avec les commandes suivantes : sudo systemctl stop kestrel-staging.blazordemo.reactor.fr.service sudo systemctl start kestrel-staging.blazordemo.reactor.fr.service sudo systemctl status kestrel-staging.blazordemo.reactor.fr.service mon api « plateform » ne sera pas accessible. En tapant ces commandes, l’api est accessible. Il serait bon d’inclure cela dans la pipeline, histoire qu’on est rien à faire à la main à chaque run de pipeline si le code c# est modifié coté serveur. Pour cela, il suffit de rajouter ces lignes : – task: SSH@0 displayName: ‘Restart Kestrel Service’ inputs: sshEndpoint: ‘SSH to Ikoula’ runOptions: ‘commands’ commands: | sudo systemctl stop kestrel-staging.blazordemo.reactor.fr.service sudo systemctl start kestrel-staging.blazordemo.reactor.fr.service sudo systemctl status kestrel-staging.blazordemo.reactor.fr.service readyTimeout: ‘20000’ Ca donne ça dans les ‘logs’ des jobs de l’execution du pipeline :