Xamarin.Forms에서 AWS의 APIGateway를 두드려 보았습니다.

이 기사는 [초보자·학생씨 환영! ] Xamarin Part 1 Advent Calendar 2017의 둘째 날입니다.

할 일

Xamarin.Forms의 앱에서 WebAPI를 두드려 결과를 받고 표시합니다.
WebAPI(클라우드 환경)는 AWS의 API Gateway를 사용합니다.

개발 환경

구름

Amazon Web Service

API 게이트웨이

Lambda

지역

Windows 10

Visual Studio 2017 Community

Nexus 5X (Android 8.0.0)

NuGet 패키지

Newtonsoft.Json

AWS

API 게이트웨이와 람다 준비

API Gateway와 Lambda의 두 가지 서비스를 사용합니다.
환경 구축 등은 아래를 참조하십시오.

AWS의 APIGateway와 Lambda의 조합을 간편하게 작성해 보았습니다.

Lambda 코드

API Gateway 및 Lambda를 만든 후에는 Lambda 코드를 다음과 같이 합니다. (붙여 구운 칼날의) Python입니다.
Param1과 Param2를 합한 것입니다.

import json

print('Loading function')

def lambda_handler(event, context):

    body = json.loads(event['body'])

    print(body)

    response = []

    for param in body:
        data = {}
        data['Id'] = param['Id']
        data['Sum'] = param['Param1'] + param['Param2']
        response.append(data)


    return {
        'statusCode': '200',
        'headers': {
            'Content-Type': 'application/json',
        },
        'body': json.dumps(response),
    }

이것으로 AWS 준비가 완료되었습니다.

Xamarin.Forms

Xamarin.Forms의 새 프로젝트를 만듭니다.

NuGet 패키지 설치

Newtonsoft.Json를 찾아 추가합니다.

Xamarin.Forms 코드

파라미터를 (이번은 고정값입니다만) 표시해, 버튼 누르면 APIGateway를 두드려, 응답의 결과를 표시합니다.

우선 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"
             xmlns:local="clr-namespace:TestAPIGateway"
             x:Class="TestAPIGateway.MainPage">
    <ContentPage.Content>
        <StackLayout Margin="20">
            <Label Text="'Id': 1, 'Param1': 1, 'Param2': 3"></Label>
            <Label Text="'Id': 2, 'Param1': 4, 'Param2': 7"></Label>
            <Label Text="'Id': 3, 'Param1': 2, 'Param2': 5"></Label>
            <Button Text="Click Me!" Clicked="Button_OnClicked"></Button>
            <Label x:Name="ResultStatus" Text="？？？"></Label>
            <Label x:Name="Id1Text" Text="？？？"></Label>
            <Label x:Name="Id2Text" Text="？？？"></Label>
            <Label x:Name="Id3Text" Text="？？？"></Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

다음입니다. WebAPI 요청/응답 매개변수 클래스를 작성합니다.

public class RequestItem
{
    public int Id { get; set; }
    public int Param1 { get; set; }
    public int Param2 { get; set; }
}
public class ResponseItem
{
    public int Id { get; set; }
    public int Sum { get; set; }
}

그리고 마지막으로, 버튼을 누를 때의 처리를 작성합니다.

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void Button_OnClicked(object sender, EventArgs e)
    {
        var httpClient = new HttpClient
        {
            Timeout = TimeSpan.FromSeconds(30)
        };

        /* 送信用データを作成 */
        var item = new List<RequestItem>
        {
            new RequestItem
            {
                Id = 1,
                Param1 = 1,
                Param2 = 3,
            },
            new RequestItem
            {
                Id = 2,
                Param1 = 4,
                Param2 = 7,
            },
            new RequestItem
            {
                Id = 3,
                Param1 = 2,
                Param2 = 5,
            }
        };

        var json = JsonConvert.SerializeObject(item, Formatting.Indented);

        var content = new StringContent(json, System.Text.Encoding.UTF8, "application/json");


        /* 送信(URIは適宜変更してください) */
        var response = await httpClient.PostAsync("https://xxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/TestAPIGateway", content);


        if (response.IsSuccessStatusCode)
        {
            var result = await response.Content.ReadAsStringAsync();

            System.Diagnostics.Debug.WriteLine("Success Status");
            System.Diagnostics.Debug.WriteLine(result);


            var resultJson = JsonConvert.DeserializeObject<List<ResponseItem>>(result);

            ResultStatus.Text = "Success";
            Id1Text.Text = $"'Id': {resultJson[0].Id}, 'Sum': {resultJson[0].Sum}";
            Id2Text.Text = $"'Id': {resultJson[1].Id}, 'Sum': {resultJson[1].Sum}";
            Id3Text.Text = $"'Id': {resultJson[2].Id}, 'Sum': {resultJson[2].Sum}";
        }
        else
        {
            System.Diagnostics.Debug.WriteLine("Not Success Status: " + response.StatusCode.ToString() + "  -  Reason: " + response.ReasonPhrase);

            ResultStatus.Text = "Fail";
        }
    }
}

동작 결과

이렇게 됩니다.

버튼을 누르기 전

버튼을 누른 후

간단하네요!

소스 코드

Github에 있습니다.

요약

Xamarin이라고 보여주고, AWS와 C#의 이야기가 되고 있습니다만, 이것을 응용하면,

인앱 데이터를 클라우드에 백업

클라우드를 통한 터미널 간 데이터 마이그레이션

등을 쉽게 실현할 수 있습니다.

본 예제 앱과는 다른 Xamarin.Forms제 앱에 짜넣어(API 두드릴 뿐입니다만) 잘 동작하고 있습니다. 릴리스 후, 나 이외는 1번도 사용되고 있지 않습니다만…
이번에는 AWS를 사용했지만 Azure에서도 마찬가지입니다.

Xamarin은 좋습니다. 앞으로도 더 공부하겠습니다!

내일은 Kenshiro_Fukuda 씨입니다. 잘 부탁드립니다.