배경
전자정부 서비스 제공 시 모바일 디바이스의 고유 기능의 호출을 위한 모바일 하이브리드 어플리케이션 개발을 지원하기 표준프레임워크 모바일 디바이스 API 실행환경을 개발 및 배포하였으며, 그에 따라 모바일 하이브리드 앱 표준프레임워크 구축환경을 효과적으로 확산, 보급하기 위해 개발자가 손쉽게 접근할 수 있는 모바일 디바이스 API의 활용예제인 모바일 디바이스 API 가이드프로그램을 제공하게 되었다.
목적
모바일 하이브리드 앱 형태로 만들어진 표준프레임워크 모바일 디바이스 API의 설치 및 활용을 효과적으로 전달하기 위해 사용자의 수준 및 사용환경에 적합한 내용의 모바일 디바이스 API 예제를 구성하여, 개발 생산성 및 응용프로그램 품질 제고, 표준화 촉진등의 효과를 가져 올 수 있다.
- 각 모바일 디바이스 API별 특성에 따른 기능을 쉽게 이해하여 활용할 수 있도록 각 모바일 디바이스 API의 특징을 잘 들어 낼 수 있는 활용 예제를 개발
- 각 모바일 디바이스 API별 특성에 따라 서버 모듈 연계 기능을 쉽게 이해하여 활용할 수 있도록 각 모바일 디바이스 API에 대해 전자정부 표준프레임워크 서버 연계 활용 예제 제공
- 각 모바일 디바이스 API 기능의 서버 연계 기능에 대한 일반적인 특성이 잘 들어 날 수 있도록 일반적인 형태의 로직을 갖는 서버 연계 활용 예제를 구성
- 전자정부 서비스 구현 시에 사용자가 활용 할 수 있는 NPKI API 템플릿 예제 프로그램과 전자정부 표준프레임워크와 연계 할 때 사용될 수 있는 Interface API 템플릿 예제 프로그램을 쉽게 이용 할 수 있는 구조로 개발하여 제공
준수 지침
전자정부 웹 호환성 준수지침
1) 근거 기준: 행정안전부 고시 “제 2010-40호
2) 개정 이유: 모바일 전자정부 서비스 제공시 접근성 제고등을 위하여 공공기관이 준수해야 할 사항을 규정
3) 주요 개정 내용:
- 국민들이 다양한 모바일 기기를 사용할 수 있도록 모바일 ‘앱’방식보다 모바일’웹’방식을 권고
- 모바일 웹 방식 개발을 위한 기술 표준 지침
- 최소3종 이상 웹 브라우저에서 동등한 서비스 제공
- 국제 표준화 기구에서 제공하는 표준 사용 의무화
4) 전자정부 모바일 서비스 제공 원칙
- 다양한 스마트폰 사용자들이 모두 혜택을 받을 수 있도록 모바일 웹 방식의 개발을 권장
5) 모바일 ‘웹’ 과 ‘앱’ 서비스의 구현 방법 차이
모바일 애플리케이션 접근성 지침
1) 근거 기준: 행정안전부 고시 “제 2011-38호
2) 개정 이유: 모바일 전자정부 서비스 제공시 접근성 제고등을 위하여 공공기관이 준수해야 할 사항을 규정
3) 주요 내용:
- 모바일 애플리케이션 접근성 향상을 위한 모바일 애플리케이션 접근성 지침에 기반한 사용자인터페이스를 구축하고 사용자인터페이스의 접근성을 반복 평가하여 모바일 애플리케이션 접근성을 제공
4) 모바일 애플리케이션 접근성 준수를 위한 개발절차
구성 내용
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 가이드프로그램 구성도
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 및 자바스크립트를 이용한 어플리케이션 주요 로직을 구현한다.
<!DOCTYPE html>
<html LANG="ko">
<!--
/**
* @Class Name : index.html
* @Description : 가이드 프로그램 표준코드 index 화면
* @Modification Information
*
* 수정일 수정자 수정내용
* ------- -------- ---------------------------
*
*
*
* Copyright (C) 2009 by MOPAS All right reserved.
*/
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>example API Guide</title>
<!-- Phonegap.js import -->
<script type="text/javascript" charset="utf-8" src="js/egovframework/mbl/cmm/cordova.js"></script>
<!-- eGovFrame Common import -->
<link rel="stylesheet" href="css/egovframework/mbl/cmm/jquery.mobile-1.3.2.css" />
<link rel="stylesheet" href="css/egovframework/mbl/cmm/theme-1.1.1.css" />
<link rel="stylesheet" href="css/egovframework/mbl/cmm/EgovMobile-1.3.2.css" />
<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery-1.9.1.min.js"></script>
<script>
$(document).on("pageinit", function(){
$.mobile.defaultPageTransition = 'none';
});
</script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/modernizr-2.0.4.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/EgovMobile-1.3.2.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/EgovHybrid.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/json2.js"></script>
<!-- iScroll.js import -->
<script type="text/javascript" src="js/iscroll/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<body>
<div id="intro" data-role="page">
Device API Guide Android 1.9
</div>
</body>
</html>
- Manifest.xml
Manifest.xml은 모바일 어플리케이션 설정 파일로서 어플리케이션의 설정 및 필요한 기능, 권한등을 정의한다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="kr.go.egovframework.hyb.example"
android:versionCode="1"
android:versionName="1.0" >
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:debuggable="true">
<activity android:name=".Example_AndroidActivity"
android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter>
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="8" />
</manifest>
- config.xml
<plugin> 태그에는 전자정부 디바이스 API 실행환경의 디바이스 API들이 정의되어 있으며 사용자 플러그인 또한 <plugin> 태그를 이용하여 등록하여야 한다.
<widget xmlns = "http://www.w3.org/ns/widgets"
id = "io.cordova.helloCordova"
version = "2.0.0">
<name>Hello Cordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author href="http://cordova.io" email="dev@cordova.apache.org">
Apache Cordova Team
</author>
<access origin="*"/>
<!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
<content src="index.html" />
<preference name="loglevel" value="DEBUG" />
<!--
<preference name="splashscreen" value="resourceName" />
<preference name="backgroundColor" value="0xFFF" />
<preference name="loadUrlTimeoutValue" value="20000" />
<preference name="InAppBrowserStorageEnabled" value="true" />
<preference name="disallowOverscroll" value="true" />
-->
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker"/>
</feature>
<feature name="Device">
<param name="android-package" value="org.apache.cordova.Device"/>
</feature>
<feature name="Accelerometer">
<param name="android-package" value="org.apache.cordova.AccelListener"/>
</feature>
<feature name="Compass">
<param name="android-package" value="org.apache.cordova.CompassListener"/>
</feature>
<feature name="Media">
<param name="android-package" value="org.apache.cordova.AudioHandler"/>
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.CameraLauncher"/>
</feature>
<feature name="Contacts">
<param name="android-package" value="org.apache.cordova.ContactManager"/>
</feature>
<feature name="File">
<param name="android-package" value="org.apache.cordova.FileUtils"/>
</feature>
<feature name="NetworkStatus">
<param name="android-package" value="org.apache.cordova.NetworkManager"/>
</feature>
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.Notification"/>
</feature>
<feature name="Storage">
<param name="android-package" value="org.apache.cordova.Storage"/>
</feature>
<feature name="FileTransfer">
<param name="android-package" value="org.apache.cordova.FileTransfer"/>
</feature>
<feature name="Capture">
<param name="android-package" value="org.apache.cordova.Capture"/>
</feature>
<feature name="Battery">
<param name="android-package" value="org.apache.cordova.BatteryListener"/>
</feature>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.SplashScreen"/>
</feature>
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.Echo"/>
</feature>
<feature name="Globalization">
<param name="android-package" value="org.apache.cordova.Globalization"/>
</feature>
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>
<!-- Deprecated plugins element. Remove in 3.0 -->
<plugins>
<plugin name="App" value="org.apache.cordova.App"/>
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
<plugin name="Device" value="org.apache.cordova.Device"/>
<plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
<plugin name="Compass" value="org.apache.cordova.CompassListener"/>
<plugin name="Media" value="org.apache.cordova.AudioHandler"/>
<plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
<plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
<plugin name="File" value="org.apache.cordova.FileUtils"/>
<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
<plugin name="Notification" value="org.apache.cordova.Notification"/>
<plugin name="Storage" value="org.apache.cordova.Storage"/>
<plugin name="Temperature" value="org.apache.cordova.TempListener"/>
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
<plugin name="Capture" value="org.apache.cordova.Capture"/>
<plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
<plugin name="EgovInterfacePlugin" value="kr.go.egovframework.hyb.plugin.EgovInterfacePlugin" />
<plugin name="StorageInfoPlugin" value="kr.go.egovframework.hyb.plugin.EgovStorageInfo" />
<plugin name="DeviceNumberPlugin" value="kr.go.egovframework.hyb.plugin.EgovDeviceNumber" />
</plugins>
</widget>