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

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

본 가이드 프로그램 에서는 디바이스의 파일 정보 조회 기능의 활용을 가이드 할 수 있도록 모바일 기기 파일 읽기, 모바일 기기 파일 쓰기, 생성된 파일을 서버로 전송하기, 전송된 파일을 기기로 복구하기 를 제공하고 있다.

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

FileReadWrite 디바이스API 가이드 프로그램은 크게 모바일 기기 파일 읽기, 모바일 기기 파일 쓰기, 생성된 파일을 서버로 전송하기, 전송된 파일을 기기로 복구하기
기능으로 구성되어 있다.(관련기능 부분참조)

• 모바일 디바이스의 파일 시스템 정보를 최초 로드한다.

	window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onError);

• 선택된 파일을 외부 시스템에 전송하는 기능

var ft = new FileTransfer();
ft.upload(fileURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);

• 외부 시스템에 위치한 파일을 모바일 디바이스로 전송받는 기능

var ft = new FileTransfer();
ft.download(fileURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);

• FILE_READER_WRITE

• FILE_DETAIL_INFO

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

    <feature name="File">
        <param name="ios-package"  value="CDVFile"/>
    </feature>
    <feature name="FileTransfer">
        <param name="ios-package" value="CDVFileTransfer"/>
    </feature>
    <feature name="Capture">
        <param name="ios-package" value="CDVCapture"/>
    </feature>
    <feature name="InterfaceAPI">
        <param name="ios-package" value="EgovInterface"/>
    </feature>

    <access origin="ExternalHosts"/>

#define kSERVER_URL     @"Server_URL"

• 업로드 된 파일 저장 위치

<entry key="fileStorePath" value="파일_저장_경로"/>

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

FileReadWriteAPI 디바이스API 가이드 프로그램은 크게 디바이스 내 파일 정보 조회 기능과 조회된 파일 정보를 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
• iOS 플랫폼에서 조회 가능한 파일 시스템은 Document폴더 이하의 파일로 제한된다.

function fn_egov_localStorageInfo() {
    console.log("[DeviceAPI Guide] fn_egov_localStorageInfo : Success ");
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
                        function(fs){ // success get file system
                             fileSystem = fs;
                             dirEntry = fs.root;
                             rootDirEntry = fs.root;
                             fn_egov_readDirectory();
                             console.log("fn_egov_localStorageInfo : success callback");
                             //listDir(dirEntry);
                        }, function(evt){ // error get file system
                             console.log("File System Error: "+evt.target.error.code);
                        }
                    );
}

function fn_egov_readDirectory() {
    console.log("[DeviceAPI Guide] fn_egov_readDirectory : Success ");
	var directoryReader = dirEntry.createReader();
	directoryReader.readEntries(fn_egov_listDir, fn_egov_fileError);
}

function fn_egov_goDirectory(directoryEntry) {
	dirEntry = directoryEntry;
	fn_egov_readDirectory();
}

function fn_egov_chdir(dir) {
	if (dir == "../") {
		dirEntry.getParent(fn_egov_goDirectory, fn_egov_fileError);
	} else if (dir == "/") {
        console.log("fn_egov_chdir : go to root Dir");
		dirEntry = fileSystem.root;
		fn_egov_readDirectory();
	} else {
		dirEntry.getDirectory(dir, {}, fn_egov_goDirectory, fn_egov_fileError);
	}
}

모바일 파일읽기	모바일 파일 삭제

delete : 선택된 파일 삭제 닫기 : 종료

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
• 파일 쓰기를 위한 파일은 동영상 캡처 기능을 이용한다.

function fn_egov_captureVideo() {

    navigator.device.capture.captureVideo(fn_egov_captureSuccess, fn_egov_captureError, {limit: 2});
}

function fn_egov_onResolveFileSuccess(fileEntry) {
    var date = new Date().getTime();
    console.log("[DeviceAPI Guide] fn_egov_onResolveFileSuccess : " + fileEntry.name + " created");
    fileEntry.copyTo(rootDirEntry, "M" + date + ".MOV", fn_egov_onFileCopySuccess, fn_egov_fail);
}

모바일 동영상 촬영 화면

촬영 : 동영상 촬영 및 파일 저장

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
• 외부 시스템으로의 파일 전송은 FileTransfer API를 사용한다.

function fn_egov_request_uploadFile(fileName){
    $.mobile.showPageLoadingMsg();
    dirEntry.getFile(fileName, null, fn_egov_uploadFile, fn_egov_fail);

}

function fn_egov_uploadFile(fileEntry) {
    var options = new FileUploadOptions();
    options.fileKey="file";
    options.fileName=fileEntry.name;
    options.mimeType="video/quicktime";
    
    var params = {uuid :  device.uuid};
    options.params = params;
    
    console.log("fn_egov_uploadFile : " + options.params.uuid);
    var ft = new FileTransfer();
    ft.upload(fileEntry.fullPath, serverURL + "/frw/fileUpload.do?uuid=" + encodeURI(device.uuid), fn_egov_onFileUploadSuccess, fn_egov_fail, options);
}

function fn_egov_onFileUploadSuccess(r) {
    //디버그 코드
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
    

    if(r. responseCode == 200 && r.response == "%22ok%22"){
        navigator.notification.alert("파일 업로드 완료. 서버 목록을 확인해 주세요.", null, 'Info');
    }else{
        navigator.notification.alert("파일 업로드 실패", null, 'Info');
    }
    $.mobile.hidePageLoadingMsg();
    console.log("[DeviceAPI Guide] fn_egov_onFileUploadSuccess : Completed ");
}

모바일 파일목록 화면	모바일 파일전송 화면

upload : 서버로 파일 전송

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
• 외부 시스템으로의 파일 전송은 FileTransfer API를 사용한다.

function fn_egov_make_FileInfoList(data){
    var list_html = "";
    var totcnt = data.fileInfoList.length;
    fileInfoList = data.fileInfoList; 

    for (var i = 0; i < totcnt; i++) {
        result = data.fileInfoList[i];
        
        var linkVal = "javascript:fn_egov_open_down_dialogue('" + i + "');";
        
        list_html += '<li><a href="' + linkVal + '">';
        list_html += '<h3>' + result.fileNm + '</h3>';
        list_html += '<p><strong>Size : ' + result.fileSize + '</strong></p></a></li>';
        
    }
    

    var theList = $('#fileList');
    theList.html(list_html);

    $.mobile.changePage("#serverFileList", "slide", false, false);
    theList.listview("refresh");
    console.log("[DeviceAPI Guide] fn_egov_make_FileInfoList : Completed");
   
}

function fn_egov_open_down_dialogue(fileNum) {
    var btmItem = [{id : 'button1', value: "download"},
                   {id : 'button2', value: "delete"}];
    jActionSheet('', 'File Info', 'c', btmItem , function(r) {
                 if(r == "download"){
                    fn_egov_downloadFile(fileNum);
                 }else if(r == "delete"){
                    fn_egov_delete_fileInfo(fileNum);
 
                 }
                 
                 });
}

function fn_egov_downloadFile(fileNum){
    
    if(!fn_egov_network_check(true)){
        return false;
    }
    var fileTransfer = new FileTransfer();
    $.mobile.showPageLoadingMsg();
    fileTransfer.download(
                          serverURL + "/frw/fileDownload.do?uuid=" + encodeURI(device.uuid) + "&fileSn=" + encodeURI(fileInfoList[fileNum].fileSn),
                          rootDirEntry.fullPath + "/" +  fileInfoList[fileNum].fileNm,
                          function(entry) {
                            console.log("download complete: " + entry.fullPath);
                            navigator.notification.alert("다운로드가 완료 되었습니다. 파일 읽기를 통해 확인 할 수 있습니다.", null, 'Info');
                            $.mobile.hidePageLoadingMsg();

                            console.log("[DeviceAPI Guide] fn_egov_downloadFile : Completed");
                          
                          },
                          function(error) {
                            console.log("download error source " + error.source);
                            console.log("download error target " + error.target);
                            console.log("download error code" + error.code);
                            $.mobile.hidePageLoadingMsg();
                          }
                          );
}

전송된 파일목록 화면	전송된 파일복구 화면

download : 선택된 파일을 디바이스로 다운로드
delete : 선택된 파일을 서버 목록에서 삭제 닫기 : 종료

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

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

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

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

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

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