2-3강. 글자 읽어주는 앱 - 블록에디터 코딩하기

블록에디터 화면전환

Blocks 버튼을 눌러 블록에디터 화면으로 전환합니다.

블록에디터 코딩하기

버튼이 클릭되었을 때

(1) 블록(Blocks)에서 Button1을 클릭하면 Button1의 사용가능한 블록 목록이 나타납니다.

(2) 우리는 읽어주기 버튼을 클릭했을 때 글자를 읽어줄 예정입니다. 따라서, when (Button1).Click do ... 블록을 뷰어(Viewer)로 끌어다 놓습니다.

해석해 보면 Button1이 클릭(Click) 되었을 때(when) ... 을 실행(do)하라는 의미가 됩니다.

글자 읽어주기

(1) 블록(Blocks)에서 TextToSpeech1을 선택합니다.

(2) 오른쪽에 나타난 블록 목록에서 call (TextToSppech1).Speak message ... 을 끌어다 방금 전 블록에 끼워 넣습니다.

참고로 블록 모양을 보면 끼워 넣을 수 있는 블록인지 알 수 있습니다. 지금 이 블록 말고는 기존 버튼 블록에 끼워넣을 수 없는 모양인 것을 볼 수 있습니다.

현재까지 이런 형태로 만들어 졌으면 제대로 따라오신 겁니다.

읽어줄 대상 - 글상자(TextBox)에 입력된 글자(Text)

이제까지 작성된 내용을 보면, "버튼을 눌렀을 때 읽어 준다." 까지는 되었습니다. 그런데, 무엇을 읽어 줄 것인지는 정해지지 않습니다.

우리가 원하는 것은 "버튼을 눌렀을 때, 글상자에 입력된 글자를 읽어 준다." 입니다.

이제 글상자에 입력된 글자를 블록으로 코딩해 보겠습니다.

(1) 블록(Blocks)에서 TextBox1을 선택합니다.

(2) 오른쪽 블록 목록에서 (TextBox1).(Text)를 선택해야 합니다. 블록이 많아서 아래쪽으로 스크롤을 해야 합니다.

(3) (TextBox1).(Text) 블록을 뷰어(Viewer)로 끌어다 기존 블록과 아래처럼 조립합니다.

이제 완성된 코드 의미를 생각해 볼까요?

when (Button1).Click do {call (TextToSpeech1).Speak message (TextBox1).(Text)}

버튼(Button1)이 클릭(Click) 되었을 때(when) 글상자(TextBox1)에 입력된 글자(Text)를 읽어라.(Speak)

다르게 의미를 생각해 보면, 글상자(TextBox1)에 입력된 글자(Text)를 TextToSpeech1으로 읽어라(Speack)! 버튼(Button1)이 클릭(Click)되었을 때(When). 

여기에는 프로그래밍 언어의 많은 요소들과 개념들이 포함되어 있지만, 지금 모두 설명하기보다는 다음 개발하게 되는 앱에서 순차적으로 설명하도록 하겠습니다.

이제 코딩을 마쳤으니 앱을 실행해 보겠습니다. => 앱 실행하기

연재 바로가기 => http://www.educoding.kr/appinventor_info