Barcodescanner 디바이스API 가이드 프로그램

Barcodescanner API 가이드 프로그램은 Barcodescanner API 실행환경을 활용하여 하이브리드 앱을 개발하시는 분들이 디바이스 기기에서 Barcodescanner을 통하여 바코드, QR코드등 정보를 확인 할 수 있는 기능을 구현하는 데 참고 및 활용 할 수 있는 가이드 앱입니다.

본 가이드 프로그램 에서는 바코드, QR코드등의 정보 조회 기능의 활용을 가이드 할 수 있도록 QR코드 및 바코드 인식하기, 정보 서버에 전송하기, 인식결과 서버 조회 를 제공하고 있다.

Barcodescanner API 가이드 프로그램은 크게 QR코드 및 바코드 인식하기, 인식결과 조회
기능으로 구성되어 있다.(관련기능 부분참조)

• QR코드, 바코드 등의 관련 정보를 조회한다.

	scanformats = result.format;
	scanContents = result.text;
	result.cancelled;

• Barcodescanner

Barcodescanner API 가이드 프로그램에서 제공하는 모바일 Barcodescanner의 정보 조회 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

    <feature name="Battery">
        <param name="ios-package" value="CDVBattery"/>
    </feature>
    <feature name="InterfaceAPI">
        <param name="ios-package" value="EgovInterface"/>
    </feature>

    <access origin="ExternalHosts"/>

#define kSERVER_URL     @"Server_URL"

<sqlMap resource="egovframework/sqlmap/hyb/mbl/bar/EgovBarcodescannerAPIGuide_SQL_[DB명].xml"/>

BarcodescannerAPI 가이드 프로그램은 크게 Barcodescanner이용으로 QR코드 및 바코드의 정보 조회 기능과 조회된 메타 정보를 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.

/** Barcodescanner 정보  VO */
var BarcodescannerAPIVO = {
    sn : "",
    codeType : "",
    codeText : "",
    useYn : "",
    sndDt : ""
}

function fn_egov_load_BarcodescannerInfo() {

	$('.scannerInfo:eq(0)').html(scanformats);
	$('.scannerInfo:eq(1)').html(scanContents);

	$.mobile.changePage('#BarcodescannerInfo', 'slide', false, false);
}

Barcodescanner 정보조회 화면

Formats: QR코드 및 바코드 유형
Contents : QR코드 및 바코드의 텍스트 정보

• Barcodescanner 정보의 서버 전송은 InterfaceAPI를 이용한다.

function fn_egov_save_BarcodescannerInfo() {

	
	useYn = "Y";

	var url = "/bar/addBarcodescannerDeviceInfo.do";
	
	var formats = $(".scannerInfo:eq(0)").text();
	var contents = $(".scannerInfo:eq(1)").text();
	

	nowdate = new Date();
	var date_str = nowdate.getFullYear() + "-" + (nowdate.getMonth() + 1) + "-"
			+ nowdate.getDate();

	var params = {
		codeType : formats,
		codeText : contents,
		useYn : useYn,
		sndDt : date_str		
	};

	window.plugins.EgovInterface.request(url, params, function(jsondata) {
		console.log("jsondata > " + jsondata);

		if (jsondata.resultState == "OK") {
			console.log("send  ok");
		} else {
			$("#alert_dialog").click(function() {
				jAlert('데이터 전송 중 오류가 발생 했습니다.', '전송 오류', 'c');
			});
		}

	}, function(result) {
		alert("error > " + result);
	});

	console.log("BarcodescannerDevice fn_egov_save_BarcodescannerInfo request Completed");
	
	$.mobile.changePage("#main", "slide", false, false);
	detailScroll.refresh();

}

정보 업로드: Barcodescanner 정보를 서버로 업로드 한다.

function fn_egov_move_BarcodescanneList() {
    var url = "/bar/BarcodescannerInfoList.do";
    var accept_type = "json";    
    var params = {useYn : "Y" };
    
    // get the data from server
    window.plugins.EgovInterface.request(url, params, function(jsonData) {
        var list_html = "";
        
        $(jsonData["BarcodescannerInfoList"]).each(function(idx,obj){
            var sn = obj.sn;
            var codeType = obj.codeType;
            var codeText = obj.codeText;
            var sndDt = obj.sndDt;
            
            list_html += "<li><h3>CodeType : " + codeType + "</h3>";
            list_html += "<p><strong>CodeText : " + codeText + "</strong></p>";
            list_html += "<p>Date : " + sndDt + "</p></li>";
        });
        
        console.log("BarcodescanneAPIGuide fn_egov_move_BarcodescanneList request Completed");
        
        var theList = $('#BarcodeInfoList');
        theList.html(list_html);
        $.mobile.changePage("#BarcodescannerList", "slide", false, false);
        theList.listview("refresh");
        detailScroll.refresh();
        listScroll.refresh();
        
    });    
}

Barcodescanner 정보목록 조회 화면

디바이스 정보 조회 : 디바이스 정보 조회를 요청한다.
목록 : 디바이스 정보 목록 페이지를 호출한다.
삭제 : 디바이스 정보를 삭제한다.

• 왼쪽 상단의 삼각형 버튼을 클릭하면 가이드 프로그램이 빌드되어 아이폰 디바이스에 설치 된다.

• 빌드가 성공하면 아래와 같은 어플리케이션 실행화면을 확인 할 수 있다.

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.

• 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 Xcode에서 확인 할 수 있다.

• 실제 콘솔 로그 예

function fn_egov_network_check(doCheck)
{
    console.log('DeviceAPIGuide fn_egov_network_check');
    var networkState = navigator.network.connection.type;
    ...
}

• xCode 콘솔 창

Barcodescanner 디바이스 API 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다.

Barcodescanner 디바이스 API 가이드 다운로드 : Click

• Cordova 플러그인 정보 : cordova plugin add cordova-plugin-barcodescannerClick