[Thunkable] 썬커블로 코딩없이 만드는 번역기 - 02. 블록코딩 / 테스트

저번 포스팅에서 배치한 화면을 바탕으로 블록코딩을 진행해 보고, 라이브 테스트까지 함께 해보겠습니다.

🔗 [Thunkable] 썬커블로 코딩없이 만드는 번역기 - 01. UI 컴포넌트 배치 / 복제 / 그룹

[Thunkable] 썬커블로 코딩없이 만드는 번역기 - 01. UI 컴포넌트 배치 / 복제 / 그룹

상단의 Block탭을 눌러 블록코딩 에디터로 이동하겠습니다.
UI 배치가 아직 안되셨다면 👆위에 링크된 포스팅을 먼저 읽고 와주세요.

번역기 앱 만들기 - 블록코딩

우리가 만들 번역기 앱은 1. 번역시작버튼 btn_start를 클릭했을 때와 2. 읽어주기버튼 btn_read를 클릭했을 때 총 두번의 이벤트가 발생합니다.
하나씩 차근차근 조립해보도록 할게요.

번역 시작 버튼(btn_start) 버튼을 클릭했을 때

컴포넌트에서 group_translation 안의 btn_start를 선택하여 Click 블록을 꺼냅니다.

클릭시 결과 박스의 내용이 변경되어야 하므로 group_result의 box_result에서 해당 블록을 가져와 클릭 이벤트 아래에 배치해 줍니다.

box_result에 번역된 결과물을 표시하기 위해 번역 기능 블록을 드래그 앤 드롭하여 box_result 블록의 "Label" 자리에 조립해 줍니다.
번역 기능 블록은 앱 기능(App Features)의 Speech에 있습니다. 

번역 블록을 자세히 보겠습니다.

번역할 문구가 "Hello"로 지정되어 있네요.
우리는 input_text의 내용을 번역할 것이기 때문에, input_text의 텍스트를 나타내는 블록을 가져와 "Hello"자리에 끼워 주겠습니다.

또 살펴보니 언어가 영어에서 스페인어로 번역되도록 지정되어 있네요.
한글(Korean)에서 영어(English)로 번역되도록 바꾸어 줍니다.

이런 모양이 되었다면, btn_start 클릭 이벤트 처리는 완성입니다!

읽어주기 버튼(btn_read)을 클릭했을 때

컴포넌트에서 group_result안의 btn_read를 선택하여 Click 이벤트 블록을 꺼냅니다.

버튼을 클릭하면 텍스트를 읽어주는 기능을 작업하기 위해, 말하기 블록을 이벤트 블록에 조립하겠습니다.
말하기 블록 역시 앱 기능의 Speech에서 찾을 수 있습니다.

"Hello"가 아니라 box_result의 내용을 읽어야 하므로 box_result 안의 텍스트를 나타내는 블록을 "Hello" 대신 끼워줄게요.

완성된 모습

이렇게 번역기 앱의 블록코딩이 완성되었습니다!

테스트하기

블록코딩이 완성되었으니 Web Preview를 이용하여 테스트를 해봅시다.

번역기가 잘 동작하고 있고, 읽어주기를 눌렀을때도 결과 박스의 텍스트를 제대로 읽어주고 있네요! 성공입니다.

앱은 완성되었지만 개선 할 수 있는 부분이 약간 보여서 그 부분은 기회가 된다면 고급 과정으로 포스팅 하려고 합니다.

오늘도 읽어주셔서 감사합니다👍