부록 B. 스마트 폰과 연동, App만들기(앱인벤터2활용)

Presentation on theme: "부록 B. 스마트 폰과 연동, App만들기(앱인벤터2활용)"— Presentation transcript:

1 부록 B. 스마트 폰과 연동, App만들기(앱인벤터2활용)
- 스마트 폰으로 제어하는 아두이노 -

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

3 1. 앱인벤터 검색 구글 검색창에서 앱인벤터를 검색
" " 에 접속 실행

4 2.1 앱인벤터 초기화면 앱인벤터는 웹브라우저 안에서 개발하므로, 앱인벤터를 제공하는 웹사이트인 구글의 계정 필요 선택

5 2.2 앱인벤터 설치 선택 선택

6 앱인벤터 설치 (USB cable 사용)

7 앱인벤터 설치 6단계(USB cable 사용)

8 [Step 1] App Inventor Setup Software 설치1
선택 AppInventor_Setup_Installer_v_2_2.exe 다운로드

9 [Step 1] App Inventor Setup Software 설치2
앱인벤터 개발과 관련된 툴들이 포함되어 있음 에뮬레이터, 장치와 연동하기 위한 도구 etc. 밑에 페이지에서 다운로드 받아서 설치 icon 생성

10 [Step 2] MIT AI2 Companion App 설치
MITAI2Companion.apk

11 제작한 App를 설치할 스마트 폰에 엡인벤터로 만든 App을 설치하기 위해 필요
QR코드를 사용하여 마켓으로부터 다운로드 받아서 설치 가능. 또는 직접 APK 파일을 다운로드 받아서 설치도 가능

12 [Step 3] aiStarter 실행하기 PC와 안드로이드 장치가 서로 통신하기 위해서 실행

13 [Step 4] 스마트 폰의 USB 드라이버 설치
PC에 안드로이드 장치(스마트 폰)와 통신하기 위한 안드로이드 장치의 USB 드라이버 설치

14 [Step 5] PC와 스마트 폰 연결 PC와 안드로이드 장치(스마트 폰)를 USB 게이블을 통하여 연결

15 [Step 6] PC와 스마트 폰 연결 확인 설치를 위한 6단계 과정을 완료

16 3. 앱인벤터 실행 먼저 aiStarter를 실행 를 선택하여 실행 선택

17 엡인벤터2 시작

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

19 5. 엡인벤터로 App 만들기 : 예제 블루투스 통신을 통한 스위치 ON/OFF 기능을 할 수 있는 앱 "BT_ONOFFSW" 제작

20 5.1 앱인벤터 실행화면 New Project 선택 Project name에 “BT_ONOFFSW”입력 후 “OK”
BT_ONOFFSW App를 만들기 위한 Project 생성

21 5.2 BT_ONOFFSW App를 만들기 위한 Project
App를 만들기 위한 Designer 창 생성

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

23 5.3 컴포넌트 배치하기2 ① ③ ④ ② ① ③ ⑤ ④ ② ⑤ ③ ① Drag 생성 ② ④ ⑤

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

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

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

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

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

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

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

31 6. 블록 에디터 실행 제작하는 project의 이름이 있는 툴바 오른 쪽 끝의 Block를 선택

32 7.블록 에디터 구성 웹상으로 연결되어 실행되므로 컴퓨터의 성능이나 인터넷 속도에 따라 약간의 시간이 소요된 후 다음과 같은 블록 에디터 창이 실행 블록에디터에 디자이너의 Components와 동일한 요소가 표시

33 8. 블록 에디터 작성 작성한 Components들을 프로그래밍하는 작업에 해당하는 블록 편집 실시
블록 에디터을 작성하는 방법은 다음 그림과 같이 구성요소를 드래그(Drag)하여 블록에디터 창에 끌어다 놓음 ② Drag ① 선택

34 8.1 ListPicker 기능의 블록 에디터 작성
Screen1에서 "ListPicker1"을 선택하여 "ListPicker1.BeforePicking"을 블록에디터 창에 끌어다 놓는다. ③ Drag ① ② 선택

35 8.2 ListPicker 블록 편집2 Screen1에서 "ListPicker1"을 선택하고 "ListPicker1.Elements"을 블록에디터 창에 끌어다 놓는다. ③ Drag ① ② 선택

36 8.3 ListPicker와 블루투스 블록 편집 Screen1에서 "BluetoothClient1"을 선택하여 "BluetoothClient1AddressesAndNames"을 블록에디터 창에 끌어다 놓는다. ③ Drag ① ② 선택

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

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

39

40 10. 앱 생성 컴포넌트 디자이너와 블록 에디터를 통하여 만들어진 프로젝트를 앱으로 생성 시켜보자. 앱을 생성하는 2가지 방법
직접 USB를 연결하여 앱을 실행

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

42 11.실습 장비 설정확인 홈 화면 - 메뉴 버튼 – Setting – Application 항목 선택
Unknown sources 설정 항목 체크 Development 항목 USB Debugging 체크 Stay Awake 체크

43 12. 프로젝트 실행 AI Companion : WIFI를 지원하는 안드로이드 장비 연결
Emulator : 에뮬레이터를 이용하여 확인 USB : WIFI를 지원하지 않는 안드로이드 장비에서 USB를 통해 연결

44 13. 스마트 폰에서 실행 AI Companion을 사용하면 제작한 App을 apk파일로 만들어 스마트 폰에 설치하기 전에 그 동작을 확인 가능 실행순서 스마트 폰에서 “MIT AI2 Companion”앱을 실행(①, ②) 앱인벤터의 Connect에서 AI Companion실행(③)-QR 코드 생성(④) 스마트 폰의 MIT AI2 Companion에서 scan QR code를 실행하여 PC에 생성된 QR코드 스켄(⑤) 제작한 앱이 스마트폰에서 실행(⑥) ①앱실행 ② ③ ⑥ ④ ⑤

45 13. 에뮬레이터 사용 앱인벤터에서 제공하는 에뮬레이터를 사용하여 제작한 App를 확인 가능
Connect-Emulator 선택 Emulator에서 “MIT AI2 Companion”을 실행 Emulator에 제작한 App을 설치하여 실행