GitHub Copilot et Telerik ASP.NET Core pour un développement amélioré

Un développeur expérimenté donne le coup d’envoi à GitHub Copilot pour générer du code avec l’IA. Voyez ce qu’il pense et comment cela pourrait fonctionner pour vous.

Copilote GitHub révolutionne le codage en tant que programmeur IA, vous aidant à créer du code plus rapidement et plus efficacement. Il comprend intuitivement le contexte de vos commentaires et de votre code, suggérant rapidement des lignes individuelles et des routines complètes.

Cet outil innovant est le fruit d’un effort de collaboration entre GitHub, OpenAI et Microsoft, alimenté par un modèle d’IA générative de pointe. Copilot analyse non seulement votre fichier actuel, mais également les fichiers liés au fur et à mesure que vous codez, offrant des suggestions intelligentes de saisie semi-automatique dans votre éditeur de texte.

Image d’une invite personnalisée dans Leonardo.ai

Cet outil n’est pas seulement une question de vitesse : il transforme le paysage de la programmation en rendant le codage plus efficace et plus accessible. Les recherches de GitHub mettent en évidence le rôle important de Copilot dans l’amélioration de la productivité et de la satisfaction des développeurs. Cela élimine les obstacles au développement de logiciels pour les nouveaux arrivants et atténue les défis liés à l’écriture de code de base.

L’impact de l’IA générative sur l’économie sera monumental. Les développeurs et les entreprises adoptent déjà des outils de codage basés sur l’IA comme GitHub Copilot, marquant ainsi une nouvelle ère dans le développement de logiciels.

GitHub Copilot est un outil essentiel qui peut nous aider, en tant que développeurs, à écrire du code plus rapidement et plus efficacement. Il peut révolutionner le monde de la programmation en rendant le codage plus accessible et en abaissant les barrières d’entrée pour les nouveaux développeurs.

De quoi parle l’article?

Dans cet article, je vais démontrer comment GitHub Copilot peut aider à produire du code à l’aide de GitHub Copilot et expliquer comment j’ai obtenu le résultat souhaité. (Cet article a été rédigé en décembre 2023.)

J’utilise activement GitHub Copilot depuis quatre mois et j’ai pu constater par moi-même ses capacités. Disons que vous connaissez déjà la version payante de ChatGPT-4 ou Bing Chat, qui intègre ChatGPT-4 connecté au Web. Vous remarquerez que les capacités de génération de code de GitHub Copilot sont similaires à celles de ces outils. Il est intéressant de noter que lorsqu’un outil peine à générer du code, d’autres sont souvent confrontés au même défi.

GitHub Copilot s’intègre de manière transparente à Visual Studio 2022 et Visual Studio Code. Un développement notable a été l’introduction d’une nouvelle fonctionnalité pour Visual Studio 2022 Preview, lancée en décembre 2022. Cette amélioration enrichit considérablement l’expérience Visual Studio IDE en ajoutant des descriptions de validation.

Utilisations dans le monde réel

J’ai 30 ans d’expérience dans la conception de milliers de composants et d’un modèle de cadre d’IA basé sur une structure de base de données avec une conscience de soi des relations de champs et de tables créées avec une intelligence artificielle mixte. Grâce à lui, l’un des résultats a été une discussion avec la base de données où l’utilisateur final peut poser n’importe quelle question sur les données stockées et obtenir une réponse précise à 90 %.

C’est mon expérience avec l’IA, alors lorsque ChatGPT a été lancé, j’ai vu le potentiel de l’assistance artificielle, comme GitHub Copilot.

Cette introduction que j’ai faite avait pour but de vous amener à mon point de vue et de dire :

Si vous disposez des connaissances nécessaires, connaissez les noms des composants et des technologies et comprenez comment imaginer une machine « pensant » avec les commandes qu’elle reçoit, vous deviendrez un excellent ingénieur prompt.

Que puis-je obtenir avec l’IA ?

Cela dépend de toi. Combien de temps allez-vous pratiquer les invites pour trouver la meilleure solution à vos solutions, projets et problèmes ? J’ai passé quatre heures à tester les invites pour rédiger cet article, demandant à GitHub Copilot de fournir un code qui répond à mes exigences.

L’exigence était de générer un modèle avec les commandes EF Core pour créer un formulaire permettant de lire ces champs à l’aide de Kendo UI et du code permettant au contrôleur d’envoyer un e-mail. Pour les validations, la date de naissance doit être supérieure au 01/01/1900 à DateTime.Now et renvoyer une date supérieure à DateTime.Now+1, en validant l’e-mail avec regex.

Qu’est-ce qui va bien ou pas ?

D’après mon expérience, j’ai observé que ce qui est nouveau en matière de design, de langages et de modèles n’est pas très bien généré. Mais depuis la dernière mise à jour de ChatGTP-4, qui date actuellement d’avril 2023, si la technologie est plus ancienne, le résultat est meilleur que les nouvelles.

Commençons par ce qui ne fonctionne pas exceptionnellement bien avec GitHub Copilot :

• Code issu de technologies récentes comme .NET MAUI
• Coder à partir d’Angular à l’aide d’un formulaire basé sur un modèle
• Nouveaux modèles de .NET 8

Voici quelques-unes des choses que GitHub Copilot fait bien avec les frameworks d’interface utilisateur Telerik :

• Remplace Intellisense, en ajoutant des suggestions complexes qui ont du sens
• Code pour WinForms
• Code pour les modèles
• Code pour le contrôleur
• Code pour ViewModel
• Plus de 90% du code de test xUnit est efficace avec l’observation qui pourrait générer des tests trop triviaux

Invites utilisées pour ce message

J’ai commencé à créer une invite pour le modèle. Voyons cette invite ci-dessous :

Veuillez générer un code C# avec ces exigences : Créez un modèle d’admission dans l’espace de noms TelerikAspNetCoreApp1.Model, ajoutez des propriétés d’affichage pour les champs : Id en tant que clé et type de GUID générés automatiquement, Nom en tant qu’unique max 100 caractères, Date d’anniversaire, E-mail, Sujet max 255, Description max 4096, date de retour.

Veuillez ajouter les validations EF Core pour la date d’anniversaire supérieure au 01/01/1900 à DateTime.Now, et renvoyer la date supérieure à DateTime.Now+1, valider l’e-mail avec regex.

Structure de l’invite :

1. J’ai commencé à demander du C#.
2. J’ai donné le nom du modèle.
3. J’ai suggéré l’espace de noms.
4. J’ai demandé les propriétés d’affichage.
5. J’ai identifié la clé et le maximum à partir du nom, du sujet et de la description.
6. Pour la validation, j’ai demandé la validation EF Core et quelles étaient les exigences pour certains champs.

Ci-dessous le résultat pour le modèle (le projet est disponible sur mon GitHub) :

1.	using System.ComponentModel.DataAnnotations;
2.	using System.ComponentModel.DataAnnotations.Schema;
3.	
4.	public class Admission
5.	{
6.	    [Key]
7.	    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
8.	    public Guid Id { get; set; }
9.	
10.	    [Required]
11.	    [StringLength(100)]
12.	    [Index(IsUnique = true)]
13.	    public string Name { get; set; }
14.	
15.	    [Required]
16.	    [DataType(DataType.Date)]
17.	    [Display(Name = "Date Birthday")]
18.	    [CustomValidation(typeof(Admission), "ValidateDateOfBirth")]
19.	    public DateTime DateBirthday { get; set; }
20.	
21.	    [Required]
22.	    [DataType(DataType.EmailAddress)]
23.	    [RegularExpression(@"^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$", ErrorMessage = "Invalid Email Format")]
24.	    public string Email { get; set; }
25.	
26.	    [StringLength(255)]
27.	    public string Subject { get; set; }
28.	
29.	    [StringLength(4096)]
30.	    public string Description { get; set; }
31.	
32.	    [Required]
33.	    [DataType(DataType.Date)]
34.	    [Display(Name = "Return Date")]
35.	    [CustomValidation(typeof(Admission), "ValidateReturnDate")]
36.	    public DateTime ReturnDate { get; set; }
37.	
38.	    public static ValidationResult ValidateDateOfBirth(DateTime dateOfBirth, ValidationContext context)
39.	    {
40.	        if (dateOfBirth < new DateTime(1900, 1, 1) || dateOfBirth > DateTime.Now)
41.	        {
42.	            return new ValidationResult("Date Birthday must be greater than 01/01/1900 and less than current date.");
43.	        }
44.	
45.	        return ValidationResult.Success;
46.	    }
47.	
48.	    public static ValidationResult ValidateReturnDate(DateTime returnDate, ValidationContext context)
49.	    {
50.	        if (returnDate <= DateTime.Now.AddDays(1))
51.	        {
52.	            return new ValidationResult("Return Date must be greater than current date plus one day.");
53.	        }
54.	
55.	        return ValidationResult.Success;
56.	    }
57.	}
58.	 

Il n’y a eu qu’une seule erreur : le code a été généré sans l’espace de noms. Mais j’ai résolu ce problème en ajoutant simplement l’espace de noms :

1. <![endif]>namespace  TelerikAspNetCoreApp1.Model;

Certaines choses que j’ai apprises :

• Il serait préférable que vous demandiez des validations EF Core. Sinon, Copilot génère une méthode de validation.
• Vous devez demander une propriété d’affichage. Sinon, Copilot ne le génère pas.
• Ne demandez pas le formulaire et le modèle ensemble. Cela pourrait ne pas fonctionner.
• Si vous essayez de régénérer un modèle, effacez le chat Copilot avant.

J’ai commencé à créer une invite pour le formulaire. Voyons cette invite ci-dessous :

Veuillez utiliser Kendo UI pour jQuery avec le style Html Helper pour le projet ASP.NET Core MVC, créez un formulaire Kendo UI à publier dans Admission Home Controller. En utilisant le modèle Admission, veuillez créer tous les champs à l’aide de Kendo UI et des étiquettes pour chaque champ, et avec la validation respective. Pour publier le formulaire, générez une admission qui doit récupérer toutes les données du modèle et envoyer à un e-mail de consts pEmailFrom à pEmailTo définissant une fausse valeur pour les consts.

Structure de l’invite :

1. J’ai précisé que je souhaitais utiliser Kendo UI pour jQuery avec HTML Helper.
2. Je voulais l’utiliser pour un projet ASP.NET Core.
3. J’ai demandé un formulaire d’interface utilisateur Kendo.
4. J’ai identifié le Modèle (il fonctionne avec le modèle qui existe déjà).
5. J’ai demandé des champs en utilisant Kendo UI avec des étiquettes et une validation.
6. J’ai demandé le code dans le contrôleur.

Ci-dessous le résultat pour le modèle (le projet est disponible sur mon GitHub) :

1.	@model TelerikAspNetCoreApp1.Model.Admission
2.	@{
3.	    ViewData["Title"] = "Admission";
4.	}
5.	
6.	@using (Html.BeginForm(“Admission”, “Home”, FormMethod.Post))
7.	{
8.	    @Html.AntiForgeryToken()
9.	
10.	    <div class="form-horizontal">
11.	        <h4>Admission</h4>
12.	        <hr />
13.	        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
14.	
15.	        <div class="form-group">
16.	            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
17.	            <div class="col-md-10">
18.	                @(Html.Kendo().TextBoxFor(model => model.Name)
19.	                    .HtmlAttributes(new { @class = "k-textbox" }))
20.	                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
21.	            </div>
22.	        </div>
23.	
24.	        <div class="form-group">
25.	            @Html.LabelFor(model => model.DateBirthday, htmlAttributes: new { @class = "control-label col-md-2" })
26.	            <div class="col-md-10">
27.	                @(Html.Kendo().DatePickerFor(model => model.DateBirthday)
28.	                    .HtmlAttributes(new { @class = "k-datepicker" }))
29.	                @Html.ValidationMessageFor(model => model.DateBirthday, "", new { @class = "text-danger" })
30.	            </div>
31.	        </div>
32.	
33.	        <div class="form-group">
34.	            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
35.	            <div class="col-md-10">
36.	                @(Html.Kendo().TextBoxFor(model => model.Email)
37.	                    .HtmlAttributes(new { @class = "k-textbox" }))
38.	                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
39.	            </div>
40.	        </div>
41.	
42.	        <div class="form-group">
43.	            @Html.LabelFor(model => model.Subject, htmlAttributes: new { @class = "control-label col-md-2" })
44.	            <div class="col-md-10">
45.	                @(Html.Kendo().TextBoxFor(model => model.Subject)
46.	                    .HtmlAttributes(new { @class = "k-textbox" }))
47.	                @Html.ValidationMessageFor(model => model.Subject, "", new { @class = "text-danger" })
48.	            </div>
49.	        </div>
50.	
51.	        <div class="form-group">
52.	            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
53.	            <div class="col-md-10">
54.	                @(Html.Kendo().TextAreaFor(model => model.Description)
55.	                    .HtmlAttributes(new { @class = "k-textarea" }))
56.	                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
57.	            </div>
58.	        </div>
59.	
60.	        <div class="form-group">
61.	            @Html.LabelFor(model => model.ReturnDate, htmlAttributes: new { @class = "control-label col-md-2" })
62.	            <div class="col-md-10">
63.	                @(Html.Kendo().DatePickerFor(model => model.ReturnDate)
64.	                    .HtmlAttributes(new { @class = "k-datepicker" }))
65.	                @Html.ValidationMessageFor(model => model.ReturnDate, "", new { @class = "text-danger" })
66.	            </div>
67.	        </div>
68.	
69.	        <div class="form-group">
70.	            <div class="col-md-offset-2 col-md-10">
71.	                <input type="submit" value="Create" class="btn btn-default" />
72.	            </div>
73.	        </div>
74.	    </div>
75.	}

Code pour le contrôleur domestique :

1.	private const string pEmailFrom = "fake@example.com";
2.	private const string pEmailTo = "destination@example.com";
3.	
4.	[HttpPost]
5.	[ValidateAntiForgeryToken]
6.	public ActionResult Admission(Admission admission)
7.	{
8.	    if (ModelState.IsValid)
9.	    {
10.	        
11.	        var mail = new MailMessage(pEmailFrom, pEmailTo)
12.	        {
13.	            Subject = admission.Subject,
14.	            Body = $"Name: {admission.Name}\nDate Birthday: {admission.DateBirthday}\nEmail: {admission.Email}\nDescription: {admission.Description}\nReturn Date: {admission.ReturnDate}"
15.	        };
16.	
17.	        var smtpServer = new SmtpClient("smtp.example.com");
18.	        smtpServer.Send(mail);
19.	
20.	        return RedirectToAction("Index");
21.	    }
22.	
23.	    return View();
24.	}

Sa première réponse était paresseuse, indiquant la nécessité d’ajouter les autres champs. Les gens disent que ChatGPT-4 devient paresseux, et GitHub Copilot aussi.

Alors, j’ai fait une autre invite :

Pour tous les champs, s’il vous plaît.

Ci-dessous le formulaire exécuté sur le navigateur :

Voici la démonstration des validations pour les champs :

Conclusion

GitHub Copilot est en développement, à mon avis, et a de la place pour croître en qualité. Si vous avez besoin de démarrer quelque chose de nouveau ou de réécrire des projets existants, vous disposez d’un bon assistant. Peut-être que le GitHub Copilot manque quelque chose dans les composants de l’interface utilisateur de Kendo, mais il génère un bon pourcentage du code.

Pour réussir avec Telerik UI et GitHub Copilot, vous devez passer du temps à tester et à apprendre à inviter, et la règle est ni douleur, ni gain.

Peut-être qu’à l’avenir, quelqu’un créera un plugin pour ChatGPT-4 : serait-ce vous ? Ou peut-être que Microsoft fera évoluer GitHub Copilot pour une meilleure intégration.