폰갭으로 QRCODE 읽기

폰갭으로 QRCODE와 BARCODE 읽기

폰갭으로 어플을 개발하면 간단하지만 하드웨어 지원하는 부분에 대해서는 참고해야 되는 부분들이 있습니다.

일반적인 어플에서 QRCODE를 읽어야 되는 경우가 있습니다. 이경우 카메라 동작만 실행시켜서는 QRCODE를 제대로 해석해 주지 않습니다. 그냥 사진만 찍는 기능만합니다.

폰갭에서는 친절하게도 QRCODE와 BARCODE를 읽어서 해석해 주는 부분까지 친절하게 제공해 줍니다.

먼저 PLUGIN 을 추가 해야 되는데 여기 블로그 기준은 PHONEGAP 클라우드에서 어플을 바로 컴파일 하는 방법으로 진행하겠습니다. 

config.xml에 모든 plugin을 설정하면 됩니다.

어떻게 보면 무척 간단하지만 이 명령은 어플 내부에서만 실행합니다. 다시 이야기해서 어플을 모바일 웹으로 페이지를 보여주는 경우는 실행되지 않습니다. 

폰갭은 하드웨어 제어 부분은 대부분 어플 내부에서 실행되어야 합니다.

qrcode.html이라는 페이지를 만든후에 다음과 같은 자바 스크립트를 실행하시면 자동으로 인식하여 값을 전할하게 됩니다. 이명령은 자바스크립트입니다. 다음에 초급부터 강의하겠지만 폰갭의 모든 명령은 자바스크립트를 기반으로 하고 있어서 초보자들에게도 충분히 어플을 만들수 있는 기회를 주고 또 jquery와 css , javascript정도만 이해 하신다면 충분히 어플을 개발하실 수 있으며 그것도 네이티브 수준의 어플을 충분히 만들수 있습니다.

qrcode read 실행하기 

폰갭 실행하기 자바 스크립트입니다.

  

 cordova.plugins.barcodeScanner.scan(

      function (result) {

          alert("We got a barcode\n" +

                "Result: " + result.text + "\n" +

                "Format: " + result.format + "\n" +

                "Cancelled: " + result.cancelled);

      }, 

      function (error) {

          alert("제대로 인식하지 못했습니다. 다시 읽혀 주세요.");

      }

   );

아주 간단하게 실행되며 이렇게 실행하면 다음과 같은 화면으로 인식준비를 합니다.

저 사각형 화면에 qrcode를 넣어 주시면 자동으로 이식하여 해석해 주기 됩니다.

위 화면과 같이 값을 인식해서 보여 줍니다. 자바 스크립트에서 이 변수값을 처리 해 주시면 됩니다.

코드중에 별표 한 부분의 값이 인식한 값입니다. result.txt 는 실제 인식한 값이며, result.format은 qrcode또는 barcode등을 구분합니다. 이명령은 바코드도 같이 해석되며 코드는 안드로이드 기준으로 아래와 같습니다. 아이폰도 거의 비슷한 수준입니다.

다양하게 활용가능하고 간단하게 로또 당첨여부 같은 어플들은 몇가지 코드로 제작 가능합니다.

폰갭의 기본적인설명은 앞으로 하나씩 해 나가겠습니다. 개발중에 매일 매일 생기는 설명은 계속 등록하겠습니다.