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

모바일 Interface 디바이스 API 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발하시는 분들이 구현 시 전자정부 표준프레임워크 기반으로 구축된 웹서버와의 데이터 송수신을 쉽고 편하게 RESTful방식으로 구현할 수 있도록 참고 및 활용될 수 있는 가이드 앱 이다.

본 가이드 프로그램에서는 Interface 기능을 가이드 할 수 있도록 정보데이터 서버로 송신하기, 정보데이터 기기로 수신하기, 서버의 데이터 삭제 요청하기 를 제공하고 있다.

• 전자정부 웹 서버 어플리케이션에 HTTP GET Method를 요청한다.

window.plugins.EgovInterface.get(URI, acceptType, params, successCallback);

var param = {pid:'egovmobile'};
window.plugins.EgovInterface.get("/mylist.do", "xml", params, function(xmldata){
    alert(xmldata);
});

• 전자정부 웹 서버 어플리케이션에 HTTP POST Method를 요청한다.

window.plugins.EgovInterface.post(URI, acceptType, params, successCallback);

var param = {pid:'egovmobile'};
window.plugins.EgovInterface.post("/mylist.do", "xml", params, function(xmldata){
    alert(xmldata);
});

• 환경설정에서 설정한 SERVER_URL을 얻어온다.

window.plugins.EgovInterface.geturl(successCallback);

window.plugins.EgovInterface.geturl(function(url){
    alert(url);
});

• Interface(eGov)

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

    <!--전자정부 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</string>
    </resources>

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

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

Interface 디바이스API 가이드 프로그램은 크게 정보데이터 서버로 송신하기, 정보데이터 기기로 수신하기, 서버의 데이터 삭제 요청하기 기능으로 구성되어 있다.

회원 가입 정보를 서버에 전송하여 응답 결과를 확인 할 수 있다.

var url = "/itf/xml/addInterfaceInfo.do";
var acceptType = "xml";
var userid = $("#signUpId").val();
var userpw = $("#signUpPasswd").val();
var emails = $("#signUpEmail").val();	
var params = {uuid :  device.uuid,			 
			userId: userid,
			userPw: userpw,
			emails: emails};
$.mobile.showPageLoadingMsg('a');
alert('전송방식:RESTful\n전송타입:POST('+ acceptType + ')\nparam:' + JSON.stringify(params));
	
// get the data from server
window.plugins.EgovInterface.post(url, acceptType, params, function(xmldata) {
	console.log('DeviceAPIGuide fn_egov_subscribe_member request Complete');
	alert('응답방식:RESTful\n응답타입:POST('+ acceptType + ')\nparam:' + xmldata);		
	$.mobile.hidePageLoadingMsg('a');
	if($(xmldata).find("resultState").text() == "OK"){			
		window.history.back();
	}else{
		jAlert($(xmldata).find("resultMessage").text(), '오류', 'c');
	}		
});

입력 데이터는 ID, PASSWD, E-Mail을 사용한다.

관련화면 및 수행매뉴얼

회원가입 화면

정보데이터를 서버로 송신하기 위해서는 회원가입 버튼을 클릭하면 된다.
단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분 할 경우 오류 메시지가 출력된다.

회원가입 : 정보데이터를 서버로 송신하기 위해서는 ID, PASSWD, E-Mail을 입력 후 회원가입 버튼을 클릭한다.
Back 버튼 : Interface 디바이스 API 가이드 프로그램 메뉴 화면으로 이동한다.

로그인 정보를 서버에 전송하여 로그인 성공 여부를 조회 할 수 있다.

var url = "/itf/xml/logIn.do";
var acceptType = "xml";
var userid = $("#loginId").val();
var userpw = $("#loginPasswd").val();	
$.mobile.showPageLoadingMsg('a');	
var params = {uuid :  device.uuid,
			userId: userid,
			userPw: userpw};	
alert('전송방식:RESTful\n전송타입:GET('+ acceptType + ')\nparam:' + JSON.stringify(params));
	
// get the data from server
window.plugins.EgovInterface.get(url,acceptType, params, function(xmldata) {		
	console.log('DeviceAPIGuide fn_egov_login_member request Complete');
	alert('응답방식:RESTful\n응답타입:GET('+ acceptType + ')\nparam:' + xmldata);		
	$.mobile.hidePageLoadingMsg('a');
	if($(xmldata).find("resultState").text() == "OK"){
		window.history.back();
	}else{
		jAlert($(xmldata).find("resultMessage").text(), '오류', 'c');
	}
		
});

관련화면 및 수행매뉴얼

정보 조회 화면

정보데이터를 기기로 수신하기 위해서는 로그인 버튼을 클릭하면 된다.
단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분 할 경우 오류 메시지가 출력된다.

로그인 : 정보데이터를 기기로 수신하기 위해서는 ID, PASSWD를 입력 후 로그인 버튼을 클릭한다.
Back 버튼 : Interface 디바이스 API 가이드 프로그램 메뉴 화면으로 이동한다.

ID, PASSWD 정보를 서버에 전송하여 회원탈퇴 성공 여부를 조회 할 수 있다.

var url = "/itf/xml/withdrawal.do";
var acceptType = "xml";
var userid = $("#secessionMemberId").val();
var userpw = $("#secessionMemberPasswd").val();
$.mobile.showPageLoadingMsg('a');	
var params = {uuid :  device.uuid,
              userId: userid,
              userPw: userpw};
alert('전송방식:RESTful\n전송타입:POST('+ acceptType + ')\nparam:' + JSON.stringify(params));
	
// get the data from server
window.plugins.EgovInterface.post(url, acceptType, params, function(xmldata) {
    console.log('DeviceAPIGuide fn_egov_secession_member request Complete');
    alert('응답방식:RESTful\n응답타입:POST('+ acceptType + ')\nparam:' + xmldata);
    $.mobile.hidePageLoadingMsg('a');
    if($(xmldata).find("resultState").text() == "OK"){
        jAlert($(xmldata).find("resultMessage").text(), '성공', 'c', function(r){
            if(r == true){					
                window.history.back();					
            }			
        });		
    }else{
        jAlert($(xmldata).find("resultMessage").text(), '오류', 'c');
    }
});	

관련화면 및 수행매뉴얼

회원탈퇴 화면

서버의 데이터를 삭제 요청하기 위해서는 회원탈퇴 버튼을 클릭하면 된다.
단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분 할 경우 오류 메시지가 출력된다.

회원탈퇴 : 서버의 데이터를 삭제 요청하기 위해서는 ID, PASSWD를 입력 후 회원탈퇴 버튼을 클릭한다.
Back 버튼 : Interface 디바이스 API 가이드 프로그램 메뉴 화면으로 이동한다.

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

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

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

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

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

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

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

console.log의 작성 방법은 다음과 같다.

function fn_egov_subscribe_member() {
    var url = "/itf/xml/addInterfaceInfo.do";
    var acceptType = "xml";
    ...
    window.plugins.EgovInterface.post(url, acceptType, params, function(xmldata) {
        console.log("DeviceAPIGuide fn_egov_subscribe_member request Complete");
	...
    }
    ...
}

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

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

Interface 디바이스 API 가이드 다운로드 : Click 새 창 열림

• Cordova : Click 새 창 열림
  
• UX/UI 라이브러리 : jQuery MobileClick 새 창 열림
  
• Spring for Android : http://www.springsource.org/spring-android 새 창 열림