Créer votre première application avec .NET MAUI

À propos de ce tutoriel

C’est le moment de créer votre première application multiplateforme pour Android, IOS, macOS et Windows en C# avec .NET MAUI.

Vous allez apprendre à construire des interfaces utilisateur en XAML et apprendre à utiliser l’architecture MVVM en C#.

Qu’est ce que .NET MAUI ?

.NET MAUI est un framework multiplateforme permettant de créer des applications mobiles et de bureau natives avec C# et XAML.

Clonage du projet

Pour commencer à développer votre première application mobile vous allez devoir cloner le dépôt GitHub dans Visual Studio 2022.

Création des modèles

On débute par la création de nos modèle de données en créant deux classes.

La première va représenter un produit alimentaire :

using System.Text.Json.Serialization;

namespace FoodSearchTutorial.Model;

public class Product
{
    public string Code { get; set; }

    public string Url { get; set; }

    [JsonPropertyName("product_name")]
    public string ProductName { get; set; }

    public string GenericName { get; set; }

    public string Quantity { get; set; }

    [JsonPropertyName("ingredients_text")]
    public string IngredientsText { get;set; }

    public string Brands { get; set; }

    [JsonPropertyName("nutriscore_grade")]
    public string NustriscoreGrade { get; set; }

    public string NustriscoreGradeImage
    {
        get => $"nutriscore_{NustriscoreGrade}.png";
    }

    [JsonPropertyName("image_url")]
    public string ImageUrl { get; set; }
}

La seconde classe va représenter le résultat d’une recherche vers l’API de Open Food Facts :

namespace FoodSearchTutorial.Model;

public class ProductsResult
{
    public int Count { get; set; }
    public int Page { get; set; }
    public int PageCount { get; set; }
    public int PageSize { get; set; }

    public List<Product> Products { get; set; }
}

Création du ViewModel pour la page principale

Nous utilisons une architecture MVVM (modèle-vue-vue modèle) dans ce projet, il nous faut donc créer un ViewModel pour chacune de nos pages.

Dans un premier temps, je vous propose de créer un ViewModel de base qui sera commun à tous les autres :

namespace FoodSearchTutorial.ViewModel;

public partial class BaseViewModel: ObservableObject
{
    public BaseViewModel()
    {

    }

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(IsNotBusy))]
    bool isBusy;

    [ObservableProperty]
    string title;

    public bool IsNotBusy => !isBusy;
}

Ici nous utilisons le .NET Community Toolkit, une collection de helpers qui permet de grandement simplifier le travail des développeurs .NET.

Ce ViewModel dispose d’une propriété IsBusy et IsNotBusy qui va permettre de savoir si notre application est actuellement occupée ou pas.

On retrouve aussi une propriété Title qui va permettre de faire le lien avec le titre de la page associée.