앱인벤터2 고급 강좌 4 : 웹뷰어와 웹 컴포넌트의 차이

 앱인벤터와 아두이노 보드를 이용해 블루투스 & 와이파이 푸시알림 메시지 보내기 강좌를 진행하면서 웹뷰어와 웹 컴포넌트의 차이점이 꽤 있다는 것을 알게 되었다. 이번 시간에는 앱인벤터와 아두이노 보드를 이용해 와이파이 푸시알림 메시지 보낼때 웹뷰어와 웹 컴포넌트에서 어떤 차이가 있는지 알아 보겠다.

 먼저 회로도와 아두이노 스케치 프로그램은 앱인벤터2 고급강좌 3편에서 했던 것을 그대로 사용하므로 앱인벤터 고급강좌 3편을 참조하기 바란다. 

 

 먼저 앱인벤터와 아두이노 보드를 이용해 와이파이 푸시알림 메시지를 보낼때 웹뷰어에서는 어떻게 나타나는지 살펴보자.

 앱인벤터 디자이너 에디터에 아래와 같이 화면을 구성한다. 웹뷰어 컴포넌트를 화면 하단에 배치하고 높이와 너비 속성을 부모요소에 맞추기를 선택해 화면 하단부 전체를 웹뷰어가 꽉 채우게 한다.

 

 블록 에디테에서는 웹뷰어 컴포넌트의 블록중에서 "호출 WebViewer1.URL로 이동하기" 블록을 꺼내 버튼 이벤트 블록안에 끼워넣고 실험자의 컴퓨터 IP 주소 블록과 LED On/Off 블록도 끼워 넣는다. 웹뷰어에서는 웹뷰어 자체에 웹브라우저를 호출하는 기능이 있기 때문에 웹브라우저 호출 블록은 필요없다.

 

 

 아두이노 스케치 프로그램을 아두이노에 다운로드하고 앱인벤터를 빌더한후 필자의 스마트폰에 나타나는 위 앱의 초기 화면이다. LED 한 색상의 버튼을 클릭하면 웹뷰어가 배치되었던 곳에 아두이노 스케치 프로그램에서 보내오는 문자가 표시되는 것을 알 수 있다. 

 

 

 이번에는 웹컴포넌트로 앱인벤터의 디자이너 화면을 구성하고 위의 실험을 그대로 다시 해 보자. 웹 컴포넌트는 보이지 않는 컴포넌트이기 때문에 화면 중간에 나타나지 않고 화면 하단에 표시만 된다.

 

 

 웹 컴포넌트의 블록에서 "지정하기 Web1.URL 값" 블록을 버튼 이벤트 블록안에 끼워넣고 실험자의 컴퓨터 IP 주소 블록과 LED On/Off 블록을 끼워 넣는다. 웹 컴포넌트의  "지정하기 Web1.URL 값" 블록만으로는 웹 브라우저를 호출 할 수 없기 때문에 "호출 Web1.가져오기" 블록을 끼워 넣는다.

 

반응형

 

 

 웹컴포넌트에서는 "언제 Web1. 텍스트를 받았을 때" 블록으로 응답코드를 가져 올 수 있기 때문에 광센서의 값을 받아올 수 있다. 스마트폰으로 푸시 알림 메시지를 보내기 위해 아래와 같이 코드를 구성한다.

 

 

 아두이노 스케치 프로그램을 아두이노에 다운로드하고 앱인벤터를 빌더한후 필자의 스마트폰에 나타나는 위 앱의 초기 화면이다. LED 한 색상의 버튼을 클릭하면 광센서의 값도 표시되고 푸시 알림 메시지도 같이 표시 된다.

 

 

 이번에는 웹뷰어와 웹 컴포넌트를 같이 쓰면 어떻게 되는지 알아보자. 아래와 같이 웹뷰어와 웹 컴포넌트를 모두 배치하고 푸시알림 메시지 extension까지 가져다 둔다.

 

 블록에디터에는 웹뷰어 컴포넌트 블록 중 "호출 WebViewer1. URL로 이동하기" 블록과 웹 컴포넌트의 블록 중 "지정하기 Web1.URL 값" 블록을 배치한다. 그리고 Web  컴포넌트를 호출하기 위한 "호출 Web1. 가져오기" 블록도 끼워 넣는다.

 

 아두이노 스케치 프로그램을 아두이노에 다운로드하고 앱인벤터를 빌더한후 필자의 스마트폰에 나타나는 위 앱의 초기 화면이다. 웹뷰어만 가지고 실험했을 때와 똑 같은 결과가 나타난다. 웹뷰어와 웹 컴포넌트 사이에 충돌이 있어서 그런지 LED를 켜고 끄는 것도 잘 작동이 되지 않는 경우가 많이 생기고 푸시알림 메시지도 뜨지 않는다. 어디서 문제가 생긴 것인지 잘 알 수 가 없는데 필자의 결론은 웹뷰어와 웹 컴포넌트 둘 다 같이 쓰는 것은 오류가 많이 생기기 때문에 사용 목적에 따라 하나만 쓸 것을 추천한다. 푸시 알림 메시지를 보내고 싶으면 웹 컴포넌트로, 웹뷰어 화면에 결과만을 표시하고 싶다면 웹뷰어 컴포넌트를 쓰는 식으로 구분해서 사용해야 할 것으로 생각된다.