PART 1 앱 인벤터 프로젝트 01 안녕 야옹이. PART 1 앱 인벤터 프로젝트 01 안녕 야옹이.

Presentation on theme: "PART 1 앱 인벤터 프로젝트 01 안녕 야옹이. PART 1 앱 인벤터 프로젝트 01 안녕 야옹이."— Presentation transcript:

1

2 PART 1 앱 인벤터 프로젝트 01 안녕 야옹이

3 처음 만들어 볼 간단한 앱 <안녕 야옹이> 앱의 기능 고양이를 터치하면 “야옹” 울음소리를 내고 폰이 진동
고양이를 터치하면 “야옹” 울음소리를 내고 폰이 진동 폰을 쥐고 흔들면 “야옹” 울음소리를 냄

4 무엇을 배우는가? <안녕 야옹이> 앱을 만들면서 배우는 것들 필요한 컴포넌트를 선택하고, 컴포넌트가 할 일을 지정
보이는 컴포넌트와 보이지 않는 컴포넌트 미디어(소리와 영상) 파일을 업로드하고 앱에 추가 블록 에디터에서 블록을 조립하고, 블록이 할 일을 지정 라이브 테스팅으로 앱의 실행 테스트 앱을 폰에 다운로드하고 설치

5 앱 인벤터 개발 환경 앱 인벤터의 세계로 들어가려면, http://ai2.appinventor.mit.edu에 접속
구글 계정으로 로그인

6 앱 인벤터 개발 환경 프로젝트 만들기 앱 인벤터는 클라우드 방식
화면 왼쪽 상단에서 [Projects] – [Start new project] 클릭 프로젝트 이름 입력: 여기서는 “HelloPurr”라 입력 앱 인벤터는 클라우드 방식 모든 앱 프로그램은 서버에 저장됨 → 인터넷이 가능한 어디서든 프로그램에 접근 가능

7 앱 인벤터 개발 환경 세 가지 주요 요소 컴포넌트 디자이너: 앱 화면 (사용자 인터페이스) 설계
블록 에디터: 앱의 동작 프로그래밍 안드로이드 폰: 없으면 에뮬레이터 사용

8 컴포넌트 설계 컴포넌트는 요리책에 있는 각종 재료에 해당 Button 컴포넌트 Label 컴포넌트 Canvas 컴포넌트
AccelerometerSensor 컴포넌트 SpeechToText 컴포넌트 SpeechRecognizer 컴포넌트 Twitter 컴포넌트 BluetoothClient 컴포넌트 TinyWebDB 컴포넌트 ……

9 컴포넌트 설계 컴포넌트 디자이너에 있는 다섯 가지 영역 Viewer Palette Components Media
Properties

10 레이블 만들기 Label 컴포넌트 추가 과정 Label 컴포넌트를 Viewer 영역으로 끌 어오기
Text 속성을 “고양이 를 만져봐”로 설정 BackgroundColor, TextColor, FontSize 속성 설정

11 버튼 추가하기 Button 컴포넌트 추가 과정 고양이 사진 다운로드 Image 속성 클릭하여 선택 [Upload File…]
버튼 모양 확인 Text 속성을 공백으로

12 고양이 울음소리 추가하기 Button 컴포넌트 추가 과정 지금까지 <안녕 야옹이> 앱에서 사용된 컴포넌트
소리 파일 다운로드 Sound 컴포넌트 끌어오기: Non-visible components 영역에 나타남 Sound 컴포넌트의 Source 속성을 소리 파일로 설정 지금까지 <안녕 야옹이> 앱에서 사용된 컴포넌트

13 라이브 테스팅 라이브 테스팅이란? 라이브 테스팅 관련 문서 앱을 개발하면서 도중에 안드로이드 폰에서 실행해보는 기능
안드로이드 폰이 없는 경우 에뮬레이터 사용 가능 “점진적 프로그래밍”에 크게 도움이 됨 라이브 테스팅 관련 문서

14 라이브 테스팅 라이브 테스팅 절차 <MIT AI2 Companion> 앱을 폰에 설치
컴퓨터와 폰에서 같은 와이파이로 접속 앱 인벤터 화면에서 [Connect] – [AI Companion] 선택 폰에서 <MIT AI2 Companion> 앱 실행 & QR 코드 스캔

15 컴포넌트 동작 프로그래밍 고양이를 누르면 소리가 날까? 소리가 안 난다. → 왜 그럴까?

16 고양이 울음소리 내기 소리를 내려면, 블록 에디터에서 프로그래밍을 해야 한다. [Blocks]를 눌러 블록 에디터로 이동
Built-in과 Screen1이라는 서랍 확인 Built-in: 앱 인벤터가 제공하는 블록 Screen1: <안녕 야옹이> 앱이 사용하고 있는 컴포넌트가 제공하는 블록

17 고양이 울음소리 내기 Button1이 제공하는 블록들

18 고양이 울음소리 내기 버튼 클릭 이벤트가 발생했을 때 수행할 동작 프로그래밍

19 고양이 울음소리 내기 버튼 클릭 이벤트가 발생했을 때 수행할 동작 프로그래밍

20 라이브 테스팅

21 진동 기능 추가하기 진동 기능은 꽤 어려운 작업으로 보이지만, 사실 쉽다. 앱 인벤터는 폰이 가진 대부분 기능을 블록으로 제공
 여기서는 Sound 컴포넌트 블록을 사용

22 진동 기능 추가하기 절차 블록 에디터에서 Sound1 서랍을 연다.
call Sound1.Vibrate 블록을 끌어와 Buttons1.Click 블록에 끼움

23 진동 기능 추가하기 절차 millisecs라는 홈은 밀리 초를 나타내는 매개변수 Math 서랍에서 숫자 블록 끌어옴
500으로 값 변경 숫자 블록을 millisecs 홈에 끼움

24 폰을 흔들면 고양이 울음소리 내기 절차 <안녕 고양이> 앱의 전체 프로그램
Sensors 서랍에서 AccelerometerSensor 컴포넌트 끌어오기 AccelerometerSensor1서랍에서 AccelerometerSensor1.Shaking 이벤트 처리기 끌어옴 Call Sound1.Play 블록을 끌어와 AccelerometerSensor1.Shaking 블록에 끼움 <안녕 고양이> 앱의 전체 프로그램

25 안드로이드 폰에 앱 설치 <안녕 야옹이> 앱의 아이콘 꾸미기 설치 절차
Screen1 컴포넌트의 Icon 속성에 원하는 (예, 예쁜 고양이 사진)을 업로드 설치 절차 폰에서 [설정]–[응용]으로 가서 Unknown Sources 체크 디자이너에서 [Build]-[App(provide QR code for .apk)] 선택 화면에 QR 코드가 뜨면 스캔하여 인식 구글 계정을 입력 다운로드 끝나면 설치

26 완성한 앱 공유 공유하는 네 가지 방법 전 세계가 공유하는 앱 갤러리 실행 파일인 .apk 파일을 친구에게 이메일로 전송
.apk 파일을 웹에 올려두면 (예, DropBox) 친구가 다운로드 QR 코드 이용: 웹주소를 담은 QR 코드를 종이에 인쇄하여 적당한 곳에 붙여둠 소스 파일인 .aia 파일을 친구에게 전송 전 세계가 공유하는 앱 갤러리 Gallery: 다른 사람이 게시한 앱을 보거나 다운로드 Publish to Gallery: 내가 만든 앱을 게시

27 확장해 보기

28