앱인벤터와 서버의 통신

앱인텝터와 서버의 통신 프로그램

 

앱인벤터로 작성한 프로그램과 프로세싱 서버 프로그램과의 통신을 시도하는 프로그램을 작성해보자. 프로세싱 언어는

MIT에서 개발한 언어로 학생, 예술가, 또는 취미로 프로그램을 공부하는 사람도 쉽게 쓸 수 있도록 만들어져 있다.

이 언어는 자바를 기반으로 만들어진 언어중의 하나로 현재 프로세싱(https://processing.org/) 싸이트에서 다운받아

사용할 수 있다. 오픈소스이며 기존 언어보다 쉽게 이미지나 애니메이션을 렌더링하거나 통신이 가능하다.

 

 먼저 앱인벤터로 두개의 버튼을 만들고 "On"과 "Off"를 누르면 서버 화면의 색상을 바꾸는 프로그램을 제작해 보자.

프로그램을 제작하는 프로세스는 다음과 같다.

1. 앱인벤터를 실행한다.

2. "On" 버튼을 누르면 '1'을 "Off" 버튼을 누르면 '0'을 서버로 전송하는 앱을 만든다.(Wi-Fi 이용).

3. 앱을 실행하여 폰에서 보낸 문자를 받을 서버를 만든다.(서버 IP 주소 찾기)

4. 서버 프로세싱 스케치를 실행시킨다.

5. 앱에서 신호를 보내 컴퓨터 화면의 색상이 바뀌는지 관찰한다.

 

 이 프로그램을 제작하려면 내 컴퓨터의 IP 주소를 알아야 하는데 내 컴퓨터의 윈도우 실행창에서 "cmd"를 입력해

명령 프롬프트를 실행하고 "ipconfig"을 입력하면 네트워크와 관련된 여러 정보가 죽 나열된다. 그중에 "IPv4 주소"

다음에 나오는 숫자들이 내 컴퓨터의 IP주소다.예) 192.168. 100.100

 

 다음은 포트 번호가 필요하다. 이 번호는 임의로 정할 수 있으나 앱인벤터와 프로세싱 스케치 프로그램에서 동일한

번호를 사용해야 한다. 전화에서 내선번호라고 생각하면 된다. 형식은 다음과 같다. 예) 192.168. 100.100:12345

 

 

 

앱인벤터의 디자이너 에디터에 위와 같이 두개의 버튼을 만들고 Web1 요소를 화면에 드랍한다.

 

 

 

블럭에디터에는 위와 같이 두개의 버튼에 대한 실행내용을 서술하고 Web1의 Url에 내 컴퓨터의 IP주소와 포트번호를 적어준다.

다음은 processing 스케치 프로그램으로 가서 다음과 같이 서술하고 상단의 실행버튼을 누른다.

 

//processing: testjjh;WifiServer
import processing.net.*;
Server s;
Client c;

 

void setup(){
  textSize(30);                              //실행화면에 표시될 텍스트의 크기                  
    s = new Server(this, 11111);       //Server의 객체 s를 만들고 포트 번호를 11111로 설정
}                                              // this가 앱인벤터의 http://192.168.***.****:11111의 IP 주소를 받는다는 표시.

 

void draw(){
  c = s.available();                         //s객체를 c클라이언트에서 참조.
   if(c!=null){
   String msg;
    msg = c.readString();                                       //텍스트를 읽어서 msg에 대입.
    msg = msg.substring(msg.indexOf("-Len")+14);     
    if(msg.equals("1"))fill(255,0,0);                            //1이 들어오면 타원을 빨간색으로 채움.
    if(msg.equals("0"))fill(0);                                    //0이 들어오면 타원을 검은색으로 채움.
    background(127);
    ellipse(50, 70, 80, 50);                                      //타원을 설정.
    text(msg,40,24);                                             //텍스트의 위치 설정.
  }
}

 

정상적으로 프로그램이 실행되었다면 컴퓨터 화면에 아래와 같이 사각형의 실행창이 뜬다. 처음에는 아무것도 없는

빈 화면만 나온다. 다음으로 앱인벤터를 빌드시켜 앱을 실행시킨다. 앱화면에서 "On"버튼을 누르면 아래 좌측과 같이

빨간색으로 1번이란 숫자와 빨간색 타원이 생긴다. "Off" 버튼을 누르면 0번이란 숫자와 검은색 타원이 생긴다.

 

                 

   

 

이로써 앱인벤터와 프로세싱 서버와의 통신에 성공했다. 다음은 앱인벤터로 프로세싱서버를 이용해 아두이노

우노보드를 제어하는 프로그램을 제작해 보겠다.

 

 오늘은 여기까지............