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.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 확인할 수 있다.
모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.
| 함수명 | 함수설명 |
|---|---|
| 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 정보 조회 플러그인 자바스크립트 객체 |
모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.
| 함수명 | 함수설명 |
|---|---|
| EgovInterface | Http POST Method function. |
| StorageInfo | Storgae 정보 조회 플러그인 자바스크립트 객체 |
| fn_egov_network_notification | 디바이스의 네트워크 정보 알림 함수 |
| fn_egov_network_check | 네트웍 이용시 wifi 체크 함수 |
모바일 전자정부 실행환경 공통 JavaScript 함수들이며, actionsheet, alert, overlay, prompt, comfirm dialog 사용된다.
자세한 설명은 https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component에서 확인할 수 있다.
웹페이지를 개발 하다보면 동적으로 화면을 컨트롤 하거나 css로 디자인을 변경하고 또는 애니매이션등의 효과를 줘야 할 경우가 많다.
이러한 효과를 저 수준의 자바스크립트로 작성하게 되면 엄청난 코딩 수의 압박으로 만들기도 전부터 걱정이 앞설 것이다.
이러한 모든 작업을 쉽고 빠르게 작업해 줄수 있도록 해주는 것이 jQuery 이다.
자세한 설명은 http://docs.jquery.com/Main_Page에서 확인할 수 있다.
jQuery 모바일은 jQuery상에만든 사용자 인터페이스 프레임워크로, 모바일 디바이스 대상의 어플리케이션을 만드는 과정을 간단하게 하기위한 것이다.
자세한 설명은 http://jquerymobile.com/demos/1.4.5/에서 확인할 수 있다.
Text형식의 json을 object로, 또는 object 형식의 json을 Text 형식으로 변환하기 위한 javascript이다.
자세한 설명은 http://www.json.org/js.html에서 확인할 수 있다.
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 | CLI도구 설치하기(Windows) CLI도구 설치하기(macOS) 코도바 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 |