Xamarin.FormsでAWSのAPIGatewayを叩いてみた

本記事は、[初心者さん・学生さん大歓迎！] Xamarin その1 Advent Calendar 2017 の2日目となります。

やること

Xamarin.Forms製のアプリでWebAPIを叩き、結果を受け取って表示させてみます。
WebAPI(クラウド環境)はAWSのAPI Gatewayを使用します。

開発環境

クラウド

Amazon Web Service
- API Gateway
- Lambda

ローカル

Windows 10
Visual Studio 2017 Community
Nexus 5X (Android 8.0.0)

NuGetパッケージ

Newtonsoft.Json

AWS

API GatewayとLambdaの準備

API Gateway と Lambda の2つのサービスを使用します。
環境構築などは以下を参照してください。

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さんです。よろしくお願いします。