Xamarin.Forms Didacticiel sur la base de données locale

Avant de tenter ce didacticiel, vous devez avoir suivi les guides et didacticiels suivants :

Créez votre premier Xamarin.Forms démarrage rapide d’application .
Didacticiel StackLayout.
Didacticiel Button.
Didacticiel Entry.
Tutoriel CollectionView.

Dans ce tutoriel, vous allez apprendre à :

Utilisez le Gestionnaire de package NuGet pour ajouter des SQLite.NET à un Xamarin.Forms projet.
Créer les classes d’accès aux données.
Utiliser les classes d’accès aux données.

Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment stocker des données dans une base de données SQLite.NET locale. Les captures d’écran suivantes montrent l’application finale :

Ajouter SQLite.NET

11 minutes restantes

Visual Studio
Visual Studio pour Mac

Pour suivre ce didacticiel, vous devez disposer de Visual Studio 2019 (dernière version) sur lequel est installée la charge de travail Développement mobile en .NET. Vous aurez également besoin d’un Mac couplé pour générer l’application du didacticiel sur iOS. Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin. Pour plus d’informations sur la connexion de Visual Studio 2019 à un hôte de build Mac, consultez l’article Appairer avec un Mac pour le développement Xamarin.iOS.

Lancez Visual Studio et créez une application vide Xamarin.Forms nommée LocalDatabaseTutorial.

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer LocalDatabaseTutorial. L’utilisation d’un autre nom entraîne des erreurs de build quand vous copiez le code à partir de ce didacticiel dans la solution.

Pour plus d’informations sur la bibliothèque .NET Standard créée, consultez Anatomie d’une Xamarin.Forms application dans le Xamarin.Forms guide de démarrage rapide Deep Dive.
Dans l’Explorateur de solutions, sélectionnez le projet LocalDatabaseTutorial, cliquez avec le bouton droit et sélectionnez Gérer les packages NuGet... :
Dans le Gestionnaire de package NuGet, sélectionnez l’onglet Parcourir, recherchez et sélectionnez le package NuGet sqlite-net-pcl, puis cliquez sur le bouton Installer pour l’ajouter au projet :
Remarque

Il existe de nombreux packages NuGet avec des noms similaires. Le package correct possède ces attributs :
- Auteurs : SQLite-net
- Lien NuGet :sqlite-net-pcl
Ne vous fiez pas au nom du package. Vous devez utiliser ce package NuGet dans les projets .NET Standard.
Ce package sera utilisé pour incorporer les opérations de base de données dans l’application.

Important

SQLite.NET est une bibliothèque tierce prise en charge à partir du dépôt praeclarum/sqlite-net.
Générez la solution pour vérifier qu’elle ne contient aucune erreur.

Créer des classes d’accès aux données

8 minutes restantes

Dans cet exercice, vous ajouterez des classes d’accès aux données au projet LocalDatabaseTutorial qui sera utilisé pour conserver les données sur les personnes dans la base de données.

Visual Studio
Visual Studio pour Mac

Dans l’Explorateur de solutions, dans le projet LocalDatabaseTutorial, ajoutez une classe nommée Person au projet. Puis, dans Person.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using SQLite;

namespace LocalDatabaseTutorial
{
    public class Person
    {
        [PrimaryKey, AutoIncrement]
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}
```
Ce code définit une classe Person qui stockera les données relatives à chaque individu dans l’application. La propriété ID est identifiée par les attributs PrimaryKey et AutoIncrement pour garantir que chaque instance Person de la base de données bénéficie d’un ID unique fourni par SQLite.NET.
Dans l’Explorateur de solutions, dans le projet LocalDatabaseTutorial, ajoutez une classe nommée Database au projet. Puis, dans Database.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using System.Collections.Generic;
using System.Threading.Tasks;
using SQLite;

namespace LocalDatabaseTutorial
{
    public class Database
    {
        readonly SQLiteAsyncConnection _database;

        public Database(string dbPath)
        {
            _database = new SQLiteAsyncConnection(dbPath);
            _database.CreateTableAsync<Person>().Wait();
        }

        public Task<List<Person>> GetPeopleAsync()
        {
            return _database.Table<Person>().ToListAsync();
        }

        public Task<int> SavePersonAsync(Person person)
        {
            return _database.InsertAsync(person);
        }
    }
}
```
Cette classe contient le code permettant de créer la base de données, lire les données contenues et y écrire des données. Le code utilise des API SQLite.NET asynchrones qui déplacent les opérations de base de données vers les threads d’arrière-plan. De plus, le constructeur Database prend le chemin du fichier de base de données en tant qu’argument. Ce chemin d’accès est fourni par la classe App dans l’exercice suivant.

Dans l’Explorateur de solutions, dans le projet LocalDatabaseTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Ensuite, dans App.xaml.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :

using System;
using System.IO;
using Xamarin.Forms;

namespace LocalDatabaseTutorial
{
    public partial class App : Application
    {
        static Database database;

        public static Database Database
        {
            get
            {
                if (database == null)
                {
                    database = new Database(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "people.db3"));
                }
                return database;
            }
        }

        public App()
        {
            InitializeComponent();

            MainPage = new MainPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Ce code définit une propriété Database qui crée une instance Database comme singleton. Un chemin d’accès local et un nom de fichier (correspondant à l’emplacement de stockage de la base de données) sont transmis sous forme d’argument au constructeur de classe Database.

Important

Lorsque vous exposez la base de données comme un singleton, une connexion de base de données unique est créée et reste ouverte lors de l’exécution de l’application. Ainsi, vous évitez les dépenses liées à l’ouverture et à la fermeture du fichier de base de données chaque fois qu’une opération de base de données est effectuée.

Générez la solution pour vérifier qu’elle ne contient aucune erreur.

Dans Panneau Solutions, dans le projet LocalDatabaseTutorial, ajoutez une classe nommée Person au projet. Puis, dans Person.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using SQLite;

namespace LocalDatabaseTutorial
{
    public class Person
    {
        [PrimaryKey, AutoIncrement]
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}
```
Ce code définit une classe Person qui stockera les données relatives à chaque individu dans l’application. La propriété ID est identifiée par les attributs PrimaryKey et AutoIncrement pour garantir que chaque instance Person de la base de données bénéficie d’un ID unique fourni par SQLite.NET.

Dans Panneau Solutions, dans le projet LocalDatabaseTutorial, ajoutez une classe nommée Database au projet. Puis, dans Database.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :

using System.Collections.Generic;
using System.Threading.Tasks;
using SQLite;

namespace LocalDatabaseTutorial
{
    public class Database
    {
        readonly SQLiteAsyncConnection _database;

        public Database(string dbPath)
        {
            _database = new SQLiteAsyncConnection(dbPath);
            _database.CreateTableAsync<Person>().Wait();
        }

        public Task<List<Person>> GetPeopleAsync()
        {
            return _database.Table<Person>().ToListAsync();
        }

        public Task<int> SavePersonAsync(Person person)
        {
            return _database.InsertAsync(person);
        }
    }
}

Cette classe contient le code permettant de créer la base de données, lire les données contenues et y écrire des données. Le code utilise des API SQLite.NET asynchrones qui déplacent les opérations de base de données vers les threads d’arrière-plan. De plus, le constructeur Database prend le chemin du fichier de base de données en tant qu’argument. Ce chemin d’accès est fourni par la classe App dans l’exercice suivant.

Dans Panneau Solutions, dans le projet LocalDatabaseTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Ensuite, dans App.xaml.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :

using System;
using System.IO;
using Xamarin.Forms;

namespace LocalDatabaseTutorial
{
    public partial class App : Application
    {
        static Database database;

        public static Database Database
        {
            get
            {
                if (database == null)
                {
                    database = new Database(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "people.db3"));
                }
                return database;
            }
        }

        public App()
        {
            InitializeComponent();

            MainPage = new MainPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Ce code définit une propriété Database qui crée une instance Database comme singleton. Un chemin d’accès local et un nom de fichier (correspondant à l’emplacement de stockage de la base de données) sont transmis sous forme d’argument au constructeur de classe Database.

Important

Lorsque vous exposez la base de données comme un singleton, une connexion de base de données unique est créée et reste ouverte lors de l’exécution de l’application. Ainsi, vous évitez les dépenses liées à l’ouverture et à la fermeture du fichier de base de données chaque fois qu’une opération de base de données est effectuée.

Générez la solution pour vérifier qu’elle ne contient aucune erreur.

Utiliser des classes d’accès aux données

3 minutes restantes

Dans cet exercice, vous allez créer une interface utilisateur pour utiliser les classes d’accès aux données créées précédemment.

Visual Studio
Visual Studio pour Mac

Dans l’Explorateur de solutions, dans le projet LocalDatabaseTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LocalDatabaseTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry x:Name="nameEntry"
               Placeholder="Enter name" />
        <Entry x:Name="ageEntry"
               Placeholder="Enter age" />
        <Button Text="Add to Database"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Age}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend deux instances Entry, un Button et un CollectionView, dans un StackLayout. Chaque Entry a son propre jeu de propriétés Placeholder, lequel spécifie le texte d’espace réservé qui s’affiche avant une saisie de l’utilisateur. Le code Button définit son événement Clicked sur un gestionnaire d’événements nommé OnButtonClicked qui sera créé à l’étape suivante. La CollectionView définit sa propriété ItemTemplate sur un DataTemplate, qui utilise un StackLayout et deux objets Label pour définir l’apparence de chaque ligne dans la CollectionView. Les objets Label lient leurs propriétés Text aux propriétés Name et Age de chaque objet Person, respectivement.

En outre, les instances Entry et CollectionView ont des noms spécifiés par l’attribut x:Name. Le fichier code-behind peut ainsi accéder à ces objets en utilisant les noms affectés.
Dans l’Explorateur de solutions, dans le projet LocalDatabaseTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez l’attribut de remplacement OnAppearing et le gestionnaire d’événements OnButtonClicked à la classe :
```
protected override async void OnAppearing()
{
    base.OnAppearing();
    collectionView.ItemsSource = await App.Database.GetPeopleAsync();
}

async void OnButtonClicked(object sender, EventArgs e)
{
    if (!string.IsNullOrWhiteSpace(nameEntry.Text) && !string.IsNullOrWhiteSpace(ageEntry.Text))
    {
        await App.Database.SavePersonAsync(new Person
        {
            Name = nameEntry.Text,
            Age = int.Parse(ageEntry.Text)
        });

        nameEntry.Text = ageEntry.Text = string.Empty;
        collectionView.ItemsSource = await App.Database.GetPeopleAsync();
    }
}
```
La méthode OnAppearing remplit CollectionView avec toutes les données stockées dans la base de données. La méthode OnButtonClicked, qui s’exécute après avoir appuyé sur Button, enregistre les données saisies dans la base de données avant d’effacer les deux instances Entry et d’actualiser les données dans CollectionView.

Remarque

Le remplacement de la méthode OnAppearing est exécuté une fois que ContentPage est mis en page, mais juste avant qu’il soit visible. Par conséquent, il s’agit d’un bon emplacement pour définir le contenu des Xamarin.Forms vues.
Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix.

Entrez plusieurs éléments de données, en appuyant sur Button pour chaque élément de données. Cette opération enregistrera les données dans la base de données et remplira de nouveau CollectionView avec toutes les données de la base de données :

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur les bases de données locales dans Xamarin.Forms, consultez Xamarin.Forms Bases de données locales (guide)

Dans Panneau Solutions, dans le projet LocalDatabaseTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LocalDatabaseTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry x:Name="nameEntry"
               Placeholder="Enter name" />
        <Entry x:Name="ageEntry"
               Placeholder="Enter age" />
        <Button Text="Add to Database"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Age}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend deux instances Entry, un Button et un CollectionView, dans un StackLayout. Chaque Entry a son propre jeu de propriétés Placeholder, lequel spécifie le texte d’espace réservé qui s’affiche avant une saisie de l’utilisateur. Le code Button définit son événement Clicked sur un gestionnaire d’événements nommé OnButtonClicked qui sera créé à l’étape suivante. La CollectionView définit sa propriété ItemTemplate sur un DataTemplate, qui utilise un StackLayout et deux objets Label pour définir l’apparence de chaque ligne dans la CollectionView. Les objets Label lient leurs propriétés Text aux propriétés Name et Age de chaque objet Person, respectivement.

En outre, les instances Entry et ListView ont des noms spécifiés par l’attribut x:Name. Le fichier code-behind peut ainsi accéder à ces objets en utilisant les noms affectés.
Dans Panneau Solutions, dans le projet LocalDatabaseTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez l’attribut de remplacement OnAppearing et le gestionnaire d’événements OnButtonClicked à la classe :
```
protected override async void OnAppearing()
{
    base.OnAppearing();
    collectionView.ItemsSource = await App.Database.GetPeopleAsync();
}

async void OnButtonClicked(object sender, EventArgs e)
{
    if (!string.IsNullOrWhiteSpace(nameEntry.Text) && !string.IsNullOrWhiteSpace(ageEntry.Text))
    {
        await App.Database.SavePersonAsync(new Person
        {
            Name = nameEntry.Text,
            Age = int.Parse(ageEntry.Text)
        });

        nameEntry.Text = ageEntry.Text = string.Empty;
        collectionView.ItemsSource = await App.Database.GetPeopleAsync();
    }
}
```
La méthode OnAppearing remplit CollectionView avec toutes les données stockées dans la base de données. La méthode OnButtonClicked, qui s’exécute après avoir appuyé sur Button, enregistre les données saisies dans la base de données avant d’effacer les deux instances Entry et d’actualiser les données dans CollectionView.

Remarque

Le remplacement de la méthode OnAppearing est exécuté une fois que ContentPage est mis en page, mais juste avant qu’il soit visible. Par conséquent, il s’agit d’un bon emplacement pour définir le contenu des Xamarin.Forms vues.
Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix.

Entrez plusieurs éléments de données, en appuyant sur Button pour chaque élément de données. Cette opération enregistrera les données dans la base de données et remplira de nouveau CollectionView avec toutes les données de la base de données :

Dans Visual Studio pour Mac, arrêtez l’application.

Pour plus d’informations sur les bases de données locales dans Xamarin.Forms, consultez Xamarin.Forms Bases de données locales (guide)

Félicitations !

Tout est terminé !

Félicitations ! Vous avez terminé ce didacticiel qui vous a expliqué comment effectuer les opérations suivantes :

Utilisez le Gestionnaire de package NuGet pour ajouter des SQLite.NET à un Xamarin.Forms projet.
Créer les classes d’accès aux données.
Utiliser les classes d’accès aux données.

Étapes suivantes

Pour en savoir plus sur les principes de base de la création d’applications mobiles avec Xamarin.Forms, passez au didacticiel sur les services web.

Didacticiel Web Services

Share via

Ajouter SQLite.NET

Créer des classes d’accès aux données

Utiliser des classes d’accès aux données

Félicitations !

Étapes suivantes

Liens connexes