Meguro.dev #2 参加レポート AWS Amplify をモブプロで試す #meguro_dev

和田祐介

2018.05.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

アマゾンウェブサービスジャパンのオフィスにて、Meguro.dev #2 が開催されました。私は AWS Amplify のモブプロに参加しましたので実施した内容をレポートします。「どんなことやってるのかな？」と気になる方の参考になれば幸いです。過去のイベントの様子は以下のブログを参考ください。

グループ分け

Meguro.dev #1 に引き続き、モブプログラミングを行いました。今回も同様にグループ分けです。

AWS Amplify でウェブアプリを構築！
Alexaスキルをモブプロで作る！
AWS Cloud9でモブプロを体験！

という3トピックでした。私は AWS Apmlify に参加しました。

モブプロ開始

最終的には9人、になったと思います。最初に簡単に自己紹介してから、以下のように進めることにしました。

使用するPCは和田のものを使う。皆さん私と同じ Mac かつUSキーボードが多数派だったので入力に手間取る時間が少なくてよかったです
使用するAWSアカウントは和田がクラスメソッドの検証で利用しているアカウント。
AWS Amplify のチュートリアル(AWS Amplify)に沿って進める。
利用するJSフレームワークはReact。
チュートリアルに沿ってアプリケーションを作った後、再度相談して機能を追加する。
ドライバーの持ち時間は10分。
利用するエディタは Atom。

AWS Amplify チュートリアル

Quick Start ガイドに沿って進めました。最初、私がドライバーとなり作業を行ったのですが、モブの皆様が 入力文字ハイフン であったり コピペ といったレベルで作業指示をしてくださったため、本当に何も考えずに進められました。モブプログラミングとしてはかなり理想に近かったのではないかと思います。

Quick Start ガイドでは、Reactアプリケーションの App.js を修正していきます。ガイドを完了すると、以下のコードと画面が成果としてできあがります。

import Amplify, { Analytics, API }  from 'aws-amplify';
import aws_exports from './aws-exports';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure(aws_exports);

class App extends Component {
  render() {
    Analytics.record('appRender');
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default withAuthenticator(App);

create-react-app でスケルトンを生成した状態から、追加で以下のことができるようになっています：

Amazon Pinpoint に対して利用データを送信する
ログイン機能を提供する

ログインすると例の React 画面が表示できます。

モブプロの過程でメンバーとは以下のようなことを話しました：

一行追加するだけで認証機能を追加できるのはすごい
おそらく裏では AWS の Cognito、 Pinpoint のAPIを叩いているのだと思うが、うまく隠蔽している
総じて、awsmobileというコマンドは、クライアントアプリケーション開発者がバックエンドのことを意識せずとも開発できるようにするもののようだ

機能追加 - REST APIに対するリクエスト

さて、最初のチュートリアルが終わりました。次にやることとを決めます。Amplify の開発ガイドを見ると、以下のような選択肢があります。

「Webアプリケーションを作るならば、バックエンドとやりとりすることはほぼ必須になるため、APIを作成して接続してみたい」という声がありました。たしかにそうだね、ということで API を選択します。

こちらのドキュメントに沿って進める上で驚いたのですが、以下のコマンドを打つことで、AWSに API Gateway と Lambda Function のサンプルが生成され、なおかつ API Gateway がデプロイされ、利用できる状況になるようです。

$ awsmobile cloud-api enable
$ awsmobile push #Update your backend

すごいですね。「裏でやってることがわからないから、デバッグや運用のときは大変そう」という声もありました。たしかにそうですね。

APIをコールする準備が整ったので、React アプリケーションにコードを追加します。モブプロでは方針として以下のようにしました。

簡単のために、ボタンを用意し、それをクリックしたらAPIがコールされるようにする
レスポンスを console.log() で出力し、正常にコールされたことを確かめる

import Amplify, { Analytics, API }  from 'aws-amplify';
import aws_exports from './aws-exports';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure(aws_exports);

class App extends Component {
  handleClick = () => {
    Analytics.record('invoke');
    console.log('invoke!');

    let apiName = 'sampleCloudApi';
    let path = '/items/1';
    let myInit = { // OPTIONAL
        headers: {}, // OPTIONAL
        response: true, // OPTIONAL (return entire response object instead of response.data)
        queryStringParameters: {} // OPTIONAL
    }
    API.get(apiName, path, myInit).then(response => {
        console.log("called api");
        console.log(response.data.success);
    }).catch(error => {
        console.log(error.response);
    });
  }
  handleClick2 = () => {
    Analytics.record('invoke2');
    console.log('invoke2!');

    let apiName = 'sampleCloudApi';
    let path = '/items/2';
    let myInit = { // OPTIONAL
        headers: {},
        body: {}
    }

    API.post(apiName, path, myInit).then(response => {
    // Add your code here
    console.log("called api2");
    console.log(response.success);
    }).catch(error => {
      console.log(error.response)
    });
  }
  render() {
    Analytics.record('appRender');
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={this.handleClick}>
          invoke
        </button>
        <button onClick={this.handleClick2}>
          invoke 2
        </button>
      </div>
    );
  }
}

export default withAuthenticator(App);

handleClick と handleClick2 でそれぞれ GET と POST のリクエストを行います
ついでに、ボタンが押されたときにそれぞれ Pinpoint にイベントを送信するようにしました
invole ボタンと invoke2 ボタンを用意し、クリックで関数を呼び出します

開発者ツールの Console へは API Gateway のレスポンスデータが表示されていますが、最初はパスが不適切であったり、レスポンスの形式が合っておらずで正しく表示されませんでした。ここでWebアプリケーションの知見がある方にデバッグ方法を指南してもらいます。開発者ツールの Network を確認することで、どのようなレスポンスが返ってきているのかを確認する、というものでした。このあたり、いろいろな方の知見を動員してデバッグできるのはモブプロの醍醐味ですね。

修正もでき、意図どおりにAPIを呼び出すコードを実装できました。Pinpointにイベントが飛んでいるかどうかも確認しておきます。

今回設定したイベント、 appRender、invoke、invoke2がカウントされていることがわかります。Amplify を使うことで、Webアプリケーションのイベント管理も簡単にできました。今回モブプロで実行した内容はここまでです。

まとめ

モブプロは初めての方がほとんどでしたが、モブの方が的確に指示、ドライバーの方が忠実に進めることができ、とても良い会だったと思います。個人的にモブプロで一番嬉しかったのは、単に作業を進めるのではなくて、途中で出てきた疑問点や自分が持っている知見などを共有できることです。例えば Reactアプリケーションの思想であったり、awsmobileが裏でやっていることであったり、です。自動生成されたソースコードを眺めながら皆で意図を解釈するのもまた一興でした。

AWS Amplify に目を向けると、今回のモブプロで費やしたのは2時間程度でしたが、ここまで動くものができることに驚きました。途中にも書きましたが、裏でやっていることが隠蔽されているため運用やデバッグにはかなりの労力が必要だと思います。一方、ちょっとした、動くものを作る、プロトタイピングする、といった用途には最適だと感じました。2時間でイベント管理、ログイン機能、API呼び出しを実装できる仕組みはなかなかないでしょう。 Meguro.dev でまた Apmlify が取り上げられることがあったら、再度参加したいと思いました。