[Thunkable] 썬커블로 코딩없이 녹음기 만들기 - 02. 블록코딩 / 이벤트 / 조건 / 비교

지난 포스팅에서 배치한 녹음기 화면을 바탕으로 블록 코딩을 해보겠습니다.

녹음기 화면 배치가 아직 안되셨다면 👇아래 포스팅을 참고하여 화면배치 후 다시 읽어주세요~!

[Thunkable] 썬커블로 코딩없이 녹음기 만들기 - 01. 컴포넌트 배치 / 버튼 disabled 속성

 

블록 코딩 하기

Block탭으로 이동하여 블록 코딩을 진행해 볼게요!
오늘은 몇가지 자주 쓰이는 블록들에 주목하여 간단한 설명도 같이 써보려고 합니다.

이벤트 블록 

'이벤트'는 '사용자가 어떤 동작을 했을 때'를 의미합니다. 따라서 클릭 이벤트는 '사용자가 클릭을 했을 때'라고 얘기할 수 있습니다.
썬커블의 이벤트 블록은 컴포넌트의 블록 리스트에서 찾을 수 있으며 do~ 부분에 이벤트가 발생했을 때 실행될 블록을 조립하여 사용할 수 있습니다. 아래의 이미지는 btn_rec의 클릭 이벤트 블록으로 "Click"부분을 변경하여 이벤트를 변경할 수도 있습니다.

그렇다면 이제 btn_rec를 선택하여 클릭 이벤트 블록을 드래그 앤 드롭 하여 배치하겠습니다.
btn_rec를 누르면 실행될 블록들을 do~ 부분에 조립하면 됩니다.

만약 A 이면,  B 한다 (if A, do B) 조건 블록

갑자기 문법 시간 같은 단어가 나와 당황스러울 수 있지만 ㅋㅋ 진행해 보겠습니다.
일단 btn_rec를 누르면 실행해야 할 내용을 살펴볼까요?

👉 녹음 시작 버튼을 누르면 녹음이 시작되고 버튼의 색이 바뀌면서 버튼의 텍스트가 녹음 중지로 변경됩니다.
👉 녹음중지 버튼을 누르면 녹음이 끝나면서 버튼이 원래대로 돌아오고, 녹음재생 버튼이 활성화됩니다.

정리하자면 btn_rec를 눌렀을 때, 만약 버튼 텍스트가 녹음 시작이라면 녹음을 시작하고, 만약 버튼 텍스트가 녹음 종료이면 녹음을 종료해야 합니다. 이렇게 이벤트가 발생했을 때 조건에 따라 다르게 실행되는 블록을 조건 블록이라고 하며, 코어 블록의 Control에서 찾을 수 있습니다.

btn_rec의 클릭 이벤트 블록에 조건 블록을 조립해 볼게요.

이렇게 조립되었습니다. if~의 조건이 참이면 do~ 부분의 블록이 실행됩니다.

💡참(True)과 거짓(False)
어떠한 조건을 만족하는 것을 참(True), 만족하지 않는 것을 거짓(False)라고 합니다.

그런데 우리가 가진 조건은 2가지였죠? 텍스트가 녹음 시작일 경우와 녹음 중지일 경우입니다.
이럴 때에는 가져온 블록 아래쪽의 if ~ do ~ else ~ 블록을 사용하거나, 우리가 이미 가져온 블록의 설정 버튼을 눌러 조건의 개수를 수정할 수 있습니다.

if~ 의 조건을 만족하지 않는 경우 즉 거짓인 경우, 아래 else~ 부분이 실행됩니다.
else if~를 if~ 와 else~ 사이에 조립하여 조건을 몇 개 더 추가할 수도 있습니다. else if~ 가 있을 때는 if~ 와 else if~ 의 조건이 모두 거짓일 때 else~가 실행됩니다.

비교 블록

보통의 경우 조건 블록과 같이 쓰이는 비교 블록은 말 그대로 양쪽의 값이 같은지, 다른지, 큰지, 작은지 비교하는 블록이에요. 
코어 블록의 Logic에서 찾을 수 있습니다.

Logic에서 비교 블록을 드래그 앤 드롭하여 if~ 조건 부분에 조립하겠습니다.

비교 블록을 자세히 볼까요? 학교에서 배웠던 등호와 부등호를 사용하여, 양쪽 블록을 비교하고 있네요.
조건 블록에 조립된 비교 블록의 결과가 맞으면 참, 맞지 않으면 거짓입니다.

btn_rec의 텍스트가 "녹음 시작"과 같은지 비교하는 블록을 조립해 보겠습니다.

btn_rec의 블록에서 버튼 안의 텍스트를 나타내는 블록을 드래그 앤 드롭하여 비교 블록의 왼쪽에 조립하겠습니다.

오른쪽에는 Text에서 빈 텍스트 블록을 가져와 조립하고 "녹음 시작"이라고 입력할게요.

오늘의 결과물입니다. btn_rec를 누르면 btn_rec의 텍스트가 "녹음 시작"과 같은 경우(참인 경우) do~ 가 실행되고 다른 경우(거짓일 경우) else~ 가 실행되겠네요. 

다음 포스팅에서 빈 공간에 들어갈 블록들을 이어서 조립해 보도록 하겠습니다.

[Thunkable] 썬커블로 코딩없이 녹음기 만들기 - 03. 블록코딩 / 녹음 시작 / 녹음 중지

[Thunkable] 썬커블로 코딩없이 녹음기 만들기 - 03. 블록코딩 / 녹음 시작 / 녹음 중지

읽어주셔서 감사합니다!