AWS AppSyncを利用して、Alexaスキルからモバイルアプリの表示内容をリアルタイムで更新させるサンプル

## はじめに

[AWS AppSyncが東京リージョンでもサービス開始](https://aws.amazon.com/jp/blogs/mobile/aws-appsync-region-expansion-and-new-features-for-api-keys/)

ということで
`Alexaスキル`, `AWSAppSync`, `モバイルアプリ`を組み合わせて
音声アシスタントだけでは伝わりにくい部分を補足する為の
簡易的なサンプルを作成しました。

Alexaスキルの応答にはAlexaアプリ上のみで表示可能な[ホームカード機能](https://developer.amazon.com/ja/docs/custom-skills/include-a-card-in-your-skills-response.html)がありますが、モバイルアプリとのよりスムーズな連携を目指してAWSAppSyncを試行しています。

確認には以下のサンプルコードを利用させて頂きました。

* [Building a JavaScript Client App](https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-javascript.html)
* [tutsplus/appsync-graphql-cities](https://github.com/tutsplus/appsync-graphql-cities)

## 構成図

![](https://user-images.githubusercontent.com/22883147/36839962-d67d4286-1d86-11e8-9080-d455d63d630f.png)

## デモ

Echosim.ioとSayコマンドを組み合わせてスキルのテストを実行しています。

下記動画ではAlexaスキルをトリガーにAWSAppSync経由でDynamoDBにデータを追加し、アプリで表示されている都市名の一覧を更新させています。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">AWS AppSync 動作確認サンプル<a href="https://t.co/5rEmPyIAdI">https://t.co/5rEmPyIAdI</a></p>&mdash; さとしん (@satoshin2071) <a href="https://twitter.com/satoshin2071/status/968761058331643904?ref_src=twsrc%5Etfw">February 28, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 手順

### 1. AWS AppSyncの設定

[記事](https://code.tutsplus.com/tutorials/code-an-app-with-graphql-and-react-native--cms-30511)を参考に
AWS AppSyncのSchema, DataSources, Mapping Templatesを設定していきます。

### 2. モバイルアプリ側の設定

[サンプルコード]([tutsplus/appsync-graphql-cities](https://github.com/tutsplus/appsync-graphql-cities))をそのまま利用します。

変更箇所は一点で、サンプルコードの `aws-exports.js` を以下からダウンロードした内容に基づいて修正します。

![2018-02-28 17 25 20](https://user-images.githubusercontent.com/22883147/36777383-a20a1a36-1cac-11e8-8863-f41c6fa8cd27.png)

この時点でリアルタイムの更新処理を確認することが可能です。

![city](https://user-images.githubusercontent.com/22883147/36778772-18b99680-1cb1-11e8-8eff-0da0d4a90a40.gif)

### 3-1. AlexaSkillの設定 開発者ポータル編

開発者コンソールにてAlexaSkillsKitを選択して、新しいスキルを追加、対話モデルの設定、Lambdaとの接続、テストまでを行います。
(※今回はAlexaが呼び出し名に応答したタイミングで処理を実行してますので対話モデルは殆ど設定していません)

![](https://user-images.githubusercontent.com/22883147/36842086-d5bad74e-1d8d-11e8-9002-32f73455cc30.png)

![](https://user-images.githubusercontent.com/22883147/36842081-d088e07c-1d8d-11e8-9866-7ad74adbae99.png)

### 3-2. AlexaSkillの設定 Lambda編

AWS Lambdaにて関数を作成します。

ローカルの開発環境は以下です。

```
% node --version
v8.9.4
% npm --version
5.6.0
```

サンプルコードは[Gists](https://gist.github.com/satoshin2071/c7bbd67a3d6747799be783a9e697da14)に置きました。

 `index.js`, `aws-exports.js`, `package.json` を落としてaws-exports.jsをよしなに書き換えます。

`npm install`　を実行して生成された　`node_modules`, `package-lock.json` をzipで固めてLambdaにアップロードします。

```
% zip -r Hoge.zip index.js aws-exports.js package.json node_modules package-lock.json
```

![](https://user-images.githubusercontent.com/22883147/36842516-3aff1aba-1d8f-11e8-80e4-0435d5879814.png)

### 3-3. テスト

デモ動画ではEchosim.ioを利用していますが、
開発者コンソールのサービスシュミレータでテスト可能です。

Xcodeのシミュレータを立ち上げて実行すれば以下の流れで、デモ動画と同様に表示が切り替わるはずです。

```
開発者コンソールにて呼び出し名を入力して実行
↓
lambdaのindex.js'LaunchRequest':functionの処理が実行
↓
AppSynchでDynamoDBにデータ追加, Subscriptionに通知
↓
Subscriptionの通知を受けてアプリの表示が更新
```

## 謝辞
* [AWS AppSync (Preview)を試してみた](https://qiita.com/nidcode/items/a2ad9de34aee438ebcbc)
* [AWS AppSyncとReactでToDoアプリを作ってみよう (0)はじめに](https://qiita.com/daikiojm/items/747fa1bb0a85f7dfe38a#_reference-6173f2ecfcb8e76f064e)
* [Code an App With GraphQL, React Native, and AWS AppSync: The Back-End](https://code.tutsplus.com/tutorials/code-an-app-with-graphql-and-react-native--cms-30511)

諸々参考にさせて頂きました、ありがとうございます🙏

## その他参考URL
* [Alexaスキル開発トレーニング](http://amzn.to/2oHy1HG)
* [Apollo graphql](https://www.apollographql.com/)
* [AWS AppSync Developer Guide](https://docs.aws.amazon.com/appsync/latest/devguide/welcome.html)
* [AWS re:Invent 2017: NEW LAUNCH! Data Driven Apps with GraphQL: AWS AppSync Deep Dive (MBL402)](https://www.youtube.com/watch?v=mQBtbHKSdAQ)