10. 앱 인벤터가 제공하는 기능
음악 재생, 음성 변환, 번역, 동영상 재생,
동영상 촬영, 사진 촬영, 음성 인식, 사진 보기, 녹음,
그림 그리기, 애니메이션 만들기, 시간 측정,
자이로스코프 센서, 바코드 스캔, 위치 센서, 방향 센서,
NFC, 가속도 센서, 근접 센서, 문자 메시지, 전화, 공유,
트위터와 통신, 데이터 저장, 파일 쓰기 및 읽기,
퓨전 테이블, 웹 데이터베이스, 블루투스, 웹 서버와 통신,
외부 앱 실행, 마인드 스톰 제어 등과 관련된 컴포넌트를
이용하여 다양한 앱을 쉽게 만들 수 있습니다.
11. 앱 인벤터를 위한 준비
그림출처: https://www.flickr.com/photos/sterlic/6778181411
12. 앱 인벤터를 위한 준비1
http://www.google.co.kr/chrome 에 접속하여 크롬을 설치합니다.
13. 앱 인벤터를 위한 준비2
http://www.google.co.kr 에 접속하여 구글 계정을 만듭니다.
14. 앱 인벤터 접속1
크롬으로 http://appinventor.mit.edu 에 접속한 후
를 클릭합니다.
36. 블록 조립하기-그리기 기능 만들기1
을 클릭하여 블록 편집기로 이동합니다. 캔버스1에 있는
[언제 캔버스1.드래그] 블록을 드래그하여 뷰어 패널로 가져옵니다.
황토색 블록은 이벤트 핸들러 블록으로 이벤트가 발생하면 실행됩니다.
앱 인벤터는 명령어 블록을 블록 패널에서 찾아서 뷰어 패널로 가져오는
방식으로 프로그래밍합니다.
(명령어를 키보드로 쳐서 입력할 수도 있습니다.)
37. 블록 조립하기-그리기 기능 만들기2
캔버스1에 있는 [호출 캔버스1.선 그리기] 블록을 찾아서
뷰어 패널로 가져옵니다.
38. 블록 조립하기-그리기 기능 만들기3
[호출] 블록의 홈을 [언제] 블록 안에 있는 돌기 부분 가까이 가져가면
돌기에 노란색 테두리기 생깁니다. 이때 마우스 버튼을 놓으면
[호출] 블록이 [언제] 블록 안(실행 섹션)에 들어갑니다.
“호출”로 시작하는 보라색 블록은 함수 호출 블록으로 미리 함수로
구현해 놓은 기능을 불러올 때 사용합니다.
앱 인벤터는 이러한 결합을 통해 명령어를 완성합니다.
39. 블록 조립하기-그리기 기능 만들기4
[언제] 블록의 [이전X]에 마우스 포인터를 올리면 나타나는
[가져오기 이전X] 블록을 [호출] 블록의 x1 홈(소켓)에 끼웁니다.
같은 방법으로 나머지 홈에도 블록을 끼웁니다.
주황색 블록은 변수 블록으로 변하는 값을 저장하거나(지정하기 블록)
가져올 때(가져오기 블록) 사용합니다.
40. 블록 조립하기-선 굵기 조절 기능 만들기1
슬라이더1에 있는 [언제 슬라이더1.위치 변경] 블록을
뷰어 패널로 가져옵니다.
41. 블록 조립하기-선 굵기 조절 기능 만들기2
캔버스1에 있는 [지정하기 캔버스1.선 두께] 블록을 찾아서
[언제 슬라이더1.위치 변경] 블록 안에 넣습니다. 녹색 블록은
속성 설정 블록으로 컴포넌트의 속성을 지정할 때 사용합니다.
섬네일 위치에 마우스 포인터를 올린 후 [가져오기 섬네일 위치]블록을
[지정하기 캔버스1.선 두께] 블록에 연결합니다.
42. 블록 조립하기-선 굵기 표시 기능 만들기
레이블1에 있는 [지정하기 레이블1.텍스트] 블록을 찾아서
[언제 슬라이더1.위치 변경] 블록 안에 넣습니다.
캔버스1에 있는 [캔버스1.선 두께] 블록을 [지정하기 레이블1.텍스트] 블록
에 연결합니다. 앞쪽에 튀어나온 부분이 있는 연녹색 블록은
속성값 블록으로 숫자, 문자, 참, 거짓과 같은 값이 들어있습니다.
43. 블록 조립하기-지우개 기능 만들기
버튼1에 있는 [언제 버튼1.클릭] 블록을 뷰어 패널로 가져옵니다.
캔버스1에 있는 [호출 캔버스1.지우기] 블록을 [언제 버튼1.클릭] 블록
안에 넣습니다.
46. MIT AI2 Companion 앱 설치
앱 인벤터와 스마트폰을 Wi-Fi로 연결하여 앱을 테스트해 볼
수 있습니다. 이를 위해서는 스마트폰에 MIT AI2 Companion
앱을 설치합니다.
주의: Wi-Fi를 이용한
연결은 스마트폰과
컴퓨터가 같은
네트워크에 접속된
상태일 때 만
이용가능 합니다. Wi-Fi
사용이 불가능할 경우
USB 연결을 사용하면
됩니다.
48. 컴패니언에 연결하기2
스마트폰의 AI 컴패니언 앱을 실행시켜 QR코드를 스캔하면
앱이 자동으로 실행됩니다.
AI 컴패니언을 통해 연결된 상태에서 앱의 디자인이나 기능을
바꾸면 스마트폰에 실시간으로 반영됩니다. 앱 개발 중에
테스트 하는 용도로 사용할 수 있습니다.
49. USB 연결하기1
USB로 앱 인벤터와 스마트폰을 연결 하여 앱을 테스트 하려면
컴퓨터에 App Inventor Setup 프로그램을 설치해야 합니다.
51. USB 연결하기3
스마트폰의 USB디버깅 기능을 활성화 한 후 USB케이블로
PC와 스마트폰을 연결합니다.
주의: 개발자 옵션이 보이지 않을 경우
[설정]-[휴대폰 또는 디바이스정보]
-[소프트웨어정보]-[빌드번호]를
개발자가 되었다는 메시지가
나타날 때 까지 계속 터치합니다.
케이블을 연결했을 때 스마트폰의 USB드라이브가 자동으로
설치되지 않을 경우 제조사에서 제공하는 드라이버를 찾아서
따로 설치합니다.
52. USB 연결하기4
앱 인벤터 상단 메뉴 중 [연결]-[USB]를 선택한 후 잠시
기다리면 앱이 자동으로 실행됩니다.
주의: 앱을 테스트 하는 중에
앱 인벤터와 스마트폰
사이의 연결이 끊어지면
[다시 연결하기]를 실행 한 후
다시 [AI 컴패니언] 또는 [USB]를
선택하여 연결하면 됩니다.
53. 앱 설치하기
상단 메뉴 중 [빌드]-[앱(.apk용 QR코드 제공)]을 선택합니다.
빌드가 완료되면 QR코드 창이 나타나며
QR코드를 컴패니언 앱으로 스캔하면 앱이 설치됩니다.
주의: 기기에 카메라가 없거나 QR코드 스캔이
잘 안될 경우
[빌드]-[앱(.apk를 내 컴퓨터에 저장하기)]를
선택하여 apk 파일을 컴퓨터에 저장한 후
기기에 옮겨서 설치하면 됩니다.
54. 웹 브라우저 앱 만들기
그림출처: https://www.flickr.com/photos/sterlic/6778181411
55. 웹 브라우저 앱 구상
http://www.. 버튼: 클릭하면
웹 사이트에
텍스트 상자에 입력된
주소에 접속
웹뷰어: 웹 페이지가
표시되는 공간
텍스트 상자: 사용자에게
웹 주소를 입력 받음.
버튼: 클릭하면
이전 페이지로
이동, 사용 가능한
경우에만 보임
← go→
버튼: 클릭하면
다음 페이지로
이동, 사용 가능한
경우에만 보임
56. 앱 디자인하기
컴포넌트 이름 변경해야 할 속성
Screen1
앱 이름: 웹브라우저
크기: 반응형
제목: 웹브라우저
수평배치1 너비: 부모에 맞추기
버튼_뒤로,
버튼_앞으로
배경색: 검정
글꼴 굵게: 체크
글꼴 크기: 15
높이: 부모에 맞추기
너비: 40 pixels
텍스트: ←, →
텍스트 색상: 흰색
텍스트상자_URL
배경색: 흰색
글꼴 크기: 15
너비: 부모에 맞추기
힌트: URL
텍스트: http://m.naver.com/
버튼_go
배경색: 어두운 회색
글꼴 크기: 15
높이: 부모에 맞추기
너비: 40 pixels
텍스트: go
텍스트 색상: 흰색
웹뷰어1 홈URL: http://m.naver.com/
시계1 타이머 간격: 2000
61. 비행기 게임 앱 만들기
그림출처: https://www.flickr.com/photos/sterlic/6778181411
62. 비행기 게임 앱 구상
레이블: 미사일로 적군을
맞추면 10점이 올라가고
적군을 맞추지 못하면
5점이 내려감
이미지 스프라이트:
스마트폰을 좌우로
기울이는 방향을 따라
움직임, 적군과 부딪히면
게임 끝
레이블: “시간”출력 시간:30 점수:0
레이블: 게임 제한시간
30초가 지나면 게임 끝
start
레이블: “점수” 출력
공: 무작위로
선정된 위치에서
떨어짐
공: 비행기를
플링하면
손가락의 방향과
속도에 따라
발사됨
이미지 스프라이드:
클릭하면 게임이 시작됨
적군
미사일
비행기
시작버튼
캔버스: 이미지 스프라이트와
공이 움직이는 공간
63. 미디어 파일 준비
비행기 게임에 필요한 미디어 파일은 다음과 같습니다.
비행기 이미지(airplane.png)
배경음악(bgm.mp3)
폭발 효과음(flashBang.mp3)
미사일발사 효과음(missileLaunch.mp3)
시작버튼 이미지 (start.png)
앱 인벤터 갤러리에 공유된
미디어 전용 프로젝트를 이용하면
미디어 파일을 쉽게 가져와서
사용할 수 있습니다.
http://goo.gl/Qx6rKl
에 접속한 후 [OPEN THE APP]를
클릭하면 프로젝트를 가져올 수
있습니다.