목차

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

개요

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

특징

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

기능흐름도

기능시퀀스

전제 조건

구분내용
Local 디바이스 개발 환경 전자정부표준프레임워크 개발환경3.6, Android SDK API 23(version 6.0 Marshmallow)
서버 사이드 개발 환경 전자정부표준프레임워크 개발환경3.6
Mash up Open API 연계 N/A
테스트 디바이스 Galaxy S3, G5
테스트 플랫폼 Android 2.3, Android 6.0
추가 라이브러리 적용N/A

제약사항

구분 내용
크로스 도메인 사용폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,
Res/xml/config.xml에서 <access origin=”” />에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.

설명

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

클래스 다이어그램

Device Application

관련 소스

유형대상소스명비고
Activitykr.go.egovframework.hyb.filereaderwriterapi.FileReadWriteAPIGuide_AndroidActivityFileReadWriteAPI 가이드 프로그램 Activity Class
CSSassets/www/css/egovframwork/mbl/hyb/FileReaderWriterAPI.css FileReadWriteAPI 가이드 프로그램 주요 Cascading Style Sheets
IMAGE assets/www/images/egovframwork/mbl/hyb/ FileReadWriteAPI 가이드 프로그램 주요 Image 폴더
JS assets/www/js/egovframwork/mbl/hyb/FileReaderWriterAPI.js FileReadWriteAPI 가이드 프로그램 주요 JavaScript
RES assets/www/res/ FileReadWriteAPI 가이드 프로그램 주요 Resource 폴더
XML AndroidManiFest.xml 안드로이드 어플리케이션 설정 XML
HTMLassets/www/FileReaderWriterAPI.htmlFileReadWriteAPI 메인 페이지
HTMLassets/www/Intro.htmlFileReadWriteAPI Intro 페이지
HTMLassets/www/license.htmlFileReadWriteAPI 라이센스 페이지
HTMLassets/www/overview.htmlFileReadWriteAPI 기능설명 페이지

활용 API

LocalFileSystem
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onError);
파라미터설명비고
LocalFileSystem.PERSISTENT사용자 또는 어플리케이션에 의해 제거 될 수 없는 스토리지를 조회 할 때 사용된다.
onSuccess파일 시스템 조회에 성공했을때 호출되는 콜백 함수
onError파일 시스템 조회에 실패 했을때 호출되는 콜백 함수
FileTransfer[upload]
var ft = new FileTransfer();
ft.upload(fileURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
FileTransfer[upload]
var ft = new FileTransfer();
ft.download(fileURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);

Server Application

관련 소스

유형대상소스명비고
Controlleregovframework.hyb.add.frw.web.EgovFileReaderWriterAndroidAPIController.javaFileReadWriteAPI 가이드 프로그램 Controller Class
Controlleregovframework.hyb.add.frw.service.impl.EgovFileMngAndroidUtil.javaFileReadWriteAPI 가이드 프로그램 File Controller Class
Serviceegovframework.hyb.add.frw.service.EgovFileReaderWriterAndroidAPIService.javaFileReadWriteAPI 가이드 프로그램 Service Class
ServiceImplegovframework.hyb.add.frw.service.impl.EgovFileReaderWriterAndroidAPIServiceImpl.javaFileReadWriteAPI 가이드 프로그램 ServiceImpl Class
VOegovframework.hyb.add.frw.service.FileReaderWriterAndroidAPIVO.javaFileReadWriteAPI 가이드 프로그램 VO Class
DAOegovframework.hyb.add.frw.service.impl.FileReaderWriterAndroidAPIDAO.javaFileReadWriteAPI 가이드 프로그램 Dao Class
QUERY XMLresources/egovframework/sqlmap/hyb/add/frw/EgovFileReaderWriterAndroidAPIGuide_SQL_xxx.xmlFileReadWriteAPI 가이드 프로그램 QUERY XML

관련 테이블

테이블명테이블명(영문)비고
FileReader/WriteFILE_READER_WRITE파일 정보 관리
파일상세정보FILE_DETAIL_INFO파일 상세 정보 관리

테이블 명세서

No.컬럼컬럼명타입길이NullKEY
1SN일련번호NUMERIC6NotNullpk
2UUIDUUIDVARCHAR50NotNullpk
3FILE_SN파일연번NUMERIC20NotNullFK
4FILE_NM파일명VARCHAR255Null
5FILE_COURS파일경로VARCHAR2000Null
6FILE_TYPE파일타입VARCHAR40Null
7UPDT_DT수정일시DATE Null
8FILE_SIZE파일크기NUMERIC8Null
9USEYN활성화여부CHAR1Null
No.컬럼컬럼명타입길이NullKEY
1FILE_SN파일연번NUMERIC20NotNullpk
2FILE_STRE_COURS파일저장경로VARCHAR2000Null
3STRE_FILE_NM저장파일명VARCHAR255Nullpk
4ORIGNL_FILE_NM원파일명VARCHAR255Null
5FILE_EXTSN파일확장자VARCHAR20Null
6FILE_CN파일내용BLOB Null
7FILE_SIZE파일크기NUMERIC8Null

ERD

환경설정

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

Device Application

res/xml/config.xml

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

res/xml/config.xml

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

res/values/serverinfo.xml

    <!--전자정부 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>

Server Application

context-properties.xml

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

resource/egovframework/sqlmap/sql-map-config_[DB명].xml

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

관련기능

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

모바일 기기 파일 읽기

비즈니스 규칙

관련 코드

장치의 File System 정보 조회
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 : 선택된 파일 삭제
닫기 : 팝업 창 닫기

모바일 기기 파일 쓰기

비즈니스 규칙

관련 코드

디바이스의 동영상 캡처 기능을 호출
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);
}

관련 화면 및 수행매뉴얼

동영상 촬영 화면

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

생성된 파일을 서버로 전송하기

비즈니스 규칙

관련 코드

선택된 파일에 대한 파일 업로드 호출
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);
    });
}
파일 업로드 Success Callback Function
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();
}

관련 화면 및 수행매뉴얼

ActionURLController methodQueryID
파일 업로드/frw/xml/fileUpload.dofileUploadfileReaderWriterAndroidAPIDAO.insertFileInfo
fileReaderWriterAndroidAPIDAO.insertFileDetailInfo
파일 목록 화면 파일 업로드 화면

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

전송된 파일을 기기로 복구하기

비즈니스 규칙

관련 코드

서버에서 조회된 파일 리스트를 리스트 형태로 출력
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");    
}


선택된 파일에 대한 작업 선택 다이얼로그 생성(삭제 or 다운로드)
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);
}


관련 화면 및 수행매뉴얼

ActionURLController methodQueryID
서버 파일리스트 조회/frw/xml/fileInfoList.doselectFileInfoListXmlfileReaderWriterAndroidAPIDAO.selectFileInfoList
파일 다운로드/frw/xml/fileDownload.dofileDownloadfileReaderWriterAndroidAPIDAO.selectFileInfo
서버 파일삭제/frw/xml/deleteFile.dodeleteFilefileReaderWriterAndroidAPIDAO.deleteFileInfo
fileReaderWriterAndroidAPIDAO.deleteFileDetailInfo
다운로드 파일 목록 화면 파일 다운로드 화면

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

컴파일 디버깅 배포

컴파일

Device Applicaton 컴파일 방법

Server Applicaton 컴파일 방법

디버깅

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 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 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다.

디버그 코드디버깅 내용
DeviceAPIGuide fn_egov_localStorageInfo Success 디바이스 파일 시스템 정보 조회 성공 시
DeviceAPIGuide fn_egov_localStorageInfo Fail 디바이스 파일 시스템 정보 조회 실패 시
DeviceAPIGuide fn_egov_readDirectory Success 디렉토리 조회 성공 시
DeviceAPIGuide fn_egov_listDir Success 디렉토리 정보 조회 성공 시
DeviceAPIGuide fn_egov_fileError Fail 디렉토리 정보 조회 실패 시
DeviceAPIGuide fn_egov_uploadFile Success 서버로 전송 할 파일 정보 조회 성공 시
DeviceAPIGuide fn_egov_onFileUploadSuccess request Completed 파일 서버 전송 성공 시
DeviceAPIGuide fn_egov_removeFileEntry Success 삭제 할 파일 정보 조회 성공 시
DeviceAPIGuide fn_egov_fileRemoved Success 디바이스의 파일 삭제 성공 시
DeviceAPIGuide fn_egov_fail Fail 함수 실행 실패 시(공통)
DeviceAPIGuide fn_egov_captureSuccess Success 동영상 촬영 성공 시
DeviceAPIGuide fn_egov_captureError Fail 동영상 촬영 실패 시
DeviceAPIGuide fn_egov_onResolveFileSuccess Success 촬영된 동영상 파일 정보 조회 성공 시
DeviceAPIGuide fn_egov_onFileCopySuccess Success 동영상 파일을 Root 폴더로 복사 성공 시
DeviceAPIGuide fn_egov_make_FileInfoList Success 서버의 파일 정보 목록 조회 성공 시
DeviceAPIGuide fn_egov_delete_fileInfo request Completed 서버의 파일 정보 삭제 성공 시
DeviceAPIGuide fn_egov_downloadFile request Completed 서버의 파일 다운로드 성공 시
DeviceAPIGuide fn_egov_downloadFile Fail 서버의 파일 다운로드 실패 시
DeviceAPIGuide EgovInterface.get request Fail HTTP GET Method 요청 실패 시
DeviceAPIGuide EgovInterface.post request Fail HTTP POST Method 요청 실패 시
DeviceAPIGuide EgovInterface.geturl Fail geturl 함수 요청 실패 시

배포

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

참고자료