앱 인벤터 예제 Talk To Me! 코딩 디자인

아두이노 코딩의 소중한 경험을 시작하고 싶으신가요?

이 책에서 해답을 찾으세요.

교보문고에서 절찬리에 판매중입니다

_______________________________________________________upto here, commercial!______________________

TalkToMe 프로젝트 편집 화면이 아래와 같이 나타난다.

Screen1에 팔레트의 User Interface에서 버튼(Button)을 드래그한다.

Screen1에 팔레트의 Media에서 말풍선 아이콘의 TextToSpeech를 드래그한다.

Screen1 창 바로 위에 Display ⚫⚫⚫ 박스에 체크 표시를 한다. TTS는 비쥬얼하게 보는 것이 아니므로 Viewer 창 아래에 표시되며 콤포넌트 창에도 Button 밑에 등록 된다.

탭 메뉴 Connect에서 AI Companion 명령을 클릭하자. 동영상에서는 별도로 AI Companion 명령 실행을 위한 앱 다운을 설명하는데 이미 시작 단계에서 안드로이드 스마트 폰에 다운을 받아 설치했다.

Connect 과정에서 그림과 같이 QR 코드와 6글자 코드를 포함한 정보가 뜬다.
안드로이드폰에서 MIT A12 Companion 아이콘을 누르면 시작 단계에서 보았던 6글자 코드 입력 또는 QR 코드 스캔 요구 화면이 나온다.
6글자를 직접 보고 입력해도 무방하나 여기서는 QR 코드 스캔을 해 보도록 한다.

scan QR code를 누르고  QR 코드 스캔을 위한 안드로이드 폰 카메라 화면이 뜨면 QR 코드를 째려보도록 한다. 약간의 숨 쉴 시간이 흐르면 코드 인식이 되며 Six Character Code에 6글자가 찍혀 있음을 확인할 수 있다. 이어서 화면이 Screen1 로 넘어가고 Text for Button1  버튼이 생성되어 있음을 즉 Connected 되었음을 확인할 수 있다.

PC의 앱 인벤터 화면에서 Viewr의 Text for Button1 버튼을 클릭하면 우측에 속성(Properties) 창이 뜬다. 속성 창 하단Text  입력 폼에 TalkToMe를 입력하고 스마트폰 화면 Text for Button1 버튼이 TalkToMe 버튼으로 변경되었음을 살펴보자.

일단 Connected  상태가 되면 PC 상의 앱 인벤터에서의 업데이트 내용이 와이파이를 통해 그대로 반영되고 있음을 확인할 수 있다.

TextBox를 Viewer에 드래그 한다. TextBox는 HTML 의 input form 태그와 거의 유사하게 스마트 폰 웹에서 키 입력 기능을 담당한다. 
TakToMe 버튼과 TextBox 위치는 드래그에 의해 바꿀 수도 있다.

TalkToMe 에 센서 사용 기능을 넣기로 하자. 스마트 폰에 들어 있는 가속도 센서를 Viewer 박스에 드래그 한다.

하지만 결과물은 박스 하단 밑의 비가시적인 구성품 코너에 위치하게 된다. 음성을 처리하는 TTS라든지  가속도를 체크하는 역할은 분명히 비가시적임에 틀림없다.