====== Network 디바이스API 가이드 프로그램 ======
===== 개요 =====
Network 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 시 참고 및 활용될 수 있도록 구현 된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 Network 관련 기능을 JavaScript 기반으로 구성 된 Network DeviceAPI 를 통하여 조회할 수 있도록 지원한다. \\
또한, 전자정부 표준프레임워크 기반의 웹 서버 어플리케이션과 연계하여 디바이스 내 Network 정보를 체크하여 미디어를 플레이 하는 기능과 네트워크 정보를 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.
==== 특징 ====
본 가이드 프로그램 에서는 Network 기능을 가이드 할 수 있도록 **네트워크 상태를 체크하여 미디어 플레이 하기**, **네트워크 정보를 서버에 전송하기**, \\
**네트워크 정보 목록을 서버로부터 수신하기** 를 제공하고 있다. \\
==== 기능흐름도 ====
{{:egovframework:hyb:guide:add:egovframework_hyb_guideadd_vibrator_네트워크기능흐름도.png?740|}}
==== 기능시퀀스 ====
{{:egovframework:hyb:guide:add:네트워크_기능시퀀스.png|}}
==== 전제 조건 ====
^ 구분 ^ 내용 ^
|Local 디바이스 개발 환경|전자정부표준프레임워크 개발환경2.5, Android SDK Revision 18(적용빌드번호 : GINGERBREAD EL21)|
|서버 사이드 개발 환경|전자정부표준프레임워크 개발환경2.5|
|Mash up Open API 연계|N/A|
|테스트 디바이스 |갤럭시S2 |
|테스트 플랫폼 |Android 2.2|
|추가 라이브러리 적용|N/A |
==== 제약 사항 ====
^ 구분 ^ 내용 ^
|크로스 도메인 사용|폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,\\ Res/xml/config.xml에서 에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.|
===== 설명 =====
Network 디바이스API 가이드 프로그램은 크게 **네트워크 상태를 체크하여 미디어 플레이 하기**, **네트워크 정보를 서버에 전송하기**, \\
**네트워크 정보 목록을 서버로부터 수신하기** 기능으로 구성되어 있다.(관련기능 부분참조)
=== 클래스 다이어그램 ===
{{:egovframework:hyb:guide:add:egovframework_hyb_guide_add_network_클래스다이어그램.png|}}
==== Device Application ====
=== 관련소스 ===
^유형^대상소스명^비고^
|Activity|kr.go.egovframework.hyb.networkapi.NetworkAPIGuide_AndroidActivity|NetworkAPI 가이드 프로그램 Activity Class|
|CSS|assets/www/css/egovframwork/mbl/hyb/NetworkAPI.css |NetworkAPI 가이드 프로그램 주요 Cascading Style Sheets|
|IMAGE |assets/www/images/egovframwork/mbl/hyb/ |NetworkAPI 가이드 프로그램 주요 Image 폴더|
|JS |assets/www/js/egovframwork/mbl/hyb/NetworkAPI.js |NetworkAPI 가이드 프로그램 주요 JavaScript|
|RES |assets/www/res/ |NetworkAPI 가이드 프로그램 주요 Resource 폴더|
|XML |AndroidManiFest.xml |안드로이드 어플리케이션 설정 XML|
|HTML|assets/www/NetworkAPI.html|NetworkAPI 메인 페이지|
|HTML|assets/www/Intro.html|NetworkAPI Intro 페이지|
|HTML|assets/www/license.html|NetworkAPI 라이센스 페이지|
|HTML|assets/www/overview.html|NetworkAPI 기능설명 페이지|
=== 활용 API ===
== navigator.connection.type ==
* 현재 디바이스의 네트워크 상태 정보
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.connection.type];
^네트워크 코드^네트워크 상태^
|Connection.UNKNOWN|Unknown connection|
|Connection.ETHERNET|Ethernet connection|
|Connection.WIFI|WiFi connection|
|Connection.CELL_2G|Cell 2G connection|
|Connection.CELL_3G|Cell 3G connection|
|Connection.CELL_4G|Cell 4G connection|
|Connection.NONE|No network connection|
== Media ==
* 디바이스 내의 오디오 파일 재생 또는 녹음 기능을 제공하는 역할을 하는 객체이다. \\
var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);
== media.pause ==
* 오디오 파일의 재생을 멈춘다. \\
media.pause();
== media.play ==
* 미디어 파일을 재생을 한다. \\
media.play();
== media.release==
* 운영체제(OS) 혹은 메모리 내의 Media 객체에 등록된 오디오 파일을 해제한다. \\
media.release();
== mediaError ==
* Media API 에 대한 에러 코드이다.
^에러코드^설명^비고^
| MEDIA_ERR_ABORTED|사용자에 의해 중단된 비디오 재생| |
| MEDIA_ERR_NETWORK|네트워크 에러| |
| MEDIA_ERR_DECODE|디코딩 에러(코덱문제)| |
| MEDIA_ERR_SRC_NOT_SUPPORTED|지원하지 않는 형식의 오디오| |
==== Server Application ====
=== 관련 소스 ===
^유형^대상소스명^비고^
|Controller|egovframework.hyb.add.nwk.web.EgovNetworkAndroidAPIController.java|NetworkAPI 가이드 프로그램 Controller Class|
|Service|egovframework.hyb.add.nwk.service.EgovNetworkAndroidAPIService.java|NetworkAPI 가이드 프로그램 Service Class|
|ServiceImpl|egovframework.hyb.add.nwk.service.impl.EgovNetworkAndroidAPIServiceImpl.java|NetworkAPI 가이드 프로그램 ServiceImpl Class|
|VO|egovframework.hyb.add.nwk.service.NetworkAndroidAPIDefaultVO.java|NetworkAPI 가이드 프로그램 VO Class|
|VO|egovframework.hyb.add.nwk.service.NetworkAndroidAPIVO.java|NetworkAPI 가이드 프로그램 VO Class|
|VO|egovframework.hyb.add.nwk.service.NetworkAndroidAPIXmlVO.java|NetworkAPI 가이드 프로그램 XML 관련 VO Class|
|DAO|egovframework.hyb.add.nwk.service.impl.NetworkAndroidAPIDAO.java|NetworkAPI 가이드 프로그램 Dao Class|
|QUERY XML|resources/egovframework/sqlmap/hyb/add/nwk/EgovNetworkAndroidAPIGuide_XXX_mysql.xml|NetworkAPI 가이드 프로그램 QUERY XML|
=== 관련 테이블 ===
^테이블명^테이블명(영문)^비고^
|네트워크|Network|네트워크 정보 관리|
=== 테이블 정의서 ===
* NETWORK
^No^컬럼ID^컬럼명^타입^길이^NULL^
|1|SN|일련번호|NUMERIC|6|NotNull|
|2|UUID|UUID|VARCHAR|50|NotNull|
|3|NTWRK_TYPE|네트워크type|VARCHAR|20|Null|
|4|USEYN|활성화여부|CHAR|1|Null|
=== ERD ===
{{:egovframework:hyb:guide:ios:erd.jpg|}}
==== 유의 사항 ====
=== 스트리밍 ===
* 미디어 재생 시, 기존 Web에서 사용하는 스트리밍 방식을 이용하기 때문에 네트워크 상태가 Wi-fi 가 아닌 상태에서는 데이터 사용량을 유의하여야 한다.
===== 환경설정 =====
==== Device Application ====
=== res/xml/config.xml ===
=== res/values/serverinfo.xml ===
http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1
서버_URL
=== AndroidManifest.xml ===
==== Server Aplication ====
=== context-properties.xml ===
* 업로드 된 파일 저장 위치
=== resource/egovframework/sqlmap/sql-map-config_[DB명].xml ===
===== 관련기능 =====
==== 네트워크 상태를 체크하여 미디어 플레이 하기 ====
=== 비즈니스 규칙 ===
* 최초 앱 실행시 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
* 미디어 스트리밍시 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 항상 사용자 승인여부를 체크한다.
=== 관련 코드 ===
== 네트워크 상태를 체크한다 ==
var isNetworkCheck = false;
function fn_egov_network_check(doCheck)
{
console.log('DeviceAPIGuide fn_egov_network_check');
var networkState = navigator.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_mediaPlayEvent() {
fn_insertNetworkInfo();
fn_mediaPlay();
playTimer = setInterval(function(){
mediaObj.getCurrentPosition(fn_currentPositionSuccess, fn_currentPositionError);
}, 1000);
}
function fn_mediaPlay() {
mediaObj.play();
}
== 네트워크 정보를 서버로 전송 ==
function fn_insertNetworkInfo() {
var url = "/nwk/addNetworkAndroidInfo.do";
var acceptType = "xml";
var networktype = fn_getDeviceInfo();
var params = {
uuid : device.uuid,
networktype : networktype,
useYn : "Y"
};
$.mobile.showPageLoadingMsg();
egovHyb.post(url, acceptType, params, function(xmldata) {
console.log("DeviceAPIGuide fn_insertNetworkInfo request Completed");
$.mobile.hidePageLoadingMsg();
});
}
=== 관련 화면 및 수행매뉴얼 ===
^Action^URL^Controller method^QueryID^
|미디어재생|/nwk/getMp3FileAndorid.do|getMp3File| |
|네트워크 정보 저장|/nwk/addNetworkAndroidInfo.do|insertNetworkInfo|"networkAndroidAPIDAO.insertNetworkInfo"|
{{:egovframework:hyb:guide:add:egovframework_hyb_guide_add_network_미디어재생.png?320|}}\\
기능설명 : **기능설명** 화면으로 이동한다. \\
라이선스 : **라이선스** 화면으로 이동한다. \\
Media Play: 네트워크 상태를 체크하여 Wi-Fi 가 아닐 경우에는 사용자 승인에 따라 서버의 미디어를 재생하고 디바이스의 네트워크 정보를 업로드한다.
==== 네트워크 정보 목록을 서버로부터 수신하기 ====
=== 비즈니스 규칙 ===
* 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
=== 관련 코드 ===
== 네트워크 정보 목록 요청 ==
function fn_selectNetworkInfoList() {
var url = "/nwk/networkAndroidInfoList.do";
var acceptType = "xml";
var params = {};
$.mobile.showPageLoadingMsg();
egovHyb.post(url, acceptType, params, function(xmldata) {
console.log("DeviceAPIGuide fn_selectNetworkInfoList request Completed");
fn_displayList(xmldata);
});
}
== 네트워크 정보 상세 요청 ==
function fn_selectNetworkInfo(sn) {
var url = "/nwk/networkAndroidInfo.do";
var acceptType = "xml";
var params = {
sn : sn
};
$.mobile.showPageLoadingMsg();
egovHyb.post(url, acceptType, params, function(xmldata) {
console.log("DeviceAPIGuide fn_selectNetworkInfo request Completed");
fn_displayNetworkInfoDetail(xmldata);
$.mobile.changePage($("#networkInfoDetail"));
});
}
== 네트워크 정보 삭제 요청 ==
function fn_deleteNetworkInfo() {
var url = "/nwk/deleteNetworkAndroidInfo.do";
var acceptType = "xml";
var params = {
sn : currentNetworkInfoSn
};
$.mobile.showPageLoadingMsg();
egovHyb.post(url, acceptType, params, function(xmldata) {
console.log("DeviceAPIGuide fn_deleteNetworkInfo request Completed");
$.mobile.hidePageLoadingMsg();
jAlert("삭제되었습니다", "알림", "b", function(){
$.mobile.changePage($("#apiListView"), {changeHash:false});
});
});
}
=== 관련 화면 및 수행매뉴얼 ===
^Action^URL^Controller method^QueryID^
|네트워크 정보 목록 요청|/nwk/networkAndroidInfoList.do|selectNetworkInfoList|"networkAndroidAPIDAO.selectNetworkInfoList"|
|네트워크 정보 상세 요청|/nwk/networkAndroidInfo.do|selectNetworkInfo|"networkAndroidAPIDAO.selectNetworkInfo"|
|네트워크 정보 삭제 요청|/nwk/deleteNetworkAndroidInfo.do|deleteNetworkInfo|"networkAndroidAPIDAO.deleteNetworkInfo"|
{{:egovframework:hyb:guide:add:egovframework_hyb_guide_add_network_목록조회.png?320|}} {{:egovframework:hyb:guide:add:egovframework_hyb_guide_add_network_상세정보.png?320|}}\\
기능설명 : **기능설명** 화면으로 이동한다. \\
라이선스 : **라이선스** 화면으로 이동한다. \\
리스트 : 선택한 리스트의 네트워크 상세 정보를 표시한다. \\
목록 : 네트워크 정보 목록 페이지를 호출한다. \\
삭제 : 선택한 네트워크 정보를 삭제한다.
===== 컴파일 디버깅 배포 =====
==== 컴파일 ====
=== NetworkAPI Device Applicaton 컴파일 방법 ===
* 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application
{{:egovframework:hyb:guide:add:네트워크_컴파일1.png?740|}}
* 상단의 메뉴 > Run As > Android Application
{{:egovframework:hyb:guide:add:네트워크_컴파일2.png?740|}}
* 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드)
{{:egovframework:hyb:guide:add:디바이스컴파일.png?740|}}
* 에뮬레이터를 이용한 실행 화면
{{:egovframework:hyb:guide:add:네트워크_컴파일4.png?400|}} {{:egovframework:hyb:guide:add:네트워크_컴파일5.png?400|}}
* 디바이스를 이용한 실행 화면
{{:egovframework:hyb:guide:add:네트워크_컴파일6.png?400|}} {{:egovframework:hyb:guide:add:네트워크_컴파일7.png?400|}}
=== NetworkAPI Server Applicaton 컴파일 방법 ===
* NetworkAPI 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.
{{:egovframework:hyb:guide:add:서버실행.png?640|}}
* 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.
{{:egovframework:hyb:guide:add:서버실행결과_콘솔.png?840|}}
==== 디버깅 ====
디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 Phonegap 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 Xcode에서 확인 할 수 있다.
console.log의 작성 방법은 다음과 같다.
function fn_egov_network_check(doCheck)
{
console.log('DeviceAPIGuide fn_egov_network_check');
var networkState = navigator.connection.type;
...
}
디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다.
{{:egovframework:hyb:guide:add:FileReadWriteconsolelog.png?700|}}
Network 디바이스 API 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다.
^디버그 코드^디버깅 내용^
|DeviceAPIGuide fn_egov_deviceConfig Success | 디바이스의 서버 정보를 성공적으로 획득 시.|
|DeviceAPIGuide Media Config Success | Media 디바이스API를 수행할 경우, 성공적으로 동작 시.|
|DeviceAPIGuide fn_egov_currentPositionSuccess Success | 미디어 파일 재생할 경우, 현재 위치를 성공적으로 불러올 시.|
|DeviceAPIGuide fn_egov_selectNetworkInfoList request Completed | 네트워크 정보 목록 조회를 성공적으로 수행 시.|
|DeviceAPIGuide fn_egov_selectNetworkInfo request Completed | 네트워크 상세 정보 조회를 성공적으로 수행 시.|
|DeviceAPIGuide fn_egov_deleteNetworkInfo request Completed | 네트워크 정보 삭제 요청을 성공적으로 수행 시.|
|DeviceAPIGuide fn_egov_insertNetworkInfo request Completed | 네트워크 정보 저장 요청을 성공적으로 수행 시.|
|DeviceAPIGuide fn_egov_error Error | 미디어 파일 관련 수행 시, 에러가 발생할 시.|
|DeviceAPIGuide fn_egov_currentPositionError Error | 미디어 파일 재생할 경우, 현재 위치 불러오기가 실패할 시.|
==== 배포 ====
Network 디바이스 API 가이드 다운로드 : [[http://www.egovframe.go.kr/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000161&nttId=532&menu=3&submenu=9|Click]] \\
===== 참고자료 =====
* UX/UI 라이브러리 : [[http://jquerymobile.com/|jQuery Mobile]] \\
* Hybrid : [[http://www.phonegap.com/|PhoneGap]] \\