중급 예제

약간은 익숙하시거나 익숙해지셨나요? 그렇다면 조금더 깊이 다뤄볼까요?

App inventor for android

2014-11-14 17:50:40

개요

출처 : http://appinventor.mit.edu/explore/

아두이노를 사용하다 보면 안드로이드 앱을 만들어서 연동하는 경우가 많이 있습니다.
그런 경우 안드로이드 앱을 만드는 게 부담 스러우실 수 있습니다.
바로 이런 분들을 위해 MIT에서 제공하는 App inventor for android를 소개합니다.
 

출처 : www.stemulate.org


scratch라는 프로그램을 아시나요?
어린이들이 좀 더 쉽게 프로그래밍을 할 수 있도록 도와주는 tool입니다.
scratch를 보시면 프로그램을 일일히 손으로 쳐서 짜는 것이 아니라 
블럭을 가져다가 조립하는 형태로 짭니다.

App inventor for android도 이 방식을 사용합니다.
앱을 만들기 위해서 긴 코드를 짤 필요없이 블럭단위로 짧고 쉽게 앱을 만들 수 있습니다.

본문에서는 투토리얼에 있는 무드 램프를 만들어 봅시다.를 응용해서
App inventor for android으로 자신만의 앱을 손쉽게 만들어 봅시다.

 

 




 

 

미리보기 동영상

 

부품목록

NO 부품명 수량 상세설명
1 오렌지 보드 1  
2 브레드 보드 1  
3 7smd RGB LED 1  
4 블루투스 모듈 1 HC-05를 사용했습니다.
5 점퍼 케이블 8  

 

부품명 오렌지 보드 브레드 보드 7smd RGB LED 블루투스 모듈 점퍼 케이블
사진 X1 X1 x1 x1 X8

 

 

 

하드웨어 Making

회로도 

브레드 보드 레이아웃

소프트웨어 Coding

#include <SoftwareSerial.h> // 블루투스 통신을 위한 SoftwareSerial 라이브러리를 불러온다.

SoftwareSerial BTSerial(2, 3); // SoftwareSerial(RX, TX)
byte buffer[1024]; // 데이터 수신 버퍼
int bufferPosition; // 버퍼에 기록할 위치

int redLed = 10;  
int blueLed = 11;
int greenLed = 9;
// 각각의 LED와 연결된 핀번호

boolean redState = 0;
boolean blueState = 0;
boolean greenState = 0;
// 각 부품을 제어하기 위한 상태 값(이 값을 조절하는 걸로 부품을 제어한다.)

int redLight = 0;
int greenLight = 0;
int blueLight = 0;
// 각 색상의 값을 저장 한다.

String lightValue;

void setup () {
  pinMode(redLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(greenLed, OUTPUT);

  BTSerial.begin(9600);
  Serial.begin(9600);
  bufferPosition = 0;
}

void loop () {
  if (BTSerial.available()) {
    byte data = BTSerial.read();
    buffer[bufferPosition++] = data; 
    Serial.println(data);

  byte data1;
    
    while(data == 'e') {           //신나는 모드
      if (BTSerial.available()) {
        data1 = BTSerial.read();
        buffer[bufferPosition++] = data1; 
      }
      if (data1!='e') {
       break; 
      } else {
        reset();
        setLight(150, 150, 150);  
        setState(1, 1, 1);
        lightOn(); 
        delay(150);   
      }
    }
    
     if(data == 'p') {      //평화로운 모드
      reset();
      setLight(150, 50, 50);  
      setState(1, 1, 1);
      lightOn();   
      delay(150);
    }
    
     if(data == 's') {     //수면 모드
      reset();
      setLight(30, 50, 20);  
      setState(1, 1, 1);
      lightOn();   
      delay(150);
    }
    
     if(data == 'u') {     //화창한 모드
      reset();
      setLight(255, 255, 255);  
      setState(1, 1, 1);
      lightOn();   
      delay(150);
    }

    if (data == 'o') {           //on 모드
      setLight(150, 150, 150);  
      setState(1, 1, 1);
      lightOn();   
      delay(150);
    }

    if (data == 'x') {         //off 모드
      reset();
    }

    if (data == '\n') // 명령이 다 들어왔을 경우 버퍼 위치를 초기화 합니다.
    {
      bufferPosition = 0;
    }
  }
}

void lightOn() {  // 3개의 LED 밝기를 조절 하는 함수
  analogWrite(redLed, redLight);
  analogWrite(blueLed, blueLight);
  analogWrite(greenLed, greenLight);
}

void setState(boolean red, boolean blue, boolean green) { // 3개의 LED의 상태를 저장하는 함수
  redState = red;
  greenState = blue;
  blueState = green;
}

void setLight(int red, int blue, int green) { // 입력 받은 LED의 밝기를 저장 하는 함수
  redLight = red;
  blueLight = blue;
  greenLight = green;
}

//초기화 및 off 모드
void reset() {
  setState(0, 0, 0);
  setLight(0, 0, 0);   
  lightOn();   
  delay(150);
}

소프트웨어 설명

만들 조명은 총 4가지(신나는, 평화로운, 수면, 화창한)모드와 알람기능이 되는 조명입니다.
기존에 무드 램프 만들기 프로젝트를 응용하여 기능에 맞게 수정하였습니다.
기존 코드와 다른 부분만 설명하고 스케치 설명은 넘어가겠습니다.
자세한 설명히 필요하시다면 다음 링크를 통해서 참고하세요.

while(data == 'e') {           //신나는 모드
      if (BTSerial.available()) {   //블루투스 통신으로 넘어온 다른 값 확인
        data1 = BTSerial.read();
        buffer[bufferPosition++] = data1; 
      }
      if (data1!='e') {   //신나는 모드가 아니면
       break;             //신나는 모드 중단
      } else {
        reset();         //off
        setLight(150, 150, 150);  //on
        setState(1, 1, 1);
        lightOn(); 
        delay(150);   
      }
    }


신나는 느낌을 주기 위해 깜박이도록 조명을 바꾸는 부분입니다.
앱에서 신나는 버튼을 누르면 e라는 값을 블루투스로 넘겨줍니다.
아두이노에서는 e라는 값을 블루통신을 통해 받았을 경우 신나는 모드로 넘어갑니다.
while문을 통해서 on/off를 반복하다가 다른 버튼을 눌렀을 경우 
if 문에 의해 while문이 중단됩니다.

각 모드에 대한 색, 밝기를 원하는 대로 조절해서 사용하세요.

 

App inventor for android 설치하기

App inventor for android를 사용하는 방법은 3가지가 있습니다.

 

 

  • 1. 같은 와이파이 사용하기 : 컴퓨터에 별도 프로그램 설치를 원하지 않으실 경우, 
    같은 와이파이를 사용하는 컴퓨터와 폰만 있으면 웹상에서 쉽게 앱을 만드실 수 있습니다.
  • 2. 에뮬레이터 사용하기 : 폰이 없을 경우, 가상의 테스트 폰을 제공합니다.
  • 3. usb로 연결해서 사용하기 : 인터넷이 잘 되지 않을 경우, 별도의 프로그램을 설치 하신 후 usb 연결을 이용해서 사용하실 수 있습니다.

저희는 1번 방법을 이용해 보겠습니다.
나머지 방법에 대한 자세한 사항은 다음 링크를 참고 하세요.

 

 

1. 앱 설치하기

 

1-1. 폰에 앱을 하나 설치하셔야 합니다.

플레이 스토어에서 MIT AI2 Companion를 검색해서 다운로드 하세요.
아니면 다음 링크를 참고하세요.

1-2. 컴퓨터와 핸드폰에서 같은 와이파이를 연결하세요.

1-3. 다음 링크를 들어가서 create 버튼을 누르세요.
    메일 계정을 확인 하신 후에 사용하실 수 있습니다.

2. 프로젝트 생성하기

create 버튼을 누르고 계정 확인 등을 하면 다음과 같은 화면이 나옵니다.
이 화면에서 start new project를 클릭하시고 원하는 프로젝트 이름을 설정하세요.
저는 이미 mungmung이라는 프로젝트가 있어서 mungmung이라는 프로젝트가 생성된 것이 보이는 것입니다.

3. 레이아웃 만들기

이제부터 앱을 본격적으로 만들어 보겠습니다.
앱을 만들기 위해서 제일 먼저 할 일은 화면을 구성하는 것입니다.
예를 들어 몇 개의 버튼을 어디다 놓고 색은 어떻게 할 것인가 등을 생각하고 구성하는 것입니다.
 


저희가 만들어 볼 앱의 레이아웃입니다.
블루투스 연결 listPicker, on/off스위치, 네 개의 모드 버튼, 시간 설정 4개 텍스트 박스, mood 등의 글자를 나타내는 라벨, 알람 on/off 버튼이 필요합니다.
여러분이 원하는 대로 수정하셔도 됩니다. 그럼 이제부터 방법을 알아봅시다.
 
app inventor for android는 크게 디자인모드, 블럭 모드가 있습니다. 
디자인 모드에서는 버튼 같은 요소를 배치하고 디자인 합니다.
블럭 모드에서는 버튼을 클릭했을 때 발생할 이벤트와 같이 코드를 작성하는 부분입니다.
다음은 디자인 모드 화면입니다.

먼저 맨 오른쪽 위에는 두 모드를 전환하는 버튼이 있습니다.
가운데 앱 화면을 중심으로 맨 왼쪽은 구성요소들이 있고 오른쪽에는 각 구성요소들의 관계와 세부 사항을 세팅할 수 있는 창이 있습니다.
만약 버튼이 필요하다면 왼쪽에서 버튼을 드래그해서 앱화면에 넣습니다. 
그럼 자동으로 오른 쪽 화면에 버튼에 대한 내용이 나오고 여기서 간단하게 수정을 하면 됩니다.
 
그럼 한 예로 맨위에 블루투스 연결 listPicker와 on/off 이미지 버튼을 만드는 과정을 설명하겠습니다.


먼저 가로로 두 버튼을 나란히 놓기 위해서는 두 버튼이 들어갈 레이아웃을 선택해야 합니다.
왼쪽에서 layout < HorizontalArragement를 드래그 해서 앱 화면에 놓습니다.
다음 listPicker하나와 버튼 한 개를 그 안으로 드래그 해놓습니다. 
이렇게 요소를 가져와도 위에 그림처럼 나오지 않을 것입니다.
이제 각 요소에 대해 세부 상항을 설정해야 합니다.
 
위는 각 요소를 클릭했을 때 나오는 맨 오른쪽의 세부사항 창입니다.
예를 들어 on/off 버튼의 경우 이미지를 넣어주어야 하므로 image라는 속성에서
넣을 image 두장을 넣어주세요. 초기화면에는 off 이미지를 선택하고 나중에 블록에서 on이미지를 바꿔주도록 하겠습니다.
그리고 가로, 세로 사이즈를 조절하세요.
 
전체 구성요소 배치 및 관계 입니다. 
여기서 일일히 다 설명하는 것보다 이것을 참고해서 만들어 보세요.
왼쪽에서 앱 화면으로 드래그 하고 맨 오른쪽에서 속성별로 수정하는 것이 다입니다.
맨 밑에 블루투스와 시간은 connectivity < bluetoothClient와 sensors < clock입니다.
이 요소들은 세부 설정하지 않고 뒤에 블럭모드에서 사용하기 위해서 드래그만 해 놓습니다.
처음에는 복잡해 보이지만 금방 코딩하지 않고 쉽게 앱 화면을 만들 수 있다는 사실을 알게 되실 것입니다.
 

이제 블럭모드로 가서 코딩을 해보겠습니다.
블럭모드라는 이름처럼 변수, 함수 모두가 블럭으로 되어 있습니다.
만약 버튼 9번에 관환 코딩이 필요할 경우 왼쪽에서 버튼9번을 클릭하면 위와 같이 버튼 9번에 대한
블럭이 나옵니다. 여기서 상황에 맞는 블럭을 선택하셔서 드래그 하시면 됩니다.
 

다음은 블루투스 연결 listPicker에 관한 코딩 블럭입니다.
읽어서 알 수 있을 만큼 아주 명확하게 표현이 되어 있습니다.
먼저 블루투스 연결을 클릭하고 선택(picking)을 하기 전에는 등록된 블루투스 주소들을 보여줘야합니다.
그래서 when listPicker.beforePicking이라는 블럭안에 listpicker1의 요소(elements)를 
블루투스(bluetoothClient1)이 가지고 있는 등록된 다른 블루투스 이름으로 세팅하라는 블럭을 넣습니다.
연결 버튼을 누른 것을 표시하기 위해 배경색을 바꿉니다.
 
다음 선택이 되었을 때는 선택한 요소와 블루투스가 연결되도록 선택합니다.
 
다음은 전등모양의 on/off 버튼에 관한 블럭입니다.
맨 위에 주황색은 전역변수를 선언한 것입니다. 
왼쪽 블럭 창에서 variables를 선택해서 globlal 변수를 선택한후 다음과 같이 이름을 변경하고 값을 줍니다.
버튼 1(on/off)를 클릭했을 때
state라는 변수가 0이면 블루투스 통신으로 o를 보내고 켜진 모양의 전등이미지로 이미지를 바꿉니다.
그리고 state를 1로 변경합니다.
아두이노 스케치에서는 o이라는 값을 받았을 경우 켜지는 코드로 작성되어 있습니다.
 
다음은 4가지 모드에 관한 블럭입니다.
각 버튼을 누를 때만다 e,s,p,u라는 값을 보내고 누름을 표시하기 위해 배경색을 바꿔줍니다.
아두이노 스케치에서는 각 문자를 받았을 때마다 각 모드에 해당하는 불빛을 표현하도록 코딩되어 있습니다.
 

다음은 현재 시간을 표시해주는 블럭입니다. 
 

다음은 시간을 설정해서 알람을 선택하는 부분입니다. 4개의 텍스트 박스를 선택했을 때
입력한 텍스트로 내용을 바꾸고 알람버튼을 누르면 off일 경우 on이 되고 알람 clok이 시작됩니다.
 

마지막으로 알람 clock에 관한 블럭입니다.
알람 clock은 디자이너 모드에서 가져온 clock을 alarmTime으로 이름을 변경했어 사용한 것입니다.
알람 버튼을 on누르면 알람에 관한 시계가 작동되기 시작합니다.
작동하다가 입력했던 시간(각 텍스트 박스의 값을 join을 통해 결합합니다.)과 현재 시간이 같으면 
automatic_off함수를 호출합니다.
automatic_off함수에서는 off 모드와 같이 전등을 끝니다.


이제 핸드폰으로 이 앱을 사용해보도록 하겠습니다.
먼저 같은 와이파이를 사용 하실 경우 BUILD 탭에서 위에 app을 누르시면 화면에 QR코드가 찍힙니다.
맨 처음 다운 받으신 앱을 실행시키고 이 코드를 찍으시면 만든 앱이 나타납니다.

두번째 APP을 누르시면 apk파일이 다운로드 됩니다. usb로 핸드폰을 연결하신 후 apk폴더에 들어가서 
다운로드 된 파일을 넣어 줍니다. 그리고 폰에서 파일 관리자 같은 앱을 통해서 apk파일을 통해 앱을 설치 하실 수 있습니다.
 
두 가지 중 더 편한 방법을 사용해서 폰에서 앱을 실행해보셍.
차례대로 블럭을 만드시면서 따라오시면 앱으로 조절할 수 있는 무드램프를 만드실 수 있습니다.


이제 전등을 만들어 봅시다.
골판지를 사각형 모양으로 자르고 LED를 부착합니다.
다음 일정한 크기로 자른 골판지를 이어 붙여 여러개의 사각형 틀을 만듭니다.
그리고 이 사각형 틀을 엇갈려 붙이면 조명틀이 완성됩니다.
 


본문을 통해서 안드로이드의 어려움을 조금이라도 해결되시길 바랍니다.
관련해서 더 자세한 궁금증이 있으시다면 댓글 또는 포럼으로 문의해주세요.

kocoafabeditor

항상 진취적이고, 새로운 것을 추구하는 코코아팹 에디터입니다!

App inventor for android, 아두이노, 오렌지보드