앱인벤터2
Link
Contents
※ 본 페이지의 내용은 앱인벤터2 공식 홈페이지(ai2.appinventor.mit.edu)에서 제공되는 자료를 참고하였습니다. 원문 내용을 참고하려면 공식 홈페이지를 방문하기 바랍니다.
처음으로 앱인벤터2 프로그램을 사용해서 스마트폰앱을 만들어 보고 싶은 분에게 도움됩니다.
아래에서 앱인벤터 프로그램을 사용하는 방법 그리고 이어서 아두이노와 스마트폰을 간단하게 통신하는 방법을 예제를 통하여 소개합니다.
아래 세부 내용들을 살펴볼 수 있습니다.
1. 앱인벤터2 프로그램 다운로드 및 설치
2. 앱인벤터2 프로그램 실행 및 예제
1) 스마트폰 앱 버튼으로 아두이노에 연결된 LED 켜고 끄기
2) 스마튼폰 음성인식 앱으로 LED 불빛 켜고 끄기
3) 아두이노 온도센서 측정값 스마트폰 앱에 표시하기
4) 아두이노 푸시버튼으로 스마트폰 앱에서 표시하기
5) 스마트폰 앱으로 LED 밝기 조절하기
아두이노 또는 프로펠러 마이컴 보드의 프로그래밍을 블록으로 만들 수 있는 것처럼 안드로이드 스마트폰의 앱도 블록으로 간단히 만들 수 있습니다. 물론 앱인벤터 프로그래밍 도구가 지원하는 기능만 가능한 제한이 있지만, 비전문가가 앱을 만들기에는 부족한 점이 없을 정도로 다양한 기능들을 제공합니다. 무엇보다 이런 형태의 프로그래밍 방법이 더 많이 도입되고 활용될 것으로 예상됩니다. 이제 블록으로 스마트폰앱을 만드는 실습에 도전해보세요!
앱인벤터(App Inventor)는 클라우드 기반 도구로, 웹 브라우저에서 앱을 바로 만들 수 있습니다. 이 웹 사이트는 자신의 앱을 만드는 방법을 배우는데 필요한 모든 것을 지원합니다. 앱인벤터 소프트웨어 또는 "서비스"는 ai2.appinventor.mit.edu에 있습니다. 브라우저 우측 상단에 위치한 오렌지색 'Create Apps!'를 클릭하면 해당 페이지로 이동할 수 있습니다. 버튼을 클릭하십시오.
앱인벤터로 제작한 앱을 실제로 테스트하려면 당신의 휴대 전화를 설정하는 방법(또는 휴대 전화가 없는 경우 에뮬레이터를 시작하는 방법)에는 3가지 방법이 있습니다.
여러분이 직접 제작한 앱을 스마트폰에서 사용하거나 테스트하기 위하여, 아래 3가지 방법들 중에서 한 가지를 선택해서 사용할 수 있습니다. 다만, 아래 첫 번째 방법이 가장 쉽고 많이 이용하는 방법이어서 추천합니다.
1) Wi-Fi를 통해 휴대 전화 또는 태블릿 연결방법
Android 기기를 사용하고 있고 무선 인터넷에 연결되어 있다면 소프트웨어를 컴퓨터에 다운로드하지 않고도 앱을 만들 수 있습니다. 귀하의 장치에 App Inventor Companion App 을 설치해야 합니다. 이 방법을 강력하게 권장합니다.
컴퓨터에서 다운로드하지 않고 앱인벤터를 사용할 수 있습니다!
웹 사이트 ai2.appinventor.mit.edu 에서 앱을 개발할 것입니다. 안드로이드(Android) 기기에서 실시간 테스트를 하려면 안드로이드 휴대 전화 또는 태블릿에 MIT App Inventor Companion 앱을 설치하기만 하면 됩니다. 컴패니언(companion)이 설치되면 웹의 앱인벤터에서 프로젝트를 열고, 기기에서 컴패니언을 열고 앱을 빌드할 때 앱을 테스트할 수 있는 라이브 테스트 기능이 동작합니다.
다음 단계는 과정을 안내합니다.
1 단계 : 휴대 전화에 MIT AI2 Companion App을 다운로드하여 설치하십시오.
기기의 QR 코드 스캐너를 열고 아래 왼쪽의 QR 코드를 스캔하여 Play 스토어에서 컴패니언 앱을 다운로드합니다. Play 스토어를 사용할 수 없는 경우 오른쪽의 QR 코드를 사용하여 컴패니언 앱을 휴대 전화로 직접 다운로드하십시오.
|
플레이 스토어 권장 자동 업데이트 |
APK 파일 수동 업데이트 필요 |
|
|
|
|
이 QR 코드를 스캔 (또는 이 링크를 클릭) Play 스토어에서 응용 프로그램을 얻을 수 있음 |
이 QR 코드를 스캔 (또는 이 링크를 클릭) 직접 응용 프로그램을 다운로드 |
다운로드가 끝나면 장치에 컴패니언 앱을 설치하기 위한 지침을 수행하십시오. MIT AI2 Companion을 한 번만 설치해야 하며, App Inventor를 사용할 때마다 휴대 전화 또는 태블릿에 두어야 합니다.
참고 1 : QR 코드를 사용할 수 없는 경우 휴대 전화 또는 태블릿에 MIT AI2 도우미를 설치할 수 있습니다. 기기의 웹 브라우저를 사용하여 Google Play 스토어로 이동합니다. 상점에서 MIT AI2 Companion을 찾으십시오. 컴패니언을 찾으면 컴패니언 앱의 설치 버튼을 클릭합니다.
참고 2 : Play 스토어를 거치지 않고 앱을 직접로드 (사이드 로드라고도 함)하기로 선택한 경우 기기 설정에서 '알 수없는 소스'의 앱 설치를 허용하는 옵션을 사용 설정해야 합니다. Android 4.0 이상을 실행하는 기기의 경우 '설정> 보안' 또는 '설정> 보안 및 보안'으로 이동 한 다음 '설정> 애플리케이션'으로 이동한 다음 '알 수 없는 출처' 화면 잠금"을 선택한 다음"알 수 없는 출처" 옆의 확인란을 선택하고 선택을 확인하십시오.
2 단계 : 컴퓨터와 기기를 동일한 WiFi 네트워크에 연결합니다.
앱 인벤터는 컴퓨터 (App Inventor 실행)와 안드로이드 장치 (Companion 실행)가 동일한 WiFi 네트워크에 연결되어 있는 경우에만 사용자가 구축중인 응용 프로그램을 자동으로 표시합니다.
3 단계 : 앱인벤터 프로젝트를 열고 이를 장치에 연결하십시오
앱인벤터로 가서 프로젝트를 열거나 새로 만드십시오 - 프로젝트> 새 프로젝트 시작을 사용하여 프로젝트 이름을 지정하십시오.
그런 다음 AI2 브라우저의 최상위 메뉴에서 "Connect" 및 "AI Companion"을 선택하십시오.
QR 코드가 있는 대화 상자가 PC 화면에 나타납니다. 기기에서 앱을 실행하는 것처럼 MIT App Companion 앱을 시작합니다. 그런 다음, Companion에서 "Scan QR code" 버튼을 클릭하고 App Inventor 창에서 코드를 스캔하십시오 :
몇 초 내에 기기에 구축 중인 앱이 표시되어야 합니다. 디자인과 블록을 변경하면 업데이트되며, "라이브 테스트" 기능입니다.
QR 코드를 스캔하는데 문제가 있거나 장치에 스캐너가 없으면 컴퓨터에 표시된 코드를 Android 장치의 컴패니언 텍스트 영역에 표시된대로 정확하게 입력하십시오. 코드는 PC 화면에 "Your code is"가 표시되는 바로 아래에 있으며 6 자로 구성됩니다. 여섯자를 입력하고 오렌지색 "Connect with code"를 선택하십시오. Enter 또는 캐리지 리턴을 입력하지 마십시오. 단 6자를 입력하고 오렌지색 버튼을 누르십시오.
문제 해결:
앱이 기기에 표시되지 않는 경우 가능한 가장 큰 문제는 다음과 같습니다.
- App Inventor Companion App의 오래된 버전일 수 있습니다. 위의 최신 AppPanager App for App Inventor 2를 다운로드하십시오.
- 기기가 Wi-Fi에 연결되어 있지 않을 수 있습니다. 휴대 전화 또는 태블릿의 AICompanion App 화면 하단에 IP 주소가 표시되어 있는지 확인하십시오.
- 기기가 컴퓨터와 동일한 Wi-Fi 네트워크에 연결되어 있지 않을 수 있습니다. 두 장치가 동일한 Wi-Fi 네트워크 이름에 연결되어 있는지 확인하십시오.
- 학교 또는 조직에서 Wi-Fi 연결이 허용되지 않는 네트워크 프로토콜을 사용할 수 있습니다. 이 경우 에뮬레이터와 함께 App Inventor를 계속 사용하거나 USB 케이블을 사용하여 장치를 연결할 수 있습니다. 이 옵션의 기본 설정 페이지로 돌아갑니다.
※ 만약 컴패니언 앱으로 컴퓨터와 스마트폰을 연결할 수 없다면 앱인벤터 홈페이지에서 제시하는 두 번째 방법 AI2에서 에뮬레이터 설치 및 실행 (안드로이드 스마트폰이 없는 경우) 또는 세 번째 방법 USB 케이블로 휴대 전화 또는 태블릿에 연결방법을 이용할 수 있습니다. 특히 세 번째 방법은 WiFi 무선 인터넷 연결이 가능하지 않은 실습환경의 경우 유효합니다.
※ 앱인벤터 컴패니언 앱을 설치해서 통신할 수 있는 환경임에도 컴패니언 앱을 설치하고 싶지 않으면, 앱 인벤터에서 직접 제작한 앱을 build 한 후 apk 파일을 수동으로 다운로드 받아서 동작시킬 수 있습니다. 이 경우 위 내용중 1단계 참고2 내용과 동일하게 처리할 수 있습니다.
당신이 직접 제작한 앱의 apk 파일을 다운로드하면, 당신의 데스크탑 컴퓨터 사용을 중지하여도 여전히 스마트폰으로 앱으로 동작합니다. 때때로 이런 사용법은 편리할 수 있습니다.
앱인벤터 프로그램은 스크래치 블록을 사용하여 다양한 목적의 앱을 프로그래밍할 수 있습니다. 실제 많은 프로그래밍 방법들이 인터넷 또는 책으로 소개되고 있기 때문에, 여기서는 생략합니다. 실제 예제들은 앱인벤터 홈페지이를 방문하여 참고할 수도 있습니다.
다만, 여기서는 아두이노와 같은 마이컴과 앱인벤터가 서로 연결되어 동작하는 방법으로 몇 가지 예제를 소개합니다.
1) 스마트폰 앱 버튼으로 아두이노에 연결된 LED 켜고 끄기
(1) 아두이노에 스케치 업로드하기
이 작업에는 스마트 폰앱을 만드는 작업과 아두이노에 업로드할 스케치 프로그램 작업이 필요합니다. 이때, S4A 프로그램으로 아두이노에 프로그래밍하는 것은 가능하지 않습니다. 반드시 아두이노 IDE 통합 프로그램에서 텍스트 프로그래밍 방법으로 스케치를 작성해야 합니다.
아두이노 우노에 블루투스 안테나를 점퍼선으로 연결해서 통신환경을 만들 수 있습니다. 아래 소개하는 실습은 아두이노 우노 호환보드인 프라이비 화이트(FRIBEE white)에 블루투스 안테나를 소켓에 연결하고, LED 회로를 연결한 것입니다.
먼저 LED와 220옴 저항을 아두이노에 연결하십시오. LED의 양극은 아두이노 디지털핀 8번에 연결합니다. 그리고 아래 스케치를 아두이노에 업로드하십시오. 아래 사진에서처럼 블루투스 안테나를 연결하지 않은 상태에서도 스케치 프로그램을 업로드할 수 있습니다. 그렇지만, 프라이비 화이트 보드를 사용하는 경우 아래 그림을 참고해서, USB 시리얼통신 모드의 딥스위치 방향을 꼭 지켜서 업로드해야 합니다.
(참고: 아두이노로 스케치를 업로드할 때 블루투스 안테나를 제거하고 시도하는 것이 정상적인 사용법입니다.)
void setup() {
Serial.begin(115200);
pinMode(8, OUTPUT);
}
void loop() {
if (Serial.available()) {
char key = Serial.read();
if (key == '1') {
digitalWrite(8, HIGH);
delay(10);
}
if (key == '2') {
digitalWrite(8, LOW);
delay(10);
}
else
delay(1);
}
}
(2) 아두이노에 통신 안테나 연결하기
PC에서 아두이노로 스케치 프로그램 업로드가 성공했다면, 프라이비 화이트 딥스위치 방향을 외부 안테나(External Antenna) 시리얼통신 모드 방향으로 전환하고, 외부 안테나를 연결합니다. 이때 RN42-XV 블루투스 안테나를 처음 구입해서 사용하는 분이라면, 반드시 아래 참고2 과정을 먼저 실행하고, 그 다음 단계로 (1) 아두이노에 스케치 업로드하기 과정부터 다시 시작하기 바랍니다.
참고1 : 아두이노 우노(Arduino UNO R3)에 여러 종류의 핀규격 블루투스 안테나를 연결하려면, 엑스비 쉴드를 사용해서 연결하거나 또는 점퍼선으로 안테나의 Tx/Rx 핀과 아두이노 우노의 Rx/Tx 핀을 서로 연결하면 됩니다. 물론 안테나에 전원공급(Vcc 또는 Vdd)과 접지(GND)핀을 연결해야 합니다.
참고2 : 마이크로칩사의 RN42-XV Bluetooth Module PCB Antenna 제품을 사용하는 경우 안드로이드 스마트폰과의 페어링 연결시간을 공장출고 값보다 더 큰 값으로 변경해주어야 안정적인 통신연결이 가능합니다. 아래 방법을 한번만 실행하면 됩니다. RN42-XV 안테나의 내부 설정값을 변경하기 위하여 Xbee Explorer Dongle, 또는 엑스비USB 어댑터를 사용해서 쉽게 변경할 수 있지만, 추가 부품을 가지고 있지 않은 분을 위하여 프라이비 화이트만으로 안테나 설정값을 변경하는 방법을 소개합니다. 아래 단계들을 따라하세요!
단계1) 프라이비 화이트에 아래 스케치를 작성해서 프라이비에 업로드합니다. 이때 프라이비 보드의 딥스위치 방양은 USB 시리얼통신 모드입니다. 이 작업은 RN42-XV 안테나의 페어링 시간을 증가시키는 작업입니다.
void setup() {
Serial.begin(115200);
Serial.print("$$$");
delay(3000);
Serial.print("SI,0800 \r");
delay(100);
Serial.print("SJ,800 \r");
}
void loop() {
}
단계2) 업로드가 성공했다면, 프라이비 화이트에 RN42-XV 안테나를 연결하고, 딥스위치 방향을 외부 안테나(External ant.) 시리얼통신 모드로 전환합니다. USB 케이블로 프라이비 보드에 전원이 공급되는 상태에서 RESET 스위치를 눌러 프라이비 보드에 업로드된 스케치가 다시 시작하도록 합니다. 한번만 스케치가 실행하면 부착된 RN42-XV 안테나의 내부 설정값이 변경됩니다. 한번 변경 설정된 RN42-XV 안테나는 이상의 변경 작업을 다시 실행하지 않아도 변경된 값이 계속 적용되므로 반복 실행할 필요가 없습니다.
(3) 앱인벤터로 스마트폰 앱 만들기
앱인벤터로 아래 블록을 작성해서 스마트폰 버튼으로 LED 켜고 끄기를 동작시켜 보십시오. 아래 작업은 구글 크롬으로 앱인벤터 홈페이지에 연결해서 작업할 수 있습니다. 홈페이지에 연결할 준비가 되지 않았다면 이 페이지 처음부터 다시 읽어보기 바랍니다. 아래 앱인벤터의 디자이너 화면과 블록 화면을 참고하십시오.
아래 그림은 실습에 필요한 앱을 만들 수 있는 디자이너 화면입니다.
아래 그림은 실습에 필요한 앱을 만들 수 있는 블록화면입니다. 아래 두 가지 종류중 한가지를 선택해서 구성하고, 실행할 수 있습니다.
당신이 직접 만든 스마트폰 앱으로 아두이노(또는 프라이비)에 연결된 LED를 켜고 끄는 버튼을 동작시켜보십시오. 잘 동작해야 합니다. 만약 그렇지 않다면, 지금까지 작업을 천천히 다시 살펴보고 틀린 부분을 수정하기 바랍니다.
비슷한 방법으로 220V 전원이 공급되는 전등을 스마트폰으로 쉽게 켜고 끄는 IOT 실습을 따라할 수 있습니다.
본 실습은 이전 실습조건을 활용해서 쉽게 확장 응용할 수 있습니다. 아두이노에 연결된 하드웨어 구성과 스케치 업로드 조건은 동일하게 유지합니다. 단지, 스마트폰 앱 기능에 음성인식 기능을 추가하는 것으로 실습 목적을 달성할 수 있습니다.
아래와 같이 앱을 만들어보세요! 앱 제작에 있어서 이전과 비교하여 무엇이 달라지는지 살펴보는 것도 유익한 학습방법이 될 것입니다.
스마트폰 앱의 버튼을 사용하는 대신 음성인식 기능을 활용하여 LED를 쉽게 켜고 끌 수 있지 않나요! 여러분 모두에게 흥미로운 시간이기를 바랍니다. 위 실습을 “스마트폰 음성인식으로 아두이노 LED 켜고 끄기”에서 참고할 수 있습니다.
