====== 디바이스 파일관리 (DeviceFileMgmt) 디바이스API 가이드 프로그램 ======
===== 개요 =====
디바이스 파일관리(DeviceFileMgmt) 가이드 프로그램은 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 시 참고 및 활용될 수 있도록 구현된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 디바이스의 File Managment관련 기능을 JavaScript기반으로 구성 된 FileMgmt DeviceAPI를 통하여 디바이스 저장소 내의 폴더(디렉토리) 및 파일 관리(이동,삭제,복사) 기능을 지원한다.
==== 특징 ====
본 가이드 프로그램의 주요 기능으로 웹 서버와 연동하여 **멀티미디어 목록 조회**, **멀티미디어 재생** 등의 기능을 제공하고 있다. \\
[참고] 본 디바이스 API는 저장소 내 디렉토리/파일 관리로 웹서버의 통신 및 연동을 하지 않는다.
==== 기능흐름도 ====
{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_flow.png?700|}}
==== 전제 조건 ====
^ 구분 ^ 내용 ^
|Local 디바이스 개발 환경| Xcode 8.0 (8A218a), Cordova 6.4.0 |
|서버 사이드 개발 환경| 전자정부표준프레임워크 개발환경3.6|
|Mash up Open API 연계| N/A|
|테스트 디바이스 | iPhone 6 , iPad Air |
|테스트 플랫폼 | iOS 9.3, iOS 10.0 |
|추가 라이브러리 적용|N/A|
==== 제약사항 ====
^ 구분 ^ 내용 ^
|지원 디바이스 및 플랫폼|N/A|
|크로스 도메인 사용|폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,\\ Res/xml/config.xml에서 에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.|
|라이선스|N/A|
===== 설명 =====
디바이스 파일관리(DeviceFileMgmt) 디바이스API 가이드 프로그램은 **저장소 디렉토리 조회**, **디렉토리 생성**, **디렉토리/파일 삭제**, **디렉토리/파일 복사**, **디렉토리/파일 이동** 등의 기능으로 구성되어 있다.(관련기능 부분참조)
==== Device Application ====
=== 관련 소스 ===
^유형^대상소스명^비고^
|CSS| assets/www/css/egovframwork/mbl/hyb/FileMgmt.css |파일관리 API 가이드 프로그램 주요 Cascading Style Sheets|
|IMAGE | assets/www/images/egovframwork/mbl/hyb/ |파일관리 API 가이드 프로그램 주요 Image 폴더|
|JS | assets/www/js/egovframwork/mbl/hyb/FileMgmt.js |파일관리 API 가이드 프로그램 주요 JavaScript|
|HTML| assets/www/FileMgmt.html|파일관리 API 메인 페이지|
|HTML| assets/www/intro.html|파일관리API Intro 페이지|
|HTML| assets/www/license.html|파일관리 API 라이센스 페이지|
|HTML| assets/www/overview.html|파일관리 API 기능설명 페이지|
|RES | [Project_Name]/Resources/ |파일관리 API 가이드 프로그램 주요 Resource 폴더|
|PLIST | [Project_Name]/Resources/[Project_Name]-Info.plist | iOS 어플리케이션 설정 파일 |
=== 활용 API ===
== LocalFileSystem ==
* 모바일 디바이스의 파일 시스템 정보를 최초 로드한다.
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onError);
^파라미터^설명^비고^
|LocalFileSystem.PERSISTENT|사용자 또는 어플리케이션에 의해 제거 될 수 없는 스토리지를 조회 할 때 사용된다.| |
|onSuccess|파일 시스템 조회에 성공했을때 호출되는 콜백 함수| |
|onError|파일 시스템 조회에 실패 했을때 호출되는 콜백 함수| |
== ResoveLocalFileSystemURL ==
* Cordova(크로스플랫폼)에서 사용되는 로컬URL을 취득한다.
window.resolveLocalFileSystemURL(url, successCallback, errorCallback);
^파라미터^설명^비고^
|url|로컬 fileEntry정보 | 예) file:///example.txt |
|onSuccess|fileEntry를 반환하는 콜백 함수| |
|onError|에러가 발생 시 호출되는 콜백 함수| |
==== Server Application ====
N/A \\
[참고] 디바이스 파일관리는 디바이스 기기내의 저장소 관리 앱으로 별도의 웹서버 연동을 하지 않는다.
===== 환경설정 =====
디바이스 파일관리(DeviceFileMgmt) 디바이스API 가이드 프로그램에서 제공하는 디렉토리/파일 관리(생성/삭제/복사/이동) 등의 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.
==== Device Application ====
=== config.xml ===
=== [Project_Name]/eGovModule/EGovComModule.h ===
#define kSERVER_URL @"Server_URL"
==== Server Application ====
N/A
===== 관련기능 =====
디바이스 파일관리(DeviceFileMgmt) API 가이드 프로그램은 크게 기기내 저장소의 디렉토리 생성, 디렉토리/파일 관리(삭제/복사/이동) 기능으로 구성되어 있다.
==== 저장소 디렉토리/파일 목록 조회 ====
=== 비즈니스 규칙 ===
* 저장소의 디렉토리 및 파일을 조회한다.
[참고] 기본 저장소는 **/var/mobile/Applications//Documents/** (documentsDirectory) 로 설정되어 있다.
=== 관련 코드 ===
== 미디어 목록 조회 및 화면표시 ==
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
function(fs){ // success get file system
console.log('DeviceAPIGuide fn_egov_localStorageInfo Success');
fileSystem = fs;
window.resolveLocalFileSystemURL(cordova.file.documentsDirectory,
function(destfs){ // success get file system
dirEntry = destfs;
rootDirEntry = destfs;
}, null);
}, null);
=== 관련 화면 ===
^파일 Explorer 화면^저장소 파일 조회 화면^
|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_menu_ios.png?280|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_list_ios.png?280|}}|
==== 저장소 디렉토리 생성하기 ====
=== 비즈니스 규칙 ===
* 저장소에 새로운 디렉토리를 생성한다.
=== 관련 코드 ===
== 디렉토리명 입력 ==
jPrompt('', 'Information', 'c', function(r){
if(r.length > 0){
$.mobile.loading("show");
fn_egov_Directory_Create(r);
}else{
alert('디렉토리명이 입력되지 않았습니다.');
}
}
== 디렉토리 생성 ==
function fn_egov_Directory_Create(tDirName){
window.resolveLocalFileSystemURL(dirEntry.nativeURL,
function createDir(cdir) {cdir.getDirectory(tDirName,
{create:true, exclusive: false},
function success(re) {
console.log(">>CreateDirectory Success!!");
$.mobile.loading("hide");
fn_egov_readDirectory();
}, failFileProcess);
}, failFileProcess);
}
=== 관련 화면 ===
^저장소 조회^새로운 디렉토리 명 입력^새로운 디렉토리 생서^
|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_create1_ios.png?280|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_create2_ios.png?280|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_create3_ios.png?280|}}|
==== 저장소 디렉토리/파일 삭제 ====
=== 비즈니스 규칙 ===
* 저장소의 선택된 디렉토리(파일)을 삭제한다.
[참고] 기본 저장소는 **/var/mobile/Applications//Documents/** (documentsDirectory) 로 설정되어 있다.
=== 관련 코드 ===
== 디렉토리(파일) 삭제 확인 화면 ==
function fn_egov_fileDir_Delete() {
console.log(">>> fn_egov_fileDir_Delete Start <<<");
chboxes = document.getElementsByName("checkboxes");
console.log("chboxes.length:"+ chboxes.length);
var vR = false;
for(var i=0; i < chboxes.length ; i++){
if(chboxes[i].checked) vR = true;
}
if(vR){
jConfirm('선택된 파일(폴더)를 삭제하시겠습니까?', '파일/폴더 삭제', 'c', function(r) {
if (r == true) {
chboxesCount = chboxes.length -1;
$.mobile.loading("show");
fn_egov_request_fileDir_Delete();
}
});
}else{
jAlert('선택된 파일(폴더)이 없습니다.','Information','c',null);
}
}
== 디렉토리(파일) 삭제 ==
function fn_egov_request_fileDir_Delete() {
if(chboxesCount > -1 && chboxes[chboxesCount].checked){
var fileName = chboxes[chboxesCount].value;
console.log(">>fileName:" + fileName);
window.resolveLocalFileSystemURL(dirEntry.nativeURL + fileName,
function onSuccess(fEntry){
if(fEntry.isDirectory){
fEntry.removeRecursively(function() {
console.log(">>Remove Directory Succeeded");
}, failFileProcess);
}else {
fEntry.remove(function() {
console.log(">>Remove File Succeeded");
}, failFileProcess);
}
chboxesCount = chboxesCount-1;
fn_egov_request_fileDir_Delete();
}, failFileProcess);
}else if (chboxesCount > -1 && !chboxes[chboxesCount].checked){
chboxesCount = chboxesCount-1;
fn_egov_request_fileDir_Delete();
}else{
$.mobile.loading("hide");
fn_egov_readDirectory();
}
}
=== 관련 화면 ===
^디렉토리 선택^디텍토리(파일) 삭제 메뉴^ 삭제 확인 화면 ^ 디렉토리 삭제 후 화면 ^
|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_delete1_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_delete2_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_delete3_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_delete4_ios.png?240|}}|
==== 저장소 디렉토리/파일 복사 ====
=== 비즈니스 규칙 ===
* 저장소의 파일을 다른 디렉토리로 복사한다.
[참고] 기본 저장소는 **/var/mobile/Applications//Documents/** (documentsDirectory) 로 설정되어 있다.
[참고] 디렉토리 복사 시 디렉토리 내 파일들 모두 복사를 한다. (복수 파일 복사 가능)
=== 관련 코드 ===
== 선택된 파일 복사 확인 및 디렉토리 경로 선택 ==
function fn_egov_fileDir_Copy() {
console.log(">>> fn_egov_fileDir_Copy Start <<<");
chboxes = document.getElementsByName("checkboxes");
console.log("chboxes.length:"+ chboxes.length);
var vR = false;
for(var i=0; i < chboxes.length ; i++){
if(chboxes[i].checked) vR = true;
}
if(vR){
chboxesCount = chboxes.length -1;
processType = _pType_Copy;
fn_egov_move_localStorage_PanelMenu();
}else{
jAlert('선택된 파일(폴더)이 없습니다.','Information','c',null);
}
}
//복사할 디렉토리 선택 화면
function fn_egov_move_localStorage_PanelMenu(){
console.log("Open PanelMenu Start");
panelDirEntry = dirEntry;
fn_egov_readDirectory_Panel();
$.mobile.activePage.find('#componentMenu').panel("open");
}
== 선택된 파일 복사 ==
function fn_egov_request_fileDir_Copy(pEntry) {
if(chboxesCount > -1 && chboxes[chboxesCount].checked){
var fileName = chboxes[chboxesCount].value;
console.log(">>fileName:" + fileName);
window.resolveLocalFileSystemURL(dirEntry.nativeURL + fileName,
function onSuccess(fEntry){
fEntry.copyTo(pEntry, fileName,
function succ(s) {
console.log('copying successful ['+chboxesCount+']' );
chboxesCount = chboxesCount-1;
fn_egov_request_fileDir_Copy(pEntry);
}, failFileProcess);
}, failFileProcess);
}else if (chboxesCount > -1 && !chboxes[chboxesCount].checked){
chboxesCount = chboxesCount-1;
fn_egov_request_fileDir_Copy(pEntry);
}else{
$.mobile.loading("hide");
$.mobile.activePage.find('#componentMenu').panel("close");
fn_egov_readDirectory();
}
}
=== 관련 화면 ===
^복사 파일 선택 화면 ^복사 메뉴 화면 ^복사할 경로 선택 ^복사 파일 화면 ^
|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_copy1_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_copy2_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_copy4_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_copy4_ios.png?240|}}|
==== 저장소 디렉토리/파일 이동 ====
=== 비즈니스 규칙 ===
* 저장소의 디렉토리 및 파일을 조회한다.
[참고] 기본 저장소는 **/var/mobile/Applications//Documents/** (documentsDirectory) 로 설정되어 있다.
=== 관련 코드 ===
== 선택된 파일 이동 확인 및 디렉토리 경로 선택 ==
function fn_egov_fileDir_Move() {
console.log(">>> fn_egov_fileDir_Move Start <<<");
chboxes = document.getElementsByName("checkboxes");
console.log("chboxes.length:"+ chboxes.length);
var vR = false;
for(var i=0; i < chboxes.length ; i++){
if(chboxes[i].checked) vR = true;
}
if(vR){
chboxesCount = chboxes.length -1;
processType = _pType_Move;
fn_egov_move_localStorage_PanelMenu();
}else{
jAlert('선택된 파일(폴더)이 없습니다.','Information','c',null);
}
}
== 선택된 파일 이동 ==
function fn_egov_request_fileDir_Move(pEntry) {
if(chboxesCount > -1 && chboxes[chboxesCount].checked){
var fileName = chboxes[chboxesCount].value;
console.log(">>fileName:" + fileName);
window.resolveLocalFileSystemURL(dirEntry.nativeURL + fileName,
function onSuccess(fEntry){
fEntry.moveTo(pEntry, fileName,
function succ(s) {
console.log('moveing successful ['+chboxesCount+']' );
chboxesCount = chboxesCount-1;
fn_egov_request_fileDir_Copy(pEntry);
}, failFileProcess);
}, failFileProcess);
}else if (chboxesCount > -1 && !chboxes[chboxesCount].checked){
chboxesCount = chboxesCount-1;
fn_egov_request_fileDir_Move(pEntry);
}else{
$.mobile.loading("hide");
$.mobile.activePage.find('#componentMenu').panel("close");
fn_egov_readDirectory();
}
}
=== 관련 화면 ===
^이동할 파일 선택 화면 ^이동 메뉴 선택 화면^ 이동 경로 선택 화면 ^이동 파일 결과 화면^
|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_move1_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_move2_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_move3_ios.png?240|}}|{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_copy4_ios.png?240|}}|
===== 컴파일 디버깅 배포 =====
==== 컴파일 ====
=== Device Applicaton 컴파일 방법 ===
* 왼쪽 상단의 삼각형 버튼을 클릭하면 가이드 프로그램이 빌드되어 아이폰 디바이스에 설치 된다.
{{:egovframework:hyb3.6:guide:mbl:ios_app_compile.png?740|}}
* 빌드가 성공하면 아래와 같은 어플리케이션 실행화면을 확인 할 수 있다.
{{:egovframework:hyb3.6:guide:mbl:filemgmt:filemgmt_run_ios.png?280|}}
=== Server Applicaton 컴파일 방법 ===
* 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.
{{:egovframework:hyb:guide:ios:서버실행.png?640|}}
* 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.
{{:egovframework:hyb:guide:add:서버실행결과_콘솔.png?840|}}
==== 디버깅 ====
디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 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 콘솔 창
{{:egovframework:hyb:guide:ios:cameradebugxcode.png?700|}}\\
==== 배포 ====
디바이스 파일관리(DeviceFileMgmt) 디바이스 API 가이드 다운로드 : [[http://www.egovframe.go.kr/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000161&nttId=1288&menu=3&submenu=9|Click]] \\
===== 참고자료 =====
* Cordova : [[https://cordova.apache.org|Click]] \\
* UX/UI 라이브러리 : jQuery Mobile[[http://jquerymobile.com/demos/1.4.5/|Click]] \\
* Cordova 플러그인 정보 : cordova-plugin-file[[https://www.npmjs.com/package/cordova-plugin-file|Click]] \\