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

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

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

• 문제 : 폰갭 오류시.
• 해결방안 : setTimeout() 함수로 phonegap 로딩 순서를 지연시킨다.
  

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

• 문제 : iScroll5 컨텐츠 내용 높이 계산 오류.
• 해결방안 : setTimeout() 함수로 컨텐츠에 css 적용이 완료되고 iscroll 생성이 되도록 한다.

setTimeout(function()
           {
               myScroll = new iScroll(thisPage, 
                                      { 
                                          checkDOMChanges: true,
                                          onBeforeScrollStart:function(e)
                                          {
                                          }
                                      });
           },
           500);

• 문제 : 폰갭에 지정한 콜백 함수에서 alert() 메시지 호출시 동작 오류.
• 해결 방안 : 비동기 함수를 사용하거나 alert()처럼 스레드를 잡는 함수는 사용하지 않는다.

• 전자정부 웹 서버 어플리케이션에 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 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

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

</code>

<!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
#define kSERVER_URL     @"Server_URL"

<sqlMap resource="egovframework/sqlmap/hyb/ios/itf/EgovInterfaceiOSAPIGuide_SQL_[DB명].xml"/>

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

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

function fn_signUp() {
	
    var params = {  uuid :  device.uuid,
                    userId : $("#signUpId").val(), 
                    userPw : $("#signUpPasswd").val(),
                    emails : $("#signUpEmail").val()};	
	
    $.mobile.showPageLoadingMsg('a');
    EgovInterface.submitAsynchronous(
                                     [params, "/itf/addInterfaceiOSInfo.do"],
                                     function(result) {
                                         console.log("InterfaceAPIGuide fn_signUp Completed");
                                         var s = JSON.stringify(result);
                                         var str = '{resultState:'+result.resultState+',resultMessage:'+result.resultMessage+'}';
                                         alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str);
                                         $.mobile.hidePageLoadingMsg('a');
                                         window.history.back();
                                     },
                                     function(error) {
                                         console.log("InterfaceAPIGuide fn_signUp Failed");
                                         var str = "";
                                         for (myKey in result){
                                             str += myKey + ' : ' + result[myKey] + '\n';
                                         }
                                         alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str);
                                         $.mobile.hidePageLoadingMsg('a');
                                     }
                                     );
}

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

회원가입 화면

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

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

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

function fn_login() {
    $.mobile.showPageLoadingMsg('a');
    alert('전송방식:RESTful\n전송Type:json, get\nURL:\n' + "/itf/logIniOS.do?userId=" + $("#loginId").val() + "&userPw=" + $("#loginPasswd").val());
    EgovInterface.submitAsynchronous(
                                    ["/itf/logIniOS.do?userId=" + $("#loginId").val() + "&userPw=" + $("#loginPasswd").val()],
                                    function(result) {
                                        console.log("InterfaceAPIGuide fn_login Completed");
                                        var str = '{resultState:'+result.resultState+',resultMessage:'+result.resultMessage+'}';
                                        alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str);
                                        $.mobile.hidePageLoadingMsg('a');
                                        window.history.back();
                                    },
                                    function(error) {
                                        console.log("InterfaceAPIGuide fn_login Failed");
                                        var str = "";
                                        for (myKey in result){
                                            str += myKey + ' : ' + result[myKey] + '\n';
                                        }
                                        alert('응답방식:RESTful\n전송Type:json, post\nParam:\n' + str);
                                        $.mobile.hidePageLoadingMsg('a');
                                    }
                                    );
}

로그인 화면

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

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

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

function fn_withdrawal() {

    var params = {  userId : $("#signDownId").val(),
                    userPw : $("#signDownPasswd").val() };
    $.mobile.showPageLoadingMsg('a');
    EgovInterface.submitAsynchronous(
                                     [params, "/itf/withdrawaliOS.do"],
                                     function(result) {
                                         console.log("InterfaceAPIGuide fn_withdrawal Completed");
                                         var str = '{resultState:'+result.resultState+',resultMessage:'+result.resultMessage+'}';
                                         alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str);
                                         $.mobile.hidePageLoadingMsg('a');
                                         window.history.back();
                                     },
                                     function(error) {
                                         console.log("InterfaceAPIGuide fn_withdrawal Failed");
                                         var str = "";
                                         for (myKey in result){
                                             str += myKey + ' : ' + result[myKey] + '\n';
                                         }
                                         alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str);
                                         $.mobile.hidePageLoadingMsg('a');
                                     }
                                     );
}

회원탈퇴 화면

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

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

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

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

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 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 콘솔 창

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

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

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick
  
• ASIHTTPRequest : http://allseeing-i.com/ASIHTTPRequest
  
• Apple Developer Library : https://developer.apple.com/library/ios/navigation/