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

 앱인벤터2 고급과정으로 3가지의 시리즈를 계획중에 있다. Ⅰ.스마트폰에 기본적인 푸시 알림 메시지 보내기. Ⅱ. 블루투스, 아두이노, 앱인벤터를 이용해 아두이노로 들어오는 센서의 값이나 신호를 스마트폰에 푸시 알림 메시지로 보내기. Ⅲ. 와이파이, 아두이노, 앱인벤터를 이용해 Ⅱ의 과정 반복하기 등이다. 많은 분들이  Ⅱ 와 Ⅲ의 과정을 문의해 와서 포스팅을 하기로 했다.

 이번 시간은 앱인벤터2 고급 과정1로서 간단한 푸시 알림 메시지를 스마트폰으로 전송하는 방법을 알아 보겠다.

2, 3편도 준비되어 있으니 참고 하세요.

 

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

 

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

 

 

 

아래와 같이 디자이너 화면을 구성한다. 일반 알림 메시지와 푸시 알림 메시지를 보내는 두개의 버튼을 준비한다. 알림 컴포넌트도 하나 드래그 해서 화면 중간에 드랍한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 다음은 알림 메시지를 보낼때 소리나 진동도 같이 울리게 Player 컴포넌트도 하나 가져다 둔다. Player 컴포넌트에는 소리의 소스가 필요한데 인터넷에서 적당한 소리를 하나 다운받아서 임포트 한다.  https://soundeffect-lab.info/ 사이트에 가면 수많은 소리의 소스를 무료로 다운받을 수 있다.

 

 

 

 

 앱인벤터에서는 푸시 알림 메시지를 제공하는 컴포넌트가 없기 때문에 인터넷에서 익스텐션을 받아와야 한다. https://github.com/jarlisson2/NotificationStyleAIX에 가면 어떤 고마운 분이 깃허브에 앱인벤터에서 쓸 수 있는 푸시 알림 메시지 익스텐션을 올려 두었다. 다운 받아서 압축을 풀어 준비해 둔다. 여기서 우리에게 필요한 푸시 알림 메시지 익스텐션은 "com.jdl.NotificationStyle.aix" 파일이다.

 

 다시 앱인벤터 디자이너 화면으로 돌아와서 팔레트 블록의 제일 하단에 보면 Extension 항목이 있다. 여기서  Import extension이란 텍스트를 클릭한다. 모달창에서 파일선택 버튼을 클릭해 준비해 둔 "com.jdl.NotificationStyle.aix" 파일을 불러오고 "Import" 버튼을 클릭한다.

 

 

 

 

 그러면 Extension 항목안에 "NotificationStyle" 이란 푸시 알림 메시지 Extension이 들어와 있을 것이다. "NotificationStyle" 컴포넌트를 끌어다 화면의 가운데에 투척한다. 그리고 우측의 속성창 IconNotification에 적당한 아이콘을 하나 배치한다. 이 아이콘은 스마트폰의 상단 표시창에 푸시알림이 왔다는 표시로 쓰일 것이다.

 

 디자이너 화면의 배치가 끝났으면 블록 에디터 화면으로 간다. 먼저 Simple_Alarm 버튼을 선택해서 클릭 이벤트 블록을 Viewer 화면에 가져다 둔다.

 

 

 

 

 알림1 컴포넌트를 클릭하면 나오는 블록들 중 ShowAlert 블록을 가져가 위의 클릭 이벤터 블록에 끼운다. notice 입력부에는 좌측 Blocks에서 Text 항목 안의 빈 텍스트 블록을 가져다 끼우고 "앱인벤터 알림 메시지"라는 문자를 입력한다.

 

 다음은 플레이어(Player) 컴포넌트를 클릭해서 '플레이어.start' 블록과 '플레이어.Vibrate' 블록을 가져다 끼운다. '플레이어.Vibrate' 블록에는 진동 시간을 지정하는 수치블록을 입력할 수 있는데 좌측 Blocks 부에서 math 항목의 빈 수치 블록을 가져다 끼운다. 0.5초 정도가 적당할 테니까 500을 입력한다.

 

 

 

 

 btnSimpleNotification 버튼을 클릭하면 푸시 알림 메시지가 스마트폰에 전송되도록 코드를 짜보자. "NotificationStyle1" Extension을 클릭하면 여러개의 세부 블록들이 나오는데 단순한 푸시 알림 메시지를 보낼때 쓰는 블록은 "call NotificationStyle1. SimpleNotification" 블록이다. 이 블록에는 여러개의 세부 입력부가 있는데 title과 subtitle에 전달하고 싶은 적당한 제목과 메시지를 입력한다. bigText에는 좀 더 큰 글자를 보낼 수 있는데 꼭 필요한 것이 아니므로 false 블록을 끼우고 startValue와 id에는 문자메시지와 숫자를 끼워 넣는다. 여기도 소리와 진동을 같이 울리게 설정한다.

 

 

 앱인벤트를 빌드해서 스마트폰에 앱을 설치하면 다음과 같은 화면이 나타난다. "Simple alarm' 버튼을 클릭했더니 "앱인벤터 알림 메시지입니다."라는 알림 메시지가 소리, 진동과 함께 나타났다.

 

 "Simple push_alarm" 버튼을 클릭하면 소리, 진동과 함께 스마트폰 상단에 푸시 알림 메시지가 위에서부터 아래로 열린다. 스마트폰 상단에 위에서 지정한 아이콘이 나타나서 푸시 알림 메시지가 왔음을 표시해 준다.

 

 

 

 

위의 푸시알림  메시지는 5초 정도 후에는 사라지는데 스마트폰 상단에 손가락을 대고 아래로 제스처를 하면 위에서 나타났던 푸시 알림 메시지가 그대로 들어있는 것을 볼 수 있다. 혹시 들어 오는 푸시 알림 메시지를 놓치더라도 이렇게 스마트폰에서 다시 확인 할 수 있다.

 푸시 알림 메시지는 특별한 메시지를 보내거나 온도나 습도의 변환등 데이터를 보낼 수 있기 때문에 스마트폰으로 스마트 농장을 운영하거나 화재 경보, 데이터 수집 등등에 사용 될 수 있다. 다음 시간에는 블루투스와 아두이노를 이용해 푸시 알림 메시지에 화재 경보 문자를 보내거나 조도 센서에서 들어오는 값을 직접 스마트폰으로 전송하는 방법을 알아 보도록 하겠다.