이 사이트는 전자정부 표준프레임워크 구버전(1.0 ~ 4.3) 가이드 아카이브입니다. 내용은 더 이상 갱신되지 않습니다. 최신 내용은 최신 버전 문서에서 확인하세요.

모바일 디바이스 API 2.7

모바일 디바이스 API 개발을 위한 Gatting Started ( 지원 Platform : iOS )

개요

본 가이드는 전자정부 표준프레임워크에서 제공하는 모바일 디바이스 API 실행환경, 개발환경, 가이드프로그램의 적용 및 실습을 위한 기본 환경 구축 내용이다. 빠른 시간 내에 모바일 디바이스 API 활용 하이브리드 앱 개발을 위한 기본 기능을 활용하기 위해 3단계 따라하기 방식으로 진행된다.

  1. 개발환경 설치 : 실습을 위한 개발환경을 구축한다.
  2. 프로젝트 생성 및 설정 : 제공한 샘플 프로젝트를 이용하여 앱 어플리케이션을 생성하고 웹 어플리케이션을 통해 실행해 본다.
  3. 자세히 들여보기 : 생성/실행한 프로젝트의 내부 소스코드를 학습하여 전자정부 표준 프레임워크 기반의 웹 어플리케이션과 전자정부 디바이스API 프레임워크 기반의 앱 어플리케이션 구현 원리를 이해한다.

전자정부 표준프레임워크 기반의 웹 어플리케이션과 모바일 디바이스 API 실행환경 기반의 앱 어플리케이션 개발 및 실행을 위한 구현도구의 환경정보는 다음과 같다

개요
항목설명비고
운영체제 Mac 10.7.4 버젼 이상
SDK iOS SDK 6.0 이상
개발도구 xCode 4.5.2 이상
PhoneGap Cordova-2.9.0 타버젼 지원 안됨.

Step 1. 설치

다운로드

  1. xCode Download : Click 새 창 열림
  2. Cordova Download : Click 새 창 열림

개발 환경 설치

1) 다운로드 받은 xCode 파일을 열어 설치파일(Xcode and iOS SDK)을 실행한다.
xcode설치0001.jpg
2) 설치 프로그램이 실행되고 계속하기를 누른다.
xcode설치0003.jpg

  • xCode는 크기가 9GB 가 넘기 때문에 디스크 용량을 충분히 확보한 곳에 설치한다.

3) 설치 완료.
xcode설치0004.jpg
4) 설치 확인 : Finder 를 열어 응용프로그램에서 xCode 생성 여부를 확인한다.
xcode실행파일.png
5) 설치시 오류나 기타 사항은 애플 개발자 사이트를 참고한다.

Cordova (Phonegap) 설치

1) 폰갭 사이트에서 인스톨 페이지를 선택한다.
phonegapmain.png
2) 폰갭 버전 2.9.0을 선택하여 다운로드 받는다.
installphonegap.png
3)설치시 오류나 기타 사항은 폰갭 사이트를 참고한다.

전자 정부 디바이스 API 실행환경 설치

실행환경 구성하기


PhoneGap 업데이트로 프로젝트 생성방식의 변경으로 표준프레임워크 모바일 디바이스 API 2.5버젼에서 제공하였던 xCode 템플릿은 사용할 수 없다.

1) 다운로드.
- 디바이스 API 실행환경 : Click 새 창 열림

hrtedownload.png
hrtedownload2.png
hrtedownload3.png
2) 다운로드 받은 압축파일의 확장자를 .zip으로 변경한다.
changezip.png
3) 압축을 풀고 프로젝트 파일을 더블클릭하여 xCode를 실행한다. 4) 상단의 Product > Build 를 클릭하여 프로젝트를 빌드한다.
프로젝트설치17.png
5) xCode 중앙에 빌드 성공여부를 확인하고 시뮬레이터 및 디바이스에서 테스트 한다.
프로젝트설치18.png
6) 디바이스에서 테스트할 경우, Apple 개발자 인증서가 있어야 된다. 인증서 취득 과정은
Click 새 창 열림에서 참조할 수 있다.

실행 화면

runhrte.png

Step 2. 프로젝트 실행

Device Application

  1. 실행환경 예제를 설치한다.실행환경 예제 설치하러 가기
  2. 프로젝트에서 대상을 iPhone Simulater로 선택 한뒤 실행 버튼을 누른다
    프로젝트실행1.png
  3. Organizer 을 통해 앱 어플리케이션에 대한 디버그 메시지를 확인 할 수 있다
    프로젝트실행2.png
  4. 디바이스에서 실행을 하기 위해선 Code Signing 이 필요하다 (애플 홈페이지 참조) : Click 새 창 열림
  5. 디바이스에서 테스트할 경우, Apple 개발자 인증서가 있어야 된다. : 인증서 취득 과정 새 창 열림

Web Application

Step 3. 자세히 들여다 보기

주요 Page

구조

구조
디렉토리파일비고
www/css/egovframework/mbl/cmm/EgoMobile-1.3.2.css모바일 실행환경 공통 css 파일
www/css/egovframework/mbl/cmm/jquery.mobile-1.3.2cssquery mobile 의 css 파일
www/css/egovframework/mbl/cmm/theme-1.1.1.css테마 파일
www/css/egovframework/mbl/cmm/swipebutton/jquery-mobile-custom.css swipebutton 관련 css 파일
www/js/egovframework/mbl/cmm/cordova.min.js cordova의 js 파일
www/js/egovframework/mbl/cmm/EgovComeModuleAPI.js 디바이스API 공통 js 파일
www/js/egovframework/mbl/cmm/EgovMobile-1.3.2.js모바일 실행환경의 공통 js 파일
www/js/egovframework/mbl/cmm/jquery-1.9.1.min.jsjQuery 의 js 파일
www/js/egovframework/mbl/cmm/jquery.mobile-1.1.1.min.jsjQuery Mobile 의 js 파일
www/js/egovframework/mbl/cmm/jquery.validate.min.jsValidation 관련 js 파일
www/js/egovframework/mbl/cmm/json2.jsjson 관련 js 파일
www/js/egovframework/mbl/cmm/modernizr-2.0.4.jsDevice API 확인을 위한 공통 js 파일
www/js/egovframework/mbl/cmm/swipebutton/jquery-mobile-custom.jsswipebutton 관련 js 파일
projectName/Plugins/EgovInterface.h디바이스API표준 통신 구현 파일
projectName/Plugins/EgovInterface.m디바이스API표준 통신 구현 파일
projectName/eGovModule/EGovComModule.h실행환경 통신 모듈
projectName/eGovModule/libEGovComModule.a실행환경 통신 모듈
projectName/Supporting Files/config.xmlphoneGap 설정 파일
projectName/Supporting Files/ProjectName-Info.plist어플리케이션 설정 파일
CordovaLib.xcodeprojheaderphonegap 프레임워크

구성

관련 환경

원본 페이지 ID
egovframework:hyb2.7:init:ios:getting_started
원본 수정일