Xamarin.Forms 웹 서비스 자습서

아티클
Developer (초급)
완료하는 데 14분 걸림

이 자습서를 시도하기 전에 다음 작업을 성공적으로 완료해야 합니다.

첫 번째 Xamarin.Forms 앱을 빌드하세요 빠른 시작.
StackLayout 자습서
레이블 자습서.
단추 자습서
CollectionView 자습서

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

NuGet 패키지 관리자를 사용하여 Newtonsoft.Json을 Xamarin.Forms 프로젝트에 추가합니다.
웹 서비스 클래스를 만듭니다.
웹 서비스 클래스를 사용합니다.

Visual Studio 2019 또는 Mac용 Visual Studio를 사용하여 GitHub 웹 API에서 .NET 리포지토리 데이터를 검색하는 방법을 보여 주는 간단한 애플리케이션을 만듭니다. 검색된 데이터는 CollectionView에 표시됩니다. 다음 스크린샷은 최종 애플리케이션을 보여 줍니다.

Newtonsoft.Json 추가

13분 남음

Visual Studio
Mac용 Visual Studio

이 자습서를 완료하려면 .NET을 사용한 모바일 개발 워크로드가 설치된 Visual Studio 2019(최신 릴리스)가 있어야 합니다. 또한 iOS에서 자습서 애플리케이션을 빌드하려면 페어링된 Mac이 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요. Visual Studio 2019를 Mac 빌드 호스트에 연결하는 방법에 대한 자세한 내용은 Xamarin.iOS 개발을 위해 Mac에 페어링을 참조하세요.

Visual Studio를 실행하고 WebServiceTutorial이라는 이름의 빈 Xamarin.Forms 앱을 새로 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각에서 솔루션의 이름이 WebServiceTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
솔루션 탐색기에서 WebServiceTutorial 프로젝트를 선택하고, 마우스 오른쪽 단추로 클릭한 다음, NuGet 패키지 관리...를 선택합니다.
NuGet 패키지 관리자에서 찾아보기 탭을 선택하고 Newtonsoft.Json NuGet 패키지를 검색하여 선택한 다음, 설치 단추를 클릭하여 프로젝트에 추가합니다.

이 패키지는 JSON 역직렬화를 애플리케이션에 통합하는 데 사용됩니다.
오류가 없는지 확인하기 위해 솔루션을 빌드합니다.

웹 서비스 클래스 만들기

11분 남음

웹 브라우저가 페이지를 검색하고 서버에 데이터를 보내는 데 사용하는 동일한 HTTP 동사를 사용하여 HTTP를 통해 REST 요청이 이루어집니다. 이 연습에서는 GET 동사를 사용하여 GitHub 웹 API에서 .NET 리포지토리 데이터를 검색하는 클래스를 만듭니다.

Visual Studio
Mac용 Visual Studio

솔루션 탐색기의 WebServiceTutorial 프로젝트에서 Constants라는 새 클래스를 프로젝트에 추가합니다. 그런 다음, Constants.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다.
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
이 코드는 단일 상수(웹 요청이 수행되는 엔드포인트)를 정의합니다.
솔루션 탐색기의 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; }
    }
}
```
이 코드는 웹 서비스에서 검색되는 JSON 데이터를 모델링하는 데 사용되는 Repository 클래스를 정의합니다. 각 속성은 JsonProperty 특성을 사용하여 데코레이트되고 JSON 필드 이름을 포함합니다. Newtonsoft.Json은 모델 개체에 JSON 데이터를 역직렬화할 때 CLR 속성에 대한 JSON 필드 이름의 매핑을 사용합니다.

참고 항목

위의 클래스 정의는 단순화되었으며 웹 서비스에서 검색되는 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 웹 API에서 .NET 리포지토리 데이터를 검색하는 단일 메서드(GetRepositoriesAsync)를 정의합니다. 이 메서드는 HttpClient.GetAsync 메서드를 사용하여 uri 인수에서 지정된 웹 API에 GET 요청을 보냅니다. 웹 API는 HttpResponseMessage 개체에 저장되는 응답을 보냅니다. 응답에는 HTTP 요청의 성공 또는 실패 여부를 나타내는 HTTP 상태 코드가 포함됩니다. 요청이 성공하면 웹 API는 HTTP 상태 코드 200(확인)과 HttpResponseMessage.Content 속성인 JSON 응답을 사용하여 응답합니다. 이 JSON 데이터는 JsonConvert.DeserializeObject 메서드를 사용하는 List<Repository> 개체에 역직렬화되기 전에 HttpContent.ReadAsStringAsync 메서드를 사용하는 string에 대해 읽힙니다. 이 메서드는 JSON 필드 이름과 Repository 클래스에 정의된 CLR 속성 간의 매핑을 사용하여 deserialization을 수행합니다.

참고 항목

UWP에서는 사용자 에이전트 헤더를 모든 요청에 추가하고 GitHub JSON 응답을 수락하도록 생성자에서 HttpClient 개체를 구성해야 합니다.

오류가 없는지 확인하기 위해 솔루션을 빌드합니다.

Solution Pad의 WebServiceTutorial 프로젝트에서 Constants라는 새 클래스를 프로젝트에 추가합니다. 그런 다음, Constants.cs에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다.
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
이 코드는 단일 상수(웹 요청이 수행되는 엔드포인트)를 정의합니다.
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; }
    }
}
```
이 코드는 웹 서비스에서 검색되는 JSON 데이터를 모델링하는 데 사용되는 Repository 클래스를 정의합니다. 각 속성은 JsonProperty 특성을 사용하여 데코레이트되고 JSON 필드 이름을 포함합니다. Newtonsoft.Json은 모델 개체에 JSON 데이터를 역직렬화할 때 CLR 속성에 대한 JSON 필드 이름의 매핑을 사용합니다.

참고 항목

위의 클래스 정의는 단순화되었으며 웹 서비스에서 검색되는 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 웹 API에서 .NET 리포지토리 데이터를 검색하는 단일 메서드(GetRepositoriesAsync)를 정의합니다. 이 메서드는 HttpClient.GetAsync 메서드를 사용하여 uri 인수에서 지정된 웹 API에 GET 요청을 보냅니다. 웹 API는 HttpResponseMessage 개체에 저장되는 응답을 보냅니다. 응답에는 HTTP 요청의 성공 또는 실패 여부를 나타내는 HTTP 상태 코드가 포함됩니다. 요청이 성공하면 웹 API는 HTTP 상태 코드 200(확인)과 HttpResponseMessage.Content 속성인 JSON 응답을 사용하여 응답합니다. 이 JSON 데이터는 JsonConvert.DeserializeObject 메서드를 사용하는 List<Repository> 개체에 역직렬화되기 전에 HttpContent.ReadAsStringAsync 메서드를 사용하는 string에 대해 읽힙니다. 이 메서드는 JSON 필드 이름과 Repository 클래스에 정의된 CLR 속성 간의 매핑을 사용하여 deserialization을 수행합니다.
오류가 없는지 확인하기 위해 솔루션을 빌드합니다.

웹 서비스 클래스 사용

5분 남음

이 연습에서는 GitHub 웹 API에서 .NET 리포지토리 데이터를 검색하는 RestService 클래스 사용 사용자 인터페이스를 만듭니다. 검색된 데이터는 CollectionView에서 표시됩니다.

Visual Studio
Mac용 Visual Studio

솔루션 탐색기의 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을 탭할 때 실행되며 GitHub 웹 API에서 .NET 리포지토리 데이터를 검색하는 RestService.GetRepositoriesAsync 메서드를 호출합니다. GetRepositoriesAsync 메서드에는 호출되는 웹 API의 URI를 나타내는 string 인수가 필요하고, 이 인수는 Constants.GitHubReposEndpoint 필드에서 반환됩니다.

요청된 데이터를 검색한 후에는 CollectionView.ItemsSource 속성이 검색된 데이터로 설정됩니다.
Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Button을 탭하여 GitHub에서 .NET 리포지토리 데이터를 검색합니다.

Visual Studio에서 애플리케이션을 중지합니다.

Xamarin.Forms에서 REST 기반 웹 서비스를 사용하는 방법은 RESTful Web Service(가이드)를 참조하세요.

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을 탭할 때 실행되며 GitHub 웹 API에서 .NET 리포지토리 데이터를 검색하는 RestService.GetRepositoriesAsync 메서드를 호출합니다. GetRepositoriesAsync 메서드에는 호출되는 웹 API의 URI를 나타내는 string 인수가 필요하고, 이 인수는 Constants.GitHubReposEndpoint 필드에서 반환됩니다.

요청된 데이터를 검색한 후에는 CollectionView.ItemsSource 속성이 검색된 데이터로 설정됩니다.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Button을 탭하여 GitHub에서 .NET 리포지토리 데이터를 검색합니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

Xamarin.Forms에서 REST 기반 웹 서비스를 사용하는 방법은 RESTful Web Service(가이드)를 참조하세요.

축하합니다!

100% 완료!

축하합니다. 자습서를 마쳤습니다. 여기서는 다음과 같은 방법을 알아보았습니다.

NuGet 패키지 관리자를 사용하여 Newtonsoft.Json을 Xamarin.Forms 프로젝트에 추가합니다.
웹 서비스 클래스를 만듭니다.
웹 서비스 클래스를 사용합니다.

다음 단계

이 일련의 자습서에서는 Xamarin.Forms를 사용하여 모바일 애플리케이션을 만드는 기본 사항을 다룹니다. Xamarin.Forms 개발에 관한 자세한 내용은 다음 기능을 참고하세요.

Xamarin.Forms 애플리케이션의 사용자 인터페이스를 만드는 데 사용되는 4개의 주 컨트롤 그룹이 있습니다. 자세한 내용은 컨트롤 참조를 참조하세요.
데이터 바인딩은 두 개체의 속성을 연결하여 한 속성의 변경 내용이 다른 속성에 자동으로 반영되도록 하는 기술입니다. 자세한 내용은 데이터 바인딩을 참조하세요.
Xamarin.Forms는 사용되는 페이지 형식에 따라 여러 페이지 탐색 환경을 제공합니다. 자세한 내용은 탐색을 참조하세요.
스타일을 통해 반복 태그를 줄이고, 애플리케이션 모양을 쉽게 변경할 수 있습니다. 자세한 내용은 Xamarin.Forms 앱 스타일 지정을 참조하세요.
XAML 태그 확장은 요소 특성을 리터럴 텍스트 문자열 이외의 원본으로 설정할 수 있도록 하여 XAML의 성능과 유연성을 확장합니다. 자세한 내용은 XAML 태그 확장을 참조하세요.
데이터 템플릿은 지원되는 보기에서 데이터 표현을 정의하는 기능을 제공합니다. 자세한 내용은 데이터 템플릿을 참조하세요.
각 페이지, 레이아웃 및 보기는 차례로 네이티브 컨트롤을 만들고, 화면에 정렬하고, 공유 코드에 지정된 동작을 추가하는 Renderer 클래스를 사용하여 각 플랫폼에서 다르게 렌더링됩니다. 개발자는 컨트롤의 모양 및/또는 동작을 사용자 지정하기 위해 자신 만의 사용자 지정 Renderer 클래스를 구현할 수 있습니다. 자세한 내용은 사용자 지정 렌더러를 참조하세요.
각 플랫폼의 네이티브 컨트롤을 사용자 지정할 수 있는 효과가 있습니다. 효과의 경우, 플랫폼별 프로젝트에서 PlatformEffect 클래스를 하위 클래스로 지정하여 만들어지고, 적절한 Xamarin.Forms 컨트롤에 연결하여 사용됩니다. 자세한 내용은 효과를 참조하세요.
공유 코드는 DependencyService 클래스를 통해 네이티브 기능에 액세스할 수 있습니다. 자세한 내용은 DependencyService를 사용한 네이티브 기능 액세스를 참조하세요.

또는 Charles Petzold의 서적인 Creating Mobile Apps with Xamarin.Forms에서 Xamarin.Forms에 대해 자세히 배울 수도 있습니다. 이 책은 PDF 또는 다양한 전자책 형식으로 제공됩니다.