Meguro.dev #2 参加レポート AWS Amplify をモブプロで試す #meguro_dev
アマゾンウェブサービスジャパンのオフィスにて、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 が取り上げられることがあったら、再度参加したいと思いました。
![[アップデート]CloudTrail Lake で高度なイベントセレクターがサポートされました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-64f6cd71568d228b1e7f3831e5287d75/1b5c0e8e5797b4bff5913d5033b03348/aws-cloudtrail)
![[アップデート] Amazon QuickSight へロゴやテーマカラーを設定するための「ブランド管理機能」が追加されました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-19e77b9a51519e08b94d0f688c125729/4f439c75e1ee56c70e315fa46fa45f81/amazon-quicksight)
