앱인벤터2 는 프로그래밍을 간편하게 할 수 있게 도와주는 프로그램으로, 개발자에게 프로그램언어에 대한 많은 지식을 필요로 하지 않으며, 앱인벤터2의 구조는 크게 디자인탭과 블럭탭이 있고, 이 것으로 모든 앱을 만들 수 있게 설계되어 있다.
사용 방법은 디자이너탭에서 좌측에 팔렛트에 아이콘형태 필터를 끌어다 앱에서 눈에 보이는 부분을 담당하는 레이아웃 디자인을 제작하고, 블럭탭에서 디자인별로 컴포넌트를 이용한 프로그래밍을 작업을 하여 앱이 실행될 수 있게 완성하는 형태를 띤다. 한마디로 디자이너는 "생김새", 블럭은 "기능"장착을 의미한다.
앱인벤터2 를 시작하려면 구글크롬에 아래와 같이 주소를 입력하면 된다.
http://ai2.appinventor.mit.edu/
앱인벤터2 예제이미지 다운 : www.appinventor.org/bookFiles
-> Start new project -> 프로젝트명 -> ok
* 프로젝트명은 공백없이 입력한다.
다음은 실행된 화면이다.
위 화면에서 컴포넌트와 블럭을 가지고 앱을 만들어 볼 수 있다.
* 라이브 테스팅
앱인벤터 프로그램을 개발하는과정에서 조금씩 기능을 추가하고, 스마트폰에 바로바로 테스트 실행하는 과정을 말하는 것으로 점진적 프로그래밍을 말한다. 이 테스트는 안드로이드 폰에서 앱인벤터로 접속하면 바로 실행해 볼 수 있다.
방법은, 스마트폰과 컴퓨터를 같은 와이파이에 놓고 스마트폰 "플레이스토어"에서 "MIT AI2 Companion" 앱설치 및 실행 한다.
-> 컴퓨터 화면에서 아래 처럼 실행한다.
PC 화면에서 Connect -> AI Companion -> 바코드 나오면
스마트폰 앱실행 :
스마트폰 화면에서 <MIT AI2 Companion> 실행 -> scan QR code -> QR 코드스캔
그러면 내가 개발중인 앱이 스마트폰 화면에도 나온다.
그런데, 위와 같은 방식은 인터넷 클라우드 방식이라 컴퓨터나 폰에서 접속이 끈어지면, 내 폰에서 앱을 찾아 실행 할 수 없다.
와이파이가 끈어진 상태에서도 설치할 수 있는 방법은 폰에 아래와 같이 설정한다.
스마트폰 :
설정 -> 잠금화면 및 보안 -> 출처를 알 수 없는 앱 "허용"
PC : 디자이너항목
Properties -> Screen1 항목에서 아이콘을 설정하고 -> Build -> App(provide QR code for.apk)
위 처럼 하면 QR코드로 apk 설치파일을 설치하여 폰과 PC접속이 끈긴 후에도 계속해서 스마트폰에서 앱을 사용할 수 있다.
(QR코드 만드는도구 : http://qrcode.kaywa.com/)
* 다른개발자와 .aia소스파일공유(앱 인벤터2) :
[My projects] -> 공유할 프로젝트명 선택 -> Projects
-> Export selected project (.aia) to my computer 클릭하면
파일이 생성되면서 내 PC에 저장이 된다.
* AccelerometerSensor (폰의 흔들림) 컴포넌트
* Sound - Play(소리), Vibrate(진동),
* 복잡한 레이아웃 작업시 수평(HorizontalArrangement), 수직(VerticalArrangement), 표(TableArrangement) 등의 정렬방식을 사용하면 편리하다.
* 터치하면 알아차리고, 이곳저곳 옮겨 다닐 수 있는 ImageSprite
* ImagaeSprite가 옮겨 다니는 공간을 제공하는 Canvas
* ImagaeSprite는 interval(ex.10밀리초)을 설정해두면 그 주기에 따라 스스로 움직인다.
* 스프라이트가 이동하는 시간 간격을 재는 Clock
* 목표물을 클릭하면 폰을 진동시키거나 소리를 내는 Sound
* 누르면 새로운 게임이 시작되는 Button (리셋)
* 두더지 위치 이동과 같이 반복되는 일을 지원(일정한 행동)하는 프로시저
* 난수생성 ramdom integer from to (캔버스내에 오프젝트 랜덤으로 이동)
* 덧셈과 뺄셈을 계산하는 블록
* 프로시저 추상화 - 명령어집합을 묶어서 이름붙이고, 나중에 필요할 때 호출해 사용하는 방식 - 예를 들어 두더지 이동처럼 난수를 생성해 좌표를 구한다는 동작과정을 모르더라도 두더지를 옮겨 준다는 프로시저의 기능만 알고 있어도 된다.
* 받은 문자를 처리하거나 문자를 보낼 때 쓰는 Texting 컴포넌트
* 앱을 종료한 후에도 맞춤 메시지가 계속 남아있도록 메시지를 저장하는 데 쓸 TinyDB 컴포넌트
* TinyDB는 휴대폰내부에 저장(개인적사용) / TinyWebDB는 클라우드 방식으로 웹서버에 데이터 저장(남들과 공유할 때) - 기본 학습용으로 제공되는 웹서버 : http://appinvtinywebdb.appspot.com
* 저장해 둔 메시지를 앱 실행이 시작될 때 읽어오는(로드) 데 쓸 Screen.Initialize 이벤트
* 문자를 소리로 들려줄 TextToSpeech 컴포넌트
* 운전자의 현재 위치를 알아내는 데 쓸 LocationSensor 컴포넌트
* GPS - LocationSensor로 위치정보를 가져올 수 있는데, LocationSensor.CurrentAddress는 주소정보를 얻어 올 수 있고, 위도와 경도는 Latitude, Longitude, 고도는 Altitude 로 표시할 수 있다. 여기에서, 위도란 적도를 중심으로 북(+),남(-) 90부터-90, 경도는 본초자오선(영국 왕립천문대가 있는 런던 근교의 그리니치 경도가 0.0)을 기점으로 동(+), 서(-) 180부터-180 으로 표현된다.
* 목적지까지 도착시켜주는 사이트 : (출발지에서 목적지까지 방향을 표시하는 네비사이트)
"http://maps.google.com/maps?saddr="은 출발지, &daddr=은 도착지를 의미하므로 , 이를 이용하여 차의 위치를 찾을 수 있다. 아래그림은 현재위치와 기억된 위치의 위도와 경도를 각각 표시한 것이다.
* OrientationSensor (Sensors) 폰의 기울음을 감지해 준다.
* Clock (Sensors) 스프라이트의 방향을 바꿀 주기를 재는 데 쓰는 시계 - 하나의 시계에서 여러 이벤트를 처리하는데, 이들 이벤트는 같은 주기를 따르지만, random fraction 블록을 추가하면 서로 다른 확률로 이벤트를 발생시킬 수 있다. 예를 들어, 어떤 이벤트가 타이머 네번에 한번 꼴 (25%확률)로 일어나게 하고 싶으면, if문을 이용하여 random fraction이 0.25보다 작을 때만 코드를 수행하게 하면 된다.
* 에너지바는 Canvas에 색을 입히는 것으로 사용
* 매개변수를 가진 프로시저 (ex. DrawEnergyLine 프로시저의 color와 length (톱니바퀴이용))
* Canvas (Drawing and Animation) 무당벌레의 에너지를 표시하는 곳 (에너지범위 0~200)
* 앱 안에서 다른 안드로이드 앱을 구동할 때 사용하는 ActivityStarter 컴포넌트 - 구글지도앱이나 자신이 만든 앱을 비롯해 어떠한 안드로이드 앱이라도 구동시킬 수 있다.
* 구글 지도앱 구동 위한 ActivityStarter 속성
- Action : android.intent.action.VIEW
- ActivityClass : com.google.android.maps.MapsActivity
- ActivityPackage : com.google.android.apps.maps
* 앱 안에서 웹 페이지를 보여주는 데 사용하는 Webviewer 컴포넌트
* 여러 개의 데이터를 저장할 때 사용하는 list 변수
* ListPicker 여러 개의 데이터를 인덱스와 항목으로 만들어 준다.
버튼을 클릭하면 발생하는 BeforePicking / 항목을 선택하면 발생하는 AfterPicking
Elements (선택할 항목을 가진 리스트 : 기본값)
Selection (사용자가 선택한 항목)
SelectionIndex (사용자가 선택한 항목의 색인)
* 원하는 지도를 보여주는 데 필요한 URL을 동적으로 생성하기
* 아마존 api http://aiamazonapi2.appspot.com/
<출처 : David Wolber, Hal Abelson, Ellen Spertus, Liz Looney(2015),
앱인벤터2(초판)(오일석, 이진선 번역, 서울:한빛아카데미. (원서는 2014년에 출판)>
'프로그램 > 앱인벤터' 카테고리의 다른 글
| [문제풀이]앱인벤터2 - "03. 잡아라! 두더지" 확장하기 P82 (1) | 2018.02.08 |
|---|---|
| [문제풀이]앱인벤터2 - "02. 페인트통" 확장하기 P67 (0) | 2018.02.05 |
| 앱 인벤터2 [한빛아카데미]6-파리관광 / URL 추가 (0) | 2017.01.18 |
| 앱인벤터2 - 앱에 유투브와 이메일 추가하기 (0) | 2017.01.06 |
| 앱인벤터2 - ActivityStarter - 지도 or 스트리트 뷰 추가하기 (1) | 2017.01.03 |
