Xamarin.Forms Tutoriel sur le service web

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

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

Dans ce tutoriel, vous allez apprendre à :

Utilisez le Gestionnaire de package NuGet pour ajouter Newtonsoft.Json à un Xamarin.Forms projet.
Créer des classes de service web.
Utiliser les classes de service web.

Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment extraire des données de dépôt .NET à partir de l’API web GitHub. Les données extraites s’afficheront dans une CollectionView. Les captures d’écran suivantes montrent l’application finale :

Ajouter Newtonsoft.Json

13 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 WebServiceTutorial.

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer WebServiceTutorial. 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 Approfondi.
Dans l’Explorateur de solutions, sélectionnez le projet WebServiceTutorial, 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 Newtonsoft.Json, puis cliquez sur le bouton Installer pour l’ajouter au projet :

de

Ce package sera utilisé pour incorporer la désérialisation JSON dans l’application.
Générez la solution pour vérifier qu’elle ne contient aucune erreur.

Créer des classes de service web

11 minutes restantes

Les demandes REST sont établies via HTTP en utilisant les mêmes verbes HTTP que ceux utilisés par les navigateurs web pour récupérer des pages et envoyer des données aux serveurs. Dans cet exercice, vous allez créer une classe qui utilise le verbe GET pour extraire les données des dépôts .NET à partir de l’API web GitHub.

Visual Studio
Visual Studio pour Mac

Dans l’Explorateur de solutions, dans le projet WebServiceTutorial, ajoutez une classe nommée Constants au projet. Puis, dans Constants.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Ce code définit une seule constante, le point de terminaison sur lequel les demandes web seront créées.
Dans l’Explorateur de solutions, dans le projet WebServicesTutorial, ajoutez une classe nommée Repository au projet. Puis, dans Repository.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
Ce code définit une classe Repository qui est utilisée pour modéliser les données JSON extraites du service web. Chaque propriété est ornée d’un attribut JsonProperty, qui contient un nom de champ JSON. Newtonsoft.Json utilisera ce mappage des noms de champs JSON aux propriétés CLR lors de la désérialisation des données JSON en objets de modèle.

Notes

La définition de classe ci-dessus a été simplifiée et ne modélise pas entièrement les données JSON extraites du service web.
Dans l’Explorateur de solutions, dans le projet WebServiceTutorial, ajoutez une classe nommée RestService au projet. Puis, dans RestService.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();

            if (Device.RuntimePlatform == Device.UWP)
            {
                _client.DefaultRequestHeaders.Add("User-Agent", ".NET Foundation Repository Reporter");
                _client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/vnd.github.v3+json"));
            }
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}
```
Ce code définit une seule méthode, GetRepositoriesAsync, qui extrait les données des dépôts .NET à partir de l’API web GitHub. Cette méthode utilise la méthode HttpClient.GetAsync pour envoyer une requête GET à l’API web spécifiée par l’argument uri. L’API web envoie une réponse qui est stockée dans un objet HttpResponseMessage. La réponse inclut un code d’état HTTP, qui indique si la requête HTTP a réussi ou échoué. Si la requête aboutit, l’API web répond avec le code d’état HTTP 200 (OK) et une réponse JSON, qui se trouve dans la propriété HttpResponseMessage.Content. Ces données JSON sont lues sur un string à l’aide de la méthode HttpContent.ReadAsStringAsync, avant d’être désérialisées dans un objet List<Repository> à l’aide de la méthode JsonConvert.DeserializeObject. Cette méthode utilise les mappages entre les noms de champ JSON et les propriétés CLR, qui sont définies dans la classe Repository, pour effectuer la désérialisation.

Notes

Sur UWP, il est nécessaire de configurer l’objet dans le HttpClient constructeur pour ajouter un en-tête User Agent à toutes les requêtes et pour accepter les réponses JSON GitHub.
Générez la solution pour vérifier qu’elle ne contient aucune erreur.

Dans Panneau Solutions, dans le projet WebServiceTutorial, ajoutez une classe nommée Constants au projet. Puis, dans Constants.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Ce code définit une seule constante, le point de terminaison sur lequel les demandes web seront créées.
Dans Panneau Solutions, dans le projet WebServicesTutorial, ajoutez une classe nommée Repository au projet. Puis, dans Repository.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
Ce code définit une classe Repository qui est utilisée pour modéliser les données JSON extraites du service web. Chaque propriété est ornée d’un attribut JsonProperty, qui contient un nom de champ JSON. Newtonsoft.Json utilisera ce mappage des noms de champs JSON aux propriétés CLR lors de la désérialisation des données JSON en objets de modèle.

Notes

La définition de classe ci-dessus a été simplifiée et ne modélise pas entièrement les données JSON extraites du service web.
Dans Panneau Solutions, dans le projet WebServiceTutorial, ajoutez une classe nommée RestService au projet. Puis, dans RestService.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}
```
Ce code définit une seule méthode, GetRepositoriesAsync, qui extrait les données des dépôts .NET à partir de l’API web GitHub. Cette méthode utilise la méthode HttpClient.GetAsync pour envoyer une requête GET à l’API web spécifiée par l’argument uri. L’API web envoie une réponse qui est stockée dans un objet HttpResponseMessage. La réponse inclut un code d’état HTTP, qui indique si la requête HTTP a réussi ou échoué. Si la requête aboutit, l’API web répond avec le code d’état HTTP 200 (OK) et une réponse JSON, qui se trouve dans la propriété HttpResponseMessage.Content. Ces données JSON sont lues sur un string à l’aide de la méthode HttpContent.ReadAsStringAsync, avant d’être désérialisées dans un objet List<Repository> à l’aide de la méthode JsonConvert.DeserializeObject. Cette méthode utilise les mappages entre les noms de champ JSON et les propriétés CLR, qui sont définies dans la classe Repository, pour effectuer la désérialisation.
Générez la solution pour vérifier qu’elle ne contient aucune erreur.

Utiliser des classes de service web

5 minutes restantes

Dans cet exercice, vous allez créer une interface utilisateur pour consommer la classe RestService, qui extrait les données des dépôts .NET à partir de l’API web GitHub. Les données extraites s’afficheront dans une CollectionView.

Visual Studio
Visual Studio pour Mac

Dans l’Explorateur de solutions, dans le projet WebServiceTutorial, 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="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend Button et CollectionView. Le code Button définit son événement Clicked sur un gestionnaire d’événements nommé OnButtonClicked qui sera créé à l’étape suivante. Cette CollectionView définit la propriété CollectionView.ItemTemplate sur un DataTemplate, qui définit l’apparence de chaque élément dans la CollectionView. L’enfant du DataTemplate est une StackLayout, qui contient trois objets Label. Les Label objets lient leurs Text propriétés aux Namepropriétés , Descriptionet GitHubHomeUrl de chaque Repository objet. Pour plus d’informations sur la liaison de données, consultez Xamarin.Forms Liaison de données.

En outre, l’élément CollectionView dispose d’un nom spécifié avec l’attribut x:Name. Ainsi, le fichier code-behind peut accéder à l’objet en utilisant le nom affecté.

Dans l’Explorateur de solutions, dans le projet WebServiceTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Ensuite, dans MainPage.xaml.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
La méthode OnButtonClicked, qui est exécutée lorsque le Button est appuyé, appelle la méthode RestService.GetRepositoriesAsync pour extraire les données des dépôts .NET à partir de l’API web GitHub. La méthode GetRepositoriesAsync nécessite un argument string représentant l’URI de l’API web appelée et elle est retournée par le champ Constants.GitHubReposEndpoint.

Une fois les données demandées extraites, la propriété CollectionView.ItemsSource est définie sur les données extraites.
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. Appuyez sur le Button pour extraire les données des dépôts .NET à partir de GitHub :

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur la consommation de services web BASÉS sur REST dans Xamarin.Forms, consultez Consommer un service web RESTful (guide).

Dans Panneau Solutions, dans le projet WebServiceTutorial, 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="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend Button et CollectionView. Le code Button définit son événement Clicked sur un gestionnaire d’événements nommé OnButtonClicked qui sera créé à l’étape suivante. Cette CollectionView définit la propriété CollectionView.ItemTemplate sur un DataTemplate, qui définit l’apparence de chaque élément dans la CollectionView. L’enfant du DataTemplate est une StackLayout, qui contient trois objets Label. Les Label objets lient leurs Text propriétés aux Namepropriétés , Descriptionet GitHubHomeUrl de chaque Repository objet. Pour plus d’informations sur la liaison de données, consultez Xamarin.Forms Liaison de données.

En outre, l’élément CollectionView dispose d’un nom spécifié avec l’attribut x:Name. Ainsi, le fichier code-behind peut accéder à l’objet en utilisant le nom affecté.

Dans Panneau Solutions, dans le projet WebServiceTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Ensuite, dans MainPage.xaml.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
La méthode OnButtonClicked, qui est exécutée lorsque le Button est appuyé, appelle la méthode RestService.GetRepositoriesAsync pour extraire les données des dépôts .NET à partir de l’API web GitHub. La méthode GetRepositoriesAsync nécessite un argument string représentant l’URI de l’API web appelée et elle est retournée par le champ Constants.GitHubReposEndpoint.

Une fois les données demandées extraites, la propriété CollectionView.ItemsSource est définie sur les données extraites.
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. Appuyez sur le Button pour extraire les données des dépôts .NET à partir de GitHub :

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

Pour plus d’informations sur la consommation de services web BASÉS sur REST dans Xamarin.Forms, consultez Consommer un service web RESTful (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 Newtonsoft.Json à un Xamarin.Forms projet.
Créer des classes de service web.
Utiliser les classes de service web.

Étapes suivantes

Cette série de tutoriels a couvert les principes de base de la création d’applications mobiles avec Xamarin.Forms. Pour en savoir plus sur le Xamarin.Forms développement, consultez les fonctionnalités suivantes :

Quatre groupes de contrôles main sont utilisés pour créer l’interface utilisateur d’une Xamarin.Forms application. Pour plus d’informations, consultez Informations de référence sur les contrôles.
La liaison de données est une technique qui permet de lier les propriétés de deux objets afin que les changements d’une propriété soient automatiquement répercutés sur l’autre propriété. Pour plus d’informations, consultez Liaison de données.
Xamarin.Forms fournit plusieurs expériences de navigation de page, selon le type de page utilisé. Pour plus d’informations, consultez Navigation.
Les styles contribuent à réduire le balisage répétitif et permettent de modifier plus facilement l’apparence des applications. Pour plus d’informations, consultez Applications de styleXamarin.Forms.
Les extensions de balisage XAML étendent la puissance et la flexibilité du langage XAML en permettant de définir des attributs d’éléments à partir de sources autres que des chaînes de texte littéral. Pour plus d’informations, consultez Extensions de balisage XAML.
Les modèles de données permettent de définir la présentation des données sur les affichages pris en charge. Pour plus d’informations, consultez Modèles de données.
Chaque page, disposition et affichage est restitué différemment sur chaque plateforme avec une classe Renderer qui crée ensuite un contrôle natif, le dispose à l’écran et ajoute le comportement spécifié dans le code partagé. Les développeurs peuvent implémenter leurs propres classes Renderer pour personnaliser l’apparence et/ou le comportement d’un contrôle. Pour plus d’informations, consultez Renderers personnalisés.
Les effets permettent également de personnaliser les contrôles natifs sur chaque plateforme. Les effets sont créés dans des projets spécifiques à la plateforme en sous-classant la PlatformEffect classe et sont consommés en les attachant à un contrôle approprié Xamarin.Forms . Pour plus d’informations, consultez Effets.
Le code partagé permet d’accéder aux fonctionnalités natives par le biais de la classe DependencyService. Pour plus d’informations, consultez Accès aux fonctionnalités natives avec DependencyService.

Vous pouvez également créer des applications mobiles avec Xamarin.Forms, un livre de Charles Petzold, pour en savoir plus sur Xamarin.Forms. Le livre est disponible au format PDF ou dans une variété de formats électroniques.

Ajouter Newtonsoft.Json

Créer des classes de service web

Utiliser des classes de service web

Félicitations !

Étapes suivantes

Liens connexes