====== 웹 리소스 ======


===== 개요 =====
PhoneGap 프로젝트는 일반적인 웹 리소스 (HTML5, CSS, JavaScript) 등을 활용하여 모바일 하이브리드 APP을 구현하며 해당 웹 리소스는 디바이스의 종류에 상관없이 재활용이 가능하다.
결국 각 환경에 맞는 컨테이너만 (아이폰, 안드로이드 등) 따로 만들고 내부 웹 리소스는 HTML5, JavaScript, CSS 등을 이용하여 동일하게 개발이 가능하다.

=== 주요개념 ===

^명칭^버전^위치(괄호 안 안드로이드 전용)^설명^
|Cordova|8.1.2|(assets/)www/js/egovframework/mbl/cmm/cordova.js|Javascript 객체를 이용하여, Device에 접근이 가능도록 다양한 API를 제공한다. 따라서 Web App을 구성하여, Device 자원에 직접 접근이 가능하다.|
|EgovHybrid|1.0|(assets/www/js/egovframework/mbl/cmm/EgovHybrid.js)|모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.|
|EGovComModuleAPI|1.0|www/js/egovframework/mbl/cmm/EGovComModule.js|모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.|
|EgovMobile|1.4.6|(assets/)www/js/egovframework/mbl/cmm/EgovMobile-1.4.6.js|모바일 전자정부 실행환경 공통 JavaScript 함수들이며, actionsheet, alert, overlay, prompt, comfirm dialog 등에도 사용된다.|
|jQuery|2.1.4|(assets/)www/js/egovframework/mbl/cmm/jquery-2.1.4.js\\ (asset/)www/js/egovframework/mbl/cmm/jquery-2.1.4.min.js|웹페이지를 개발 하다보면 동적으로 화면을 컨트롤 하거나 css로 디자인을 변경하고  또는  애니매이션등의 효과를 줘야 할 경우가 많다. 이러한 효과를 저 수준의 자바스크립트로 작성하게 되면 엄청난 코딩 수의 압박으로 만들기도 전부터 걱정이 앞설 것이다. 이러한 모든 작업을 쉽고 빠르게 작업해 줄수 있도록 해주는 것이 jQuery 이다.|
|jQuery Mobile|1.4.5|(assets/)www/js/egovframework/mbl/cmm/jquery.mobile-1.4.5.js\\ (asset/)www/js/egovframework/mbl/cmm/jquery.mobile-1.4.5.min.js|jQuery 모바일은 jQuery상에만든 사용자 인터페이스 프레임워크로, 모바일 디바이스 대상의 어플리케이션을 만드는 과정을 간단하게 하기위한 것이다.|
|json2|1.0|(assets/)www/js/egovframework/mbl/cmm/json2.js|Text형식의 json을 object로, 또는 object 형식의 json을 Text 형식으로 변환하기 위한 javascript이다.|
|Modernizr|3.6.0|(assets/)www/js/egovframework/mbl/cmm/modernizr-3.6.0.js|HTML5와 CSS3의 다양한 기능을 지원하는지 확인하는 자바스크립트 라이브러리 이다.|

===== 설명 =====

=== Cordova (PhoneGap) ===
코도바 (폰갭)는 cordova.js 내의 Javascript 객체를 이용하여, Device에 접근이 가능도록 다양한 API를 제공한다. 따라서 Web App을 구성하여, Device 자원에 직접 접근이 가능하다.
^구성^설명^
|Accelerometer|장치의 모션 센서를 활용|
|Camera|사진 촬영|
|Capture|미디어 파일을 캡처|
|Compass|나침반 정보|
|Connection|네트워크 상태를 확인, 셀룰러 네트워크 정보를 제공|
|Contacts|주소록 작업|
|Device|장치에 특정 정보 제공|
|Events|자바 스크립트를 통해 기본 이벤트에 후크|
|File|파일 작업|
|Geolocation|위치 정보 제공|
|Media|녹음 및 오디오 재생|
|Notification|알림|
|Storage|저장 공간 정보 제공|
자세한 내용은 [[https://cordova.apache.org/docs/en/8.x/index.html]] 확인할 수 있다.
  
=== EgovHybrid ===
모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.
== EgovHybrid.js ==
^함수명^함수설명^
|backKeyDown|Back key 를 통해 APP 이 종료될 수 있도록 세팅|
|sleep|스크립트 진행을 잠시 멈추기 위한 function|
|fn_Confirm3G|APP 동작 시 3G 망 일경우 과금 부과 확인 호출|
|fn_egov_network_check|네트웍 이용시 wifi 체크|
|loaded|iScroll setting|
|EgovInterface.prototype.get|Http GET Method function.|
|EgovInterface.prototype.post|Http POST Method function.|
|EgovInterface.prototype.geturl|GET URL function.|
|StorageInfo|Storgae 정보 조회 플러그인 자바스크립트 객체|
|DeviceNumber|Device Number 정보 조회 플러그인 자바스크립트 객체|

=== EGovComModuleAPI ===
모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.

== EGovComMobuleAPI.js ==
^함수명^함수설명^
|EgovInterface|Http POST Method function.|
|StorageInfo|Storgae 정보 조회 플러그인 자바스크립트 객체|
|fn_egov_network_notification|디바이스의 네트워크 정보 알림 함수|
|fn_egov_network_check|네트웍 이용시 wifi 체크 함수|

=== EgovMobile-1.4.6 ===
모바일 전자정부 실행환경 공통 JavaScript 함수들이며, actionsheet, alert, overlay, prompt, comfirm dialog 사용된다.\\
 자세한 설명은 [[https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component]]에서 확인할 수 있다.
=== jQuery ===
웹페이지를 개발 하다보면 동적으로 화면을 컨트롤 하거나 css로 디자인을 변경하고  또는  애니매이션등의 효과를 줘야 할 경우가 많다.
이러한 효과를 저 수준의 자바스크립트로 작성하게 되면 엄청난 코딩 수의 압박으로 만들기도 전부터 걱정이 앞설 것이다.
이러한 모든 작업을 쉽고 빠르게 작업해 줄수 있도록 해주는 것이 jQuery 이다.\\
 자세한 설명은 [[http://docs.jquery.com/Main_Page]]에서 확인할 수 있다.
=== jQuery Mobile ===
 jQuery 모바일은 jQuery상에만든 사용자 인터페이스 프레임워크로, 모바일 디바이스 대상의 어플리케이션을 만드는 과정을 간단하게 하기위한 것이다.\\
 자세한 설명은 [[http://jquerymobile.com/demos/1.4.5/]]에서 확인할 수 있다.
=== json2 ===
Text형식의 json을 object로, 또는 object 형식의 json을 Text 형식으로 변환하기 위한 javascript이다.\\
 자세한 설명은 [[http://www.json.org/js.html]]에서 확인할 수 있다.
=== Modernizr ===
HTML5와 CSS3의 다양한 기능을 지원하는지 확인하는 자바스크립트 라이브러리 이다.\\
 자세한 설명은 [[http://modernizr.com/docs/]]에서 확인할 수 있다.

===== 참고자료 =====
^명칭^링크^
|모바일 실행환경|[[https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component]]|
|Cordova 8.1.2 Download|[[egovframework:hyb3.5:hdev:imp:wincliinstall|CLI도구 설치하기(Windows)]] \\ [[egovframework:hyb3.5:hdev:imp:maccliinstall|CLI도구 설치하기(macOS)]] \\ [[egovframework:hyb3.9:hdev:imp:useclitools|코도바 CLI도구 사용하기]]|
|Cordova Developing a Plugin|[[https://cordova.apache.org/plugins/]]|
|Cordova 8.1.2 Documents|[[https://cordova.apache.org/docs/en/8.x/index.html]]|
|jQuery|[[http://jquery.com]]|
|jQuery Mobile|[[http://jquerymobile.com]]|
|json2|[[http://www.JSON.org]]|
|Modernizr|[[http://www.modernizr.com]]|