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

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

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

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

• 카메라로 사진을 찍고 찍은 사진을 가져오거나, 단말기의 앨범에서 사진을 선택해서 가져온다.
  
• base64로 인코딩된 이미지를 가져오거나 사진 파일의 경로을 통해 사진을 가져온다.
  

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

var cameraOption = {};
  cameraOption  = {
      quality: 50,
      destinationType : Camera.DestinationType.FILE_URI,
      sourceType : Camera.PictureSourceType.CAMERA,
      targetWidth: 200,
      targetHeight: 200
  };

• 서버에 파일을 업로드할 수 있도록 하는 파일 전송 객체.

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

• 파일 업로드시, 전달할 매개변수를 정의하는 업로드 속성객체

• ID Generation Service를 활용하기 위해서 Sequence 저장테이블인 COMTECOPSEQ에 FILE (파일 정보 ID) 항목을 추가해야 한다.

• CAMERA

• FILE_DETAIL_INFO

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

<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
 
<plugin name="File" value="org.apache.cordova.FileUtils" />
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer" />

<string name="SERVER_URL">http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1</string>

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

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

• 업로드 된 파일 저장 위치

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

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

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

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

function fn_cameraPhotograph() {
	var Camera = navigator.camera;
	var cameraOption  = {
			quality: 50,
			destinationType : Camera.DestinationType.FILE_URI,
			sourceType : Camera.PictureSourceType.CAMERA,
			targetWidth: 200,
			targetHeight: 200
	};
	navigator.camera.getPicture(fn_getPhotoAlbumInfo, fn_error, cameraOption);
}

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

function fn_checkPhotoAlbum() {
	
	...
	
	var url = "/cmr/cameraPhotoAlbumCheck.do";
	var acceptType = "xml";
	var check = false;
	
	var params = {
			photoSj : $("#photoSj").val()
			};
	
	egovHyb.post(url, acceptType, params, function(xmldata) {
		
	...
		currentImageSn = $(xmldata).find("sn").text();
		
		if(currentImageSn != null && currentImageSn != "") {
			jConfirm("제목이 중복입니다.\n이미지를 수정하시겠습니까?", "알림", "b", function(result){
				
				if(result) {
					fn_updatePhotograph();
				}
			});
		} else {
				...
		}
	});
	
	return check;
}

function fn_insertPhotograph() {
	
	$.mobile.showPageLoadingMsg();
	
	var options = new FileUploadOptions();
	options.fileKey = "file";
	options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
	options.mimeType = "image/jpeg";

	var params = {
					photoSj : $("#photoSj").val(),
					uuid : encodeURI(device.uuid)
				};
	options.params = params;
	

	var ft = new FileTransfer();
	
	ft.upload(image, loadServer + "/cmr/photoAlbumImageUpload.do", fn_insertSuccess, fn_error, options);
}

function fn_updatePhotograph() {
	
	$.mobile.showPageLoadingMsg();
	
	var options = new FileUploadOptions();
	options.fileKey = "file";
	options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
	options.mimeType = "image/jpeg";

	var ft = new FileTransfer();
	
	var params = {
					sn : currentImageSn
				};
	
	options.params = params;
	ft.upload(image, loadServer + "/cmr/photoAlbumImageUpdate.do", fn_insertSuccess, fn_error, options);
}

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

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

function fn_albumPhotograph() {
	var Camera = navigator.camera;
	var cameraOption  = {
			quality: 50,
			destinationType : Camera.DestinationType.FILE_URI,
			sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
			targetWidth: 200,
			targetHeight: 200
	};
	navigator.camera.getPicture(fn_getPhotoAlbumInfo, fn_error, cameraOption);
}

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 params = {
    photoSj : $("#photoSj").val(),
    uuid : device.uuid
};
                          
$.mobile.showPageLoadingMsg('a');
// 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
setTimeout(function()
           {
               fn_egov_sendto_server("/cmr/cameraPhotoAlbumCheckiOS.do",params);
           },
           500);

function fn_checkPhotoAlbum() {
	
	...
	
	var url = "/cmr/cameraPhotoAlbumCheck.do";
	var acceptType = "xml";
	var check = false;
	
	var params = {
			photoSj : $("#photoSj").val()
			};
	
	egovHyb.post(url, acceptType, params, function(xmldata) {
		
	...
		currentImageSn = $(xmldata).find("sn").text();
		
		if(currentImageSn != null && currentImageSn != "") {
			jConfirm("제목이 중복입니다.\n이미지를 수정하시겠습니까?", "알림", "b", function(result){
				
				if(result) {
					fn_updatePhotograph();
				}
			});
		} else {
				...
		}
	});
	
	return check;
}

function fn_insertPhotograph() {
	
	$.mobile.showPageLoadingMsg();
	
	var options = new FileUploadOptions();
	options.fileKey = "file";
	options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
	options.mimeType = "image/jpeg";

	var params = {
					photoSj : $("#photoSj").val(),
					uuid : encodeURI(device.uuid)
				};
	options.params = params;
	

	var ft = new FileTransfer();
	
	ft.upload(image, loadServer + "/cmr/photoAlbumImageUpload.do", fn_insertSuccess, fn_error, options);
}

function fn_updatePhotograph() {
	
	$.mobile.showPageLoadingMsg();
	
	var options = new FileUploadOptions();
	options.fileKey = "file";
	options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
	options.mimeType = "image/jpeg";

	var ft = new FileTransfer();
	
	var params = {
					sn : currentImageSn
				};
	
	options.params = params;
	ft.upload(image, loadServer + "/cmr/photoAlbumImageUpdate.do", fn_insertSuccess, fn_error, options);
}

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

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

function fn_selectPhotoAlbumList(params) {
	
	var url = "/cmr/cameraPhotoAlbumList.do";
	var acceptType = "xml";
	
	egovHyb.post(url, acceptType, params, function(xmldata) {
		
		console.log("DeviceAPIGuide fn_selectPhotoAlbumList request Completed");
		
		fn_event_checkPage(xmldata);
	});
	
}

function fn_selectPhotoAlbumDetail(imageSrc) {
	
	var url = "/cmr/cameraPhotoAlbumDetail.do";
	var acceptType = "xml";
	
	var params = {
					sn : currentImageSn
					};
	
	egovHyb.post(url, acceptType, params, function(xmldata) {
		console.log("DeviceAPIGuide fn_selectPhotoAlbumDetail request Completed");
		
		fn_displayDetail(imageSrc, xmldata);
	});
}

function fn_deletePhotoAlbumInfo() {
	
	console.log("fn_deletePhotoAlbumInfo Start.");
	
	var url = "/cmr/deleteCameraPhotoAlbum.do";
	var acceptType = "xml";
	
	var params = {
			sn : currentImageSn
			};
	
	egovHyb.post(url, acceptType, params, function(xmldata) {
		console.log("DeviceAPIGuide fn_deletePhotoAlbumInfo request Completed");
		
		jAlert("삭제되었습니다", "알림", "b", function(){
			
			$.mobile.changePage($("#listPhotoAlbum"), {changeHash:false});
		});
		
	});
}

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

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

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

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

• 에뮬레이터를 이용한 실행 화면

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

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

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

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

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

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

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

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

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

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