===== 배경 ===== 전자정부 서비스 제공 시 모바일 디바이스의 고유 기능의 호출을 위한 모바일 하이브리드 어플리케이션 개발을 지원하기 표준프레임워크 모바일 디바이스 API 실행환경을 개발 및 배포하였으며, 그에 따라 모바일 하이브리드 앱 표준프레임워크 구축환경을 효과적으로 확산, 보급하기 위해 개발자가 손쉽게 접근할 수 있는 모바일 디바이스 API의 활용예제인 모바일 디바이스 API 가이드프로그램을 제공하게 되었다. ===== 목적 ===== 모바일 하이브리드 앱 형태로 만들어진 표준프레임워크 모바일 디바이스 API의 설치 및 활용을 효과적으로 전달하기 위해 사용자의 수준 및 사용환경에 적합한 내용의 모바일 디바이스 API 예제를 구성하여, 개발 생산성 및 응용프로그램 품질 제고, 표준화 촉진등의 효과를 가져 올 수 있다. * 각 모바일 디바이스 API별 특성에 따른 기능을 쉽게 이해하여 활용할 수 있도록 각 모바일 디바이스 API의 특징을 잘 들어 낼 수 있는 활용 예제를 개발 * 각 모바일 디바이스 API별 특성에 따라 서버 모듈 연계 기능을 쉽게 이해하여 활용할 수 있도록 각 모바일 디바이스 API에 대해 전자정부 표준프레임워크 서버 연계 활용 예제 제공 * 각 모바일 디바이스 API 기능의 서버 연계 기능에 대한 일반적인 특성이 잘 들어 날 수 있도록 일반적인 형태의 로직을 갖는 서버 연계 활용 예제를 구성 * 전자정부 서비스 구현 시에 사용자가 활용 할 수 있는 NPKI API 템플릿 예제 프로그램과 전자정부 표준프레임워크와 연계 할 때 사용될 수 있는 Interface API 템플릿 예제 프로그램을 쉽게 이용 할 수 있는 구조로 개발하여 제공 ===== 준수 지침 ===== ==== 전자정부 웹 호환성 준수지침 ==== **1) 근거 기준: 행정안전부 고시 “제 2010-40호 ** **2) 개정 이유: 모바일 전자정부 서비스 제공시 접근성 제고등을 위하여 공공기관이 준수해야 할 사항을 규정 ** **3) 주요 개정 내용: ** * 국민들이 다양한 모바일 기기를 사용할 수 있도록 모바일 ‘앱’방식보다 모바일’웹’방식을 권고 * 모바일 웹 방식 개발을 위한 기술 표준 지침 - 최소3종 이상 웹 브라우저에서 동등한 서비스 제공 - 국제 표준화 기구에서 제공하는 표준 사용 의무화 **4) 전자정부 모바일 서비스 제공 원칙 ** * 다양한 스마트폰 사용자들이 모두 혜택을 받을 수 있도록 모바일 웹 방식의 개발을 권장 **5) 모바일 ‘웹’ 과 ‘앱’ 서비스의 구현 방법 차이 ** {{:egovframework:mcom:웹과앱의차이.png|}} ==== 모바일 애플리케이션 접근성 지침 ==== **1) 근거 기준: 행정안전부 고시 “제 2011-38호 ** **2) 개정 이유: 모바일 전자정부 서비스 제공시 접근성 제고등을 위하여 공공기관이 준수해야 할 사항을 규정 ** **3) 주요 내용: ** * 모바일 애플리케이션 접근성 향상을 위한 모바일 애플리케이션 접근성 지침에 기반한 사용자인터페이스를 구축하고 사용자인터페이스의 접근성을 반복 평가하여 모바일 애플리케이션 접근성을 제공 **4) 모바일 애플리케이션 접근성 준수를 위한 개발절차 ** {{:egovframework:hyb:guide:웹접근성테스트.png?700|}} ===== 구성 내용 ===== iOS, Android 플랫폼 두 종의 디바이스 API 가이드 프로그램을 각 샘플 템플릿 프로그램 및 디바이스 API 별로 가이드 프로그램을 구현하여 제공한다.. * 디바이스 API 가이드프로그램의 종류 ^ 디바이스 API ^ 구현개요 ^ | SampleTemplate | 폰갭에서 제공하는 디바이스API 10가지를 하이브리드 앱으로 구현하여 샘플을 제공한다. | | Contact | 현재 저장된 전화번호부를 리스트 형태로 보여주며 찾기 기능을 통해 전화번호부를 검색 및 서버에 연락처를 백업한다. | | GPS | 지도서비스와 연계 하여 지도화면 위에 현재좌표와 위치를 표시한다. | | Accelerator | 디바이스의 가속도 정보를 조회하여 이미지의 움직임으로 화면에 표시한다. | | Camera | 카메라 기능을 통해 사진을 촬영하며 촬영된 사진을 서버에 업로드 및 섬네일 형태로 조회한다. | | Vibrator | 알람 방식 선택 기능을 제공하며 타임설정을 통해 사용자 알람을 동작한다. | | Compass | 디바이스가 가리키는 방향 정보를 이용하여 지도화면의 방향 정보를 실시간으로 변경한다. | | Media | 서버에 위치한 미디어 파일 목록을 확인하고 선택한 미디어 파일을 재생, 정지, 앞으로 탐색, 뒤로 탐색 버튼을 통해 컨트롤 할 수 있는 기능을 제공한다. | | File | 동영상 캡쳐 기능을 통해 촬영된 파일을 디바이스에 저장, 조회하며 파일을 서버에 업로드/다운로드 한다. | | Device | 디바이스 메타데이터를 조회하여 그리드 형태로 사용자에게 제공한다. | | Network | 디바이스 네트워크 정보를 조회하여 사용자 화면에 표시한다. | | NPKI | 모바일용 GPKI인증서를 이용한 인증을 수행하며 로그인 로그정보를 서버에 저장한다. | | Interface | 사용자 정보를 서버에 저장하는 회원가입 기능을 제공하며 가입된 정보로 로그인 할 수 있는 기능을 제공한다. | ===== 모바일 디바이스 API 가이드 프로그램 아키텍처 ===== * 모바일 디바이스 API 별로 제공되는 객체 또는 메소드 등을 충분히 활용하여 각 디바이스 API 기능의 특징이 잘 드러나도록 개발한다. * 모바일 디바이스 API 가이드 프로그램을 활용하여 하이브리드 어플리케이션 구현에 활용될 수 있도록 모듈화 된 구조로 구현한다.. * 모바일 디바이스 API 공공서비스의 경우 각 기관에서 보유하고 있는 특정 정보 제공이나 민원처리의 성격이 많으므로 서버와의 연계를 포함하여 구현한다. * 기존 레거시 시스템과의 연계를 통해 자료구조(JSON, 미디어 파일, XML 파일 등)가 전송 가능한 추가 인터페이스 API를 통한 연계를 구현한다. * 모바일 디바이스 API 가이드프로그램 구성도 {{:egovframework:hyb:guide:가이드프로그램구성도.png?900|}} === iOS 하이브리드 어플리케이션 프로젝트 구조 === * 아키텍처 패턴 ^ 이름 ^ 설명 ^ | Framework | Cordova.framework 폰갭을 사용하기 위한 framework, SystemConfiguration.framework 시스템 영역 접근 framework,\\ CFNetwork.framework 네트워크 영역 접근 framework, MobileCoreService.framework 디바이스 Core 영역 접근 framework | | www | index.html, *.css, *.js 파일., App의 첫 페이지 index.html와 디자인 관련된 css, PhoneGap 및 JavaScript js 구성. | | Design | 디바이스 배경에 쓰이는 icons 파일의 폴더, App 실행 시 보여줄 splash 파일의 폴더 | | Plugins | 추가 Plug-in 폴더, Cordova.plist에 추가된 Plug-in 정보 기록, CDVPlugin 클래스를 상속 | * 오픈소스 소프트웨어 ^ 이름 ^ 설명 ^ | Reachability | 애플에서 무료 제공하기 때문에 라이선스 없음,\\ 현재 디바이스의 3G 또는 wi-fi 아니면 네트워크 미연결 mode 체크,\\ 3G 또는 wi-fi 아니면 네트워크 미연결 변경 시 알림 제공| | ASIHTTPRequest | BSD License, GET/POST/PUT/DELETE 방식 지원,\\ HTTP, HTTPS 통신 지원,\\ 파일 업로드/다운로드 지원 및 진행 % 상태 알림 제공,\\ 동기 및 비동기 통신 지원, 통신 시작, 실패, 성공 상태 알림 제공| | PhoneGap | 모바일 웹 페이지에서 디바이스에 직접 접근 가능 | * 아키텍처 구현 전략 ^ 이름 ^ 설명 ^ |Framework|Xcode 프로젝트 템플릿중에 Cordova-based Application으로 생성하여야만 Cordova.framework가 추가된다,\\ 프로젝트 설정 화면에서 SystemConfiguration framework, CFNetwork framework, MobileCoreService framework 를 추가한다.| |www|UIWebView에서 보여줄 첫 페이지 index.html 파일,\\ 디자인에 관련된 css 파일, PhoneGap 및 JavaScript의 js 파일이 위치한다.| |Design|icons 폴더에는 디바이스 바탕화면에 보일 Icon.png, Icon@2x.png, Icon-72.png 파일이 위치한다,\\ splash 폴더에는 앱 실행이 보여줄 splash화면 이미지 Default.png, Default@2x.png가 위치한다.| |Plugins|Plug-in을 추가 생성하고자 할 경우 CDVPlugin 클래스를 상속받아서 여기에 추가한다,\\ 추가된 Plug-in은 Cordova.plist 파일의 Plugins section에 추가| === Android 하이브리드 어플리케이션 프로젝트 구조 === ^ 리소스 ^ 위치 ^ 설명 ^ |AndroidManifest.xml|/AndroidManifest.xml|안드로이드 어플리케이션 디스크립터 파일로 액티비티, 컨텐츠프로바이더, 서비스, 어플리케이션에서 사용되는 수신자들을 정의한다. 권한 설정도 가능하다.| |Activity.java|src/패키지명/*Activity.java|안드로이드 어플리케이션을 구성하는 가장 기본이 되는 빌딩 블록으로 보통의 경우 한 화면을 차지하면서 뷰로 구성된 유저 인터페이스를 화면에 표시하고 사용자의 입력을 처리하는 역할을 한다 | |R.java|gen/패키지명/R.java|안드로이드에서 사용되는 리소스를 관리하는 자바 파일로 리소스에 대한 참조 값이 정의 된다. 자동으로 SDK에 의해 생성 되며 사용자가 수정하지 못하도록 되어있다.| |HTML/JS/CSS/Image|assets/www/|하이브리드 어플리케이션의 주요 구성요소로 화면 요소 및 비즈니스 로직을 포함한다.| |Phonegap-x.x.jar|lib/|디바이스 API인 폰갭 프레임워크의 안드로이드 플랫폼의 네이티브와 통신하기 위한 라이브러리이다.| |Android.jar|Android-sdk/platforms/android-version/|안드로이드 플랫폼에서 API와 관련되 라이브러리 파일이다.안드로이드 버전에 따라 파일이 달라진다.| |Icon.png|res/drawable-dpi/|어플리케이션이 설치 되었을 때 사용자가 볼 수 있는 아이콘 | |Main.xml|res/layout/main.xml|안드로이드 플랫폼에서 사용되는 화면 UI를 xml로 정의해 놓은 파일| |Strings.xml|res/values/strings.xml|안드로이드 플랫폼에서 사용되는 문자열을 관리하는 xml 파일로 다국어를 지원하는 용도로 사용 할 수 있다.| |config.xml|res/xml/plugins.xml|폰갭 프레임워크에 등록된 플러그인이 정의되는 파일로 폰갭의 디바이스 API들이 플러그인 형태로 등록 되어 있다.| * 메인 클래스 (Activity) Phonegap 프로젝트인 경우 일반적인 APP 구현 방식과는 다르게 Phonegap 에서 제공하는 Class(DroidGap) 을 상속하여 메인 클래스를 구현하며. Phonegap 에서 하이브리드 앱 구현을 위해 미리 Webkit 을 상속받아 구현해 놓은 onCreate 및 loadUrl을 호출하여 웹 리소스(HTML, CSS, JavaScript)들을 Webview 로 주입하여 렌더링 한다. 기본적으로 폰갭은 디폴트로 Rich 클라이언트 방식을 제공하며, 프로젝트 내에있는 Index.html을 최초 호출하도록 되어 있다. package kr.go.egovframework.hyb.example; import org.apache.cordova.*; import android.os.Bundle; /** * @Class Name : example_AndroidActivity.java * @Description : example_AndroidActivity Class * @Modification Information * @ * @ 수정일 수정자 수정내용 * @ --------- --------- ------------------------------- * @ * * Copyright (C) by MOPAS All right reserved. */ public class Example_AndroidActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Clear cache if you want super.clearCache(); //super.appView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); super.loadUrl("file:///android_asset/www/index.html"); } } * index.html 폰갭 API 및 자바스크립트를 이용한 어플리케이션 주요 로직을 구현한다. example API Guide
Device API Guide Android 1.9
* Manifest.xml Manifest.xml은 모바일 어플리케이션 설정 파일로서 어플리케이션의 설정 및 필요한 기능, 권한등을 정의한다. * config.xml 태그에는 전자정부 디바이스 API 실행환경의 디바이스 API들이 정의되어 있으며 사용자 플러그인 또한 태그를 이용하여 등록하여야 한다. Hello Cordova A sample Apache Cordova application that responds to the deviceready event. Apache Cordova Team