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

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

본 가이드 프로그램 에서는 Network 기능을 가이드 할 수 있도록 네트워크 상태를 체크하여 미디어 플레이 하기, 네트워크 정보를 서버에 전송하기,
네트워크 정보 목록을 서버로부터 수신하기 를 제공하고 있다.

• 문제 : 폰갭 오류시.
• 해결방안 : 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);

폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,
[Project_Name]/Supporting Files/config.xml에서 <access origin=“ExternalHosts”/> 항목에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.

N/A

Network 디바이스API 가이드 프로그램은 크게 네트워크 상태를 체크하여 미디어 플레이하기, 네트워크 정보를 서버에 전송하기,
네트워크 정보 목록을 서버로부터 수신하기 기능으로 구성되어 있다.(관련기능 부분참조)

• 현재 디바이스의 네트워크 상태 정보

var states = {};
states[Connection.UNKNOWN]  = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI]     = 'WiFi connection';
states[Connection.CELL_2G]  = 'Cell 3G connection';
states[Connection.CELL_3G]  = 'Cell 3G connection';
states[Connection.CELL_4G]  = 'Cell 4G connection';
states[Connection.NONE]     = 'No network connection';

var NowNetwork = states[navigator.network.connection.type];

• 오디오 파일을 재생 시작 또는 다시 시작합니다.

function playAudio(file) {
    var my_media = new Media(file,
        function() {
            console.log("playAudio():Audio Success");
        },
        function(err) {
            console.log("playAudio():Audio Error: "+err);
    });
    my_media.play();
}

• 이 함수는 오디오 파일을 재생 중지 하는 기능입니다.

function playAudio(file) {
    var my_media = new Media(file,
        function() {
            console.log("playAudio():Audio Success");
        },
        function(err) {
            console.log("playAudio():Audio Error: "+err);
    });
    my_media.play();
    setTimeout(function() {
        my_media.stop();
    }, 10000);        
}

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

    <access origin="ExternalHosts"/>

    <feature name="NetworkStatus">
        <param name="ios-package" value="CDVConnection"/>
    </feature>

<entry key="serverContext" value="서버의 경로"/>

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

Network 디바이스API 가이드 프로그램은 크게 네트워크 상태를 체크하여 미디어 플레이 하기, 네트워크 정보를 서버에 전송하기,
네트워크 정보 목록을 서버로부터 수신하기 기능으로 구성되어 있다.

var  isNetworkCheck = false;
function fn_egov_network_check(doCheck)
{
    console.log('DeviceAPIGuide fn_egov_network_check');
    var networkState = navigator.network.connection.type;
    
    if (networkState == Connection.UNKNOWN || networkState == Connection.NONE)
    {
        jAlert("네트워크가 연결되어 있지 않습니다.", "알림", "b");
        return false;
    }
    if(networkState != Connection.WIFI)
    {
        if(!doCheck) 
        {
            if(isNetworkCheck)
            {
                return true;
            }
        }
		
	if(confirm('Wi Fi 망이 아닐경우 추가적인 비용이 발생 할 수 있습니다. \n계속 하시겠습니까?')) 
        {		
	    isNetworkCheck = true;
            return true;
        } 
        else 
        {		
            isNetworkCheck = false;
            return false;
        }		
    }
    else
    {		
        return true;
    }
}

function fn_egov_click_mediaBtn()
{
    if(context === null)
    {
        fn_egov_init_context();
        return;
    }
    
    if(audioCheck)      // 이미 재생중이라면 음악만 정지
    {
        fn_egov_stop_audio();
        audioCheck = false;
    }
    else
    {
        // 오디오, 동영상 스트리밍의 경우 매번 네트워크 체크를 하여 사용자 승인 물어보기
        if(fn_egov_network_check(true))
        {
            $.mobile.showPageLoadingMsg('a');
            // 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
            setTimeout(function()
                       {
                           fn_egov_play_audio();
                       
                           var params = {
                               uuid :  device.uuid,
                               networktype : states[navigator.network.connection.type],
                               useYn : "Y"
                           };
                       
                           fn_egov_sendto_server("/nwk/addNetworkiOSInfo.do",params);
                       }, 
                       500);
        }
    }
}

var params = {
    uuid :  device.uuid,
    networktype : states[navigator.network.connection.type],
    useYn : "Y"
};

fn_egov_sendto_server("/nwk/addNetworkiOSInfo.do",params);

네트워크 재생 화면

Media Play: 네트워크 상태를 체크하여 Wi-Fi 가 아닐 경우에는 사용자 승인에 따라 서버의 미디어를 재생하고 디바이스의 네트워크 정보를 업로드한다.

function fn_egov_open_networkList()
{
    if(context === null)    // 최초 앱 실행시 3G 사용자 승인 여부 판단
    {
        fn_egov_init_context();
        return;
    }
    
    if(fn_egov_network_check(false))     // 통신 이벤트 발생시 3G 사용자 승인여부 판단
    {
        var params = {};
        
        $.mobile.showPageLoadingMsg('a');
        // 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/nwk/networkiOSInfoList.do",params);
                   }, 
                   500);
    }        
}

function fn_egov_open_networkDetailInfo(selectedId)
{   
    if(fn_egov_network_check(false))        // 통신 이벤트 발생시 3G 사용자 승인여부 판단
    {
        var params = { sn : selectedId };
        
        $.mobile.showPageLoadingMsg('a');
        // 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/nwk/networkiOSInfo.do",params);
                   }, 
                   500);
    }
}

function fn_egov_click_deleteBtn()
{
    if(fn_egov_network_check(false))        // 통신 이벤트 발생시 3G 사용자 승인여부 판단
    {
        var params = {
            sn : pageNumber
        };
        
        $.mobile.showPageLoadingMsg('a');
        // 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/nwk/deleteNetworkiOSInfo.do",params);
                   }, 
                   500);
    }
}

네트워크 목록 화면	네트워크 상세 화면

뒤로:메인 페이지를 호출한다.
리스트:선택한 리스트의 네트워크 상세 정보를 표시한다.
목록:네트워크 정보 목록 페이지를 호출한다.
삭제:선택한 네트워크 정보를 삭제한다.

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

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

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

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

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