-
✏️ 공부하자/Thunkable 2022. 11. 27. 18:38[Thunkable] 썬커블 번역기에 언어선택 추가하기 - 04. 블록코딩 / 변수728x90
변수 선언
👉 변수블록에 대한 개념을 잘 모르시는 분들은 🔗이 게시물을 먼저 참고해 주세요.
썬커블 번역기는 언어의 코드를 인식하여 동작합니다.
그래서 번역할 언어를 선택하는 기능을 만들기 앞서 언어 코드의 관리를 편하게 하기 위해 변수블록을 사용하도록 할게요.코어 블록의 Variables에서 initialize variable블록을 드래그 앤 드롭하여 블록세트들의 상단에 배치하고 변수명을 lang_code로 지정하겠습니다.
코어블록의 Logic에서 null 1 블록을 변수값 자리에 드래그 앤 드롭 하여 조립해 줍니다.
list_lang의 리스트 아이템을 선택했을 때
이제 list_lang에 표시된 언어 리스트중 원하는 것을 선택하면 번역언어가 변경되는 기능을 만들어 볼게요.
list_lang에서 리스트 아이템이 클릭되었을 때 실행될 블록을 제어하는 Item Click 이벤트 블록을 드래그 앤 드롭하여 작업공간에 배치합니다.
📌 Item Click 이벤트 블록 옆에 달려있는 item, index 두개의 블록을 봐주세요. 이 블록들은 Item Click 이벤트가 실행되었을때 반환되는 값들을 나타냅니다.
- item : 선택한 아이템의 텍스트
- index : 리스트에서 선택된 아이템의 순번 (= 아이템의 위치, 1부터 시작)
데이터 패널에 등록된 데이터소스를 클릭하여 우리가 추가한 테이블을 다시 볼게요.
그리고 지난번 작업했던 screen_translation의 Opens 이벤트 블록 세트도 다시 봅시다.
화면이 열리면 list_lang에 추가한 테이블의 Language열에 있는 데이터가 나오도록 작업했었죠?
📌 만약 우리가 list_lang에서 Albanian을 선택한다면, Item Click 이벤트 블록의 item은 Albanian이 되고, index는 2가 됩니다.Item Click 이벤트가 일어났을때. 즉 언어를 선택했을 때 실행되어야 하는 기능은 세가지가 있습니다.
- lang_code 변수의 값이 선택된 언어의 Code 값으로 변경되어야 합니다.
- btn_select의 텍스트가 선택된 언어의 Language 값으로 변경되어야 합니다.
- list_lang이 다시 보이지 않게 되어야 합니다.
이제 하나씩 조립해 볼게요.
1번 기능을 수행하기 위해 lang_code의 값을 설정하는 set 블록을 Variables에서 드래그 앤 드롭하여 조립합니다.
이어서 데이터 테이블에서 특정 셀의 값을 가져와 주는 get value 블록을 조립해 주고 Language가 아닌 Code열의 값을 가져올 것이므로 가져올 열의 이름을 Code로 변경해 주겠습니다.
그리고 선택된 아이템의 위치를 특정하기 위해서, Item Click 이벤트 블록의 index 값을 가져와 row id 자리에 조립해 줍니다.2번 기능을 수행하기 위해 btn_select에서 set~Text 블록을 드래그 앤 드롭하여 조립하고, 선택된 아이템의 텍스트를 나타내는 item을 조립해 주었습니다.
마지막 3번 기능은 list_lang에서 set Visible 블록을 드래그 앤 드롭하여 조립하고 값을 false로 바꿔주면 됩니다.
번역 언어 변경하기
이제 list_lang에서 선택한 언어로 번역 결과를 바꿔주는 작업을 해보겠습니다.
작업 전 접어주었던 블록세트를 마우스 오른쪽버튼으로 클릭하고 Expand Block을 선택하여 펼쳐주었습니다.위에서 list_lang의 선택된 아이템 언어코드를 lang_code 변수에 담았었으므로, 번역 결과 언어인 English대신 변수 lang_code를 넣어주면 완성입니다.
이렇게 되겠네요.
테스트하기
이제 Web Preview로 테스트를 해봅시다.
의도한 기능들이 정상적으로 동작하고 있는것을 확인했습니다.
완성입니다!😎
이번 시리즈에서는 지난 프로젝트로 만들었던 번역기에 새로운 기능을 추가해 보았습니다.
이렇게 블록을 새로 배치하고 조립하며 기존 작업한 앱도 쉽게 수정할 수 있겠네요.
긴 글 읽어주셔서 감사합니다!- 데이터 값이 존재하지 않음을 나타내는 용어 [본문으로]
'✏️ 공부하자 > Thunkable' 카테고리의 다른 글
[Thunkable] 썬커블 번역기에 언어선택 추가하기 - 03. 블록코딩 / 데이터 소스 블록 (0) 2022.11.26 [Thunkable] 썬커블 번역기에 언어선택 추가하기 - 02. 데이터소스 추가 / 구글시트 가져오기 (0) 2022.11.25 [Thunkable] 썬커블 번역기에 언어선택 추가하기 - 01. 화면 구성 / 컴포넌트 배치 (0) 2022.11.24 [Thunkable] 썬커블로 코딩없이 녹음기 만들기 - 04. 블록코딩 / 변수 / 녹음파일 재생 (0) 2022.11.17 [Thunkable] 썬커블로 코딩없이 녹음기 만들기 - 03. 블록코딩 / 녹음 시작 / 녹음 중지 (2) 2022.11.15