마트에 가면 많은 물품들을 바코드화 하여 진열하게 된다. 소비자가 구매하여 장바구니에 담았다가 게산대에서 게산을 하게 되면 바코드를 체크하게 되며 이 때에 서버와 연동된 계산대 모니터에 가격 정보가 뜨게 된다.
이미 앱인벤터에는 카메라와 연동되어 있는 바코드 스캐너가 팔레트의 센서에 센서로 등록되어 있다. 이 바코드 스캐너를 사용하여 스캔이 되면 숫자 정보나 문자 정도 둘 중의 하나가 뜨게 되어 있다. 특히 해당 제품에 부여된 바코드의 숫자 정보가 인식되면 연동되어 있는 웹서버로부터 정보를 받아 앱인베터의 웹 뷰어에서 디스플레이 하도록 하자. 이 방법이 가장 간단한 웹서버와의 연동이다. 그렇치 않을 경우에는 가상 ip 주소를 대상으로 직접 와이파이에 연결하고 웹서버 코드를 통해 정보를 받아야 하므로 코드 작업이 다소 복잡해진다.
여기서는 웹뷰어 방식으로 스마트폰에서 인터넷 주소를 쉽게 찾아가듯이 url 주소를 찾아 정보를 모니터 해 보도록 하자.
팔레트에서 필요한 요소들을 가져다 오른 쪽과 같이 Tree를 구성하고 Rename을 사용 명칭을 변경한다. 각 요소별로 필요하다면 텍스트 내용, 폰트 사이즈, 굵기, 배경섹을 비롯한 속성들을 설정하자.
디자이너 작업이 완료되었으면 일단 한번 Project를 저장한 후 Blocks 로 넘어가 퍼즐 코딩을 하도록 하자.
첫 번째 이벤트 코딩으로서 스마트폰 화면에서 ScanBtn을 누르면 자동적으로 카메라를 사용하여 타겟 바코드를 대상으로 스캔작업이 이루어진다. 따라서 barcode Scanner1을 불러 스캔을 실행(DoScan)한다.
삑 소리와 함께 스캔이 이루어졌으면(After Scan) 얻어진 결과 변수를 택스트화하여 라벨 BarCodeResult 에 입력하여 출력하자.
그런ㄷ 만약 스캔결과 얻어진 결과(get result)가 숫자(number) 라면 웹뷰어를 불러 주어진 url 주소로 이동하여 웹 정보를 불러 오도록 한다. 여기서는 필자의 블로그 url 주소를 사용하였다.
한편 만약에 얻어진 텍스트 결과(get result)에서 첫 번째부터 일곱 번째 까지의 글자가 “http://”이면 get result 자체가 url 주소이므로 그 주소로 이동하자.
이 코드에서 후자의 경우도 url 로 이동하게 되어 있는데 앞부분에서 바코드 스캔에서 숫자가 얻어질 경우와 주소를 달리하여 또 다른 정보를 모니터링 하도록 코드를 작성해야 할 것이다.
웹뷰어를 사용하면 직접 url 주소 사용이 가능하며 스마트폰의 인터넷 기능을 직접 사용할 수 있다.
하지만 예를 들어 마트에서 바코드를 스캔하여 해당 물건의 가격을 포함한 정보를 알아보고자 마트 서버에 연결하려면 스마트폰이 클라이언트로서 서버로 request 를 보낸 후 서버 측에서 준비된 웹서버 코드로부터 가상 ip 값을 사용하는 와이파이 채널을 통해 서버로부터 가격 정보를 스마트폰에서 수신 입수해야 한다. 이미 아두이노 WeMos 보드에 설치한 온습도 센서로부터 데이터를 요구해서 받아내는 앱인벤터 코드를 예전에 올린 적이 있으니 참조해 보고 어떻게 융합할 것인지 코딩에 도전 해보자.