HTML 버전 아두이노 weMos 사물 인터넷 웹서버 코드를 앱 인벤터에서 스마트 폰 웹 화면으로 출력하도록 코딩을 하자. 아두이노 웹서버라 함은 무선 공유기가 설치된 PC의 인터넷 웹 화면에서 아두이노에 request를 보내면 이에 반응하여 아두이노에서 실행 코드를 PC 상의 웹에 출력해 주는 코드이다.
웹뷰어 콤포넌트를 사용한 앱 인벤터 코딩은 매우 간단하게 1개의 버튼과 1개의 웹 뷰어로 구성된다. 웹 뷰어의 HomeUrl 박스에 weMos 보드의 가상 ip 정보를 입력해 둔다.
블록을 코딩해 보기로 하자.
웹 뷰어 자체는 스마트폰 화면과 직접 상호작용할 수 없으므로 반드시 버튼이나 음성인식 컴포넌트가 1개가 반드시 필요하다. 여기서는 버튼을 사용하였다. 즉 버튼을 누르면 url 주소 정보를 가지고 웹 뷰어를 불러내는 구조이다. 이로서 코딩이 완료되었으며 저장 후 앱 인벤터 QR 코드를 스캔하도록 한다. 아울러 아두이노 편집기에서 컴파일 업로딩 작업을 실시하고 시리얼 모니터를 켜고 가상 ip 가 출력됨을 확인하자.
아울러 weMosIOT 버튼을 누르지 않아도 스마트 폰에서 아래의 왼쪽 화면이 나타남을 확인한다. 버튼을 on OFF 하면서 weMos 보드의 LED를 관찰해 보자. on 하게 되면 온습도 데이터가 업데이트되어 출력 된다.
버튼 1개가 추가된 점을 제외하고는 그냥 HTML로 코딩할 때와 큰 차이는 없다. 하지만 화면 확대 축소 작업은 HTML 에 비해 약간의 제약이 있는듯하다.
'앱 인벤터 appinventor' 카테고리의 다른 글
| 앱 인벤터와 아두이노 HC-06 블루투스에 의한 DHT11 온습도 모니터(Arduino HC-06 Bluetooth DHT11 Temp Humidty Monitoring) (0) | 2018.01.10 |
|---|---|
| NodeMCU 웹서버 Login 웹뷰어 앱인벤터 코딩 (0) | 2017.11.23 |
| NodeMCU 미세먼지 모니터링 HTML 그래픽 출력 앱 인벤터 웹뷰어 코딩 (0) | 2017.11.22 |
| LED ON OFF & 아날로그 전압 읽기 weMos 앱 인벤터 와이파이 코딩 (0) | 2017.11.16 |
| 앱 인벤터에 의한 나침판 코딩 업데이트 (0) | 2017.11.02 |