앱인벤터2 고급 강좌 3 : 아두이노-와이파이를 이용해서 센서값 읽어 오고 푸시알림으로 보내기

반응형

 이번 시간은 앱인벤터2 고급 강좌 3번째 시간으로  앱인벤터, 아두이노 보드, 와이파이 ESP8266-01모듈, 광전자 센서를 이용해 스마트폰에 푸시 알림 메시지를 보내는 방법을 알아보도록 하겠다. 이번 강좌는 지난 시간에 했던 아두이노, 블루투스를 이용해서 광센서의 값을 읽어 오고 읽어 온 값을 스마트폰에 푸시알림으로 보냈던 것을 블루투스 대신 와이파이로 똑같이 재현해 보는 강좌이다.

 

앱인벤터2 고급 강좌 1 : 푸시 알림 메시지 보내기1

 

앱인벤터2 고급 강좌 2 : 아두이노-블루투스를 이용해서 센서의 값을 푸시 알림 메시지로 보내기2

 

 아두이노 보드와 브레드 보드에 아래와 같은 회로를 구성하고 아두이노 보드를 컴퓨터에 연결한다. 브레드 보드에는 ESP8266-01 와이파이 모듈, 광전자 센서 그리고 1kΩ의 저항을 연결한다. RGB 3색 LED를 연결해서 LED를 켜고 끄는 실험도 같이 해 보겠다.

 

 앱인벤터 디자이너 에디터에서 아래와 같이 화면을 구성한다. 상단에 Web 컴포넌트의 URL 주소를 입력하기 위한 텍스트 박스를 하나 가져다 두고 그 아래쪽에 3색 LED를 각 색상별로 제어하기 위한 버튼 4개를 배치한다. 그리고 읽어온 광전자 센서의 값을 출력하기 위한 레이블도 배치한다. Web 컴포넌트는 보이지 않는 컴포넌트 이므로 화면 중간에 가져다 두면 배치가 완료된다.

 

 푸시알림을 보내기 위해서는 Extension이 필요한데 저번 시간에 설치했던 NotificationStyle Extension을 그대로 사용한다. 여기에 대해서 잘 모르시는 분은 저번 시간에 했던 앱인벤터 고급강좌 2편을 잘 보시고 다시 시작해 주기 바란다.

 

 이제 블록 에디터에 아래와 같은 코드를 입력하자. 각 버튼들의 이벤트 블록들을 하나씩 배치하고 그 안에 Web  컴포넌트의 "set Web1.Url.to" 블록을 끼워 넣는다. Url을 입력하기 위해서 텍스트 join 블록에다 컴퓨터의 IP 주소를 입력한 주소 입력 텍스트 박스의 "주소.Text" 블록을 끄집어 내어서 끼워 넣는다. "/LEDR"은 RGB 3색 LED의 빨간색 불을 켜기 위한 명령이다. 녹색 LEDG, 파란색 LEDB, 그리고 전체 LED의 불빛을 끄기 위한 "LEDOFF" 명령까지 모두 입력한다.

 

그리고 "call Web1.Get" 블록을 끼워 넣어 "set Web1.Url to" 블록이 실행되게 한다.

 

 그리고 마지막으로 푸시알림 메시지를 보내기 위한 블록을 삽입한다. 와이파이에서 센서의 값을 보내는 과정은 조금 복잡한 과정을 거친다. 먼저 아두이노 A0 핀에서 감지한 센서의 값을 와이파이로 웹 브라우저에 보낸다. 앱인벤터에서는 브라우저에 도착한 값을 responseCode를 이용해 받아들이는 몇단계의 과정을 거쳐야 한다. 

  Web1 컴포넌트 블록에서 "When Web1.GotFile" 이벤트 블록을 드래그 해서 배치하고 그 안에 "if 블록문을 삽입한다. if 블록문에는 responseCode 라는 것을 인식하는 코드가 들어가는데 responseCode 라는 것은 웹브라우저에서 보내오는 특정 값이다. 보통 200의 값이 오면 정상적인 웹브라우저로 인식하고 그 외의 값이 오면 비정상적인 웹브라우저로 인식해 에러 경고를 발생한다. responseCode는 웹브라우저에서 설정하기 나름이므로 꼭 200이란 값이 절대적인 것은 아니다.

 

  responseCode를 설정했으면 이제 그 웹브라우저에서 보내오는 content를 받아온다. 우리는 광전자 센서에서 보내오는 센서의 값을 수신하는 것이 목표이므로 광전자 센서의 값을 responseContent로 받아 올 것이다.

 

  NotificationStyle Extension 블록에서 "Call NotificationStyle1.BigPictureNotification"을 끄집어 내서 여기에 표시하고 싶은 블록들을 끼워 넣는다.

 

 

 

 이제 아두이노 스케치 프로그램을 살펴보자. 와이파이는 인터넷 통신을 이용해야 하기 때문에 실험하고 있는 장소의 와이파이 ID 값과 패스워드를 알아서 입력해야 한다. 여기서 중요한 것은 아두이노 보드가 물려있는 컴퓨터와 실험자의 스마트폰이 동일한 와이파이의 ID와 패스워드를 사용해야 한다는 것이다.  s와 strCds의 값을 string로 두어서 광전자 센서의 값을 string으로 받을 것이다. 하단부 시리얼 모니터 부분을 보면 와이파이에 잘 접속이 되었다는 것이 표시된다.

 

 보 레이트를 115200으로 설정하고 각 핀들의 출력, 입력에 대해서 지정한다. 시리얼 모니터 부분에는 빨간색 LED가 켜졌다는 것과 Cds 센서의 값이 측정되었다.

 

 

 LEDR의 출력을 설정하는 부분이다. "Serial.println" 명령은 아두이노 시리얼 모니터에 출력하라는 명령이다. digitalWrite(ledR,HIGH) 는 아두이노 보드의 ledR 핀에 HIGH 출력을 주어 LED가 켜지게 한다.

 

 이 부분을 잘 보기 바란다. 여기가 가장 중요한 부분이다. "Serial.println" 명령은 아두이노 시리얼 모니터에 출력하라는 명령이라고 했듯이 "client.println" 명령은 웹 브라우저에 출력하라는 명령이다. "client.println("HTTP/1.1 200 OK\r\nContent-Type: text/html"); 이 부분이 웹브라우저에 reponseCode를 보내는 부분이다. 200 OK라는 것은 reponseCode가 200이라는 의미이다. 그러므로 다른 reponseCode를 보내고 싶은 사람은 이 숫자를 다른 숫자로 바꾸고 앱인벤터에서 reponseCode를 맞춰 주면 된다. "client.println(analogRead(cdsPin));"은 웹브라우저에 광전자 센서의 값을 출력하라는 명령이고 "Serial.println(analogRed(cdsPin));"은 아두이노 시리얼 모니터에 광전자 센서의 값을 출력하라는 명령이다.

 

 

 앱인벤터를 빌드시키고 난 후의 필자의 스마트폰 초기 화면이다. IP 주소를 입력하고 빨강 버튼을 클릭한다. 그러면 LED의 빨강색이 켜지고 광전자 센서의 값이 출력된다.

 

 

 

동시에 푸시알림 메시지가 도착한다. 광전자 센서의 값이 잘 들어왔다.

 

 

 

 스마트폰 상단에서 제스처를 취해 아래로 내려보면 푸시알림 메시지가 그대로 남아 있어서 메시지가 왔다는 것을 후에라도 알 수 있다.

 

 어떤 센서의 값을 측정하고 그 센서의 값을 블루투스나 와이파이를 이용해 스마트폰에 푸시 알림 메시지로 보내는 것은 산업현장이나 생활속에서 많이 적용할 수 있는 상황이다. 3편에 걸쳐서 푸시알림 메시지를 스마트폰에 출력하는 과정을 알아보았다. 자료를 찾고 실험을 직접해 보면서 어려운 점도 있었고 재미있는 부분도 있었지만 지금까지 아두이노  보드로 실험해 본 것 중 제일 보람된 실험이었다고 생각된다.