[Thunkable] 썬커블로 시작하는 앱개발 - 04. 샘플 앱 블록 코딩, 테스트하기

지난 포스팅에서는 썬커블 디자인(Design) 탭의 인터페이스에 대한 설명과 간단한 화면 배치를 해보았습니다.
오늘은 블록(Blocks) 탭으로 이동하여 블록코딩을 해보겠습니다.

👇 이전 포스팅을 먼저 읽고 와주세요!

[Thunkable] I. 썬커블로 시작하는 앱개발 - 03. UI 컴포넌트 배치해보기

[Thunkable] I. 썬커블로 시작하는 앱개발 - 03. 컴포넌트 배치해보기

이제 상단의 탭 메뉴에서 블록(Blocks) 탭을 클릭해서 블록 코딩을 할 수 있는 에디터 화면으로 넘어가 보겠습니다!

블록(Blocks) 탭 살펴보기

📌 블록 탭에서는 상황에 맞는 블록을 드래그앤드롭하여 앱을 프로그래밍할 수 있습니다.

블록 탭으로 들어왔습니다. 왼쪽 블록 선택 부분에 지난 시간 배치하고 속성까지 변경해봤던 UI 컴포넌트들이 보입니다.
이곳에서 블록을 선택해서 작업공간^[각주:1]으로 드래그앤드롭 하면 되는데요.
블록마다 기능이 다양하므로, 하나하나 설명하기보다는 🔗 썬커블 공식문서에서 블록에 대한 설명을 링크해 놓을게요!

블록을 배치해보자!

블록 탭의 컴포넌트 리스트에서 Button1을 선택하면 위와 같이 사용가능한 블록 리스트가 노출됩니다.
그 중 표시한 블록을 작업공간에 드래그앤드롭 하여 배치하겠습니다.

이렇게, 작업공간에 블록이 배치되었습니다. 자세히 볼까요?

 when Button1 Click do (  ) 
Button1을 클릭^[각주:2]했을 때, do 다음에 오는 것을 실행하라는 블록 같네요.

일단 이 블록은 내버려 두고, 계속 진행해 보겠습니다. 

이번에는 블록 세트의 Control 에서 표시한 블록을 드래그앤드롭 해주세요.

배치된 블록을 살펴볼게요.

 navigate to Screen1 
Screen1로 이동하게 하는 블록으로 보입니다.

이제, 블록을 조립해 볼까?

어떤 블록에는 홈이 파여있고 어떤 블록에는 볼록하게 돌출부위가 보이죠?
작업공간에 배치한 블록은 퍼즐처럼 홈과 돌출부위를 서로 맞추어 조립할 수 있습니다.

이 블록의 모양을 보면 위, 아래, 왼쪽이 막혀있고 홈이나 돌출부위가 보이지 않습니다.
👉 이런 블록은 다른 블록에 조립하지 않아도 독립적으로 쓸 수 있습니다.
대신 블록의 안쪽에 돌출부위가 보이네요
👉 이 부분에 다른 블록을 끼워 기능을 실행시킬 수 있습니다.

이 블록은 색깔이 이상하네요? 다른블록에 조립되지 않아서 그렇습니다.
👉 블록 위에 홈이 있는 이런 블록은, 아래에 돌출부위를 가진 블록과 반드시 조립해야 쓸 수 있습니다.

이제 두 블록을 조립해 볼까요?
Button1 에서 드래그앤드롭한 블록의 빈 곳에 navigate to 블록을 맞추면 탁하고 맞물립니다.

이렇게 조립된 블록이 되었네요! 
Button1을 클릭하면 Screen1로 화면이 이동 하는 기능이 코딩없이 완성되었습니다.
다만 우리는 Button1을 클릭하면 Screen2로 이동하도록 해야 하므로, navigate to 블록의 셀렉트박스를 클릭해 Screen2로 목적지를 변경해 줍니다.

🙋‍♂️ 블록을 잘못 배치하거나 잘못 조립했을때는 어떻게 하나요? 
블록을 선택한 후 키보드의 Delete키만 누르면 블록이 삭제됩니다.
또는 작업공간 우측의 쓰레기통으로 블록을 드래그앤드롭 해도 삭제됩니다.

이제 이동한 Screen2에서도 Button2를 클릭했을때 Screen1로 이동하도록 블록을 배치하여 프로젝트를 완성하도록 합시다!

상단에서 Screen2를 선택하여 화면을 전환하고, Button1에서 했던것과 마찬가지로 블록을 배치해줍니다.
이번엔 Screen1이 목적지가 되겠네요.

이제 테스트 해볼까?

상단의 Web preview 버튼을 눌러 의도한 대로 앱이 동작하는지 테스트를 해보겠습니다.
테스트는, 🔗 지난 포스팅에서 설치한 썬커블 라이브 앱을 통해서도 하실 수 있습니다.

버튼을 눌러볼까요? 두근두근~... 제대로 동작하네요! 버튼을 클릭하니 배경색이 바뀌며 화면이 전환되었습니다.  

---

이렇게 앱이라기엔 약간 민망할정도의 초간단한 앱을 개발해 보았는데요.
앞으로는 점점 더 복잡한 구조의 앱을 함께 제작해보게 될 것 같아요. 원하는 앱을 개발할 수 있을때까지 모두 화이팅입니다 ~! 

1. 블록 탭 가운데에 비어있는 공간 [본문으로]
2. 모바일 환경에서는 터치라 하는것이 맞지만 편의를 위해 클릭이라고 통칭하겠습니다. [본문으로]