1. 모바일 서비스 구현 방법 2. 네이티브앱, 모바일웹, 하이브리드앱의 개념 3. 하이브리드앱 구조 4. 하이브리드 프레임워크 비교 5. 전자정부 모바일 표준프레임워크 기반 기술 요소 6. 전자정부 모바일 표준프레임워크 처리 흐름 7. 개발환경 구성 8. 표준프레임워크.

Presentation on theme: "1. 모바일 서비스 구현 방법 2. 네이티브앱, 모바일웹, 하이브리드앱의 개념 3. 하이브리드앱 구조 4. 하이브리드 프레임워크 비교 5. 전자정부 모바일 표준프레임워크 기반 기술 요소 6. 전자정부 모바일 표준프레임워크 처리 흐름 7. 개발환경 구성 8. 표준프레임워크."— Presentation transcript:

1

2 1. 모바일 서비스 구현 방법 2. 네이티브앱, 모바일웹, 하이브리드앱의 개념 3. 하이브리드앱 구조 4. 하이브리드 프레임워크 비교 5. 전자정부 모바일 표준프레임워크 기반 기술 요소 6. 전자정부 모바일 표준프레임워크 처리 흐름 7. 개발환경 구성 8. 표준프레임워크 앱 개발 과정 (Android) 9. 통합 API 를 활용한 공통기반 개발 가이드 10. 디버깅 팁 11. 제약사항 및 유의사항

3

4  네이티브앱 : 특정 플랫폼에서 컴파일된 형태로 작동되는 앱. ◦ 장점 : 속도가 빠르다. 기기 API 사용 가능. ◦ 단점 : 각 플랫폼마다 각각의 언어와 환경으로 별도의 개발 과정이 필요 하다. 배포가 어렵다.  iOS : Object C, Xcode, MacOS  Android, BlackBerry : JAVA, eclipse  WindowsPhone :.NET(C#) + Silverlight + DirectX  바다 : C/C++, eclipse  WindowsMobile : VB, VC++  모바일웹 : 모바일 기기의 브라우저에서 로드되어 작동되는 웹. ◦ 장점 : 플랫폼에 독립적. 배포가 쉽다. ◦ 단점 : 기기의 API 를 사용할 수 없다.

5  하이브리드앱 : 네이티브앱과 모바일웹의 장점을 활용하 여 네이티브앱 내에 웹이 삽입된 형태로 작동되는 앱. ◦ 장점  플랫폼별 개발 공수 최소화 (One Source Multi Platform).  기기의 API 사용 가능.  웹 개발자의 진입장벽이 낮다.  배포가 쉽다. ◦ 단점  웹 UI 를 사용하여 기기에 따라 속도가 느릴 수 있다.  웹소스를 앱에 포함시킬 경우 배포가 어렵다.  전자정부 모바일 공통기반 : 모바일웹을 기준으로 공통 컴포넌트가 개발된 형태. 따라서 앱으로 만들 경우 하이 브리드앱 형태가 됨. 웹소스는 앱에 포함.

6  Hybrid Platform 에서 제공되는 JavaScript API 를 통해 Native Resource 를 사용한다.  OS 에 따라 Hybrid Platform 만 변경하면 동일 웹소스로 다양한 기기 지원이 가능하다.  현재 Windows 계열을 제외하고 iOS, 안드로이드, BlackBerry, 바다 모두 WebKit 이 기본엔진 Webkit Native Apps (ex. Mobiledesk) Hybrid Platform Hybrid Core Interface wrapper JS API Hybrid Application Client OS HTML + JS + CSS Webkit 상에서 구동되는 Web App 형태로 개발함 Multi Platform (Hybrid) One Source

7  Phonegap ◦ Adobe 에 인수됨. 드림위버 플러그인 지원. 대부분 OS 지원.  Appspresso ◦ 국내 개발 (KTH). WAC 의 Waikiki API 지원. ◦ 현재 iOS, Android 만 지원.  Titanium ◦ 하이브리드앱이 아닌 하이브리드 개발방법 채택. ◦ Titanium API 를 이용하여 웹으로 개발하면 네이티브앱으로 컴파일 됨.  SEMP ◦ 삼성 SDS 에서 개발한 엔터프라이즈용 하이브리드 API. ◦ MDM, VPN, E2E 암호화 등 지원. 개발자 지원 미흡.  기타 ◦ QuickConnect, Rhodes 등. ◦ http://en.wikipedia.org/wiki/Multiple_phone_web_based_applicati on_framework 참조 http://en.wikipedia.org/wiki/Multiple_phone_web_based_applicati on_framework  전자정부 모바일 공통기반은 SEMP 를 사용함.

8  서버 : 전자정부 프레임워크 ◦ Spring Framework ◦ iBatis, tiles  클라이언트 : HTML5 기반 ◦ SEMP : 하이브리드 API ◦ jQuery : 웹어플리케이션 Framework ◦ jQuery mobile (JQM) : 모바일웹 UI Framework ◦ Ajax : JSON 형식의 데이터 교환  UX 컴포넌트 (Panel, Label, Text, Grid 등 )  공통 컴포넌트 ( 게시판, 동호회 등 ) ◦ 참조 : http://www.egovframe.go.kr/html/egovframework/mbl/popup/popup_egovMobile_detail.html 참조 : http://www.egovframe.go.kr/html/egovframework/mbl/popup/popup_egovMobile_detail.html

9 G-VPNG-VPN 공통기반앱 (Webkit 엔진 ).htm 파일 로드 공통기반 중계서버 설정된 URL 요청 (App 별로 하나의 URL 만 사용 가능 ) 공통기반 중계서버 설정된 URL 요청 (App 별로 하나의 URL 만 사용 가능 ) WAS Spring Servlet MainController Service DAO View (JSON) iBatis HandlerMapping 자바스크립트 엔진 SEMP API Jquery Mobile 데이터 처리 및 UI 구성

10  OS 별 개발환경 구성 ◦ 안드로이드 : 전자정부 프레임워크 개발환경 (eclipse) + Android SDK, Plugin. ◦ iOS : 서버 – 전자정부 프레임워크 개발환경 (eclipse). / 클라이언트 – iOS 개발환경 (Xcode).  모바일용 웹 개발을 위해서 Chrome 또는 Safari 브라우저 사용 (Webkit 엔진 ).  기기별 드라이버 설치 ( 에뮬레이터는 느림 ).  USB 연결 되어야 디버깅 가능.

11 Step 1. android sdk 설치 1. 환경설정 (2/11) android SDK 다운 및 설치  http://developer.android.com/ eclipse 다운 및 설치  http://www.eclipse.org android plugin 다운 및 설치 - https://dl-ssl.google.com/android/eclipse/  필요한 project 명 설정 안드로이드펍 커뮤니티에 자세한 설명  http://www.androidpub.com/41231

12 Step 2. android project 생성 프로젝트 명 설정 - 필요한 project 명 설정 Build Target 설정 - Android 2.2 를 설정 (Android 2.2 이상 지원 ) properties 설정 - Application name, Package name, Create Activity, Min SDK Version 을 각각 설정 1 2 3 1. 환경설정 (2/11)

13 Step 3. 프로젝트에 Hybrid Platform Library 설정 Properties 에 Libraries 설정 - 생성된 project 에 properties 에 이 동하여 제공한 Hybrid Platform Library 를 그림과 같이 추가 1 1. 환경설정 (3/11)

14 Step 4. Hybrid Platform 관련 파일 수정 3 개 부분 수정 - 생성된 project 에 좌측의 3 부분만 수정 Activity java source (Mandatory) - jar 에 있는 custom activity class 를 상속 icon 및 app 이름 수정 (Mandatory) - 원하는 icon 이미지 변경 - 사용할 Plugin 의 리소스 추가 AndroidManifest.xml (Mandatory) - internet 등을 사용하겠다는 permission 추가 - 사용할 Plugin 의 Activity 정보 추가 assets directory (Optional) - 로컬에 Mobile Web Page 를 둘 경우 사용 2 1 3 1. 환경설정 (4/11)

15 Step 4-1. MDHybridActivity 를 상속받은 Activity 를 구현 1. 환경설정 (5/11) MDHybridActivity 상속 - jar 에 포함되어 있는 MDHybridActivity 를 상속하여 native source coding 없이 쉽게 사용 override onCreate() : super class 의 onCreate() 를 먼저 호출한 뒤, URL 및 웹뷰의 LayerType 을 설정 setWebviewLayerType () : 웹뷰에 LayerType 을 설정, 미설정시 LAYER_TYPE_NONE 과 동일 - 대상 및 지원 모델 : Android 3.0 이상, Tab 10.1”, 하위버전의 경우 Layer 설정없이 무시됨. - LAYER_TYPE_NONE( 웹뷰에 레이어 설정 안함, Default value) - LAYER_TYPE_SOFTWARE( 이미지 등을 안드로이드 Software rendering pipeline 을 사용하여 렌더링함.) - LAYER_TYPE_HARDWARE( 이미지 등을 안드로이드 Hardware rendering pipeline 을 사용하여 렌더링함.) - 참고사이트 : http://developer.android.com/reference/android/view/View.htmlhttp://developer.android.com/reference/android/view/View.html 1 2 3 4 5

16 Step 4-1. MDHybridActivity 를 상속받은 Activity 를 구현 1. 환경설정 (5/11) setLoadableUrl()/setErrorUrl() - 필요한 URL 을 등록 Plugin 하고자 하는 service 를 등록 - Plugin 할 서비스를 addService() 를 사용하여 등록 1 2 3 4 5

17 Step 4-2. AndroidManifest.xml 수정 configChanges 추가 - orientation 이 전환될 경우 화면을 다시 생성하지 않겠다는 option 정의 barcode 용 activity 추가 - barcode 용 추가 activity 정의 Plugin 용 activity 추가 - 사용하고자 하는 plugin activity 정의 permission 추가 - phone, network 등 관련 API 를 사용하겠다는 permission 추가 ( 추후 다른 permission 추가 가능 ) 2 1 4 3 1. 환경설정 (6/11)

18 Step 5-1. plugin 라이브러리 추가 Plugin 라이브러리 추가 - Attachment 는 Attachment.jar, SEMPwithVPN 은 SEMPWithVPN.jar 를 각각 import 1 1. 환경설정 (8/11)

19 Step 5-2. plugin 리소스 추가 Plugin 리소스 추가 - Attachment/res 에 각각의 폴더 를 보고 복사 대상 프로젝트에 해당 리소스 폴더에 맞춰서 복사 해 줌. 복사시 기존에 있던 리소 스가 엎어쳐지지 않도록 주의 필 요. - values, values-en, values-ko 안 의 strings.xml 은 파일을 열어서 line 단위로 복사해야 함. 1. 환경설정 (9/11)

20 Step 5-3. plugin 용 Activity 추가 Plugin 용 Activity 추가 - Attachment 에서 화면을 사용하기 때문에 해당 화면의 Activity 를 프로 젝트에 추가 1. 환경설정 (10/11)

21 Step 5-4. MDHybridActivity 에 addService() 로 추가 Plugin 용 service 등록 - 추가한 Plugin 을 사용하기 위해서 service 를 등록하면 됨. 1 가상 키보드 : super.addService("VKeyboard", VKeyboard.class.getName()); 인증서 : super.addService("PublicCertificate", PublicCertificate.class.getName()); 첨부 뷰어 : super.addService("Attachment", Attachment.class.getName()); Semp : super.addService("SEMP", SEMP.class.getName()); VPN : super.addService("VPN", VPN.class.getName()); Application : super.addService("Application", Application.class.getName()); Barcode : super.addService("Barcode", Barcode.class.getName()); Push(C2DM) : super.addService("Push", Push.class.getName()); Map : super.addService(“MDHMap”, MDHMap.class.getName()); 1. 환경설정 (11/11)

22 Web Application 작성 MDHAdapter 추가 - hybrid platform API 를 사 용할 경우 MDHAdapter.js 를 추가 hybrid platform API 호출 - hybrid platform 에서 제공 하는 API 를 사용하여 필요 한 data 나 화면을 구성함 1 2 2. 개발 (1/2)

23 Web Application 결과 2. 개발 (2/2)

24 단말 또는 에뮬레이터에서 실행 실행시 단말 또는 에뮬레이터 선택 - 단말 또는 에뮬레이터를 선택 가능 1 3. 빌드, 디버깅, 배포 (1/3)

25 console.log() 를 이용하여 log 창에서 확인 console.log() 추가 - 디버깅이 필요한 부 분에 console.log() 를 추가 하여 디버깅 가능 logcat 에서 확인 - 해당 디버깅 값이 코 드의 라인값과 함께 출력 1 2 3. 빌드, 디버깅, 배포 (2/3)

26 키를 생성하고 signing 을 하여 배포 키 생성 및 signing - 디버깅 시에는 자동으로 디버그용 키가 생성되지만, 릴리즈 시에는 직접 키 처리 필요 안드로이드펍 커뮤니티에 자세한 설명  http://www.androidpub.com/4742 3. 빌드, 디버깅, 배포 (3/3)

27 1. 개발 전 준비사항 - MDM 설치 MDM 을 위해서 4 개의 APK 를 설치해야 합니다. + MDMManager.apk : 단말 종류에 상관 없이 모두 동일 + PushClientV2.apk : 단말 종류에 상관 없이 모두 동일 + MDMService.apk 및 MDMServiceMonitor.apk: 단말기 종류에 따라 설치 구분모델명최소 펌웨어 버전설치할 apk 종류 갤럭시 S M110STA13 OldSign 버전 갤럭시 K M130KEA20 OldSign 버전 갤럭시 U M130LTA20 OldSign 버전 갤럭시탭 M180SEA26 OldSign 버전 갤럭시 S2 SKT M250STF09 OldSign 버전 갤럭시 S2 KT M250KEB16 NewSign 버전 갤럭시 S2 U+ M250L 상관 없음 ( 출시 버전부터 지원 )NewSign 버전 갤럭시탭 10.1 M380S 상관없음 ( 출시 버전부터 지원 )NewSign 버전 기타 신규 출시된 갤럭 시 -- NewSign 버전 비 삼성전자 단말 --Order 버전 - MDMain 설치 Appstore 에서 App. 을 다운로드 받을 때 필요한 mdamin.apk 를 설치해야 합니다.

28 - 단말기 등록 단말기가 공통기반을 사용하기 위해서는 서버에 등록이 되어있어야 합니다. wisdom.jung@samsung.com 으로 아래 양식을 채워서 보내주시면 단말기를 등록한 뒤, 확인 메일을 보 내드리겠습니다. (2011 년 12 월 15 일 이후는 각 기관 담당자에게 신청 ) - 모바일 전자정부 설치 첨부의 통합런처 \launcher.apk 를 단말에 설치합니다. - GPKI 인증서 설치 1 단계 : ActiveX 설치 ( 첨부의 인증서 \MRSDSCTKitV30.zip 참조 ) 2 단계 : 인증서를 PC 에 설치 첨부파일의 인증서 \class2 폴더를 C:\GPKI\certificate\class2 에 복사

29 - 모바일 전자정부 실행 후 인증서 가져오기 화면 잠금 비밀번호 설정인증센터 클릭인증서 가져오기 클릭 http://www.gpki.go.kr/main/index.jsp 접속 후 관리 메뉴 클릭 인증서 관리 클릭 인증서 암호 88888888 인증 번호는 단말기의 인증번호 입력 후 내보내기 버튼 클릭 확인 버튼 클릭홈 버튼 눌러서 메인화면으로 이동

30 모바일 전자정부 실행화면잠금 비밀번호 입력 앱 실행 시 인증서 선택인증서 서명 1. VPN 연결 2. MDM 보안정책 적용 3. 인증 앱 시작 12345 67 9 앱 종료 시앱 실행 중 8 앱 실행시 initialize() 함수를 호출하면 4 번 ~ 7 번 과정이 자동으로 수행됨 앱 종료시 Finalize() 함수를 호출하면 MDM 보안정책을 해제 하고, VPN 연결을 끊은 뒤, 모바일 전자정부 화면으로 복귀됨. 앱은 VPN 연결 상태를 확인하고, connect / Disconnect 할 수 있는 API 를 활용함. 공통기반 앱 개발자가 개발해야 하는 부분 - 공통기반 App 의 Life Cycle

31 1. App. 을 시작할 때 App. 이 시작될 때 Android 에 의하여 호출되는 onCreate(); 내부에서, 공통기반 라이브러리가 제공하는 initialize() 함수를 호출하면 아래의 동작이 수행됩니다. - 악성코드 체크 - 인증서 선택 - GPKI 서명 - VPN 연결 - MDM 적용 : 기본정책 -> 보안정책으로 변경 - 인증 2. App. 이 실행 중일 때 App. 이 시작될 때 1 번 과정을 통해서 공통기반 라이브러리가 VPN 터널을 생성해 주기는 하지만, 모바일 환 경의 특성상 VPN 은 연결이 끊어질 수 있습니다. 따라서, App. 은 행망 내부와 통신하기 전에 VPN 의 연결 상 태를 확인할 필요가 있습니다. 공통기반 라이브러리에서는 VPN 의 연결 상태를 알려주고, App. 이 VPN 연 결을 connect / disconnect 할 수 있는 API 를 추가로 제공합니다. - vpnIsConnected();VPN 의 연결 여부를 반환 - vpnConnect();VPN 연결 - vpnDisconnect();VPN 연결 해제 3. App. 을 종료할 때 App. 이 종료될 때 Android 에 의해서 호출되는 onDestory(); 내부에서, 공통기반 라이브러리가 제공하는 finalize() 함수를 호출하면, 아래의 동작이 자동으로 수행됩니다. - MDM 해제 : 보안정책 -> 기본정책으로 변경 - VPN 연결 해제

32 1. App. 을 시작할 때 1) 배포한 Gov.jar 파일을 library 에 추가 2) Android 프로젝트 생성 3) onCreate() 에 아래의 코드 작성 4) onActivityResult() 에 아래의 코드 작성 private GovController m_controller; private static final int ACTIVITY_LAUNCHER_INIT = 1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); m_controller = GovController.getInstance(this); // 공통기반 서비스 시작 m_controller.bindService(); // 공통기반 초기화 수행 GovController.startGovActivityForResult(this, ACTIVITY_LAUNCHER_INIT); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent intent) { super.onActivityResult(requestCode, resultCode, intent); if (null != intent) { switch (requestCode) { case ACTIVITY_LAUNCHER_INIT: if (Activity.RESULT_OK == resultCode) { // TODO 초기화 성공. 계속 진행 setLoadableUrl(“file://….html”); } else { // 초기화 실패. 종료 finish(); } break; default: finish(); break; }

33 2. Hybrid platform 에서 VPN 라이브러리 호출하는 방법 1) 공통기반 플러그인 추가 SEMP Broker 와 같은 플러그인을 추가하는 것과 마찬가지 방법으로 Gov 클래스를 플러그인으로 추가합니다. ( 플러그인 추가에 대한 자세한 내용은 Hybrid platform User Guide ppt 문서 참조 ) super.addService("Gov", Gov.class.getName()); 3) VPN 관련 Hybrid API 를 호출. HybridPlatform_API_Guide.html 문서에 나와 있는 VPN API 를 호출해서 사용합니다. ( 자세한 사용법과 예제는 Hybrid platform API 문서를 참조 ) - MDHBasic.VPN.connect(successCallback, errorCallback); - MDHBasic.VPN.disconnect(successCallback, errorCallback); - MDHBasic.VPN.IsConnected(successCallback, errorCallback); 2) gov.js 파일을 추가 MDHAdapter.js 아래에 첨부한 gov.js 를 추가합니다. ( 자세한 내용은 Hybrid platform User Guide ppat 문서 참조 ) …( 생략 ) …( 생략 )

34 3. App 을 종료할 때 1) onDestory() 에 아래의 코드 작성 @Override protected void onDestroy() { super.onDestroy(); GovController.getInstance(this).unBindService(); }

35  웹개발 시 (Chrome, Safari) : F12 를 눌러 개발자도구 실행 활용.  이클립스 DDMS perspective 의 Logcat 활용.

36  중계서버에서 Cookie 의 SESSION ID 를 차단하므 로 서버세션은 사용할 수 없다.  앱별로 WAS 단에서 하나의 URL 만 맵핑 사용 가능.  보안 정책에 따라 USB 디버깅을 사용하지 못할 수 있다.  개발정책 ◦ 웹소스는 앱에 패키지하여야 함 ( 네트워크상의 URL 금지 ). ◦ apk 를 통한 앱 설치 금지 ( 행정용 앱스토어를 통해서만 다운로드 ).

37