부록 B. 스마트 폰과 연동, App만들기 - 스마트 폰으로 제어하는 아두이노 -

구글 앱인벤터란? 앱인벤터는 구글에서 제공하는 안드로이드 장치를 위한 App을 제작하는 도구 스마트 폰용 App 개발이 가능하며, Mac OS, Linux, Windows 운영체제 지원

1. 자바 설치 자바 프로그램은 http://www.java.com/에서 다운로드 받아 설치

2. 앱인벤터 검색 구글 검색창에서 앱인벤터를 검색 "http://appinventor.mit.edu/" 에 접속 실행

3. 앱인벤터 초기화면 앱 개발을 위해서는 “Invent”선택 앱인벤터는 웹브라우저 안에서 개발하므로, 앱인벤터를 제공하는 웹사이트인 구글의 계정 필요

4.앱인벤터의 구성 앱인벤터는 App 개발을 위하여, App의 화면을 구성하는 "컴포넌트 디자이너"와 App 프로그래밍에 해당하는 "블록 에디터"로 구성 컴포넌트 디자이너 블록 에디터 만들 App의 컴포넌트를 선택하는 곳 프로그램 블록을 조립하는 곳 퍼즐 조각 맞추듯 시각적으로 프로그램 제작 가능 컴포넌트 동작을 정의

5. 앱인벤터 실행화면

예제 블루투스 통신을 통한 스위치 ON/OFF 기능을 할 수 있는 앱 "BT_ONOFFSW" 제작

[step1] BT_ONOFFSW 프로젝트 생성 윗부분 툴바에서 New를 산택하여 프로젝트 생성 New 선택→Project name →"BT_ONOFFSW"

[step2] 컴포넌트 배치하기 스마트 폰의 화면에 나타나게 되는 요소들을 구성 Palette-Basic에서 Button 컴포넌트 선택하여 Viewer의 Screen1으로 드래그 다음 그림과 같이 Screen1에 하나의 버튼(Text for Button1)이 배치되고 Components 창에 "Button1"이라는 이름으로 구성요소가 생성

컴포넌트 배치 블루투스 연결 상태를 알려주기 위한 "①Text for Label1"과 스마트 폰에서 블루투스를 검색하기 위하여 사용할 "②ListPicker"를 각각 배치하고, 스위치 ON/OFF 기능을 위한 버튼 "③Text for Button1"과 "④Text for Button2"를 배치한다. "⑤Clock은"은 블루투스를 일정 시간동안에만 검색할 수 있도록 하는 기능을 위하여 사용

스마트 폰의 블루투스 기능을 사용하기 위하여, "BluetoothClient1"을 그림과 같이 배치 "⑤Clock은"나 "⑥BluetoothClient1"는 화면에서 사용되기는 하지만 화면 위에 표시되지는 않기 때문에 Screen창 밖에 배치

[step3] 컴포넌트 디자인 Viewer의 Screen1에 배치된 구성요소들을 보기 좋고 사용에 편리하도록 디자인 "Text for Label1"은 블루투스 연결 상태를 알려주기 위한 것으로 스마트 폰과 외부 기기가 블루투스 연결되지 않았으면, "Not Connected"를 나타내도록 하도록 구성

리스트피커 배치 "ListPicker"는 스마트 폰에서 블루투스를 검색하기 위하여 사용된다. 블루투스 연결이 되지 않았을 때, 스마트 폰에서 연결 가능한 외부 블루투스 기기를 검색하여 연결

버튼 디자인 스위치 ON/OFF 기능을 위한 버튼 "Text for Button1"과 "Text for Button2"는 프로그램 구성을 위한 블록 에디터에서 사용이 편리하도록 이름 변경 Viewer에서 "Text for Button1" ⓐ를 선택하고, Components창 아래 부분의 Renameⓑ를 클릭하면 Screen Component라는 창이 생성 ⓒ와 같이 "SWON_Button"으로 이름을 변경 "Text for Button2"도 같은 방법을 사용하여 "SWOFF_Button"으로 변경 다음으로 각 버튼에 대한 색상이나 글자크기, 버튼의 크기 등도 그림을 참고하여 설정

블루투스 설정 스마트 폰의 블루투스 기능을 사용하기 위한 "BluetoothClient1"은 다음 그림과 같이 설정

[step4] 컴포넌트 디자인너 저장 컴포넌트의 배치와 디자인이 완료되면, 다음 그림과 같이 위쪽 툴바에서 Save를 이용하여 저장

[step5] 블록 에디터 불러오기 컴포넌트 디자이너의 저장이 완료되면, 블록 에디터를 실행시키기 위하여 다음 그림과 같이 위쪽 툴바의 오른 쪽에 있는 "Open Block Editor"를 선택하여 실행

JAVA 응용 프로그램 실행 Block Editor를 실행하기 위해서는 JAVA 응용 프로그램이 실행되어야 하므로 실행 허가를 요청하는 메시지 JAVA 응용 프로그램의 실행을 허락하면, 다음과 같은 팝업창이 나타나며 설치와 실행

블록 에디터 실행 웹상으로 연결되어 실행되므로 컴퓨터의 성능이나 인터넷 속도에 따라 약간의 시간이 소요된 후 다음과 같은 블록 에디터 창이 실행 블록 에디터 창의 오른 쪽에 Built-In, My Block, Advanced의 3가지 선택 영역이 있는데, 가운데 있는 My Block을 선택하면, 그림과 같이 앞의 Components창에 배치한 것과 대응이 되는 요소 표시

[step6] 블록 에디터 작성 작성한 Components들을 프로그래밍하는 작업에 해당하는 블록 편집 실시 블록 에디터을 작성하는 방법은 다음 그림과 같이 먼저 My Block에서 구성요소를 드래그(Drag)하여 블록에디터 창에 끌어다 놓음

ListPicker 기능의 블록 에디터 작성 My Block에서 "ListPicker1"을 선택하여 "ListPicker1.BeforePicking"을 블록에디터 창에 끌어다 놓는다.

리스트피커 블록 편집2 My Block에서 "ListPicker1"을 선택하여 "ListPicker1.Elements"을 블록에디터 창에 끌어다 놓는다.

리스트피커와 블루투스 블록 편집 My Block에서 "BluetoothClient1"을 선택하여 "BluetoothClient1AddressesAndNames"을 블록에디터 창에 끌어다 놓는다.

리스트피커와 블루투스 블록 결합 그림과 같이 "ListPicker1.BeforePicking"에 "ListPicker1.Elements"과 "BluetoothClient1AddressesAndNames"를 각각 드래그하여 끼워 넣는다.

블록 에디터 작성 결과 앞에 설명한 방법에 따라 다음 그림과 같이 나머지 블록들도 작성하고 저장

[step7] 앱 생성 컴포넌트 디자이너와 블록 에디터를 통하여 만들어진 프로젝트를 앱으로 생성 시켜보자. 컴포넌트 디자이너 창의 위쪽 툴바 오른쪽 끝에 있는 Package for Phone을 선택하면 다음 그림과 같이 앱을 생성하는 3가지 방법이 나타난다.

앱인벤터의 앱생성과 설치 방법 앱 생성 방법 스마트 폰 설치 과정 Show Barcode QRcode를 생성되고, 스마트 폰으로 QRcode를 스캔하면, 앱인벤터 호스트에 접속하여 apk파일을 스마트 폰에 다운로드하여 설치 (스마트 폰에서 앱인벤터 개발에 사용된 동일한 구글의 아이디와 암호로 접속해야 함) Download to this Computer 앱인벤터 호스트에 접속하여 apk파일을 생성하여 개발용 PC에 저장되며, apk파일을 USB 케이블 등을 사용하여 스마트 폰에 복사하여 설치 (apk파일을 복사하여 사용 가능) Download to Connected Phone 개발용 PC에 스마트 폰을 연결하고, 스마트 폰으로 직접 apk파일이 다운로드 되며 설치 (개발용 PC에 각 스마트 폰용 디바이스 드라이버가 설치되어 있어야 함)

연습과제 다음과 같이 Viewer와 Blocks Editor를 구성하고, 앱을 만들어 보자.

Blocks Editor

테스트용 아두이노 스케치 const int digitalPin1 = 6; const int digitalPin2 = 7; byte serialA; void setup() { Serial.begin(9600); pinMode(digitalPin1, OUTPUT); pinMode(digitalPin2, OUTPUT); pinMode(digitalPin3, OUTPUT); } void loop() { switch (serialA) { case 1: digitalWrite(digitalPin1, HIGH); break; case 2: digitalWrite(digitalPin2, HIGH); case 3: digitalWrite(digitalPin3, HIGH); case 4: digitalWrite(digitalPin1, LOW); digitalWrite(digitalPin2, LOW); digitalWrite(digitalPin3, LOW); } void serialEvent() { serialA = Serial.read(); }