전자정부 모바일 디바이스 API 개발을 위한 Gatting Started ( 지원 Platform : Android )
개요
본 가이드는 전자정부 표준 프레임워크에서 제공하는 모바일 디바이스 API 실행환경, 개발환경, 가이드프로그램의 적용 및 실습을 위한 기본 환경 구축 내용이다.
빠른 시간 내에 전자정부 디바이스 API 활용 하이브리드 앱 개발을 위한 기본 기능을 활용하기 위해 3단계 따라하기 방식으로 진행된다.
- 개발환경 설치 : 실습을 위한 개발환경을 구축한다.
- 프로젝트 실행 : 제공한 샘플 프로젝트를 이용하여 앱 어플리케이션을 생성하고 웹 어플리케이션을 통해 실행해 본다.
- 자세히 들여보기 : 생성/실행한 프로젝트의 내부 소스코드를 학습하여 전자정부 표준 프레임워크 기반의 웹 어플리케이션과 전자정부 디바이스API 프레임워크 기반의 앱 어플리케이션 구현 원리를 이해한다.
전자정부 표준 프레임워크 기반의 웹 어플리케이션과 전자정부 디바이스API 프레임워크 기반의 앱 어플리케이션 개발 및 실행을 위한 구현도구의 환경정보는 다음과 같다
| 항목 | 설명 | 비고 |
|---|---|---|
| OS | Windows 2000, xp, vista, seven , 10 | |
| JDK | Java SE SDK 7.0 이상 | |
| SDK | Android SDK Revision 24 이상 | |
| SDK-API | Android 5.0.1 이상 | API 21이상 |
| Andorid Version | Android 2.2 Froyo 이상 | |
| IDE | Eclipse 4.3(Kepler)이상 | 구현도구에 포함 |
| Cordova | 4.3.0 | Phonegap Device 3.7.1 |
| Plug-In | Android ADT | |
Step 1. 설치
다운로드
- Android SDK Manager : Android SDK Manager Download 새 창 열림
- ADT Plugin : ADT Plugin Download 새 창 열림
- Cordova (Phonegap) : Cordova Download 새 창 열림
개발환경 설치
- 인터넷 웹브라우저를 통해 eGovFrame 홈페이지(https://www.egovframe.go.kr/ 새 창 열림)에 접속하여 사이트 상위메뉴를 통해 “다운로드>개발환경“으로 이동 후 개발환경을 다운로드 받는다.
SDK 설치
Android SDK는 SDK Manager를 설치 후, SDK를 설치하게 된다.
자세한 사항은 아래의 설치방법을 참고하도록 한다.
설치방법
유의사항
- SDK 경로는 한글이나 공백이 들어가서는 안된다.
- API는 필요한 버전을 설치하도록 하며, 전자정부 디바이스API 개발에서는 Android 2.2 이상을 지원하고 있다.
ADT 설치
Android Development Toolkit(이하 ADT)는 Eclipse IDE에서 Android 개발을 도와주기 위한 플러그인 이다. 자세한 사항은 아래의 설치방법을 참고하도록 한다.
설치방법
Android Configurator for M2E 플러그인 설치
- ADT와 M2Eclipse Maven 플러그인 연결을 위한 플러그인이다.
- Maven 업데이트를 완료한 후에 플러그인 설치를 하여야한다.
Cordova 설치
전자정부 디바이스API에서 참조하고 있는 Cordova(Phonegap)을 설치한다. 자세한 사항은 아래의 설치방법을 참고하도록 한다.
설치방법
전자정부 디바이스API 실행환경 설치
DeviceAPIGuide_Android_V3.5.zip import
- 압축파일을 새로운폴더에 해제한다.
- Import > Android > Existing Android Application Project
- 압축해제한 디렉토리를 지정한후 Copy projets into workspace 체크후 Finish한다.
- 프로젝트 내, 전자정부 디바이스API 실행환경 구성
기존 프로젝트에 실행환경 구성
- 전자 정부 표준프레임워크 센터에서 받은 DeviceAPIGuide_Android_V3.5.zip 파일을 해당 위치에 복사한다. (전자정부 표준 프레임워크 센터 이용하기)
- 다운받은 DeviceAPIGuide_Android_V3.5.zip 압축을 푼다.
- assets / www 폴더 내에 실행환경의 css를 구성한다.
- assets / www 폴더 내에 실행환경의 images를 구성한다.
- assets / www 폴더 내에 실행환경의 js를 구성한다.
- cordovalib_4.3_v3.7.1.jar, spring-android-core-1.0.0.RELEASE.jar, spring-android-rest-template-1.0.0.RELEASE.jar 를 libs 폴더에 구성한다.
- AndroidManifest.xml 및 project.properties를 수정한다. Cordova (Phonegap) 설정
Step 2. 프로젝트 실행
Device Application
- 실행환경 예제를 설치한다.실행환경 예제 설치하러 가기
- 프로젝트 선택 후, 오른쪽 클릭 > Run As > Android Application
- ADT에서 제공하는 Android Virtual Device Manager로 실행
- 디바이스의 USB 디버깅 모드로 실행
- LogCat을 통해 앱 어플리케이션에 대한 디버그를 확인
Web Application
- Web Application은 전자정부 표준 프레임워크 3.5을 기반으로 만들어진 어플리케이션이므로, 아래를 참고한다.
Step 3. 자세히 들여다보기
주요 Page
구조
| 디렉토리 | 파일 | 비고 |
|---|---|---|
| assets/www/css/egovframework/mbl/cmm/ | EgoMobile-1.4.5.css | 모바일 실행환경 공통 css 파일 |
| assets/www/css/egovframework/mbl/cmm/ | jquery.mobile-1.4.5.css | query mobile 의 css 파일 |
| assets/www/css/egovframework/mbl/cmm/ | theme-1.1.1.css | 테마 파일 |
| assets/www/css/egovframework/mbl/cmm/swipebutton/ | jquery-mobile-custom.css | swipebutton 관련 css 파일 |
| assets/www/js/egovframework/mbl/cmm/ | cordova.js | cordova의 js 파일 |
| assets/www/js/egovframework/mbl/cmm/ | EgovHybrid.js | 디바이스API 공통 js 파일 |
| assets/www/js/egovframework/mbl/cmm/ | EgovMobile-1.4.5.js | 모바일 실행환경의 공통 js 파일 |
| assets/www/js/egovframework/mbl/cmm/ | jquery-1.11.2.min.js | jQuery 의 js 파일 |
| assets/www/js/egovframework/mbl/cmm/ | jquery.mobile-1.4.5.min.js | jQuery Mobile 의 js 파일 |
| assets/www/js/egovframework/mbl/cmm/ | jquery.validate.min.js | Validation 관련 js 파일 |
| assets/www/js/egovframework/mbl/cmm/ | json2.js | json 관련 js 파일 |
| assets/www/js/egovframework/mbl/cmm/ | modernizr-2.0.4.js | Device API 확인을 위한 공통 js 파일 |
| assets/www/js/egovframework/mbl/cmm/swipebutton/ | jquery-mobile-custom.js | swipebutton 관련 js 파일 |
| libs/ | cordova.jar | Phonegap 구성을 위한 각종 클래스와 랩퍼클래스 |
| res/xml/ | plugin.xml | Cordova Plugin 구성을 위한 설정 XML 파일 |
| AndroidManiFest.xml | 안드로이드 어플리케이션 설정 XML 파일 |