- 이벤트 중심 프로그래밍에 대해 알아보기
- Thunkable 플랫폼의 다양한 블록 유형 이해하기
이 단원의 활동은 다음과 같습니다:
이벤트
모바일 앱은 이벤트 중심 프로그래밍을 기반으로 합니다.
이벤트 기반 프로그래밍 은 코드를 위에서 아래로 실행하는 것이 아니라 이벤트를 기반으로 합니다. 일부 프로그램은 모든 코드를 한 번에 실행하지만 모바일 앱은 사용자가 앱과 상호 작용하는 방식에 따라 작동합니다.
모바일 앱은 다음을 기반으로 작동합니다. 이벤트를 기반으로 작동하며, 이는 코드 실행을 트리거하는 이벤트입니다. 예를 들어 사용자가 버튼을 클릭하는 경우를 들 수 있습니다. 사용자가 버튼을 클릭하는 것이 이벤트입니다. 그리고 해당 이벤트가 발생할 때 실행되는 코드를 이벤트 핸들러.
멈추고 토론하기
휴대폰과 상호작용하는 방법과 휴대폰이 하는 일을 생각해 볼 수 있나요? 다음은 시작하기 위한 몇 가지 방법입니다:
- 앱 아이콘을 클릭하면 해당 앱이 열립니다.
- 문자 메시지의 '보내기'를 클릭하면 메시지가 전송되고 소리가 납니다.
- 앱에 로그인을 시도할 때 앱에서 비밀번호를 묻는 메시지가 표시됩니다.
먼저 Thunkable 플랫폼의 여러 부분을 살펴보겠습니다.
Thunkable에는 앱을 빌드하는 데 사용하는 두 개의 창이 있습니다. 상단 메뉴 표시줄(화면 왼쪽 상단)에서 디자인을 클릭하면 다음과 같이 표시됩니다. 디자이너로 이동하여 사용자 인터페이스를 디자인할 수 있습니다. 디자인 사용자 인터페이스 는 사용자가 상호 작용할 수 있는 앱의 모든 요소입니다. 여기에는 버튼, 탐색 모음, 텍스트 상자, 그림 등이 포함될 수 있습니다.
썽커블 디자이너 창
구성 요소 목록
앱에 추가한 모든 구성 요소가 여기에 표시되며 화면별로 계층적으로 정리되어 있습니다.
작업 공간
구성 요소를 이 중앙 작업 공간의 폰으로 드래그합니다. 구성 요소의 배치 위치와 크기를 제어할 수 있습니다.
구성 요소 추가
이 패널에서 시각적 구성 요소를 작업 공간으로 드래그합니다.
속성 패널
속성 패널에서는 각 컴포넌트의 속성을 설정할 수 있습니다. 속성 는 너비, 높이, 색상 등 각 컴포넌트에 대해 설정할 수 있는 다양한 특성입니다. 목업에서 컴포넌트를 선택한 다음 속성 패널에서 해당 속성을 변경할 수 있습니다.
누군가 앱을 사용하면 버튼을 클릭하거나 텍스트를 입력하는 등 사용자 인터페이스와 상호 작용하게 됩니다. 앱이 수행해야 할 작업을 결정하고 이러한 작업을 수행하도록 프로그래밍하는 것은 개발자의 몫입니다.
블록 편집기
'블록'을 클릭하면 블록 편집기로 이동합니다. 블록 편집기 창으로 이동하여 모든 코딩을 수행합니다. 왼쪽 패널에서 블록을 화면 중앙의 작업 공간으로 드래그합니다.
왼쪽에는 블록 팔레트가 있습니다. 상단에는 UI 컴포넌트가 있습니다. 앱의 각 컴포넌트에는 고유한 블록 세트가 있습니다. 구성 요소를 클릭하면 작업 영역으로 드래그할 수 있는 블록이 표시됩니다.
코딩 작업 공간
이곳은 모든 블록을 드래그할 수 있는 작업 공간입니다. 블록을 이동하고 서로 끌어다 붙일 수 있습니다. 필요 없는 블록은 삭제할 수도 있습니다.
핵심 블록
핵심 블록은 앱에서 사용할 수 있는 표준 코딩 블록입니다. 유형에 따라 분류되고 색상으로 구분됩니다.
앱 기능
앱에 추가할 수 있는 보이지 않는 기능입니다. 기능을 클릭하여 추가한 다음 해당 기능에 대한 속성을 설정하고 코드 블록을 끌어다 놓을 수 있습니다.
이벤트 핸들러
Thunkable의 이벤트 핸들러 블록은 금색이며 열린 블록 모양이므로 그 안에 블록을 끼워 넣을 수 있습니다. 이러한 블록은 해당 이벤트가 발생할 때만 실행됩니다.
버튼을 클릭한 경우
이미 사용해 보셨을 것입니다. 사용자가 특정 버튼을 클릭하면 앱이 다른 화면을 열거나 메시지를 보내는 등의 작업을 수행하도록 할 수 있습니다.
ListViewer 항목을 클릭한 경우
ListViewer는 드롭다운 메뉴와 같으므로 사용자가 목록에서 항목을 선택하면 이 이벤트가 발생합니다. 앱은 클릭된 항목에 대해 무언가를 수행해야 합니다.
화면이 열릴 때
이 이벤트는 앱이 처음 시작되거나 앱이 다른 화면으로 전환될 때 무언가를 수행하려는 경우에 사용됩니다. 변수를 설정하거나 클라우드에서 정보를 업데이트할 수 있습니다.
기능
함수 는 어떤 작업을 수행하는 코드 블록입니다. 함수는 앱 내에서 여러 번 실행할 수 있습니다. Thunkable에서 함수 블록은 자주색으로 표시됩니다. 일부 언어에서는 함수를 메서드 또는 프로시저라고 합니다. 함수는 어떤 작업을 수행하므로 액션 블록으로 생각할 수 있습니다.
말하기
이 기능을 사용하면 앱이 사용자가 원하는 텍스트를 말하거나 말할 수 있습니다.
타이머 시작 및 사운드 재생
타이머 컴포넌트는 카운트를 시작할 수 있습니다. 앱에서 소리를 재생할 수도 있습니다.
세터 및 게터
녹색 블록은 컴포넌트의 속성과 관련이 있습니다.
연한 녹색 블록은 getters라고 하며, 프로퍼티의 값을 가져오기 때문입니다.
버튼1의 텍스트
텍스트를 가져와 숫자선택 변수에 저장합니다.
타이머1의 시간(초)
타이머의 초 값을 가져와 Lablel1의 텍스트에 저장하므로 해당 값이 레이블에 표시됩니다.
세터 는 진한 녹색이며, 끝 부분에 열린 슬롯이 있어 스냅할 수 있습니다. 이를 통해 속성 값을 설정할 수 있습니다.
버튼1의 텍스트
Button1의 텍스트는 "클릭하세요!"로 설정됩니다.
Label1.Text
Label1의 텍스트가 타이머1의 시간(초)으로 설정됩니다.
타이머 1의 간격 밀리초
타이머1의 인터벌밀리초(타이머가 울리는 주기)가 3000, 즉 3초로 설정됩니다.
멘토 팁
모범 사례: 학생들에게 이것이 실제 코딩과 똑같다는 것을 상기시켜 주세요. 우리가 사용하고 있는 이상한 어휘(함수, 게터, 세터)는 코더들이 사용하는 것과 정확히 일치합니다.
학생들에게 물어볼 수 있는 가이드 질문: 여러분이 일상적으로 하는 일을 생각해 볼 수 있나요? (예: 케이크 굽기, 양치질 등 반복 가능한 단계가 있는 모든 것). 함수는 알고리즘과 매우 유사합니다!
멘토 팁은 AmeriCorps의 지원을 받아 제공됩니다.
데이터 블록
세터 블록을 사용할 때 데이터 또는 앱에서 사용할 수 있는 정보를 나타내는 다른 기본 제공 블록을 사용할 수 있습니다. 사용할 수 있는 데이터 블록의 몇 가지 예는 다음과 같습니다.
숫자
숫자 값은 앱에서 데이터로 사용할 수 있습니다. 이러한 블록은 블록 팔레트의 핵심 섹션에 있는 수학 서랍에서 찾을 수 있습니다.
텍스트 또는 문자열
문자열이라고도 하는 텍스트를 데이터로 사용할 수 있습니다. 앱에서 사용할 수 있는 문자, 단어 및 문장입니다. 블록은 블록 팔레트의 핵심 섹션의 텍스트 서랍에서 찾을 수 있습니다.
부울
이 데이터 유형에는 참 또는 거짓의 두 가지 값만 가능합니다. 이 블록은 무언가의 '상태'를 설정하거나 테스트할 수 있으며, 앞으로 자세히 알아보게 될 조건문에 사용됩니다.
활동: 사운드보드 튜토리얼
아래 동영상 튜토리얼을 따라하세요.
그런 다음 아래 Dave의 동영상을 따라 이벤트 핸들러와 함수를 사용하여 앱에서 연설을 재생하세요.
도전 과제
활동에서 사용했습니다:
- 이벤트 핸들러 블록
- 기능 블록
사운드보드 앱에 추가하여 세터 및 게터 블록을 사용해 보겠습니다.
사용자가 관련 음성을 재생하기 위해 사진을 클릭하면 배경 색상을 변경합니다.
특정 색상으로 변경할 수는 있지만 시작 색상인 검정색으로 쉽게 다시 변경할 수 없으므로 대신 화면 배경을 임의의 색상으로 변경합니다.
힌트: 색상 서랍에서 임의의 색상을 얻는 방법을 확인하세요.
돌아보기
이제 다양한 코드 블록에 대해 조금 더 배웠으니 앱 솔루션에 대해 생각해 보세요:
주요 용어 검토
- 사용자 인터페이스 - 사용자가 상호 작용할 수 있는 앱의 모든 것
- 디자이너 - 창에서 앱에 컴포넌트를 추가하고 모양을 디자인할 수 있습니다.
- 블록 편집기 - 앱의 블록을 코딩하는 창
- 이벤트 - 코드 실행을 트리거하는 어떤 일
- 이벤트 핸들러- 이벤트 발생 시 앱에 수행할 작업을 알려주는 코드 블록입니다.
- 이벤트 중심 프로그래밍 - 전체 코드를 위에서 아래로 실행하지 않고 이벤트를 기반으로 프로그래밍하는 방식입니다.
- 함수 - 실행되는 코드 블록으로, 여러 번 실행할 수 있습니다.
추가 리소스
다음에서 Dave Wolber의 더 많은 Thunkable 튜토리얼을 확인하세요. 드래그앤드롭코드닷컴
학생 홍보대사 미낙시 나이르의 무료 강의 썽커블 코스 는 또 다른 훌륭한 리소스입니다!
