Xamarin.Forms Esercitazione sul servizio Web

Prima di provare questa esercitazione è necessario avere completato correttamente:

Creare la prima Xamarin.Forms guida introduttiva all'app .
Esercitazione su StackLayout.
Esercitazione su Label.
Esercitazione su Button.
Esercitazione su CollectionView.

In questa esercitazione apprenderai a:

Usare il Gestione pacchetti NuGet per aggiungere Newtonsoft.Json a un Xamarin.Forms progetto.
Creare le classi del servizio Web.
Utilizzare le classi del servizio Web.

Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come recuperare dati dei repository .NET dall'API Web GitHub. I dati recuperati verranno visualizzati in un elemento CollectionView. Gli screenshot seguenti illustrano l'applicazione finale:

Aggiungere Newtonsoft.Json

13 minuti rimanenti

Visual Studio
Visual Studio per Mac

Per completare questa esercitazione è necessario Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET. È inoltre necessario un Mac associato per compilare l'applicazione dell'esercitazione per iOS. Per informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin. Per informazioni sulla connessione di Visual Studio 2019 a un host di compilazione Mac, vedere Associa a Mac per lo sviluppo di Xamarin.iOS.

Avviare Visual Studio e creare una nuova app vuota Xamarin.Forms denominata WebServiceTutorial.

Importante

I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata WebServiceTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazione Xamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
In Esplora soluzioni selezionare il progetto WebServiceTutorial, fare clic con il pulsante destro del mouse e selezionare Gestisci pacchetti NuGet...:
In Gestione pacchetti NuGet selezionare la scheda Sfoglia, cercare il pacchetto NuGet Newtonsoft.Json, selezionarlo e fare clic sul pulsante Installaper aggiungerlo al progetto:

Il pacchetto verrà usato per integrare la deserializzazione JSON nell'applicazione.
Compilare la soluzione per assicurarsi che non siano presenti errori.

Creare classi del servizio Web

11 minuti rimanenti

Le richieste REST vengono effettuate tramite HTTP usando gli stessi verbi HTTP usati dai Web browser per recuperare le pagine e per inviare dati ai server. In questo esercizio si creerà una classe che usa il verbo GET per recuperare i dati dei repository .NET dall'API Web GitHub.

Visual Studio
Visual Studio per Mac

In Esplora soluzioni aggiungere una nuova classe denominata Constants al progetto WebServiceTutorial. In Constants.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Questo codice definisce una singola costante, ovvero l'endpoint sul quale verranno effettuate le richieste Web.
In Esplora soluzioni aggiungere una nuova classe denominata Repository al progetto WebServicesTutorial. In Repository.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:
```
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; }
    }
}
```
Questo codice definisce una classe Repository che viene usata per modellare i dati JSON recuperati dal servizio Web. Ogni proprietà è decorata con un attributo JsonProperty, che contiene il nome di un campo JSON. Newtonsoft.Json userà questo mapping dei nomi dei campi JSON con le proprietà CLR durante la deserializzazione di dati JSON in oggetti del modello.

Nota

La definizione di classe precedente è stata semplificata e non modella completamente i dati JSON recuperati dal servizio Web.

In Esplora soluzioni aggiungere una nuova classe denominata RestService al progetto WebServiceTutorial. In RestService.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

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;
        }
    }
}

Questo codice definisce un singolo metodo, GetRepositoriesAsync, che recupera i dati dei repository .NET dall'API Web GitHub. Questo metodo usa il metodo HttpClient.GetAsync per inviare una richiesta GET all'API Web specificata dall'argomento uri. L'API Web invia una risposta che viene archiviata in un oggetto HttpResponseMessage. La risposta include un codice di stato HTTP, che indica se la richiesta HTTP ha avuto esito positivo o negativo. A condizione che la richiesta abbia esito positivo, l'API Web risponde con codice di stato HTTP 200 (OK) e una risposta JSON, nella proprietà HttpResponseMessage.Content. I dati JSON vengono letti in una string usando il metodo HttpContent.ReadAsStringAsync, prima di essere deserializzati in un oggetto List<Repository> con il metodo JsonConvert.DeserializeObject. Questo metodo usa i mapping tra i nomi dei campi JSON e le proprietà CLR, definite nella classe Repository, per eseguire la deserializzazione.

Nota

In UWP è necessario configurare l'oggetto HttpClient nel costruttore per aggiungere un'intestazione agente utente a tutte le richieste e accettare risposte JSON di GitHub.

Compilare la soluzione per assicurarsi che non siano presenti errori.

Nel riquadro della soluzione aggiungere una nuova classe denominata Constants al progetto WebServiceTutorial. In Constants.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Questo codice definisce una singola costante, ovvero l'endpoint sul quale verranno effettuate le richieste Web.
Nel riquadro della soluzione aggiungere una nuova classe denominata Repository al progetto WebServicesTutorial. In Repository.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:
```
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; }
    }
}
```
Questo codice definisce una classe Repository che viene usata per modellare i dati JSON recuperati dal servizio Web. Ogni proprietà è decorata con un attributo JsonProperty, che contiene il nome di un campo JSON. Newtonsoft.Json userà questo mapping dei nomi dei campi JSON con le proprietà CLR durante la deserializzazione di dati JSON in oggetti del modello.

Nota

La definizione di classe precedente è stata semplificata e non modella completamente i dati JSON recuperati dal servizio Web.
Nel riquadro della soluzione aggiungere una nuova classe denominata RestService al progetto WebServiceTutorial. In RestService.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
```
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;
        }
    }
}
```
Questo codice definisce un singolo metodo, GetRepositoriesAsync, che recupera i dati dei repository .NET dall'API Web GitHub. Questo metodo usa il metodo HttpClient.GetAsync per inviare una richiesta GET all'API Web specificata dall'argomento uri. L'API Web invia una risposta che viene archiviata in un oggetto HttpResponseMessage. La risposta include un codice di stato HTTP, che indica se la richiesta HTTP ha avuto esito positivo o negativo. A condizione che la richiesta abbia esito positivo, l'API Web risponde con codice di stato HTTP 200 (OK) e una risposta JSON, nella proprietà HttpResponseMessage.Content. I dati JSON vengono letti in una string usando il metodo HttpContent.ReadAsStringAsync, prima di essere deserializzati in un oggetto List<Repository> con il metodo JsonConvert.DeserializeObject. Questo metodo usa i mapping tra i nomi dei campi JSON e le proprietà CLR, definite nella classe Repository, per eseguire la deserializzazione.
Compilare la soluzione per assicurarsi che non siano presenti errori.

Usare le classi del servizio Web

5 minuti rimanenti

In questo esercizio verrà creata un'interfaccia utente per utilizzare la classe RestService, che recupera i dati dei repository .NET dall'API Web GitHub. I dati recuperati verranno visualizzati da un elemento CollectionView.

Visual Studio
Visual Studio per Mac

Fare doppio clic su MainPage.xaml nel progetto WebServiceTutorial in Esplora soluzioni per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

<?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>

Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un elemento Button e da un elemento CollectionView. Button imposta il relativo evento Clicked su un gestore eventi denominato OnButtonClicked, che verrà creato nel passaggio successivo. CollectionView imposta la proprietà CollectionView.ItemTemplate su DataTemplate che definisce l'aspetto di ogni elemento in CollectionView. L'elemento figlio di DataTemplate è un StackLayout, che contiene tre oggetti Label. Gli oggetti Label associano le proprie proprietà Text rispettivamente alle proprietà Name, Description e GitHubHomeUrl di ogni oggetto Repository. Per altre informazioni sul data binding, vedere Xamarin.Forms Data Binding.

Inoltre, per CollectionView viene specificato un nome con l'attributo x:Name. Ciò consente al file code-behind di accedere all'oggetto usando il nome assegnato.

In Esplora soluzioni espandere MainPage.xaml nel progetto WebServiceTutorial e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:
```
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;
        }
    }
}
```
Il metodo OnButtonClicked, che viene eseguito dopo il tocco del controllo Button, richiama il metodo RestService.GetRepositoriesAsync per recuperare i dati dei repository .NET dall'API Web GitHub. Il metodo GetRepositoriesAsync richiede un argomento string che rappresenta l'URI dell'API Web richiamata e che viene restituito dal campo Constants.GitHubReposEndpoint.

Dopo aver recuperato i dati richiesti, la proprietà CollectionView.ItemsSource viene impostata sui dati recuperati.
Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto. Toccare il controllo Button per recuperare i dati dei repository .NET da GitHub:

In Visual Studio arrestare l'applicazione.

Per altre informazioni sull'utilizzo di servizi Web basati su REST in Xamarin.Forms, vedere Utilizzare un servizio Web RESTful (guida).

Fare doppio clic su MainPage.xaml nel progetto WebServiceTutorial nel riquadro della soluzione per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

<?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>

Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un elemento Button e da un elemento CollectionView. Button imposta il relativo evento Clicked su un gestore eventi denominato OnButtonClicked, che verrà creato nel passaggio successivo. CollectionView imposta la proprietà CollectionView.ItemTemplate su DataTemplate che definisce l'aspetto di ogni elemento in CollectionView. L'elemento figlio di DataTemplate è un StackLayout, che contiene tre oggetti Label. Gli oggetti Label associano le proprie proprietà Text rispettivamente alle proprietà Name, Description e GitHubHomeUrl di ogni oggetto Repository. Per altre informazioni sul data binding, vedere Xamarin.Forms Data Binding.

Inoltre, per CollectionView viene specificato un nome con l'attributo x:Name. Ciò consente al file code-behind di accedere all'oggetto usando il nome assegnato.

Nel riquadro della soluzione espandere MainPage.xaml nel progetto WebServiceTutorial e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:
```
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;
        }
    }
}
```
Il metodo OnButtonClicked, che viene eseguito dopo il tocco del controllo Button, richiama il metodo RestService.GetRepositoriesAsync per recuperare i dati dei repository .NET dall'API Web GitHub. Il metodo GetRepositoriesAsync richiede un argomento string che rappresenta l'URI dell'API Web richiamata e che viene restituito dal campo Constants.GitHubReposEndpoint.

Dopo aver recuperato i dati richiesti, la proprietà CollectionView.ItemsSource viene impostata sui dati recuperati.
Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto. Toccare il controllo Button per recuperare i dati dei repository .NET da GitHub:

In Visual Studio per Mac arrestare l'applicazione.

Per altre informazioni sull'utilizzo di servizi Web basati su REST in Xamarin.Forms, vedere Utilizzare un servizio Web RESTful (guida).

Congratulazioni!

Completata al 100%!

L'esercitazione è stata completata. Si è appreso come:

Usare il Gestione pacchetti NuGet per aggiungere Newtonsoft.Json a un Xamarin.Forms progetto.
Creare le classi del servizio Web.
Utilizzare le classi del servizio Web.

Passaggi successivi

Questa serie di esercitazioni ha illustrato le nozioni di base sulla creazione di applicazioni per dispositivi mobili con Xamarin.Forms. Per altre informazioni sullo Xamarin.Forms sviluppo, vedere le funzionalità seguenti:

Esistono quattro gruppi di controllo principali usati per creare l'interfaccia utente di un'applicazione Xamarin.Forms . Per altre informazioni, vedere Riferimento per i controlli.
Il data binding è una tecnica che consente di collegare le proprietà di due oggetti in modo che le modifiche apportate a una proprietà vengano automaticamente riflesse nell'altra proprietà. Per altre informazioni, vedere Data Binding.
Xamarin.Forms offre più esperienze di spostamento delle pagine, a seconda del tipo di pagina in uso. Per altre informazioni, vedere Navigazione.
Gli stili consentono di ridurre il markup ripetitivo e di modificare facilmente l'aspetto di un'applicazione. Per altre informazioni, vedere Applicazione di stili Xamarin.Forms alle app.
Le estensioni di markup XAML estendono le potenzialità e la flessibilità di XAML consentendo di impostare gli attributi degli elementi da origini diverse dalle stringhe di testo letterali. Per altre informazioni, vedere Estensioni di markup XAML.
I modelli di dati consentono di definire la presentazione dei dati nelle viste supportate. Per altre informazioni, vedere Data Templates (Modelli di dati).
Il rendering di ogni pagina, layout e vista viene eseguito in modo diverso su ogni piattaforma usando una classe Renderer che a sua volta crea un controllo nativo, lo dispone sullo schermo e aggiunge il comportamento specificato nel codice condiviso. Gli sviluppatori possono implementare le proprie classi Renderer per personalizzare l'aspetto e/o il comportamento di un controllo. Per altre informazioni, vedere Custom Renderers (Renderer personalizzati).
Anche gli effetti consentono la personalizzazione dei controlli nativi in ogni piattaforma. Gli effetti vengono creati in progetti specifici della piattaforma sottoclassando la PlatformEffect classe e vengono utilizzati associandoli a un controllo appropriato Xamarin.Forms . Per altre informazioni, vedere Effects (Effetti).
Il codice condiviso può accedere alle funzionalità native tramite la classe DependencyService. Per altre informazioni, vedere Accessing Native Features with DependencyService (Accesso alle funzionalità native con DependencyService).

In alternativa, la creazione di app per dispositivi mobili conXamarin.Forms , un libro di Charles Petzold, è un buon posto per saperne di più su Xamarin.Forms. Il libro è disponibile in formato PDF o in un'ampia gamma di formati di eBook.

Condividi tramite

Aggiungere Newtonsoft.Json

Creare classi del servizio Web

Usare le classi del servizio Web

Congratulazioni!

Passaggi successivi

Collegamenti correlati