[Thunkable] 썬커블 번역기에 언어선택 추가하기 - 03. 블록코딩 / 데이터 소스 블록

썬커블 번역기에 언어 선택 추가하기 세 번째 글입니다.
이번 글에서는 미리 추가해둔 데이터소스를 이용하여 블록 코딩을 시작해 보도록 할게요.

이 시리즈의 이전 글을 보시려면 아래 링크를 클릭해 주세요!

[Thunkable] 썬커블 번역기에 언어 선택 추가하기 - 02. 데이터 소스 추가 / 구글시트 가져오기

[Thunkable] 썬커블 번역기에 언어선택 추가하기 - 02. 데이터소스 추가 / 구글시트 가져오기

이전 글에서 구글시트를 썬커블 데이터 소스로 추가해 보았는데요.
오늘은 데이터 소스 블록을 이용하여 블록 코딩을 진행해 보겠습니다.

프로젝트를 열고 Blocks 탭으로 이동하겠습니다.

블록세트 접어두기

Blocks 탭을 여니 이전에 배치했던 블록세트들이 보이네요.

작업하는데 혼동을 줄 수 있으니 이 블록세트들은 잠시 접어두도록 하겠습니다.

블록세트의 이벤트블록에서 마우스 오른쪽 버튼을 클릭하고 Collapse Blocks를 선택하면 블록세트가 접히고, 다시 오른쪽 버튼으로 클릭한 후 Expand Block을 선택하면 펼쳐집니다.

블록 코딩

이제 본격적으로 블록코딩을 시작해 봅시다.

screen_translation이 열렸을 때

이제 screen_translation에서 Opens 이벤트 블록을 빈공간에 배치하겠습니다.
Opens 이벤트 블록은 화면이 열렸을 때 실행될 기능들을 제어합니다.

📌 screen_translation이 열리면 눈에 보이지는 않지만 list_lang 컴포넌트에 우리가 추가해둔 데이터 소스에서 Language 열의 데이터가 리스트로 표시되도록 작업하려고 합니다.
언어 선택 버튼 즉 btn_select를 눌렀을때 지연 없이 언어 리스트가 화면에 나타나게 하기 위함입니다.

list_lang의 리스트 아이템^[각주:1]을 설정하는 set~text items 블록을 드래그 앤 드롭하여 이벤트 블록에 조립해 줍니다.

그리고 앱기능(App Features)의 Data Source에서 데이터 소스 테이블의 특정 열을 목록으로 불러와주는 list of values~ 블록을 조립해 주겠습니다.

위 이미지를 참고하셔서 데이터 소스와 블록의 옵션이 맞게 지정되었는지 확인해 주세요~!

btn_select를 눌렀을 때

이제 btn_select를 누르면 list_lang이 보이게 하기 위해, btn_select에서 Click이벤트 블록을 드래그 앤 드롭하여 배치하고,
list_lang에서 set Visible 블록을 드래그 앤 드롭하여 조립한 후, set Visible블록의 값을 true로 설정합니다.
👉 visible 옵션이 true일때는 컴포넌트가 보이게 되고, false일 때는 보이지 않게 됩니다.

중간 테스트

이쯤에서 Web Preview를 한번 확인하겠습니다.

상단의 Web Preview버튼을 누르면 작업된 앱을 미리볼 수 있습니다. 미리보기는 썬커블 라이브 테스트 앱^[각주:2]으로도 확인할 수 있습니다.

📌English가 표시되어 있는 언어 선택 버튼을 눌렀을 때 데이터 소스의 Language열이 리스트로 출력되면 성공입니다.
Web Preview 버튼을 한번 더 눌러 편집 화면으로 돌아올게요.

---

썬커블에 추가한 데이터가 우리가 만든 앱에 출력되는 모습을 확인했습니다. 신기하지 않나요?
이제 데이터를 이용하여 여러 가지 앱 기능을 만들어 볼 수 있겠네요😎

다음 글에서는 출력된 데이터를 선택했을 때 번역기의 번역 언어가 변경되는 기능을 블록 코딩해 보겠습니다.
읽어주셔서 감사합니다!

1. 목록을 구성하는 각각의 항목을 아이템이라고 합니다 [본문으로]
2. 🔗썬커블로 시작하는 앱 개발 - 02. 모바일 앱 설치, 프로젝트 생성 게시물 참조 [본문으로]