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