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

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

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

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);

• FileReader/Write

• 파일상세정보

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

<plugins>
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <!--전자정부 Interface 디바이스 API를 사용하기 위한 Phonegap Plugin 클래스-->
    <plugin name="EgovInterfacePlugin" value="kr.go.egovframework.hyb.plugin.EgovInterfacePlugin" />
</plugins>

<cordova>
    <!--FileTransfer 메소드를 사용하여 파일 다운로드를 위한 설정(허용하는 IP 또는 도메인)-->    
    <access origin=".*"/>
</cordova>

    <!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<string name="SERVER_URL">http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1</string>
    </resources>

• 업로드 된 파일 저장 위치

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

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

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

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

function fn_egov_localStorageInfo() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
                        function(fs){ // success get file system
                             console.log('DeviceAPIGuide fn_egov_localStorageInfo Success');
                             fileSystem = fs;
                             dirEntry = fs.root;
                             rootDirEntry = fs.root;
                             fn_egov_readDirectory();
                        }, function(evt){ // error get file system
                             console.log('DeviceAPIGuide fn_egov_localStorageInfo Fail');
                        }
                    );
}

function fn_egov_readDirectory() {
    var directoryReader = dirEntry.createReader();
    directoryReader.readEntries(fn_egov_listDir, fn_egov_fileError);
}

function fn_egov_goDirectory(directoryEntry) {
    console.log('DeviceAPIGuide fn_egov_readDirectory Success');
    dirEntry = directoryEntry;
    fn_egov_readDirectory();
}

function fn_egov_chdir(dir) {
    if (dir == "../") {
        dirEntry.getParent(fn_egov_goDirectory, fn_egov_fileError);
    } else if (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) {
    console.log('DeviceAPIGuide fn_egov_onResolveFileSuccess Success');
    var date = new Date().getTime();
    fileEntry.copyTo(rootDirEntry, "M" + date + ".MOV", fn_egov_onFileCopySuccess, fn_egov_fail);
}

동영상 촬영 화면

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

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

function fn_egov_request_uploadFile(fileName){
    if(!fn_egov_network_check(true)) {
        return;
    }

    $.mobile.showPageLoadingMsg();
    dirEntry.getFile(fileName, null, fn_egov_uploadFile, fn_egov_fail);
}

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

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

파일 목록 화면	파일 업로드 화면

upload : 서버로 파일 전송
닫기 : 팝업 창 닫기

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

function fn_egov_make_FileInfoList(data){
    console.log('DeviceAPIGuide fn_egov_make_FileInfoList Success');
    var list_html = "";
    var nLoop = 0;
    $(xmldata).find("fileInfoList").each(function(){
        var fileSn = $(this).find("fileSn").text();
        var fileNm = $(this).find("fileNm").text();
        var fileSize = $(this).find("fileSize").text();
        var linkVal = "javascript:fn_egov_open_down_dialogue('" + fileSn + "','" + fileNm + "');";
        nLoop++;
        list_html += '<li><a href="' + linkVal + '">';
        list_html += '<h3>' + fileNm + '</h3>';
        list_html += '<p><strong>Size : ' + fileSize + '</strong></p></a></li>';
    });

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

    $.mobile.changePage("#serverFileList", "slide", false, false);
    theList.listview("refresh");    
}

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){
    //3G 사용시 과금이 발생 할 수 있다는 경고 메시지 표시
    if(!fn_egov_network_check(true)) {
        return;
    }
    
    $.mobile.showPageLoadingMsg();
    
    fileSystem.root.getFile(fileNm, {create: true, exclusive: false}, function(fileEntry) {
        var localPath = fileEntry.fullPath;
        localpath = localPath.substring(7);
    	
        window.plugins.EgovInterface.geturl(function(serverURL) {
                var fileTransfer = new FileTransfer();
                fileTransfer.download(
                        serverURL + "/frw/xml/fileDownload.do?uuid=" + encodeURI(device.uuid) + "&fileSn=" + fileSn,
                        localpath,
                        function(entry) {
                            console.log('DeviceAPIGuide fn_egov_downloadFile request Completed');
                            navigator.notification.alert("다운로드가 완료 되었습니다. 파일 읽기를 통해 확인 할 수 있습니다.", null, 'Info');
                            $.mobile.hidePageLoadingMsg();                          
                        },
                        function(error) {
                            console.log('DeviceAPIGuide fn_egov_downloadFile Fail');
                            $.mobile.hidePageLoadingMsg();
                        }
                );
        });
    }, fn_egov_fail);
}

다운로드 파일 목록 화면	파일 다운로드 화면

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

• 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application

• 상단의 메뉴 > Run As > Android Application

• 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드)

• 디바이스를 이용한 실행 화면

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.

• 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스에서 확인 할 수 있다.

console.log의 작성 방법은 다음과 같다.

function fn_egov_listDir(entries){
    console.log('DeviceAPIGuide fn_egov_listDir Success');
    $('#listView').text("");
    var linkVal = "javascript:fn_egov_chdir('/');";
    ...
}

디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다.

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

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

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