앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

먼저 디자이너 에디터의 화면을 다음과 같이 구성한다. 알림(Notifier) 컴포넌트의 사용법을 알아보기 위해 두개의 버튼을 사용한다. 첫번째 버튼은 일반적인 알림 설정에 대한 방법을 알아보기 위한 버튼이고 두번째 버튼은 앱을 종료할때 선택 대화창을 띄워 종료가 확실한지 물어보는 대화창을 띄워 볼 것이다.

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

두개의 버튼을 화면 가운데에 배치하고 위아래로 레이블을 두어서 버튼의 위치를 조정한다. 그리고 알림 컴포넌트를 화면가운데에 배치한다. 그러면 알림 컴포넌트는 보이지 않는 컴포넌트이기 때문에 Screen1 화면 아래쪽에 위치 할 것이다.

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

이제 블록 에디터에서 작업을 이어간다. 이번 블록창은 알림 표시하기 버튼을 클릭했을 때 단순히 알림 경고창을 띄우기 위한 코딩부이다. 'notifierButton'을 클릭해서 '언제 notifierButton. 클릭했을때' 버튼을 끄집어 내서 화면에 배치한다. 알림1 컴포넌트를 클릭해서 열리는 블록 중 '호출 알림1. 경고창 보이기' 블록을 '언제 notifierButton. 클릭했을때' 이벤트 블록안에 끼워 넣는다. 그리고 알림 홈에 '텍스트' 블록을 끼워넣고 경고창에 표시하고 싶은 글자를 입력한다.

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

이번 블록창은 앱 끝내기 버튼을 클릭했을 때 앱의 종료를 확인하기 위한 선택 대화창 보이기를 출력하는 코딩부이다. 앱 끝내기 버튼을 클릭하면 '호출 알림1. 선택 대화창 보이기'의 메시지와 'Yes', 'No' 선택 버튼을 출력한다.  만약 'Yes'를 클릭하면 앱 종료를 실행하고 'No'를 선택하면 아무일도 일어나지 않는다.

아두이노는 원래 유선통신인 시리얼(Serial) 통신을 사용하는데 무선통신을 하기 위해서는 시리얼통신을 무선 통신으로 바꿔주는 부품이 필요합니다.  즉, 블루투스 모듈은 시리얼통신과 블루투스 통신을 변환해주는 모듈입니다.

 

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

 

아두이노와 연결하기

 

블루투스 모듈은 4개의 핀을 아두이노와 연결하면 되는데 표와 그림으로 정리했습니다. 여기서 Tx는 Transmit으로 데이터를 송신(보내는) 곳이며, Rx는 Receive로 데이터를 수신(받는)곳 입니다.

아두이노HC-065VVCCGNDGND2Tx3Rx

 

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

 

아두이노 코딩하기

 

블루투스 통신을 하기 위해선 소프트웨어시리얼 라이브러리를 추가해야합니다. 그리고 Tx,Rx 핀을 설정해야합니다. 반드시 2,3번 핀을 사용해야하는 것은 아니라서 다른 핀으로 설정해도 됩니다.

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim
#include <SoftwareSerial.h>

SoftwareSerial mySerial(2,3);

void setup() {
 Serial.begin(9600);
 mySerial.begin(9600);
}

void loop() {
 if(mySerial.available()){
  Serial.write(mySerial.read());
 }
 
 if(Serial.available()){
  mySerial.write(Serial.read());
 }
}

 

앱인벤터 화면 구성하기

 

앱 화면 구성은 블루투스를 연결하고 연결을 해제하는 버튼과 블루투스로 보내고 싶은 값을 보내는 버튼, 블루투스로 받은 값을 볼 수 있는 레이블로 구성되어 있습니다. 그리고 화면에는 보이지 않지만 기능을 사용하기 위해서 블루투스 클라이언트와 알림, 시계가 필요합니다. 

실행 결과는 "카메라 보기" 버튼을 클릭하면 사진과 같이 실시간으로 찍히는 영상을 볼 수 있고

숨기기를 누르면 실시간으로 보이던 영상이 안 보이게 됩니다.

다음에는 센서에 감지가 되면 어플에서 푸시 알림이 뜨게 하는 건데 그러기 위해서는

어플이 백그라운드에서 돌아가야 하는데 현재 앱인벤터는 백그라운드 서비스를 정식으로 지원하지 않아서

앱인벤터2 베타 사이트에서 제작할 예정입니다.

그리고 카메라랑 아두이노와 모듈들을 고정하는 틀을 만들 겁니다.

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

 

(앱인벤터#31) 아두이노로 스마트폰에 푸시알람(push notification) 출력하기!(블루투스/MQTT)
녹칸다가 앱인벤터에서 스마트폰앱을 구현할때 푸시알람(push notification)을 발생시키는 간단한 확장파일(extionsion)을 발견했다!
사실 이것은 구독자중에 한분이 문의 해주신 내용인데 누군가 해놓은게 있을 것 같아서 검색하다가 찾게되었다!
이게 무엇이냐면 아두이노나 사물인터넷보드(wemos d1r1)에서 온도값이 일정량 이상 되어서 관리자에게 경고를 알려줘야할때 뾰족한 방법이 없었다!
MQTT클라이언트 앱을 설치하더라도 측정값을 확인만 가능할 뿐이고 내가 필요로하는 경고메시지를 출력하는데는 한계가 있었다!
아두이노에서 날라오는 센서값을 스마트폰앱에서 받은다음 특정값 이상이면 푸시알람을 발생시킬 수 있도록 해보는게 목표이다!
이렇게 만들어둔 어플리케이션은 백그라운드에서 동작하도록 해놓으면 카카오톡 메시지를 받는 것처럼 아두이노나 IoT보드로 부터 발생하는 경고메시지를 스마트폰 화면에 출력할 수 있다!

그러나 모든 버전에 대한 확인은 아직 못해본 상태라 테스트가 필요할 것 같다!
일단 안드로이드9.0버전까지는 가능한 것으로 확인됨!

아래와 같은 내용을 진행해보도록 하자!(센서는 광센서로 해보면 될 듯!)
1.아두이노에서 블루투스로 전송하는 데이터가 특정값 이상이면 알람을 발생시킨다.
2.사물인터넷보드에서 MQTT로 전송하는 데이터가 특정값 이상이면 알람을 발생시킨다.

 

(푸시알람 push notification extionsion)
https://github.com/jarlisson2/NotificationStyleAIX

 

(앱인벤터 MQTT EXTENSION)
https://ullisroboterseite.de/android-AI2-PahoMQTT-en.html

 

(아두이노&사물인터넷보드 코드)

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

334-1.txt

0.00MB

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

334-2.txt

0.00MB

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

334-3.txt

0.00MB

(334-4는 앱인벤터 프로젝트 4, 5에서 사용됨)

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

334-4.txt

0.00MB

앱인벤터 아두이노 알림 - aeb-inbenteo adu-ino allim

334-6.txt

0.00MB

 

(앱인벤터 프로젝트)

(example334_1.aia는 아두이노 1~2 코드와 함께 사용됨)

example334_1.aia

0.03MB

example334_3.aia

0.04MB

example334_4.aia

0.34MB

example334_5.aia

0.34MB

example334_6.aia

0.34MB

공유하기

게시글 관리

구독하기파워 유튜버

저작자표시 비영리 변경금지

'프로그래밍 > 앱인벤터' 카테고리의 다른 글

[아두이노#320] (앱인벤터#30) 미세먼지센서(PMS7003)를 이용한 스마트폰 앱 만들기! (녹칸다/포로리야공대가자)  (3)2021.08.03[아두이노#318] (앱인벤터#29) C#웹서버와 바코드를 이용한 코로나 방문체크앱 만들어보기! (Appinventor 특별한 시리즈/녹칸다/포로리야공대가자)  (2)2021.07.29[아두이노#317] (앱인벤터#28) 나름대로 어렵게 만들어보는 스마트팜 (Appinventor MQTT 시리즈/녹칸다/포로리야공대가자)  (0)2021.07.28[아두이노#316] (앱인벤터#27) 220V전구제어와 비접촉전류센서(SCT013-030)를 이용한 전력모니터링! (Appinventor MQTT 시리즈/녹칸다/포로리야공대가자)  (0)2021.07.27[아두이노#315] (앱인벤터#26) MQTT를 이용한 이상한 비밀금고 만들기! (Appinventor MQTT 시리즈/녹칸다/포로리야공대가자)  (0)2021.07.26