はじめに
ということで
Alexaスキル, AWSAppSync, モバイルアプリを組み合わせて
音声アシスタントだけでは伝わりにくい部分を補足する為の
簡易的なサンプルを作成しました。
Alexaスキルの応答にはAlexaアプリ上のみで表示可能なホームカード機能がありますが、モバイルアプリとのよりスムーズな連携を目指してAWSAppSyncを試行しています。
確認には以下のサンプルコードを利用させて頂きました。
構成図
デモ
Echosim.ioとSayコマンドを組み合わせてスキルのテストを実行しています。
下記動画ではAlexaスキルをトリガーにAWSAppSync経由でDynamoDBにデータを追加し、アプリで表示されている都市名の一覧を更新させています。
AWS AppSync 動作確認サンプルhttps://t.co/5rEmPyIAdI
— さとしん (@satoshin2071) February 28, 2018
手順
1. AWS AppSyncの設定
記事を参考に
AWS AppSyncのSchema, DataSources, Mapping Templatesを設定していきます。
2. モバイルアプリ側の設定
サンプルコードをそのまま利用します。
変更箇所は一点で、サンプルコードの aws-exports.js を以下からダウンロードした内容に基づいて修正します。
この時点でリアルタイムの更新処理を確認することが可能です。
3-1. AlexaSkillの設定 開発者ポータル編
開発者コンソールにてAlexaSkillsKitを選択して、新しいスキルを追加、対話モデルの設定、Lambdaとの接続、テストまでを行います。
(※今回はAlexaが呼び出し名に応答したタイミングで処理を実行してますので対話モデルは殆ど設定していません)
3-2. AlexaSkillの設定 Lambda編
AWS Lambdaにて関数を作成します。
ローカルの開発環境は以下です。
% node --version
v8.9.4
% npm --version
5.6.0
サンプルコードはGistsに置きました。
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
3-3. テスト
デモ動画ではEchosim.ioを利用していますが、
開発者コンソールのサービスシュミレータでテスト可能です。
Xcodeのシミュレータを立ち上げて実行すれば以下の流れで、デモ動画と同様に表示が切り替わるはずです。
開発者コンソールにて呼び出し名を入力して実行
↓
lambdaのindex.js'LaunchRequest':functionの処理が実行
↓
AppSynchでDynamoDBにデータ追加, Subscriptionに通知
↓
Subscriptionの通知を受けてアプリの表示が更新
謝辞
- AWS AppSync (Preview)を試してみた
- AWS AppSyncとReactでToDoアプリを作ってみよう (0)はじめに
- Code an App With GraphQL, React Native, and AWS AppSync: The Back-End
諸々参考にさせて頂きました、ありがとうございます🙏