Démarrer rapidement avec Blazor

Au moment d’écrire cet article, une nouvelle version de Visual Studio 2019 V16.3 vient de sortir.

Si vous désirez rapidement démarrer un projet Blazor, il vous faudra faire la mise à jour de votre Visual Studio vers cette version. Ensuite, installer l’extension Blazor de Microsoft DevLabs.

Ensuite dans les options Visual Studio autoriser l’utilisation des versions previews. Effectivement, Blazor Server a été releasé mais pas la partie client. De ce fait, le package nuget est encore en version preview. Tools=>Options=>Environment=>Preview Features et Check Use Previews…

Ensuite, n’oubliez pas de redémarrer Visual Studio. Maintenant que tout est installé, nous désirons créer un projet Blazor. Mais surtout n’utilisez pas les templates via l’interface. Apparement ceux-ci ne sont pas encore prêts, et il vous sera impossible de compiler le projet. Commencez par créer une solution vide. Ensuite, ouvrez une console. Tools=>CommandLine=>Developer Command Prompt.

Comme recommandé sur le site Microsoft utilisez la commande suivante :

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9.19465.2

Maintenant, nous allons pouvoir créer le projet avec la commande suivante pour un projet Blazor Client.

dotnet new blazorwasm

Maintenant, votre projet est créé, il ne vous reste plus qu’à le rajouter à votre solution. Clic droit sur votre solution Add Existing Project, choisissez le fichier .csproj. Et voilà, vous pouvez démarrer votre projet. Cette procédure fonctionne également pour Visual Studio pour Mac à la différence près que pour démarrer le projet, il vous faudra utiliser la commande dotnet run => copier l’adresse donnée dans la console et la coller dans le navigateur de votre choix.

News d’avril (Visual Studio 2019, .Net Core 3.0).

Voici quelques vidéos afin d’avoir très rapidement un aperçu sur les nouveautés concernant Visual Studio 2019 et .Net Core 3.0.

Nouvelles fonctionnalités de Visual Studio 2019 en vidéo. 🙂 

  • New Search experience

  • See content of Clipboard Ring
  • New C# refactorings
  • IntelliCode
  • Search in Autos, Locals and Watch windows
  • Document health indicator
  • Code Cleanup for C#
  • Git Stash
  • Clean Solution Load

Quoi de neuf pour .Net Core 3.0

Whats Coming with NET Core 30

Unifying Windows desktop development with .NET Core 3.0

Welcome AlainM et CedricM

La communauté des .NET Rangers et Azure Rangers

Deux nouveau Rangers nous rejoignent cette semaine !

Avec grand plaisir, nous accueillons Alain Metge qui est un Expert en développement logiciel et plus particulèrement sur les technologies Microsoft. C’est un ancien membre des .NET Rangers by Sogeti. Welcome back Alain !

C’est avec un grand plaisir que nous accueillons Cédric Michel comme membre des Rangers. Il est développeur .Net depuis 2012 et aussi Scum Master. Vous pouvez également le retrouver sur son blog: https://michelcedric.wordpress.com/

Welcome Cédric Michel, from Belgium !

Voir l’article original

[Agile-Scrum] – Préparer votre rétrospectif en vous aidant avec Retromat.

Après la découverte de la vidéo de Jean Pierre Lambert sur le sujet de la préparation de la rétro ( https://www.youtube.com/watch?v=WAkEMoqV5CI ), j’ai décidé d’essayer le format retromat. Je vais vous partager mon expérience et les choix effectués par rapport à l’organisation de la rétrospectif.

L’idée du format qui est présenté dans la vidéo vient du livre suivant : Agile Retrospectives – Making Good Teams Great.

https://www.amazon.fr/Agile-Retrospectives-Making-Teams-Great/dp/0977616649/ref=sr_1_1?ie=UTF8&qid=1548588235&sr=8-1&keywords=Agile+Retrospectives+%E2%80%93+Making+Good+Teams+Great

Ce format est divisé en 5 étapes.

Pour moi, l’objectif de ces 5 étapes a pour but que tout le monde peut parler et s’exprimer ouvertement. Le fait d’organiser la réunion de ce cette façon, facilitera de se rappeler de ce qui s’est passé durant le sprint. Il peut arriver qu’en arrivant à la rétro, on ne se souvienne plus de ce qui a pu se dérouler ou l’on ne sait pas comment l’exprimer.

Au fur et à mesure du déroulement des étapes, cela déclenchera « un mode de créativité chez chaque participant ». Effectivement en progressant durant la réunion les éléments aussi bien positifs que négatifs seront bien présents et plus clairs dans votre tête. Grâce à cette compréhension, tout le monde pourra proposer des idées. Qui définira les actions sur lesquelles l’équipe s’engagera et s’assurera de leur exécution.

Je pense également qu’il est très important d’expliquer à l’équipe pourquoi les 5 étapes sont importantes. Cela vous prendra un peu plus de temps la première fois que vous voudrez utiliser ce format. Mais ensuite, tout roulera comme sur des rails.

open

  • L’ouverture

Avant de nous lancer dans la première étape, je pense qu’il est bon de rappeler, une directive première.

« Peu importe ce que nous découvrons, nous comprenons que chacun a donné le meilleur de lui-même, compte tenu de la situation, de ce qui est connu sur le projet, de ses compétences et des ressources disponibles. » En gros, nous faisons tous du mieux que nous pouvons avec ce que nous avons.

Durant cette étape, il sera bon d’attirer l’attention de tout le monde afin que chacun participe activement à la réunion.

  • Collecte

Ici, nous discuterons de ce qui s’est passé, sans penser pourquoi ni comment les résoudre afin de ne pas tirer de conclusion hâtive. Il est important de bien garder à l’esprit de ne parler que ce qui s’est passé sans aller plus loin. Sinon cela lancera des débats qui peuvent parfois être très longs et finalement ne donnera aucun résultat. De plus durant ce débat si des actions sont déjà émises cela limitera le côté créatif. Ce que j’entends par là, c’est que lorsque vous arriverez à l’étape 4 ou l’équipe devra décider des actions, il ne sera pas rare que plusieurs personnes soumettent les mêmes actions. J’ai pu constater que si durant cette étape, on reste consacré sur l’objectif de celle-ci les actions proposées à l’étape 4 sont beaucoup plus nombreuses et pertinentes.

  • Générer des idées

Durant cette étape nous allons essayer d’émettre des idées sur ce qui s’est passé et surtout pourquoi cela s’est passé. Grâce à cette étape, vous y verraient plus clair. Des idées d’actions commenceront à murir dans votre tête 😊.

  • Décider des actions

Maintenant, chacun va pouvoir exprimer ces actions. Il faudra que celle-ci soit réalisable dans un temps donné et s’assurer que l’équipe en a le pouvoir. Je vous conseille pour cela de vous familiariser avec la notion d’objectifs SMART. Merci Wikipédia.

https://fr.wikipedia.org/wiki/Objectifs_et_indicateurs_SMART

smart

La notion d’objectif SMART est très importante, car il faut que l’équipe soit confiante sur la réalisation des actions. Dans le cas contraire, vous pourriez vous retrouver plus tard avec des personnes réticentes quant à leur participation au rétro. « Pourquoi je viendrais au rétro puisque de toute façon les actions ne sont pas réalisées ? »

  • Clôture

Il s’agira de faire le point sur ce qu’il s’est passé durant la rétro et de laisser chacun exprimer son sentiment. On fait la rétro de la rétro !

Je clôture ici le côté un peu plus théorique, le but de cet article étant de partager également mon expérience autour de l’utilisation de cette méthode d’organisation. Si vous désirez en savoir plus sur cette méthode, je vous invite à lire le livre : Agile Retrospectives – Making Good Teams Great.

La mise en pratique

Voici donc en détail ma première mise en Place de ce format en m’inspirant de Retromat. Retromat est un site reprenant plein d’idées réalisables pour chaque étape. https://retromat.org/fr/

Pour moi, il était important d’avoir un fil conducteur entre chaque étape et dans la mesure du possible utiliser l’étape précédente pour embrayer naturellement vers la suivante. Pour cette première mise en pratique, je voulais que chacun puisse s’exprimer sur ce qu’il ressentait au fond de lui. Pour ensuite comprendre ce qui s’était passé et finalement trouver de potentielles solutions aux problèmes s’il y en a.

Et oui, il y a également du positif, il ne faut pas seulement parler des points négatifs !

  • ECVP

Le premier exercice choisi est l’ECVP pour Explorateur, Client, Vacancier, Prisonnier. Vous pouvez laisser chaque personne écrire son choix et récupérer les résultats de manière anonyme. Cela assurera que tout le monde puisse écrire ce qu’il pense sans peur d’être juger par les autres. Dans notre cas, la maturité de l’équipe nous a permis de faire l’exercice de vive voix. Ensuite nous comptabilisons le nombre de personnes dans chacun des statuts. Ensuite l’équipe discute des résultats obtenus. J’ai été souvent surpris de voir qu’il y avait souvent beaucoup de clients et peu d’explorateurs et très rarement de vacancier. Mais finalement, chaque personne au fur et à mesure devenait exploratrice et participait activement. Je n’ai jamais eu de prisonnier.

ecvp

  • Mad Sad Glad

Pour la collecte, nous demandons à chacun d’écrire au moins un évènement durant lequel il s’est senti content 😊, triste ☹ et en colère >:(. Laisser le temps a tout le monde d’écrire ses tickets. Si vous allez trop vite, j’ai l’impression que les personnes n’ayant pas trop d’idées finiront par reprendre les idées des autres au lieu de réfléchir par eux même et donc toutes les situations ne seront probablement pas traitées. Pour ce faire, nous utilisons des post-it et chacun à tour de rôle va poser au minimum ces 3 Post-its au tableau et s’exprime par rapport à ces sentiments ressentis durant le sprint. Je laisse également l’image suivante projetée pour que les personnes se posent les questions affichées ci-dessous.

msd

  • Les 5 pourquoi

À la suite des problèmes identifiés précédemment, nous regroupons ensuite les idées communes. Nous reprenons les éléments afin de trouver la cause racine.

5why

  • Fusion

La cause des problèmes étant maintenant identifiée, nous pouvons réfléchir sur les futures actions à réaliser.

fusion

Grâce à cela, vous aurez la liste des actions à réaliser. Voir Les actions retenues *

  • Plus et delta

Afin d’essayer de ressentir comment les personnes ont ressenti la rétro, on demande à chacun d’écrire ce qu’il a le plus aimé, mais aussi ce qu’il souhaiterait modifier.

+delta

Retour d’expérience sur le choix des étapes.

Ce format a été très utile et apprécié. Et lorsque j’ai soumis l’idée de changer les étapes régulièrement, j’ai fait face à plusieurs réactions.

Au début, l’équipe ne voulait pas changer le format. Certains l’avaient fortement apprécié et ne voulaient pas changer, d’autres avaient peur du temps perdu à expliquer les étapes si celle-ci venait à changer chaque fois.

Après 3 sprints, l’équipe a trouvé cela lassant et a demandé de changer une étape à la fois. Finalement, nous l’avons utilisé 5 fois avant de changer entièrement les 5 étapes. Car lorsque j’avais préparé les étapes, j’ai essayé d’avoir un fil conducteur entre chacune d’entre elles. Et il me paraissait difficile de n’en changer qu’une seule à la fois et de garder une certaine cohérence entre les étapes.

*Les actions retenues

N’ayez pas peur de prendre des actions même si les personnes ne sont pas sures du résultat obtenu. Dans ce cas, vous pouvez toujours rappeler à l’équipe que nous pouvons essayer cette action. Et si le résultat obtenu ne correspond pas aux attentes de l’équipe alors celle-ci pourra décider d’arrêter cette action ou de la modifier. Durant la prochaine rétro, vous pouvez aborder le sujet d’une manière différent, et donc de nouvelles idées émergeront. Après tout, nous sommes dans un système empirique. Nous inspectons, adaptons et recommençons (Sprint). On peut donc voir cela comme de l’amélioration continue.

Les actions seront affichées sur notre board physique que nous utilisons chaque jour lors du Daily. De manière quasi naturelle, chaque jour, l’équipe discute des actions/alertes. Il est donc très rare qu’une action ne soit pas réalisée. Malheureusement, il arrive que certaines actions ne soient pas réalisées. Il s’agit toujours d’action où l’équipe n’a pas la main dessus ☹

Exemple : pour le projet, nous avons besoin d’un environnement de test, mais seule une autre équipe a l’autorisation de faire cela (dépendance avec un autre département de l’entreprise qui n’agit pas ou n’est pas formé sur les besoins, mais veut tout de même garder la main sur cette partie).

Je vous conseille également d’ajouter la date à laquelle l’action est écrite sur le tableau. Cela permettra de vérifier qu’une action ne restera pas trop longtemps sur le tableau. Cela vous sera également utile pour pousser une demande qui ne serait pas traitée, mais deviendrait frustrante pour l’équipe si celle-ci n’est pas réalisée. Si dans le pire des cas l’action n’est pas réalisée après plusieurs sprints, vous pourrez retourner voir votre hiérarchie en signalant que l’équipe aimerait progresser, mais est ralentie sur un point sur lequel elle n’a pas la main.

Autre avantage de la méthode

Il m’est déjà arrivé de commencer une rétro sans idées précises de sujet à aborder, mais grâce à ce format, de nombreux points ont été révélés avec des idées d’actions auxquels on ne s’attend pas et auxquels l’équipe peut adhérer. Ceci facilitera du coup la mise en place de chaque action que l’équipe décide de réaliser.

Voir ma présention power point

Création d’un site ASP.NET Core (1.1) Web Application MVC à partir d’un template vide

Vous pourrez découvrir ici comment créer une application web MVC en .Net Core. Nous allons commencer l’application depuis un template vide. Ainsi vous pourrez voir comment ajouter les éléments que vous avez réellement besoin. Cela évitera d’avoir dès le début toutes les dépendances que vous n’avez pas forcément besoin.

Pour ce faire, nous allons créer un projet de type ASP.NET Core Web Application(.Net Core)

Ensuite dans le menu déroulant sélectionnez ASP.NET Core 1.1. C’est ici que nous allons sélectionner le template vide.

Votre projet est maintenant créé. Si vous allez dans l’object Startup, vous pourrez voir que l’on écrit dans Response ce que l’on désire afficher.

A ce niveau ci, vous pouvez déja lancer votre site. Et vous verrez votre Hello World. Vous venez de faire votre première application ASP.NET Core mais sans MVC.

Nous allons donc maintenant rajouter la partie MVC. Dans un premier temps, il vous faudra ajouter le package Nuget Microsoft.AspNetCore.Mvc. Pensez a bien installer la dernière version stable.

Maintenant que le nécessaire est installé, nous allons configurer dans la classe Startup l’utilisation de MVC. Il vous faudra ajouter dans la méthode Configure ceci


app.UseMvc(routes =>
{
    routes.MapRoute(
    name:"default",
    template:"{controller=Home}/{action=Index}/{id?}");
});

Esnuite dans la méthode ConfigureServices ajoutez ceci


services.AddMvc();

Dans votre projet ajoutez un répertoire Controllers. Ensuite sur votre répertoire (clic droit) ajouter un nouvel élément. Choisissez MVC Controller Class faites OK.

Votre premier controleur est ajouté. Nous allons donc créer la vue associée à ce premier controleur. Pour cela sur votre projet ajoutez un répertoire Views. Dans ce répertoire créer un sous répertoire Home qui correspond au nom du controleur. Ensuite sur votre répertoire (clic droit) ajouter un nouvel élément. Cette fois choisissez MVC View Page, garder le nom Index.cshtml.

Nous avons donc créé les éléments Controleur et Vue du design patern MVC (Modéle Vue Controleur). Donc nous allons maintenant créer la partie Modèle. Pour cela sur votre projet ajoutez le répertoire Models. Nous allons créer un simple objet (Person). Sur votre répertoire Models ajouter un nouvel élément de type Class (nom : Person).

Voici la classe Person


public class Person
{
    public int ID { get; set; }

    public string LastName { get; set; }

    public string FirstName { get; set; }
}

Nous allons donc utiliser cet objet dans le controleur pour ensuite le passer à la vue.


public class HomeController : Controller
{
    // GET: /<controller>/
    public IActionResult Index()
    {
        Person person = new Person()
        {
            ID = 1,
            LastName = "Michel",
            FirstName = "Cedric"
        };
        return View(person);
    }
}

Dans votre vue créée plus tôt (Home/Index) nous allons utiliser cet objet et l’afficher grâce au moteur de vue Razor.


@model AspNetCoreBlogTutorial.Models.Person
@{
    ViewData["Title"] = "Index";

}



<h2>
Home
</h2>





Hello @Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName) from our View


Lancez votre application :

Grâce à tout cela, vous venez de faire une application application Web en ASP.NET Core MVC :).

Vous pouvez trouver la solution complète sur GitHub dans la branche site-création.

Dans le prochain article, nous parlerons d’EntityFrameworkCore en Code First.

Cet article a été réalisé avec la collaboration d’Emmanuel Di Nicola

Méthode d’extension – Sérialisation Xml d’un objet en .NetStandard et .NetFramework

Voici une méthode d’extension vous permettant de sérialiser un objet en XML.

J’ai cré cette méthode d’extension dans une library de type .NetStandard. Grâce à cela, vous pourrez l’utiliser dans un projet en .NetFramework ainsi qu’en .NetCore.

Pour créer un une library en .NetStandard, créer un projet comme ceci :

Voici le code de la méthode.
public static class XmlExtension
{
    public static string Serialize<T>(this T value)
    {
        if (value == null) return string.Empty;

        var xmlSerializer = new XmlSerializer(typeof(T));

        using (var stringWriter = new StringWriter())
        {
            using (var xmlWriter = XmlWriter.Create(stringWriter, new XmlWriterSettings { Indent = true }))
            {
                xmlSerializer.Serialize(xmlWriter, value);
                return stringWriter.ToString();
            }
        }
    }
}

Si vous créez cette méthode d’extension dans un projet de type .NetStandard, il vous faudra ajouter le package nuget suivant XmlSerializer.

XmlExtension

En .NetStandard l’objet XmlSerializer se trouve dans le Namespace System.Xml.Serialization et provient de

Or en .Net Framework celui-ci provient de 

Retrouver le code source de la version .NetStandard avec des Test Unitaires sur le GitHub.

Utilisation de l’extension GitHub pour Visual Studio 2017 Community

Dans cet article, vous pourrez voir comment utiliser l’extension GitHub pour Visual Studio. Dans le précédent article Démarer avec Vistual studio 2017 Community ASP.NET Core 1.1 (Préparation de l’environement), vous avez pu voir comment installer celui-ci. Maintenant vous allez pouvoir prendre en main cette extension afin de vous connecter sur votre compte, créer un repository, cloner un repository qui vous appartient et également ceux d’un autre membre. Ceci vous permettra de récupérer le code pour les prochains articles. Si vous ne maitrisez pas Git, vous trouverez toutes les infos nécessaires ici.

  • Se connecter avec son compte GitHub.

Pour ce faire ouvrez le Team Explorer normalement présent dans la partie de droite. Sinon vous pouvez utiliser le raccourci (Ctrl+µ,Ctrl+m). Ou encore en passant par le menu View.

une fois celui-ci ouvert, dans la partie GitHub vous pouvez vous connecter ou vous enregistrez si vous n’avez pas encore de compte.

8

Maintenant connectez-vous.

9

  • Créer un repository

Dans le team explorer maintenant vous pouvez voir un bouton create repository. Cliquez…

10

Remplissez les informations nécessaires. L’extension vous permet de choisir un template de fichier .gitignore que vous désirez. Et voilà le repository est créé.

11

  • Ajouter une solution

Maintenant nous allons créer une solution pour cela, cliquez sur New… Dans la partie en haut à gauche faites un filtre sur solution. Sélectionnez Blank Solution. Donnez-lui un nom puis faites OK.

12

  • Faire le commit et push

Dans le Team Explorer cliquez sur Changes. Là vous êtes obligé de mettre une description.

13

Maintenant vous pouvez soir faire un commit (les modifications resteront en local) soit un commit and Push (les modifications seront envoyées sur le serveur) ou enfin Commit and Sync (Vos modifications seront envoyées sur le serveur et vous faites un pull donc prendre les modifications du serveur en local).

14

Vos modifications sont maintenant visibles sur votre compte GitHub.

15.PNG

  • Cloner un repository GitHub (dont vous êtes le créateur)

Dans le team explorer (Manage connections 1) puis Clone (2)

16

Choissisez le repository et cliquez sur Clone. Et voila le repository est en local 🙂

17

  • Cloner un repository GitHub (d’un autre membre), vous sera utile pour la suite des articles. URl du repository

Open repository

Dans le prochain article nous verrons comment créer une application web MVC en ASP.NET Core