AWS AppSync를 사용하여 Alexa 기술에서 모바일 앱의 표시 내용을 실시간으로 업데이트하는 샘플

소개

구성도

데모

절차

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

다양한 도움을 주셔서 감사합니다 🙏

기타 참고 URL

• Alexa 기술 개발 교육
• Apollo graphql
• AWS AppSync Developer Guide
• AWS re:Invent 2017: NEW LAUNCH! Data Driven Apps with GraphQL: AWS AppSync Deep Dive (MBL402)