Xamarin.Forms Samouczek dotyczący usługi internetowej

Artykuł
Developer (Początkujący)
Czas do ukończenia: 14 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .
Samouczek dotyczący obiektu StackLayout.
Samouczek dotyczący obiektu Label.
Samouczek dotyczący obiektu Button.
Samouczek dotyczący obiektu CollectionView.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Użyj Menedżer pakietów NuGet, aby dodać plik Newtonsoft.Json do Xamarin.Forms projektu.
Tworzenie klas usług internetowych.
Używanie klas usług internetowych.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak pobrać dane repozytorium .NET z internetowego interfejsu API usługi GitHub. Pobrane dane będą wyświetlane w widoku CollectionView. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Dodawanie pakietu Newtonsoft.Json

Pozostały czas: 13 min

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie WebServiceTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę WebServiceTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W Eksploratorze rozwiązań wybierz projekt WebServiceTutorial, kliknij prawym przyciskiem myszy i wybierz polecenie Zarządzaj pakietami NuGet...:
W Menedżerze pakietów NuGet wybierz kartę Przeglądaj, wyszukaj pakiet NuGet Newtonsoft.Json, zaznacz go, a następnie kliknij przycisk Zainstaluj, aby dodać pakiet do projektu:

Ten pakiet zostanie użyty w celu uwzględnienia deserializacji JSON w aplikacji.
Skompiluj rozwiązanie, aby upewnić się, że nie ma żadnych błędów.

Tworzenie klas usług internetowych

Pozostały czas: 11 min

Żądania REST są wykonywane za pośrednictwem protokołu HTTP przy użyciu tych samych poleceń protokołu HTTP, których przeglądarki internetowe używają do przeglądania stron i wysyłania danych do serwerów. W tym ćwiczeniu utworzysz klasę, która użyje polecenia GET do pobrania danych repozytorium .NET z internetowego interfejsu API usługi GitHub.

Program Visual Studio
Visual Studio dla komputerów Mac

W Eksploratorze rozwiązań w projekcie WebServiceTutorial dodaj do projektu nową klasę o nazwie Constants. Następnie w pliku Constants.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Ten kod definiuje jedną stałą — punkt końcowy, do którego będą kierowane żądania internetowe.
W Eksploratorze rozwiązań w projekcie WebServicesTutorial dodaj do projektu nową klasę o nazwie Repository. Następnie w pliku Repository.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
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; }
    }
}
```
Ten kod definiuje klasę Repository, która jest używana do modelowania danych JSON pobranych z usługi internetowej. Każda właściwość ma nadany atrybut JsonProperty zawierający nazwę pola JSON. Plik Newtonsoft.Json użyje tego mapowania nazw pól JSON na właściwości CLR podczas deserializacji danych JSON do obiektów modelu.

Uwaga

Powyższa definicja klasy została uproszczona i nie w pełni modeluje dane JSON pobrane z usługi internetowej.
W Eksploratorze rozwiązań w projekcie WebServiceTutorial dodaj do projektu nową klasę o nazwie RestService. Następnie w pliku RestService.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
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;
        }
    }
}
```
Ten kod definiuje jedną metodę, GetRepositoriesAsync, która pobiera dane repozytorium .NET z internetowego interfejsu API usługi GitHub. Ta metoda używa metody HttpClient.GetAsync, aby wysłać żądanie GET do internetowego interfejsu API określonego przez argument uri. Internetowy interfejs API odsyła odpowiedź, która jest przechowywana w obiekcie HttpResponseMessage. Odpowiedź zawiera kod stanu protokołu HTTP, który wskazuje, czy żądanie protokołu HTTP zakończyło się pomyślnie. Zakładając, że żądanie zakończyło się powodzeniem, internetowy interfejs API odpowie kodem stanu protokołu HTTP 200 (OK) i odpowiedzią w formacie JSON, która znajduje się we właściwości HttpResponseMessage.Content. Te dane JSON są wczytywane do elementu string przy użyciu metody HttpContent.ReadAsStringAsync przed rozpoczęciem deserializacji do obiektu List<Repository> przy użyciu metody JsonConvert.DeserializeObject. Ta metoda używa mapowania między nazwami pól JSON a właściwościami CLR, które są zdefiniowane w klasie Repository, aby wykonać deserializację.

Uwaga

Na platformie UWP należy skonfigurować HttpClient obiekt w konstruktorze, aby dodać nagłówek agenta użytkownika do wszystkich żądań i zaakceptować odpowiedzi w formacie JSON usługi GitHub.
Skompiluj rozwiązanie, aby upewnić się, że nie ma żadnych błędów.

W okienku rozwiązania w projekcie WebServiceTutorial dodaj do projektu nową klasę o nazwie Constants. Następnie w pliku Constants.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Ten kod definiuje jedną stałą — punkt końcowy, do którego będą kierowane żądania internetowe.
W okienku rozwiązania w projekcie WebServicesTutorial dodaj do projektu nową klasę o nazwie Repository. Następnie w pliku Repository.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
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; }
    }
}
```
Ten kod definiuje klasę Repository, która jest używana do modelowania danych JSON pobranych z usługi internetowej. Każda właściwość ma nadany atrybut JsonProperty zawierający nazwę pola JSON. Plik Newtonsoft.Json użyje tego mapowania nazw pól JSON na właściwości CLR podczas deserializacji danych JSON do obiektów modelu.

Uwaga

Powyższa definicja klasy została uproszczona i nie w pełni modeluje dane JSON pobrane z usługi internetowej.
W okienku rozwiązania w projekcie WebServiceTutorial dodaj do projektu nową klasę o nazwie RestService. Następnie w pliku RestService.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
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;
        }
    }
}
```
Ten kod definiuje jedną metodę, GetRepositoriesAsync, która pobiera dane repozytorium .NET z internetowego interfejsu API usługi GitHub. Ta metoda używa metody HttpClient.GetAsync, aby wysłać żądanie GET do internetowego interfejsu API określonego przez argument uri. Internetowy interfejs API odsyła odpowiedź, która jest przechowywana w obiekcie HttpResponseMessage. Odpowiedź zawiera kod stanu protokołu HTTP, który wskazuje, czy żądanie protokołu HTTP zakończyło się pomyślnie. Zakładając, że żądanie zakończyło się powodzeniem, internetowy interfejs API odpowie kodem stanu protokołu HTTP 200 (OK) i odpowiedzią w formacie JSON, która znajduje się we właściwości HttpResponseMessage.Content. Te dane JSON są wczytywane do elementu string przy użyciu metody HttpContent.ReadAsStringAsync przed rozpoczęciem deserializacji do obiektu List<Repository> przy użyciu metody JsonConvert.DeserializeObject. Ta metoda używa mapowania między nazwami pól JSON a właściwościami CLR, które są zdefiniowane w klasie Repository, aby wykonać deserializację.
Skompiluj rozwiązanie, aby upewnić się, że nie ma żadnych błędów.

Używanie klas usług internetowych

Pozostały czas: 5 min

W tym ćwiczeniu utworzysz interfejs użytkownika, aby używać klasy RestService, która pobiera dane repozytorium .NET z internetowego interfejsu API usługi GitHub. Pobrane dane będą wyświetlane w widoku CollectionView.

Program Visual Studio
Visual Studio dla komputerów Mac

W Eksploratorze rozwiązań w projekcie WebServiceTutorial dwukrotnie kliknij plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektów Button oraz CollectionView. Obiekt Button ustawia zdarzenie Clicked na program obsługi zdarzeń o nazwie OnButtonClicked, który zostanie utworzony w następnym kroku. Obiekt CollectionView powoduje ustawienie właściwości CollectionView.ItemTemplate na element DataTemplate, aby zdefiniować wygląd każdego elementu w obiekcie CollectionView. Element podrzędny elementu DataTemplate to StackLayout, który zawiera trzy obiekty Label. Obiekty Label tworzą powiązanie swoich właściwości Text z właściwościami Name, Description i GitHubHomeUrl każdego obiektu Repository. Aby uzyskać więcej informacji na temat powiązania danych, zobacz Xamarin.Forms Powiązanie danych.

Ponadto obiekt CollectionView ma nazwę określoną za pomocą atrybutu x:Name. Dzięki temu plik związany z kodem może uzyskać dostęp do obiektu przy użyciu przypisanej nazwy.
W Eksploratorze rozwiązań w projekcie WebServiceTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
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;
        }
    }
}
```
Metoda OnButtonClicked, wykonywana po naciśnięciu przycisku Button, wywołuje metodę RestService.GetRepositoriesAsync w celu pobrania danych repozytorium .NET z internetowego interfejsu API usługi GitHub. Metoda GetRepositoriesAsync wymaga argumentu string zawierającego identyfikator URI wywoływanego internetowego interfejsu API. Jest on zwracany przez pole Constants.GitHubReposEndpoint.

Po pobraniu żądanych danych właściwość CollectionView.ItemsSource jest ustawiana na pobrane dane.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android. Naciśnij przycisk Button, aby pobrać dane repozytorium .NET z usługi GitHub:

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat korzystania z usług internetowych opartych na protokole REST w programie Xamarin.Forms, zobacz Korzystanie z usługi internetowej RESTful (przewodnik).

W okienku rozwiązania w projekcie WebServiceTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektów Button oraz CollectionView. Obiekt Button ustawia zdarzenie Clicked na program obsługi zdarzeń o nazwie OnButtonClicked, który zostanie utworzony w następnym kroku. Obiekt CollectionView powoduje ustawienie właściwości CollectionView.ItemTemplate na element DataTemplate, aby zdefiniować wygląd każdego elementu w obiekcie CollectionView. Element podrzędny elementu DataTemplate to StackLayout, który zawiera trzy obiekty Label. Obiekty Label tworzą powiązanie swoich właściwości Text z właściwościami Name, Description i GitHubHomeUrl każdego obiektu Repository. Aby uzyskać więcej informacji na temat powiązania danych, zobacz Xamarin.Forms Powiązanie danych.

Ponadto obiekt CollectionView ma nazwę określoną za pomocą atrybutu x:Name. Dzięki temu plik związany z kodem może uzyskać dostęp do obiektu przy użyciu przypisanej nazwy.
W okienku rozwiązania w projekcie WebServiceTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:
```
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;
        }
    }
}
```
Metoda OnButtonClicked, wykonywana po naciśnięciu przycisku Button, wywołuje metodę RestService.GetRepositoriesAsync w celu pobrania danych repozytorium .NET z internetowego interfejsu API usługi GitHub. Metoda GetRepositoriesAsync wymaga argumentu string zawierającego identyfikator URI wywoływanego internetowego interfejsu API. Jest on zwracany przez pole Constants.GitHubReposEndpoint.

Po pobraniu żądanych danych właściwość CollectionView.ItemsSource jest ustawiana na pobrane dane.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android. Naciśnij przycisk Button, aby pobrać dane repozytorium .NET z usługi GitHub:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat korzystania z usług internetowych opartych na protokole REST w programie Xamarin.Forms, zobacz Korzystanie z usługi internetowej RESTful (przewodnik).

Gratulacje!

Ukończono 100%!

Gratulujemy ukończenia tego samouczka, w którym przedstawiono sposób wykonywania następujących czynności:

Użyj Menedżer pakietów NuGet, aby dodać plik Newtonsoft.Json do Xamarin.Forms projektu.
Tworzenie klas usług internetowych.
Używanie klas usług internetowych.

Następne kroki

W tej serii samouczków omówiono podstawy tworzenia aplikacji mobilnych za pomocą programu Xamarin.Forms. Aby dowiedzieć się więcej na temat Xamarin.Forms programowania, przeczytaj o następujących funkcjach:

Istnieją cztery główne grupy sterowania używane do tworzenia interfejsu Xamarin.Forms użytkownika aplikacji. Aby uzyskać więcej informacji, zobacz Dokumentacja kontrolek.
Powiązanie danych to technika łączenia właściwości dwóch obiektów w taki sposób, aby zmiany w jednej właściwości były automatycznie odzwierciedlane w drugiej. Aby uzyskać więcej informacji, zobacz Powiązanie danych.
Xamarin.Forms Zapewnia wiele środowisk nawigacji stron w zależności od używanego typu strony. Aby uzyskać więcej informacji, zobacz Nawigacja.
Style pozwalają ograniczyć konieczność pisania powtarzających się fragmentów kodu i umożliwiają łatwiejszą zmianę wyglądu aplikacji. Aby uzyskać więcej informacji, zobacz Styling Apps (Aplikacje do stylówXamarin.Forms).
Rozszerzenia znaczników języka XAML zwiększają możliwości i elastyczność kodu XAML, umożliwiając określanie atrybutów elementów ze źródeł innych niż ciągi tekstowe literałów. Aby uzyskać więcej informacji, zobacz Rozszerzenia znaczników języka XAML.
Szablony danych umożliwiają definiowanie prezentacji danych w obsługiwanych widokach. Aby uzyskać więcej informacji, zobacz Szablony danych.
Każda strona, układ i widok są renderowane na poszczególnych platformach w inny sposób przy użyciu klasy Renderer, która z kolei tworzy natywną kontrolkę, umieszcza ją na ekranie i dodaje zachowanie określone w udostępnionym kodzie. Deweloperzy mogą implementować własne, niestandardowe klasy Renderer, aby dostosowywać wygląd i/lub zachowanie kontrolki. Aby uzyskać więcej informacji, zobacz Niestandardowe programy renderujące.
Efekty również umożliwiają dostosowywanie natywnych kontrolek na poszczególnych platformach. Efekty są tworzone w projektach specyficznych dla platformy przez podklasę PlatformEffect klasy i są używane przez dołączenie ich do odpowiedniej Xamarin.Forms kontrolki. Aby uzyskać więcej informacji, zobacz Efekty.
Udostępniony kod może uzyskać dostęp do funkcji natywnej za pośrednictwem klasy DependencyService. Aby uzyskać więcej informacji, zobacz Uzyskiwanie dostępu do funkcji natywnych za pomocą klasy DependencyService.

Alternatywnie, Tworzenie aplikacji mobilnych za pomocąXamarin.Forms , książki Charles Petzold, jest dobrym miejscem, aby dowiedzieć się więcej o Xamarin.Forms. Książka jest dostępna w formacie PDF i w różnych formatach książek elektronicznych.

Udostępnij za pośrednictwem