Tutoriel : Créer une application de base de données client

2025-06-10

Ce didacticiel crée une application simple pour gérer une liste de clients. Dans ce cas, il introduit une sélection de concepts de base pour les applications d’entreprise dans UWP. Vous allez apprendre à :

Implémentez des opérations créer, lire, mettre à jour et supprimer sur une base de données SQL locale.
Ajoutez une grille de données pour afficher et modifier les données client dans votre interface utilisateur.
Organiser les éléments d’interface utilisateur ensemble dans une disposition de formulaire de base.

Le point de départ de ce didacticiel est une application à page unique dotée d'une interface utilisateur minimale et de fonctionnalités de base, basée sur une version simplifiée de l'exemple d'application de la base de données des commandes client . Il est écrit en C# et EN XAML, et nous nous attendons à ce que vous ayez une connaissance de base des deux langages.

Page principale de l’application de travail

Conditions préalables

Une fois que vous avez cloné/téléchargé le dépôt, vous pouvez modifier le projet en ouvrant CustomerDatabaseTutorial.sln avec Visual Studio.

Remarque

Ce tutoriel est basé sur l’exemple de base de données commandes client qui a récemment été mis à jour pour utiliser WinUI et le Kit de développement logiciel (SDK) d’application Windows. Jusqu’à ce que ce didacticiel et ce code soient mis à jour, il y aura des différences entre les deux exemples.

Partie 1 : Code d’intérêt

Si vous exécutez votre application immédiatement après l’avoir ouvert, vous verrez quelques boutons en haut d’un écran vide. Bien qu’elle ne soit pas visible pour vous, l’application inclut déjà une base de données SQLite locale approvisionnée avec quelques clients de test. À partir de là, vous allez commencer par implémenter un contrôle d’interface utilisateur pour afficher ces clients, puis passer à l’ajout d’opérations sur la base de données. Avant de commencer, voici où vous allez travailler.

Points de vue

CustomerListPage.xaml est l’affichage de l’application, qui définit l’interface utilisateur de la page unique dans ce tutoriel. Chaque fois que vous devez ajouter ou modifier un élément visuel dans l’interface utilisateur, vous le ferez dans ce fichier. Ce tutoriel vous guide tout au long de l’ajout de ces éléments :

Une RadDataGrid pour afficher et modifier vos clients.
Un StackPanel afin de définir les valeurs initiales d’un nouveau client.

ViewModels

ViewModels\CustomerListPageViewModel.cs est l’emplacement de la logique fondamentale de l’application. Chaque action de l’utilisateur effectuée dans l’affichage est passée dans ce fichier pour traitement. Dans ce tutoriel, vous allez ajouter un nouveau code et implémenter les méthodes suivantes :

CreateNewCustomerAsync, qui initialise un nouvel objet CustomerViewModel.
DeleteNewCustomerAsync, qui supprime un nouveau client avant son affichage dans l’interface utilisateur.
DeleteAndUpdateAsync, qui gère la logique du bouton De suppression.
GetCustomerListAsync, qui récupère une liste de clients à partir de la base de données.
SaveInitialChangesAsync, qui ajoute les informations d’un nouveau client à la base de données.
UpdateCustomersAsync, qui actualise l’interface utilisateur pour refléter les clients ajoutés ou supprimés.

CustomerViewModel est un wrapper pour les informations d’un client, qui indique si celles-ci ont été récemment modifiées ou non. Vous n’aurez pas besoin d’ajouter quoi que ce soit à cette classe, mais certains du code que vous ajouterez ailleurs le référenceront.

Pour plus d’informations sur la construction de l’exemple, consultez la vue d’ensemble de la structure de l’application.

Partie 2 : Ajouter DataGrid

Avant de commencer à utiliser des données client, vous devez ajouter un contrôle d’interface utilisateur pour afficher ces clients. Pour ce faire, nous allons utiliser un contrôle prédéfini tiers RadDataGrid. Le package NuGet Telerik.UI.for.UniversalWindowsPlatform a déjà été inclus dans ce projet. Ajoutons la grille à notre projet.

Ouvrez Views\CustomerListPage.xaml à partir de l’Explorateur de solutions. Ajoutez la ligne de code suivante dans la balise Page pour déclarer un mappage à l’espace de noms Telerik contenant la grille de données.
```
    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
```

Sous le CommandBar dans le principal RelativePanel de la Vue, ajoutez un RadDataGrid, avec quelques options de configuration de base :

<Grid
    x:Name="CustomerListRoot"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <RelativePanel>
        <CommandBar
            x:Name="mainCommandBar"
            HorizontalAlignment="Stretch"
            Background="AliceBlue">
            <!--CommandBar content-->
        </CommandBar>
        <telerikGrid:RadDataGrid
            x:Name="DataGrid"
            BorderThickness="0"
            ColumnDataOperationsMode="Flyout"
            GridLinesVisibility="None"
            GroupPanelPosition="Left"
            RelativePanel.AlignLeftWithPanel="True"
            RelativePanel.AlignRightWithPanel="True"
            RelativePanel.Below="mainCommandBar" />
    </RelativePanel>
</Grid>

Vous avez ajouté la grille de données, mais elle a besoin de données à afficher. Ajoutez les lignes de code suivantes :
```
ItemsSource="{x:Bind ViewModel.Customers}"
UserEditMode="Inline"
```
Maintenant que vous avez défini une source de données à afficher, RadDataGrid gère la plupart de la logique d’interface utilisateur pour vous. Toutefois, si vous exécutez votre projet, vous ne verrez toujours aucune donnée affichée. C’est parce que ViewModel ne le charge pas encore.

Partie 3 : Analyse des clients

Lorsqu’il est initialisé, ViewModels\CustomerListPageViewModel.cs appelle la méthode GetCustomerListAsync . Cette méthode doit récupérer les données client de test à partir de la base de données SQLite incluse dans le didacticiel.

Dans ViewModels\CustomerListPageViewModel.cs, mettez à jour votre méthode GetCustomerListAsync avec ce code :
```
public async Task GetCustomerListAsync()
{
    var customers = await App.Repository.Customers.GetAsync(); 
    if (customers == null)
    {
        return;
    }
    await DispatcherHelper.ExecuteOnUIThreadAsync(() =>
    {
        Customers.Clear();
        foreach (var c in customers)
        {
            Customers.Add(new CustomerViewModel(c));
        }
    });
}
```
La méthode GetCustomerListAsync est appelée lorsque ViewModel est chargé, mais avant cette étape, elle n’a rien fait. Ici, nous avons ajouté un appel à la méthode GetAsync dans Repository/SqlCustomerRepository. Cela lui permet de contacter le référentiel pour récupérer une collection énumérable d’objets Customer. Il les analyse ensuite en objets individuels, avant de les ajouter à son ObservableCollection interne pour qu’ils puissent être affichés et modifiés.
Exécutez votre application . Vous verrez maintenant la grille de données affichant la liste des clients.

Liste initiale des clients

Partie 4 : Modifier les clients

Vous pouvez modifier les entrées dans la grille de données en double-cliquant dessus, mais vous devez vous assurer que les modifications que vous apportez dans l’interface utilisateur sont également apportées à votre collection de clients dans le code-behind. Cela signifie que vous devez implémenter la liaison de données bidirectionnelle. Si vous souhaitez plus d'informations à ce sujet, consultez notre présentation de la liaison de données.

Tout d’abord, déclarez que ViewModels\CustomerListPageViewModel.cs implémente l’interface INotifyPropertyChanged :
```
public class CustomerListPageViewModel : INotifyPropertyChanged
```
Ensuite, dans le corps principal de la classe, ajoutez l’événement et la méthode suivants :
```
public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
```
La méthode OnPropertyChanged facilite la levée de l’événement PropertyChanged, nécessaire pour la liaison de données bidirectionnelle.

Mettez à jour le setter pour SelectedCustomer avec cet appel de fonction :

public CustomerViewModel SelectedCustomer
{
    get => _selectedCustomer;
    set
    {
        if (_selectedCustomer != value)
        {
            _selectedCustomer = value;
            OnPropertyChanged();
        }
    }
}

Dans Views\CustomerListPage.xaml, ajoutez la propriété SelectedCustomer à votre grille de données.
```
SelectedItem="{x:Bind ViewModel.SelectedCustomer, Mode=TwoWay}"
```
Cela associe la sélection de l’utilisateur dans la grille de données à l’objet Customer correspondant dans le code-behind. Le mode de liaison TwoWay permet aux modifications apportées dans l’interface utilisateur d’être reflétées sur cet objet.
Exécutez votre application. Vous pouvez maintenant voir les clients affichés dans la grille et apporter des modifications aux données sous-jacentes via votre interface utilisateur.

Modification d’un client dans la grille de données

Partie 5 : Mettre à jour les clients

Maintenant que vous pouvez voir et modifier vos clients, vous devez être en mesure d’envoyer vos modifications à la base de données et d’extraire les mises à jour effectuées par d’autres utilisateurs.

Revenez à ViewModels\CustomerListPageViewModel.cs et accédez à la méthode UpdateCustomersAsync . Mettez-le à jour avec ce code pour envoyer des modifications à la base de données et récupérer les nouvelles informations :
```
public async Task UpdateCustomersAsync()
{
    foreach (var modifiedCustomer in Customers
        .Where(x => x.IsModified).Select(x => x.Model))
    {
        await App.Repository.Customers.UpsertAsync(modifiedCustomer);
    }
    await GetCustomerListAsync();
}
```
Ce code utilise la propriété IsModified de ViewModels\CustomerViewModel.cs, qui est automatiquement mise à jour chaque fois que le client est modifié. Cela vous permet d’éviter les appels inutiles et d’envoyer uniquement des modifications des clients mis à jour à la base de données.

Partie 6 : Créer un client

L’ajout d’un nouveau client présente un défi, car le client apparaît sous la forme d’une ligne vide si vous l’ajoutez à l’interface utilisateur avant de fournir des valeurs pour ses propriétés. Ce n’est pas un problème, mais ici, nous allons faciliter la définition des valeurs initiales d’un client. Dans ce tutoriel, nous allons ajouter un panneau réductible simple, mais si vous aviez plus d’informations à ajouter, vous pouvez créer une page distincte à cet effet.

Mettre à jour le fichier code-behind

Ajoutez un nouveau champ privé et une propriété publique à ViewModels\CustomerListPageViewModel.cs. Cela sera utilisé pour contrôler si le panneau est visible ou non.

private bool _addingNewCustomer = false;

public bool AddingNewCustomer
{
    get => _addingNewCustomer;
    set
    {
        if (_addingNewCustomer != value)
        {
            _addingNewCustomer = value;
            OnPropertyChanged();
        }
    }
}

Ajoutez une nouvelle propriété publique à ViewModel, inverse de la valeur d’AddNewCustomer. Cela permet de désactiver les boutons de barre de commandes standard lorsque le panneau est visible.
```
public bool EnableCommandBar => !AddingNewCustomer;
```
Vous aurez maintenant besoin d’un moyen d’afficher le panneau repliable et de créer un client pour le modifier.

Ajoutez un nouveau fiend privé et une propriété publique à ViewModel pour contenir le client nouvellement créé.

private CustomerViewModel _newCustomer;

public CustomerViewModel NewCustomer
{
    get => _newCustomer;
    set
    {
        if (_newCustomer != value)
        {
            _newCustomer = value;
            OnPropertyChanged();
        }
    }
}

Mettez à jour votre méthode CreateNewCustomerAsync pour créer un nouveau client, l’ajouter au référentiel et le définir comme client sélectionné :

public async Task CreateNewCustomerAsync()
{
    CustomerViewModel newCustomer = new CustomerViewModel(new Models.Customer());
    NewCustomer = newCustomer;
    await App.Repository.Customers.UpsertAsync(NewCustomer.Model);
    AddingNewCustomer = true;
}

Mettez à jour la méthode SaveInitialChangesAsync pour ajouter un client nouvellement créé au référentiel, mettre à jour l’interface utilisateur et fermer le panneau.

public async Task SaveInitialChangesAsync()
{
    await App.Repository.Customers.UpsertAsync(NewCustomer.Model);
    await UpdateCustomersAsync();
    AddingNewCustomer = false;
}

Ajoutez la ligne de code suivante comme ligne finale dans le setter pour AddNewCustomer :
```
OnPropertyChanged(nameof(EnableCommandBar));
```
Cela garantira que EnableCommandBar sera automatiquement mis à jour chaque fois que AddingNewCustomer est modifié.

Mettre à jour l’interface utilisateur

Revenez à Views\CustomerListPage.xaml et ajoutez un StackPanel avec les propriétés suivantes entre votre CommandeBar et votre grille de données :
```
<StackPanel
    x:Name="newCustomerPanel"
    Orientation="Horizontal"
    x:Load="{x:Bind ViewModel.AddingNewCustomer, Mode=OneWay}"
    RelativePanel.Below="mainCommandBar">
</StackPanel>
```
L’attribut x :Load garantit que ce panneau s’affiche uniquement lorsque vous ajoutez un nouveau client.
Apportez la modification suivante à la position de votre grille de données pour vous assurer qu’elle descend lorsque le nouveau panneau s’affiche :
```
RelativePanel.Below="newCustomerPanel"
```

Mettez à jour votre stack panel avec quatre contrôles TextBox. Ils sont liés aux propriétés individuelles du nouveau client et vous permettent de modifier ses valeurs avant de l’ajouter à la grille de données.

<StackPanel
    x:Name="newCustomerPanel"
    Orientation="Horizontal"
    x:Load="{x:Bind ViewModel.AddingNewCustomer, Mode=OneWay}"
    RelativePanel.Below="mainCommandBar">
    <TextBox
        Header="First name"
        PlaceholderText="First"
        Margin="8,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Last name"
        PlaceholderText="Last"
        Margin="0,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.LastName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Address"
        PlaceholderText="1234 Address St, Redmond WA 00000"
        Margin="0,8,16,8"
        MinWidth="280"
        Text="{x:Bind ViewModel.NewCustomer.Address, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Company"
        PlaceholderText="Company"
        Margin="0,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.Company, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

Ajoutez un bouton simple à votre nouveau panneau de pile pour enregistrer le client nouvellement créé :

<StackPanel>
    <!--Text boxes from step 3-->
    <AppBarButton
        x:Name="SaveNewCustomer"
        Click="{x:Bind ViewModel.SaveInitialChangesAsync}"
        Icon="Save"/>
</StackPanel>

Mettez à jour leCommandBar , afin que les boutons de création, de suppression et de mise à jour standard soient désactivés lorsque le panneau de pile est visible :

<CommandBar
    x:Name="mainCommandBar"
    HorizontalAlignment="Stretch"
    IsEnabled="{x:Bind ViewModel.EnableCommandBar, Mode=OneWay}"
    Background="AliceBlue">
    <!--App bar buttons-->
</CommandBar>

Exécutez votre application. Vous pouvez maintenant créer un client et saisir ses informations dans le panneau de stack.

Création d’un nouveau client

Partie 7 : Supprimer un client

La suppression d’un client est l’opération de base finale que vous devez implémenter. Lorsque vous supprimez un client que vous avez sélectionné dans la grille de données, vous devez appeler immédiatement UpdateCustomersAsync pour mettre à jour l’interface utilisateur. Toutefois, vous n’avez pas besoin d’appeler cette méthode si vous supprimez un client que vous venez de créer.

Accédez à ViewModels\CustomerListPageViewModel.cs et mettez à jour la méthode DeleteAndUpdateAsync :

public async void DeleteAndUpdateAsync()
{
    if (SelectedCustomer != null)
    {
        await App.Repository.Customers.DeleteAsync(_selectedCustomer.Model.Id);
    }
    await UpdateCustomersAsync();
}

Dans Views\CustomerListPage.xaml, mettez à jour le panneau de pile pour ajouter un nouveau client afin qu’il contienne un deuxième bouton :

<StackPanel>
    <!--Text boxes for adding a new customer-->
    <AppBarButton
        x:Name="DeleteNewCustomer"
        Click="{x:Bind ViewModel.DeleteNewCustomerAsync}"
        Icon="Cancel"/>
    <AppBarButton
        x:Name="SaveNewCustomer"
        Click="{x:Bind ViewModel.SaveInitialChangesAsync}"
        Icon="Save"/>
</StackPanel>

Dans ViewModels\CustomerListPageViewModel.cs, mettez à jour la méthode DeleteNewCustomerAsync pour supprimer le nouveau client :

public async Task DeleteNewCustomerAsync()
{
    if (NewCustomer != null)
    {
        await App.Repository.Customers.DeleteAsync(_newCustomer.Model.Id);
        AddingNewCustomer = false;
    }
}

Exécutez votre application. Vous pouvez maintenant supprimer des clients, soit dans la grille, soit dans le panneau empilé.

Supprimer un nouveau client

Conclusion

Félicitations! Avec tout cela, votre application dispose désormais d’une gamme complète d’opérations de base de données locales. Vous pouvez créer, lire, mettre à jour et supprimer des clients au sein de votre interface utilisateur, et ces modifications sont enregistrées dans votre base de données et persistent dans différents lancements de votre application.

Maintenant que vous avez terminé, tenez compte des éléments suivants :

Si ce n'est déjà fait, consultez la vue d'ensemble de la structure de l'application pour comprendre pourquoi l'application est conçue ainsi.
Explorez l’exemple complet de base de données commandes client pour voir l’application sur laquelle ce didacticiel était basé.

Ou si vous êtes à la hauteur d’un défi, vous pouvez continuer...

Aller plus loin : Se connecter à une base de données distante

Nous avons fourni une procédure pas à pas pour implémenter ces appels sur une base de données SQLite locale. Mais que se passe-t-il si vous souhaitez utiliser une base de données distante, à la place ?

Si vous souhaitez effectuer cette tentative, vous aurez besoin de votre propre compte Azure Active Directory (AAD) et de la possibilité d’héberger votre propre source de données.

Vous devez ajouter l’authentification, les fonctions pour gérer les appels REST, puis créer une base de données distante avec laquelle interagir. Il existe du code dans l’exemple complet de base de données commandes client que vous pouvez référencer pour chaque opération nécessaire.

Paramètres et configuration

Les étapes nécessaires pour se connecter à votre propre base de données distante sont précisées dans le fichier README de l'exemple . Vous devez effectuer ce qui suit :

Fournissez votre ID client de compte Azure à Constants.cs.
Fournissez l’URL de la base de données distante à Constants.cs.
Indiquez la chaîne de connexion de la base de données à Constants.cs.
Associez votre application au Microsoft Store.
Copiez le projet de service dans votre application et déployez-la sur Azure.

Authentification

Vous devez créer un bouton pour démarrer une séquence d’authentification et une fenêtre contextuelle ou une page distincte pour collecter les informations d’un utilisateur. Une fois que vous avez créé cela, vous devez fournir du code qui demande les informations d’un utilisateur et l’utilise pour acquérir un jeton d’accès. L'exemple de base de données des commandes des clients encapsule les appels Microsoft Graph avec la bibliothèque WebAccountManager pour acquérir un jeton et gérer l’authentification auprès d’un compte AAD.

La logique d’authentification est implémentée dans AuthenticationViewModel.cs.
Le processus d’authentification s’affiche dans le contrôle AuthenticationControl.xaml personnalisé.

Appels REST

Vous n’aurez pas besoin de modifier le code que nous avons ajouté dans ce tutoriel pour implémenter des appels REST. Au lieu de cela, vous devez effectuer les opérations suivantes :

Créez de nouvelles implémentations des interfaces ICustomerRepository et ITutorialRepository , implémentant le même ensemble de fonctions via REST au lieu de SQLite. Vous devez sérialiser et désérialiser JSON, et vous pouvez encapsuler vos appels REST dans une classe HttpHelper distincte si nécessaire. Reportez-vous à l'exemple complet pour plus de détails.
Dans App.xaml.cs, créez une fonction pour initialiser le référentiel REST et appelez-la au lieu de SqliteDatabase lorsque l’application est initialisée. Encore une fois, reportez-vous à l’exemple complet.

Une fois les trois étapes terminées, vous devez être en mesure de vous authentifier auprès de votre compte AAD via votre application. Les appels REST à la base de données distante remplacent les appels SQLite locaux, mais l’expérience utilisateur doit être la même. Si vous vous sentez encore plus ambitieux, vous pouvez ajouter une page de paramètres pour permettre à l’utilisateur de basculer dynamiquement entre les deux.