Device Info 디바이스API 가이드 프로그램

Device Info 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 시 참고 및 활용될 수 있도록 구현된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 메타 정보를 JavaScript 기반으로 구성 된 DeviceInfoAPI 를 통하여 조회 할 수 있도록 지원한다.
또한, 전자정부 표준프레임워크 기반의 웹 서버 어플리케이션과 연계하여 디바이스 내 메타 정보를 조회하여 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.

본 가이드 프로그램 에서는 디바이스의 메타 정보 조회 기능의 활용을 가이드 할 수 있도록 디바이스 정보 조회하기, 디바이스 정보 서버에 전송하기, 디바이스 정보 목록을 서버로부터 수신하기 를 제공하고 있다.

DeviceInfo 디바이스API 가이드 프로그램은 크게 디바이스 정보 조회하기, 디바이스 정보 서버에 전송하기, 디바이스 정보 목록을 서버로부터 수신하기
기능으로 구성되어 있다.(관련기능 부분참조)

• 모바일 디바이스의 하드웨어 및 소프트웨어 관련 메타 정보를 조회한다.

	var name = device.name;
	var cordova= device.cordova;
	var platform = device.platform;
	var uuid = device.uuid;
	var version = device.version;

• 배터리 상태가 Critical 레벨에 도달 했을때 호출되는 콜백함수 정의

window.addEventListener("batterycritical", yourCallbackFunction, false);

• 배터리 상태가 Low 레벨에 도달 했을때 호출되는 콜백함수 정의

window.addEventListener("batterylow", yourCallbackFunction, false);

• 배터리 상태에 변화가 감지되면 호출되는 콜백함수 정의

window.addEventListener("batterystatus", yourCallbackFunction, false);

• 모바일 디바이스의 스토리지 용량을 리턴한다.

var StorageInfo = {
    totalFileSystemSize: function(success, fail, types) {
    	
        return Cordova.exec(success, fail, "StorageInfoPlugin", "fileSystemSize", types);
    }
}

• 모바일 디바이스의 전화번호를 리턴한다.

var DeviceNumber = {
    getDeviceNumber: function(success, fail, types) {
    	
        return Cordova.exec(success, fail, "DeviceNumberPlugin", "deviceNumber", types);
    }
}

• Device

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

    <!--전자정부 Interface 디바이스 API를 사용하기 위한 Phonegap Plugin 클래스-->
    <plugin name="EgovInterfacePlugin" value="kr.go.egovframework.hyb.plugin.EgovInterfacePlugin" />

    <!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<string name="SERVER_URL">http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1</string>
    </resources>

	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

• 업로드 된 파일 저장 위치

<entry key="fileStorePath" value="파일_저장_경로"/>

<sqlMap resource="egovframework/sqlmap/hyb/add/dvc/EgovDeviceAndroidAPIGuide_SQL_[DB명].xml"/>

DeviceInfo 디바이스API 가이드 프로그램은 크게 디바이스 내 메타 정보 조회 기능과 조회된 메타 정보를 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.

/** 디바이스 정보  VO */
var deviceInfoVO = {
    sn : "",
    uuid : "",
    os : "",
    telno : "",
    strgeInfo : "",
    ntwrkDeviceInfo : "",
    pgVer : "",
    deviceNm : "",
    useyn : ""
}

function fn_egov_load_deviceInfo() {
    deviceInfoVO.ntwrkDeviceInfo = fn_egov_get_networkInfo();

    $('.deviceInfo:eq(0)').html(device.platform + " " + device.version);
    $('.deviceInfo:eq(1)').html(device.uuid);
    $('.deviceInfo:eq(2)').html(device.cordova);    
    DeviceNumber.getDeviceNumber(fn_egov_deviceNumber_success, fn_egov_fail, []);
    $('.deviceInfo:eq(4)').html(deviceInfoVO.ntwrkDeviceInfo);
    StorageInfo.totalFileSystemSize(fn_egov_totalSpace_success, fn_egov_fail, []);
} 

function fn_egov_get_networkInfo() {
    var networkState = navigator.network.connection.type;
    
    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.NONE]     = 'No network connection';
    
    return states[networkState];
    
}

// 디바이스 전화번호 조회에 대한 성공 콜백 함수
function fn_egov_deviceNumber_success(result){
	
    console.log("DeviceAPIGuide totalFileSystemSize success");
    deviceInfoVO.telno = result;
    $('.deviceInfo:eq(3)').html(deviceInfoVO.telno);
    
    return result.telno;
} 

// 디바이스 전체 메모리 조회에 대한 성공 콜백 함수
function fn_egov_totalSpace_success(result){
	
    console.log("DeviceAPIGuide totalFileSystemSize success");
    deviceInfoVO.strgeInfo = result;
    $('.deviceInfo:eq(5)').html(deviceInfoVO.strgeInfo);
    
    return result.totalSpace;
} 

디바이스 정보조회 화면

OS: 플랫폼 정보 및 버전
UUID : 디바이스의 고유 아이디
PhoneGap Version : DeviceInfo 가이드 프로그램에 적용된 폰갭 버전
Contacts : 디바이스 전화번호
Connection Type : 디바이스의 네트워크 상태 정보
Total Memory : 디바이스의 총 메모리

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
• 디바이스 정보의 서버 전송은 InterfaceAPI를 이용한다.

function fn_egov_regist_deviceInfo() {
    
	useYn = "Y";
	
	var url = "/dvc/xml/addDeviceInfo.do"; 
	var accept_type = "json";
	
    var params = {
    	uuid :  device.uuid, 
    	os : device.platform + " " + device.version,
        telno :  String(deviceInfoVO.telno), 
        strgeInfo : deviceInfoVO.strgeInfo,
        ntwrkDeviceInfo :  deviceInfoVO.ntwrkDeviceInfo , 
        pgVer : device.cordova};
        
	// send the data
	egovHyb.post(url, accept_type, params, function(jsondata) {
		var data = JSON.parse(jsondata);
		
		if(data.useYn == "OK"){
			//fn_goDeviceInfoListXml();
		}else{
			$("#alert_dialog").click( function() {
				jAlert('데이터 전송 중 오류가 발생 했습니다.', '전송 오류', 'c');
				});
		}			
		
	});
	
	console.log("DeviceAPIGuide fn_egov_regist_deviceInfo request Completed");
    
	
}

정보 업로드: 디바이스 정보를 서버로 업로드 한다.

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.

function fn_egov_move_deviceInfoList() {
	var url = "/dvc/xml/deviceInfoList.do";
	var accept_type = "xml";
	var params = {uuid : device.uuid };
	
	// get the data from server
	window.plugins.EgovInterface.get(url,accept_type, params, function(xmldata) {
		var list_html = "";
		
		$(xmldata).find("deviceInfoList").each(function(){
			var sn = $(this).find("sn").text();
            var uuid = $(this).find("uuid").text();
            var ntwrkDeviceInfo = $(this).find("ntwrkDeviceInfo").text();
            var os = $(this).find("os").text();

			list_html += "<li><a href='javascript:fn_egov_request_deviceInfoDetail(" + sn + ")'><h3>UUID : " + uuid + "</h3>";
			list_html += "<p><strong>Network Connection Type : " + ntwrkDeviceInfo + "</strong></p>";
			list_html += "<p>OS : " + os + "</p></a></li>";
        });
		
		console.log("DeviceAPIGuide fn_egov_move_deviceInfoList request Completed");
		
		var theList = $('#theList');
		theList.html(list_html);
		$.mobile.changePage("#deviceInfoList", "slide", false, false);
		theList.listview("refresh");
		
	});	
}

//서버에 저장된 디바이스 정보의 상세 저보를 요청한다.
function fn_egov_request_deviceInfoDetail(data){
	var params = {sn : String(data)};
	    
	var url = "/dvc/xml/deviceInfo.do";
	var accept_type = "xml";
	
	// get the data from server
	window.plugins.EgovInterface.get(url,accept_type, params, function(xmldata) {
		
		deviceInfoVO.sn = $(xmldata).find("sn").text();
		deviceInfoVO.uuid = $(xmldata).find("uuid").text();
		deviceInfoVO.os = $(xmldata).find("os").text();
		deviceInfoVO.telno = $(xmldata).find("telno").text();
		deviceInfoVO.strgeInfo = $(xmldata).find("strgeInfo").text();
		deviceInfoVO.ntwrkDeviceInfo = $(xmldata).find("ntwrkDeviceInfo").text();
		deviceInfoVO.pgVer = $(xmldata).find("pgVer").text();
		deviceInfoVO.deviceNm = $(xmldata).find("deviceNm").text();
				
	    $('.deviceInfo:eq(6)').html(deviceInfoVO.os);
	    $('.deviceInfo:eq(7)').html(deviceInfoVO.uuid);
	    $('.deviceInfo:eq(8)').html(deviceInfoVO.pgVer);
	    $('.deviceInfo:eq(9)').html(deviceInfoVO.telno);
	    $('.deviceInfo:eq(10)').html(deviceInfoVO.ntwrkDeviceInfo);
	    $('.deviceInfo:eq(11)').html(deviceInfoVO.strgeInfo);
		$("#btnDelDeviceInfo").attr("href","javascript:fn_egov_confirm_delete_deviceInfo(" + deviceInfoVO.sn + ");");
				
	});

	console.log("DeviceAPIGuide fn_egov_request_deviceInfoDetail request Completed");
		
    $.mobile.changePage("#deviceInfoDetail", "slide", false, false);
}

// 서버에서 반환한 디바이스 정보 리스트를 화면에 출력한다.
function fn_egov_move_deviceInfoList() {
	var url = "/dvc/xml/deviceInfoList.do";
	var accept_type = "xml";
	var params = {uuid : device.uuid };
	
	// get the data from server
	window.plugins.EgovInterface.get(url,accept_type, params, function(xmldata) {
		var list_html = "";
		
		$(xmldata).find("deviceInfoList").each(function(){
			var sn = $(this).find("sn").text();
            var uuid = $(this).find("uuid").text();
            var ntwrkDeviceInfo = $(this).find("ntwrkDeviceInfo").text();
            var os = $(this).find("os").text();

			list_html += "<li><a href='javascript:fn_egov_request_deviceInfoDetail(" + sn + ")'><h3>UUID : " + uuid + "</h3>";
			list_html += "<p><strong>Network Connection Type : " + ntwrkDeviceInfo + "</strong></p>";
			list_html += "<p>OS : " + os + "</p></a></li>";
        });
		
		console.log("DeviceAPIGuide fn_egov_move_deviceInfoList request Completed");
		
		var theList = $('#theList');
		theList.html(list_html);
		$.mobile.changePage("#deviceInfoList", "slide", false, false);
		theList.listview("refresh");
		
	});	
}

function fn_egov_confirm_delete_deviceInfo(sn){
	jConfirm('Device 정보를 삭제 하시겠습니까??', '알림', 'c', function(r){
             if(r == true){
			 fn_egov_delete_deviceInfo(sn);
             }else{
             
             }
             
             });	
	
}

//서버에 저장된 디바이스 정보 삭제를 요청한다.
function fn_egov_delete_deviceInfo(data){
	var url = "/dvc/xml/withdrawal.do";
	var accept_type = "json";
	
	var params = {sn : String(data)};
	// send the data
	egovHyb.post(url, accept_type, params, function(jsondata) {
		var data = JSON.parse(jsondata);
		
		if(data.useYn == "OK"){
			$.mobile.changePage("#deviceInfo", { transition: "slide", reverse: true });
		}else{
			$("#alert_dialog").click( function() {
				jAlert('데이터 삭제 중 오류가 발생 했습니다.', '삭제 오류', 'c');
				});
		}
		
	});
	
	console.log("DeviceAPIGuide fn_egov_delete_deviceInfo request Completed");
	
}

디바이스 정보목록 조회 화면	디바이스 상세정보 조회 화면

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

• 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application

• 상단의 메뉴 > Run As > Android Application

• 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드)

• 에뮬레이터를 이용한 실행 화면

• 디바이스를 이용한 실행 화면

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

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

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

console.log의 작성 방법의 예시는 다음과 같다.

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

디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다.

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

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

• UX/UI 라이브러리 : jQuery MobileClick
  
• Phonegap 4.3.0 : Click