Xamarin.Forms Web 服務教學課程

在嘗試此教學課程之前，您應該已成功完成：

建置您的第一個 Xamarin.Forms 應用程式快速入門。
StackLayout 教學課程。
標籤教學課程。
按鈕教學課程。
CollectionView 教學課程。

在本教學課程中，您會了解如何：

使用 NuGet 封裝管理員將 Newtonsoft.Json 新增至Xamarin.Forms專案。
建立 Web 服務類別。
取用 Web 服務類別。

您將會使用 Visual Studio 2019 或 Visual Studio for Mac 來建立能示範如何從 GitHub Web API 擷取.NET存放庫資料的簡單應用程式。擷取的資料會顯示在 CollectionView 中。下列螢幕擷取畫面顯示的是最終的應用程式：

新增 Newtonsoft.Json

剩餘 13 分鐘

Visual Studio
Visual Studio for Mac

若要完成此教學課程，您應該有 Visual Studio 2019 (最新版本)，並已安裝 [使用 .NET 進行行動開發] 工作負載。此外，您還需要配對的 Mac 才能在 iOS 上建置教學課程應用程式。如需安裝 Xamarin 平台的相關資訊，請參閱安裝 Xamarin。如需有關將 Visual Studio 2019 連線至 Mac 建置主機的相關資訊，請參閱為 Xamarin.iOS 開發與 Mac 配對。

啟動 Visual Studio，並建立名為 WebServiceTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段，要求將解決方案命名為 WebServiceTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [方案總管] 中選取 WebServiceTutorial 專案，並以滑鼠右鍵按一下 [管理 NuGet 套件...] 來將其選取：
在 [NuGet 套件管理員] 中選取 [瀏覽] 索引標籤，搜尋 Newtonsoft.Json NuGet 套件並加以選取，然後按一下 [安裝] 按鈕，將其新增至專案：

此套件用來將 JSON 還原序列化併入應用程式。
建置解決方案以確定沒有任何錯誤。

建立 Web 服務類別

剩餘 11 分鐘

REST 要求是使用網頁瀏覽器用來擷取頁面以及將資料傳送到伺服器的相同 HTTP 指令動詞，並透過 HTTP 提出。在此練習中，您會建立使用 GET 指令動詞從 GitHub Web API 擷取 .NET 存放庫資料的類別。

Visual Studio
Visual Studio for Mac

在 [方案總管] 的 WebServiceTutorial 專案中，將名為 Constants 的新類別新增到此專案。然後在 Constants.cs 中，移除所有範本程式碼，並取代為下列程式碼：
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
此程式碼會定義單一常數，也就是將對其提出 Web 要求的端點。
在 [方案總管] 的 WebServicesTutorial 專案中，將名為 Repository 的新類別新增到此專案。然後在 Repository.cs 中，移除所有範本程式碼，並取代為下列程式碼：
```
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; }
    }
}
```
此程式碼會定義 Repository 類別，用於為從 Web 服務擷取的 JSON 資料建立模型。每個屬性 (property) 都會以 JsonProperty 屬性 (attribute) 裝飾，其中包含 JSON 欄位名稱。 Newtonsoft.Json 在將 JSON 資料還原序列化為模型物件時，會使用 JSON 欄位名稱與 CLR 屬性的這項對應。

注意

上述類別定義已經簡化，並不會將從 Web 服務擷取的 JSON 資料完全用於建立模型。

在 [方案總管] 的 WebServiceTutorial 專案中，將名為 RestService 的新類別新增到此專案。然後在 RestService.cs 中，移除所有範本程式碼，並取代為下列程式碼：

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

此程式碼會定義從 GitHub Web API 擷取 .NET 存放庫資料的單一方法 GetRepositoriesAsync。這個方法會使用 HttpClient.GetAsync 方法，將 GET 要求傳送至 uri 引數所指定的 Web API。 Web API 會傳送儲存在 HttpResponseMessage 物件中的回應。此回應包括 HTTP 狀態碼，這表示 HTTP 要求成功或失敗。假設要求成功，Web API 就會回應 HTTP 狀態碼 200 (確定) 和 JSON 回應 (其位於 HttpResponseMessage.Content 屬性中)。此 JSON 資料會先讀取到使用 HttpContent.ReadAsStringAsync 方法的 string，再使用 JsonConvert.DeserializeObject 方法還原序列化為 List<Repository> 物件。此方法會使用 JSON 欄位名稱與 CLR 屬性之間的對應 (定義於 Repository 類別中) 來執行還原序列化。

注意

在UWP上，您必須 HttpClient 在建構函式中設定物件，以將使用者代理程式標頭新增至所有要求，以及接受 GitHub JSON 回應。

建置解決方案以確定沒有任何錯誤。

在 [Solution Pad] 的 WebServiceTutorial 專案中，將名為 Constants 的新類別新增到此專案。然後在 Constants.cs 中，移除所有範本程式碼，並取代為下列程式碼：
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
此程式碼會定義單一常數，也就是將對其提出 Web 要求的端點。
在 [Solution Pad] 的 WebServicesTutorial 專案中，將名為 Repository 的新類別新增到此專案。然後在 Repository.cs 中，移除所有範本程式碼，並取代為下列程式碼：
```
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; }
    }
}
```
此程式碼會定義 Repository 類別，用於為從 Web 服務擷取的 JSON 資料建立模型。每個屬性 (property) 都會以 JsonProperty 屬性 (attribute) 裝飾，其中包含 JSON 欄位名稱。 Newtonsoft.Json 在將 JSON 資料還原序列化為模型物件時，會使用 JSON 欄位名稱與 CLR 屬性的這項對應。

注意

上述類別定義已經簡化，並不會將從 Web 服務擷取的 JSON 資料完全用於建立模型。

在 [Solution Pad] 的 WebServiceTutorial 專案中，將名為 RestService 的新類別新增到此專案。然後在 RestService.cs 中，移除所有範本程式碼，並取代為下列程式碼：

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

此程式碼會定義從 GitHub Web API 擷取 .NET 存放庫資料的單一方法 GetRepositoriesAsync。這個方法會使用 HttpClient.GetAsync 方法，將 GET 要求傳送至 uri 引數所指定的 Web API。 Web API 會傳送儲存在 HttpResponseMessage 物件中的回應。此回應包括 HTTP 狀態碼，這表示 HTTP 要求成功或失敗。假設要求成功，Web API 就會回應 HTTP 狀態碼 200 (確定) 和 JSON 回應 (其位於 HttpResponseMessage.Content 屬性中)。此 JSON 資料會先讀取到使用 HttpContent.ReadAsStringAsync 方法的 string，再使用 JsonConvert.DeserializeObject 方法還原序列化為 List<Repository> 物件。此方法會使用 JSON 欄位名稱與 CLR 屬性之間的對應 (定義於 Repository 類別中) 來執行還原序列化。

建置解決方案以確定沒有任何錯誤。

取用 Web 服務類別

剩餘 5 分鐘

在此練習中，您會建立使用者介面來取用 RestService 類別，其會從 GitHub Web API 擷取 .NET 存放庫資料。擷取的資料會由 CollectionView 顯示。

Visual Studio
Visual Studio for Mac

在 [方案總管] 的 WebServiceTutorial 專案中，按兩下 MainPage.xaml 將其開啟。然後在 MainPage.xaml 中，移除所有範本程式碼，並取代為下列程式碼：

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

此程式碼會以宣告方式定義頁面的使用者介面，其包含 Button，以及 CollectionView。 Button 會將其 Clicked 事件設定為名為 OnButtonClicked 的事件處理常式 (將在下一個步驟中建立)。 CollectionView 會將 CollectionView.ItemTemplate 屬性設為 DataTemplate，以定義 CollectionView 中每個項目的外觀。 DataTemplate 的子系是 StackLayout，其中包含三個 Label 物件。 Label 物件會將其 Text 屬性繫結到每個 Repository 物件的 Name、Description 和 GitHubHomeUrl 屬性。如需數據系結的詳細資訊，請參閱 Xamarin.Forms 數據系結。

此外，CollectionView 具有以 x:Name 屬性指定的名稱。這可讓程式碼後置檔案使用指派的名稱來存取物件。

在 [方案總管] 的 WebServiceTutorial 專案中展開 MainPage.xaml，然後按兩下 MainPage.xaml.cs 將其開啟。然後在 MainPage.xaml.cs 中，移除所有範本程式碼，並取代為下列程式碼：
```
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;
        }
    }
}
```
OnButtonClicked 方法 (在點選 Button 時執行) 會叫用 RestService.GetRepositoriesAsync 方法，以從 GitHub Web API 擷取 .NET 存放庫資料。 GetRepositoriesAsync 方法需要 string 引數 (代表所叫用 Web API 的 URI)，而這是由 Constants.GitHubReposEndpoint 欄位傳回。

擷取要求的資料後，CollectionView.ItemsSource 屬性即會設為擷取的資料。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。點選 Button，以從 GitHub 擷取 .NET 存放庫資料：

在 Visual Studio 中，停止應用程式。

如需在中使用 Xamarin.FormsREST 型 Web 服務的詳細資訊，請參閱取用 RESTful Web 服務（指南）。

在 [Solution Pad] 的 WebServiceTutorial 專案中，按兩下 MainPage.xaml 將其開啟。然後在 MainPage.xaml 中，移除所有範本程式碼，並取代為下列程式碼：

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

此程式碼會以宣告方式定義頁面的使用者介面，其包含 Button，以及 CollectionView。 Button 會將其 Clicked 事件設定為名為 OnButtonClicked 的事件處理常式 (將在下一個步驟中建立)。 CollectionView 會將 CollectionView.ItemTemplate 屬性設為 DataTemplate，以定義 CollectionView 中每個項目的外觀。 DataTemplate 的子系是 StackLayout，其中包含三個 Label 物件。 Label 物件會將其 Text 屬性繫結到每個 Repository 物件的 Name、Description 和 GitHubHomeUrl 屬性。如需數據系結的詳細資訊，請參閱 Xamarin.Forms 數據系結。

此外，CollectionView 具有以 x:Name 屬性指定的名稱。這可讓程式碼後置檔案使用指派的名稱來存取物件。

在 [Solution Pad] 的 WebServiceTutorial 專案中展開 MainPage.xaml，然後按兩下 MainPage.xaml.cs 將其開啟。然後在 MainPage.xaml.cs 中，移除所有範本程式碼，並取代為下列程式碼：
```
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;
        }
    }
}
```
OnButtonClicked 方法 (在點選 Button 時執行) 會叫用 RestService.GetRepositoriesAsync 方法，以從 GitHub Web API 擷取 .NET 存放庫資料。 GetRepositoriesAsync 方法需要 string 引數 (代表所叫用 Web API 的 URI)，而這是由 Constants.GitHubReposEndpoint 欄位傳回。

擷取要求的資料後，CollectionView.ItemsSource 屬性即會設為擷取的資料。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式。點選 Button，以從 GitHub 擷取 .NET 存放庫資料：

在 Visual Studio for Mac 中，停止應用程式。

如需在中使用 Xamarin.FormsREST 型 Web 服務的詳細資訊，請參閱取用 RESTful Web 服務（指南）。

恭喜！

100% 完成！

恭喜您完成此教學課程，您已學會如何：

使用 NuGet 封裝管理員將 Newtonsoft.Json 新增至Xamarin.Forms專案。
建立 Web 服務類別。
取用 Web 服務類別。

下一步

本系列教學課程涵蓋使用 Xamarin.Forms建立行動應用程式的基本概念。若要深入了解 Xamarin.Forms 開發，請閱讀下列功能：

有四個主要控件群組可用來建立應用程式的使用者介面 Xamarin.Forms 。如需詳細資訊，請參閱控制項參考。
資料繫結是連結兩個物件屬性的技術，以便在其中一個屬性變更時，自動反映在另一個屬性上。如需詳細資訊，請參閱資料繫結。
Xamarin.Forms 根據所使用的頁面類型，提供多個頁面瀏覽體驗。如需詳細資訊，請參閱導覽。
樣式功能有助於減少重複的標記，並可更輕鬆地變更應用程式外觀。如需詳細資訊，請參閱設定應用程式樣式Xamarin.Forms。
XAML 標記延伸可讓您從常值文字字串以外的來源設定項目屬性，以增強 XAML 的功能和彈性。如需詳細資訊，請參閱 XAML 標記延伸。
資料範本可以針對支援的檢視，定義資料的呈現方式。如需詳細資訊，請參閱資料範本。
系統會在每個平台上使用 Renderer 類別，以不同的方式呈現每個頁面、版面配置和檢視，進而建立原生控制項、將其排列在畫面上，然後加入在共用程式碼中指定的行為。開發人員可以實作自己的自訂 Renderer 類別，以自訂控制項的外觀及/或行為。如需詳細資訊，請參閱自訂呈現方式。
效果也可以允許在每個平台上自訂原生控制項。效果是透過子類別 PlatformEffect 化類別在平臺特定專案中建立，並藉由將它們附加至適當的 Xamarin.Forms 控件來取用。如需詳細資訊，請參閱效果。
共用程式碼可以透過 DependencyService 類別存取原生功能。如需有關詳細資訊，請參閱透過 DependencyService 存取原生功能。

或者， 使用建立行動應用程式， Xamarin.Forms查理斯·佩茨羅德的一本書，是深入瞭解 Xamarin.Forms的好地方。此書籍以 PDF 形式或多種電子書格式提供。

新增 Newtonsoft.Json

建立 Web 服務類別

取用 Web 服務類別

恭喜！

下一步

相關連結