Google Assistant - Interactive Canvas (sample action)

Sample Action

샘플 코드 github 주소
화면 상에 보여지는 삼각형을 제어하는 Actions를 처리해보도록 한다.

Fulfillment index.js

 - 처음 앱을 실행하면, 환영 인사와 함께 색깔을 바꾸거나 회전을 멈추고 싶냐는 질문을 한다.
- 동시에 웹 앱에 대한 url을 response에 담아서 주고 있다.

- 색깔에 대한 intent 처리 코드를 보여준다.

- 도형 회전에 대한 intent 처리 코드를 보여준다.

웹 앱 - index.html

- 여기서는 drawing 할 때 PixiJS를 사용하기 위하여 src를 참조하고 있다.

- view라고 id가 붙여진 div가 SPA에 사용될 태그 element이다.

웹 앱 - main.js

초기 설정

- 웹 앱을 실행할 때, 초기 화면을 render한다.
- 클라이언트의 해상도에 맞게 render 시키는 부분도 있다.

fulfillment 처리

- fulfillment 전달 받을 때 등록한 callback인 onUpdate를 실제로 어떤 방식으로 작동시킬지에 대한 내용이다.
- immersiveResponse로부터의 state 전달은 JSON 형태로 들어온다.
- stringify하여서 내부의 state를 확인할 수 있게 한다.
- immersiveResponse에 담긴 각각의 state에 따라 도형을 조절하도록 한다. 

스크린을 터치하는 경우

- 도형 회전에 대한 토글이 터치로 제어되는 경우에 맞게 대응하는 코드

주요 애니메이션

- 도형이 애니메이션처럼 회전하게 만드는 코드

Debugging Action