모바일 어플리케이션
모바일 앱 만들기 1강
9강 이벤트
캔버스 활용하기 말로 하는 문자기능
이벤트
1 차시
2 차시 3 차시
2. 앱인벤터의 컴포넌트와 블록을 적절히 사용할 수 있다.
3. 캔버스의 좌표구조를 이해하여 활용할 수 있다.
1. 앱인벤터 의 이벤트 처리기 의 개념을 이해하여 활용할 수 있다.
학 습 목 표
이벤트
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
1차시
1 이벤트
이미지 출처 : 앱 인벤터 블럭
이벤트
1
버튼이나 스크린 터치처럼
앱에서 특정기능을 사용하기 위해 하는 동작들
이벤트
기 파일 시스템의 단점 보완
1
이벤트 처리기
2
버튼을 누르는 행동
“누르면 동작을 수행한다”
앱 인벤터에서는 이벤트 처리기가 기본 실행단위
사운드를 재생하는 것
이미지 출처 : 앱 인벤터 블럭
이벤트 이벤트 핸들러
동작
1 이벤트
이벤트 처리기
2
앱 인벤터에서는 이벤트 처리기가 기본 실행단위
참고 소켓
플러그
이미지 출처 : 앱 인벤터 블럭
이벤트
기 파일 시스템의 단점 보완
1
이벤트 유형
3
사용자 이벤트
사용자가 버튼을 클릭했을 때초기화 이벤트
앱이 실행되기 시작할 때타이머 이벤트
20밀리 초가 지난 후 애니메이션 이벤트 두 물체가 충돌했을 때외부 이벤트
폰에 문자가 도착했을 때이벤트
기 파일 시스템의 단점 보완
1
이벤트 유형
3
사용자 이벤트
사용자가 일으키는 이벤트로 버튼 누르거나 화면 터치 또는 드래그하면 발생
초기화 이벤트
앱 시작 자체를 이벤트로 간주
이미지 출처 : 앱 인벤터 블럭
이벤트
기 파일 시스템의 단점 보완
1
이벤트 유형
2
타이머 이벤트
일정한 시간 간격으로 실행해야 하는 동작
이미지 출처 : 앱 인벤터 블럭
이벤트
기 파일 시스템의 단점 보완
1
이벤트 유형
2
애니메이션 이벤트
캔버스 위의
스프라이트(그래픽요소)가 이벤트 발생
외부 이벤트
핸드폰이 GPS 위성에서 위치 정보를 받거나 다른 사람이 보낸 문자가 도착하면 이벤트 발생
이미지 출처 : 앱 인벤터 블럭
STT/TTS 앱 기획하기
텍스트 읽어주기 말한 내용을
텍스트로
이미지 https://pixabay.com
2
이미지 출처 : 앱 인벤터 메뉴
Button
1
사용자가 터치하여 특정동작이 일어나도록 하는 컴포넌트 Properties에서 버튼의 배경색, 크기, 폰트의 종류 등 변경 Blocks 모드로 가서 버튼에 원하는 기능을 구현
STT/TTS 앱을 위한 컴포넌트 3
Button
3
이미지 출처 : 앱 인벤터 메뉴
Label
2
텍스트 내용을 화면에 나타나게 하는 컴포넌트
STT/TTS 앱을 위한 컴포넌트
Label
3
이미지 출처 : 앱 인벤터 메뉴
TextBox
3
사용자가 텍스트를 입력할 수 있게 하는 컴포넌트 Hint 속성을 이용하여
사용자에게 입력할 내용을 알려줄 수도 있다.
STT/TTS 앱을 위한 컴포넌트
TextBox
3
이미지 출처 : 앱 인벤터 메뉴
HorizontalArrangement
4
컴포넌트들의 그룹을
왼쪽에서 오른쪽으로 배치할 때 사용
STT/TTS 앱을 위한 컴포넌트
HorizontalArrangement
기 파일 시스템의 단점 보완
3
이미지 출처 : 앱 인벤터 메뉴
TextToSpeech
5
텍스트를 음성으로 변환시키는 컴포넌트
STT/TTS 앱을 위한 컴포넌트
TextToSpeech
3
이미지 출처 : 앱 인벤터 메뉴
SpeechRecognizer
6
사용자가 말하는 것을 듣고
안드로이드의 음성 인식 기능을 사용하여 음성을 텍스트로 변환시킬 때 사용
STT/TTS 앱을 위한 컴포넌트
SpeechRecognizer
만들기
< 모든 실습 공통사항>
앱 인벤터 사이트(http://appinventor.mit.edu/explore/)에 접속한 후
“Create apps!“를 클릭하여 앱인벤터를 연다.
Projects > Start New Project를 클릭하여 새로운 프로젝트를 만든다.
프로젝트 이름은 앱이 스마트폰에 설치되었을 때 표시되는 앱 이름이 된다.
3 만들기
자세한 실습영상은
강의 속에서 확인하세요.
참고 자료
§ 앱 인벤터2, David Wolber 외 3인, 오일석/이진석 옮김, 한빛아카데미
§ 앱 인벤터로 도전! 안드로이드 앱 디벨로퍼, CODABLE 지음, 성안당
§ 꿀잼 앱인벤터 완전정복, 박영아 외 5인, 카오스북
§ 스마트폰 이미지 http://bitly.kr/9cFC
말로 하는 문자기능
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
2차시
말로 하는 문자기능 만들기
기 파일 시스템의 단점 보완받은 문자를 읽어주기 말로 문자내용을
입력하기
이미지 https://pixabay.com
1
검색 앱을 위한 컴포넌트 2
이미지 출처 : 앱 인벤터 메뉴
Texting
문자를 주고 받게 하는 컴포넌트
Texting
3 만들기
자세한 실습영상은
강의 속에서 확인하세요.
참고 자료
§ 꿀잼 앱인벤터 완전정복, 박영아 외 5인, 카오스북
§ 쉽게 따라하는 앱 인벤터2 배우기, 이미향 저, 정보문화사
§ 스마트폰 이미지 http://bitly.kr/9cFC
캔버스 활용하기
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
3차시
캔버스 활용
캔버스 안에서 움직임 주기
이미지 https://pixabay.com
1
캔버스 활용을 위한 컴포넌트 2
이미지 출처 : 앱 인벤터 메뉴
Canvas
1
그림이 그려지고 그 위에서 공이 움직이는 2차원 터치 사각형 패널
Width, Height는 픽셀 단위이고, 양수
0 10 1 0 2 0 3 0 20 30
x축
Canvas
y축기 파일 시스템의 단점 보완
2
이미지 출처 : 앱 인벤터 메뉴
ImageSprite
2
캔버스 활용을 위한 컴포넌트
캔버스 안에 배치하고,
사용자의 터치나 드래그에 반응한다.
다른 스프라이트
(공이나 이미지 스프라이트)와 캔버스 가장자리에 상호 작용하고 속성 값에 따라 움직인다.
ImageSprite
2
이미지 출처 : 앱 인벤터 메뉴
TableArrangement
3
테이블 형태로 행과 열을 만들어 사용
캔버스 활용을 위한 컴포넌트
TableArrangement
3 만들기
자세한 실습영상은
강의 속에서 확인하세요.
참고 자료
§ 앱 인벤터로 도전! 안드로이드 앱 디벨로퍼, CODABLE 지음, 성안당
§ 안드로이드 앱 인벤터, 외르크 클로스 저, 이승현 옮김, 에이콘
§ 꿀잼 앱인벤터 완전정복, 박영아 외 5인, 카오스북
§ 스마트폰 이미지 http://bitly.kr/9cFC
학 습 정 리
앱인벤터 컴포넌트
Button, Label, Textbox, SpeechRecognizer,TextToSpeeh, Texting, Canvas, ImageSprite
이벤트
이벤트처리기, 이벤트 유형
캔버스 화면의 좌표구조
화면좌측상단이 시작점(0,0), x값 증가, y값 증가
