목차

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

개요

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

특징

본 가이드 프로그램 에서는 Camera 기능을 가이드 할 수 있도록 촬영 사진을 서버에 전송하기, 갤러리의 사진을 서버에 전송하기,
사진 목록을 서버로부터 수신하기 를 제공하고 있다.

기능 흐름도

기능 시퀀스

전제 조건

구분 내용
Local 디바이스 개발 환경 Xcode 6.3.2, PhoneGap 4.3.0
서버 사이드 개발 환경 전자정부표준프레임워크 개발환경 3.5
Mash up Open API 연계N/A
테스트 디바이스 iPhone4, iPhone6
테스트 플랫폼 iOS 7.1.2, iOS 8.3
추가 라이브러리 적용N/A

제약 사항

지원 디바이스 및 플랫폼

iPhone 의 경우 장치의 연산속도에 따른 문제가 발생할 수 있다.
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
setTimeout(function()
           {
               myScroll = new iScroll(thisPage, 
                                      { 
                                          checkDOMChanges: true,
                                          onBeforeScrollStart:function(e)
                                          {
                                          }
                                      });
           },
           500);
CallBack 함수에서 alert() 를 포함하면 문제가 발생할수 있다 (phoneGap)

크로스 도메인 사용

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

라이선스

N/A

설명

Camera 디바이스API 가이드 프로그램은 크게 촬영 사진을 서버에 전송하기, 갤러리의 사진을 서버에 전송하기, 사진 목록을 서버로부터 수신하기
기능으로 구성되어 있다.(관련기능 부분참조)

관련 클래스다이어그램

Device Application

관련 소스

유형대상소스비고
CSSwww/css/egovframwork/mbl/hyb/CameraAPI.css CameraAPI 가이드 프로그램 주요 Cascading Style Sheets
IMAGE www/images/egovframwork/mbl/hyb/ CameraAPI 가이드 프로그램 주요 Image 폴더
JS www/js/egovframwork/mbl/hyb/CameraAPI.js CameraAPI 가이드 프로그램 주요 JavaScript
HTMLwww/CameraAPI.htmlCameraAPI 메인 페이지
HTMLwww/license.htmlCameraAPI 라이센스 페이지
HTMLwww/overview.htmlCameraAPI 기능설명 페이지

활용 API

camera.getPicture
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
cameraOption
var cameraOption = {};
  cameraOption  = {
      quality: 50,
      destinationType : Camera.DestinationType.FILE_URI,
      sourceType : Camera.PictureSourceType.CAMERA,
      targetWidth: 200,
      targetHeight: 200
  };
Option설명비고
quality이미지의 품질(해상도)를 백분율로 정의한다.
destinationType결과 값의 포맷을 정의한다.navigator.camera.DestinationType
sourceType포토 라이브러리, 카메라에서 찍은 사진 등 선택할 소스를 설정한다.nagivator.camera.PictureSourceType
allowEdit이미지 선택 전, 이미지 편집 여부.
encodingType이미지 파일의 인코딩 종류를 정의한다.navigator.camera.EncodingType
targetWidth이미지의 너비(pixel)를 설정한다. 비율은 고정.
targetHeight이미지의 높이(pixel)를 설정한다. 비율은 고정.
mediaTypepictureSourceType이 PHOTOLIBRARY 또는 SAVEDPHOTOALBUM일 때, 미디어의 타입을 설정한다. nagivator.camera.MediaType
correctOrientation 이미지를 담는동안 이미지 회전 여부.
saveToPhotoAlbum 이미지를 담은 후, 단말기 저장 여부.
FileTransfer [upload]
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=fileURI.substr(fileURI.lastIndexOf('/')+1);
options.mimeType="text/plain";

var params = new Object();
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURI, "http://some.server.com/upload.php", transferSuccess, transferFail, options);
FileUploadOptions
Option설명비고
fileKey업로드할 파일의 변수명설정하지 않으면 “file”로 정의된다.
fileName서버에 저장될 파일의 변수명.설정하지 않으면 “image.jpg“ 로 정의된다.
mimeType데이터를 업로드시, mimeType을 설정한다.설정하지 않으면 “image/jpeg“ 로 정의된다.
params서버에 추가로 전달할 매개변수.
chunkedMode대형 스트림 모드 여부.설정하지 않으면 “true“ 로 정의된다.

Server Application

관련 소스

유형대상소스비고
Controlleregovframework.hyb.ios.cmr.web.EgovCameraiOSAPIController.java사진 정보 관리를 위한 클래스
Serviceegovframework.hyb.ios.cmr.service.EgovCameraiOSAPIService.java사진 정보 관리를 위한 서비스 인터페이스
VOegovframework.hyb.ios.cmr.service.CameraiOSAPIDefaultVO.java사진 관리를 위한 VO 클래스
VOegovframework.hyb.ios.cmr.service.CameraiOSAPIFileVO.java이미지 파일 관리를 위한 VO 클래스
VOegovframework.hyb.ios.cmr.service.CameraiOSAPIVO.java사진 관리를 위한 VO 클래스
VOegovframework.hyb.ios.cmr.service.CameraiOSAPIXmlVO.java사진 관리를 위한 VO 클래스
DAOegovframework.hyb.ios.cmr.service.impl.CameraiOSAPIDAO.java사진 관리를 위한 데이터처리 클래스
DAOegovframework.hyb.ios.cmr.service.impl.EgovCameraiOSMngUtil.java이미지 파일 관리를 위한 클래스
DAOegovframework.hyb.ios.cmr.service.impl.EgovCameraiOSAPIServiceImpl.java요청 서비스 처리를 위한 클래스
Query XMLresources/egovframework/sqlmap/com/cop/adb/EgovNcrd_SQL.xml주소록 관리를 Query 파일

ID Generation

관련 테이블

테이블명

테이블명테이블명(영문)비고
카메라CAMERA이미지 정보 관리
파일상세정보FILE_DETAIL_INFO파일상세정보 관리

테이블 명세서

카메라
No.컬럼컬럼명타입길이NullKEY
1SN일련번호NUMERIC6NotNullpk
2UUIDUUIDVARCHAR50NotNullpk
3PHOTO_SJ사진제목VARCHAR255Null
4FILE_SN파일연번NUMERIC20NotNullFk
5USEYN활성화여부CHAR1Nullpk
파일상세정보
No.컬럼컬럼명타입길이NullKEY
1FILE_SN파일연번NUMERIC20NotNullpk
2FILE_STRE_COURS파일저장경로VARCHAR2000Null
3STRE_FILE_NM저장파일명VARCHAR255Nullpk
4ORIGNL_FILE_NM원파일명VARCHAR255NotNull
5FILE_EXTSN파일확장자VARCHAR20Null
6FILE_CN파일내용BLOB Null
7FILE_SIZE파일크기NUMERIC8Null

ERD

환경 설정

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

Device Application

config.xml

ExternalHosts
    <access origin="ExternalHosts"/>
Plugin
    <feature name="Camera">
      <param name="ios-package" value="CDVCamera"/>
    </feature>
    <feature name="FileTransfer">
        <param name="ios-package" value="CDVFileTransfer"/>
    </feature>

Server Aplication

context-properties.xml

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

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

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

관련 기능

Camera 디바이스API 가이드 프로그램은 크게 디바이스 내 Camera 촬영 기능과 갤러리 내에 저장된 사진을 이용하여 필요한 정보를 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.

촬영 사진을 서버에 전송하기

비즈니스 규칙

1. 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
2. 이미지 제목은 최소 2글자 최대 20글자로 제한한다. (Validation Rule)
3. 서버로 전송시 제목이 중복 될 경우 덮어쓰기 여부를 사용자 승인여부에 따라 진행한다.

관련 코드

촬영 API 를 호출 한다.
function fn_egov_capture_photo(sel)
{
    var cameraOption = {};
    cameraOption  = {
        quality: 50,
	destinationType : Camera.DestinationType.FILE_URI,
	sourceType : Camera.PictureSourceType.CAMERA,
        targetWidth: 200,
        targetHeight: 200
    };
    
    navigator.camera.getPicture(fn_egov_upload_photo,null,cameraOption);
};
촬영 된 이미지를 받아온다
function fn_egov_upload_photo(data)
{
    image = data;
    if(myScroll != null) 
    {
        myScroll.destroy();
    }
    fn_egov_wait_iscroll('wrapper_image');
    toast("uploadPhoto success!");
};
이미지 중복 체크 요청
var params = {
    photoSj : $("#photoSj").val(),
    uuid : device.uuid
};
                          
$.mobile.showPageLoadingMsg('a');
// 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
setTimeout(function()
           {
               fn_egov_sendto_server("/cmr/cameraPhotoAlbumCheckiOS.do",params);
           },
           500);
이미지 중복 체크 결과
var cameraiOSAPIVO = result["cameraiOSAPIVO"];
var currentImageSn = cameraiOSAPIVO["sn"];
                                     
if(currentImageSn != null && currentImageSn != "") 
{
    jConfirm("제목이 중복입니다.\n이미지를 수정하시겠습니까?", "알림", "b", 
             function(result)
             {
                 if(result) 
                 {
                     fn_egov_update_Photograph(currentImageSn);
                 }
             });
    }
    else
    {
        jConfirm("저장하시겠습니까?", "알림", "b", 
        function(result)
        {
            if(result) 
            {
                fn_egov_insert_Photograph();
            }
        });
    }
}
이미지 서버로 전송
function fn_egov_insert_Photograph() 
{
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var params = {};
               
                   options.params = params;
                   var ft = new FileTransfer();
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUploadiOS.do?uuid="+ encodeURI(device.uuid)+"&photoSj="+ encodeURIComponent("이미지제목");
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

function fn_egov_update_Photograph(currentImageSn) {
	
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var ft = new FileTransfer();
               
                   var params = {};
               
                   options.params = params;
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUpdateiOS.do?sn="+currentImageSn;
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

관련 화면 및 수행매뉴얼

기능URLControllermethod화면(HTML)
이미지 중복 체크/cmr/cameraPhotoAlbumCheckiOS.doEgovCameraiOSAPIControllerselectPhotoAlbumPhoSjCameraAPI.html#addPhotoAlbum
이미지 업로드 (insert)/cmr/photoAlbumImageUploadiOS.doEgovCameraiOSAPIControllerfileUploadCameraAPI.html#addPhotoAlbum
이미지 업로드 (update)/cmr/photoAlbumImageUpdateiOS.doEgovCameraiOSAPIControllerfileUpdateCameraAPI.html#addPhotoAlbum


제목:2글자 이상 20글자 이하의 규칙이 적용되어 있다.
사진촬영:카메라 디바이스를 호출한다.
저장:서버에 이미지 중복 체크를 한후 업로드한다.

갤러리 사진을 서버에 전송하기

비즈니스 규칙

1. 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
2. 이미지 제목은 최소 2글자 최대 20글자로 제한한다. (Validation Rule)
3. 서버로 전송시 제목이 중복 될 경우 덮어쓰기 여부를 사용자 승인여부에 따라 진행한다.

관련 코드

갤러리 API 를 호출 한다.
function fn_egov_capture_photo(sel)
{
    var cameraOption = {};
    cameraOption  = {
        quality: 50,
	destinationType : Camera.DestinationType.FILE_URI,
	sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
        targetWidth: 200,
        targetHeight: 200
    };
    
    navigator.camera.getPicture(fn_egov_upload_photo,null,cameraOption);
};
갤러리에서 선택 된 이미지를 받아온다
function fn_egov_upload_photo(data)
{
    image = data;
    if(myScroll != null) 
    {
        myScroll.destroy();
    }
    fn_egov_wait_iscroll('wrapper_image');
    toast("uploadPhoto success!");
};
이미지 중복 체크 요청
var params = {
    photoSj : $("#photoSj").val(),
    uuid : device.uuid
};
                          
$.mobile.showPageLoadingMsg('a');
// 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
setTimeout(function()
           {
               fn_egov_sendto_server("/cmr/cameraPhotoAlbumCheckiOS.do",params);
           },
           500);
이미지 중복 체크 결과
var cameraiOSAPIVO = result["cameraiOSAPIVO"];
var currentImageSn = cameraiOSAPIVO["sn"];
                                     
if(currentImageSn != null && currentImageSn != "") 
{
    jConfirm("제목이 중복입니다.\n이미지를 수정하시겠습니까?", "알림", "b", 
             function(result)
             {
                 if(result) 
                 {
                     fn_egov_update_Photograph(currentImageSn);
                 }
             });
    }
    else
    {
        jConfirm("저장하시겠습니까?", "알림", "b", 
        function(result)
        {
            if(result) 
            {
                fn_egov_insert_Photograph();
            }
        });
    }
}
이미지 서버로 전송
function fn_egov_insert_Photograph() 
{
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var params = {};
               
                   options.params = params;
                   var ft = new FileTransfer();
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUploadiOS.do?uuid="+ encodeURI(device.uuid)+"&photoSj="+ encodeURIComponent("이미지제목");
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

function fn_egov_update_Photograph(currentImageSn) {
	
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var ft = new FileTransfer();
               
                   var params = {};
               
                   options.params = params;
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUpdateiOS.do?sn="+currentImageSn;
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

관련 화면 및 수행매뉴얼

기능URLControllermethod화면(HTML)
이미지 중복 체크/cmr/cameraPhotoAlbumCheckiOS.doEgovCameraiOSAPIControllerselectPhotoAlbumPhoSjCameraAPI.html#addPhotoAlbum
이미지 업로드 (insert)/cmr/photoAlbumImageUploadiOS.doEgovCameraiOSAPIControllerfileUploadCameraAPI.html#addPhotoAlbum
이미지 업로드 (update)/cmr/photoAlbumImageUpdateiOS.doEgovCameraiOSAPIControllerfileUpdateCameraAPI.html#addPhotoAlbum


제목:2글자 이상 20글자 이하의 규칙이 적용되어 있다.
갤러리:장치의 갤러리 사진 정보를 호출한다.
저장:서버에 이미지 중복 체크를 한후 업로드한다.

서버의 사진 목록 조회하기

비즈니스 규칙

1. 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.

관련 코드

서버의 사진 목록 요청
function fn_egov_show_ImgList()
{
    if(fn_egov_network_check(false))
    {
        var params = null;
        if(ImageArray === null)
        {
            params = {pageIndex:1};        
        }
        else
        {
            if(ImageArray.length % 10 === 0)
            {
                params = {pageIndex:1+ImageArray.length/10};
            }
            else
            {
                jAlert('마지막 페이지 입니다.', '알림', 'c');
                return;
            }
        }
        
        $.mobile.showPageLoadingMsg('a');
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/cmr/cameraPhotoAlbumListiOS.do",params);
                   }, 
                   500);
    }
}
선택한 사진 상세 조회
function fn_detailPhotoAlbum(VOsn) 
{
    if(fn_egov_network_check(false))
    {
        currentImageSn = VOsn;
        var params = {
            sn : VOsn
        };
        
        $.mobile.showPageLoadingMsg('a');
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/cmr/cameraPhotoAlbumDetailiOS.do",params);
                   }, 
                   500);
    }
}
선택한 사진 삭제
function fn_deletePhotoAlbum() 
{
    if(fn_egov_network_check(false))
    {
        jConfirm("삭제하시겠습니까?", "알림", "b", 
                 function(result)
                 {
                    if(result) 
                    {
                        var params = {
                        sn : currentImageSn
                        };
                 
                        $.mobile.showPageLoadingMsg('a');
                        setTimeout(function()
                                   {
                                       fn_egov_sendto_server("/cmr/deleteCameraPhotoAlbumiOS.do",params);
                                   }, 
                                   500);
                    }
                 });
    }
}
서버의 사진 목록 조회 요청

관련 화면 및 수행매뉴얼

기능URLControllermethod화면(HTML)
서버의 사진목록 요청/cmr/cameraPhotoAlbumListiOS.doEgovCameraiOSAPIControllerselectCameraPhotoAlbumListCameraAPI.html#listPhotoAlbum
선택한 사진의 상세 정보/cmr/cameraPhotoAlbumDetailiOS.doEgovCameraiOSAPIControllerselectPhotoAlbumCameraAPI.html#detailPhotoAlbum
선택한 사진 삭제/cmr/deleteCameraPhotoAlbumiOS.doEgovCameraiOSAPIControllerdeleteCameraPhotoAlbumCameraAPI.html#detailPhotoAlbum


리스트:선택한 리스트의 상세 정보를 요청한다.
더보기:서버의 사진 목록 10개를 더 로딩한다.
목록:서버 사진목록 페이지를 호출한다.
삭제:선택된 사진을 삭제한다.

컴파일 디버깅 배포

컴파일

Device Application

  1. CameraAPI 프로젝트의 설치 상태를 확인하고 빌드를 클릭한다

Server Application

  1. 프로젝트 우클릭>Run as>Maven install 을 클릭하여 빌드를 한다.

  2. 빌드 성공 (콘솔 정보 확인)

  3. 프로젝트 우클릭>Run as>Run on Server 를 클릭하여 실행시킨다.

  4. 프로젝트가 성공적으로 실행되었는지 확인한다.

디버깅

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

function fn_egov_network_check(doCheck)
{
    console.log('DeviceAPIGuide fn_egov_network_check');
    var networkState = navigator.network.connection.type;
    ...
}



로그 메시지비고
DeviceAPIGuide fn_egov_network_check네트워크 상태 체크
DeviceAPIGuide fn_insertSuccess사진 서버로 전송 성공
DeviceAPIGuide fn_error사진 서버로 전송 실패
DeviceAPIGuide fn_egov_sendto_server Response Completed서버에 요청한 내용이 성공적으로 처리 된 경우
DeviceAPIGuide fn_egov_sendto_server Response Failed서버 내부 처리 오류
DeviceAPIGuide fn_egov_sendto_server Request Failed통신 오류

배포

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

참고 자료