모바일 전자정부 프레임워크로 하이브리드앱 개발하기 (65차 기술 세미나)

모바일 전자정부 프레임워크로 하이브리드앱 개발하기 (65차 기술 세미나)

내용 요약

1. 하이브리드앱

표준 프레임워크에서 모바일 디바이스 API 개발도구 + 모바일 디바이스 API 실행환경 이 있으면 하이브리드앱을 만들 수 있다.

2. 하이브리드 프레임워크 구성 및 빌드방식

웹기술 (HTML5, CSS3, javascript) + 하이브리드 (Cordova) + 개발툴 (Xcode, Eclipse, Android Studio )

==build==> apk, ipa 패키지 ==market==> 앱스토어

3. 전자정부 디바이스 API 실행환경

기존 모바일 어플리케이션 개발환경에서 Plug-in 형태로 구현되어 있는 디바이스 API를 추가하여 모바일 하이브리드 어플리케이션을 구현하는 방식이다.

4. 전자정부 디바이스 API(하이브리드) 특징

- 기본 플러그인 및 Web 리소스 및 디바이스 고유기능 호출을 위한 native code 및 javascript code 제공

- 10종의 오픈 소스 디바이스 API 제공

- cordova 공식 홈페이지 및 구글링을 통한 확장가능 (http://cordova.apache.org )

- CLI (Command Line Interface, nodejs의 npm툴 사용)를 통한 플러그인 관리

5. 전자정부 디바이스 API 실행환경 구성

6. 디바이스 API 아키텍쳐 구조

- Web Resource : Cordova javascript plugin 있음

- Native Code : Cordova Native plugin 있음

이 plugin이 웹과 단말의 인터페이스를 담당함

7. Single Page Application

- 한페이지내에서 화면단위로 이동하여 처리, 업무단위로 여러개의 화면을 포함

- AJAX를 사용하여 저장

- 페이지 전환이 없음

- device api 화면 구성 방식

8. Single Page Application 메모리 관리

- 비권장: 

var mydata = "test data";

function myfunc(param1, data1){...}

- 권장(객체사용):

var myPage = {};

myPage.mydata = "test data";

myPage.myfunc = function(param1, data1){ ... }

- 페이지전환후 초기화시에 myPage = {}; 이 구동되어 function 및 변수가 일괄 초기화 될 수 있도록 한다.

9. 테마롤러

- jquery mobile UX 스타일 쉽게 변경하기

- http://themeroller.jquerymobile.com

10. www.w3schools.com 활용

- html, css, javascript, jquery 등 정보보고 테스트 가능

11. Device API 준비 (교육용 개발환경, 안드로이드 환경)

- 교육용 개발환경을 다운로드 받으면 안드로이드 개발환경과 DB환경등이 이미 설정되어 있어 편리

- www.egovframe.go.kr

- 개발자지원 > 교육자료 이동

- 3번게시물 표준프레임워크 개발자 교육 교재 및 실습(V3.5.1)을 다운로드하여 C:\에 압축을 푼다

  안드로이드 SDK 및 시뮬레이터가 내장, 2G이상

- eGovFrame-3.5.1.exe를 실행하면 자동으로 압축이 풀리고 eGovframe-3.5.1 디렉토리 생성

- Eclipse 구동

12. DeviceAPI 실행프로젝트

- www.egovframe.go.kr 접속

- 다운로드 > 모바일 디바이스 API > 가이드프로그램 이동

- 안드로이드 또는 아이폰용 샘플을 다운로드

- 안드로이드용은 eclipse 사용하여 오픈

- iOS 아이폰용은 맥OS에서 Xcode를 사용하여 오픈

- 안드로이드용은 선택사항(전자정부 개발환경에 포함되어 있음)

13. DeviceAPI 안드로이드 프로젝트 구동하기

- DeviceAPI Project의 serverinfo.xml 파일의 SERVER_URL 값을 설정

- Tomcat Server에  프로젝트 추가하고 서버 실행

- 안드로이드 시뮬레이터 구동 (java 퍼스펙티브로 변경후)

- 시뮬레이터는 원격디버깅 필요시 4.4 이상을 선택

- 시뮬레이터 빌드, Run As > Android Application

  오류나면, 

  프로젝트 Properties 선택

  Java Build Path > Order and Export 선택

  모두선택 후 OK 버튼 클릭

  Project 메뉴 > Clean 실행

  Run As > Android Application 재구동

- 시뮬레이터와 서버의 연동 확인, 정보업로드 버튼을 누를때

14. DeviceAPI 아이폰 프로젝트 구동하기(맥OS 사용필요)

- www.egovframe.go.kr 접속

- 다운로드 > 모바일디바이스API > 가이드프로그램 > 가이드프로그램 Version 3.5 선택후 목록에서 iOS용을 다운로드, DeviceInfo API가이드 다운로드

- 샘플 프로젝트 다운로드하면 확장자에 .exe가 붙어있다. .exe를 삭제하여 .zip으로 설정한 후 압축을 해제한다.

- DeviceInfoGuide.xcodeproj 더블클릭하여 Xcode 자동실행

- eGovModule > EGovComModule.h 헤더파일의 서버설정 주소를 로컬환경에 맞게 수정

  맥OS의 응용프로그램 > 유틸리티 > 콘솔에서 ipconfig 명령으로 로컬IP확인 가능

- iOS 시뮬레이터 선택, iPhone 5 정도가 적당

- Build & run ( ▶ ) 버튼을 누르면 빌드 및 실행이 일괄로 이루어진다.

15. 하이브리드앱 디버깅

- javascript에서 concole.log("test")를 찍으면 Xcode 디버그 창에서 확인이 가능

- javascript에서 concole.log("test")를 찍으면 Eclipse에서 확인이 가능

16. 아이폰 원격 디버깅

- iOS 5.0 이상에서 구동 가능

- 아이팟터치 3세대 이상 가능

- iOS 시뮬레이터의 원격디버깅이 가능하도록, 설정앱에서 Safari > Advanced > Web Inspector 항목을 ON으로 설정

- 맥OS의 사파리 브라우저 환경설정 > 고급 > 매뉴막대에서 개발자용 메뉴보기를 선택하여 활성화한다

- Xcode에서 필요한 js파일의 필요한곳에 "debugger"라는 구문을 추가하고 앱을 기동한다.

- 앱이 실행된것을 확인한 후 사파리 브라우저에서 개발자 > Simulator > 실행 웹파일을 선택한다. 시뮬레이터뿐만아니라 실제 폰에서도 가능하다.

-  "debugger"라는 구문을 만나면 앱 실행이 정지한다. 스텝별로 실행하거나 별도 명령어를 입력하여 디버깅할 수 있다. ex) device.version

17. 안드로이드 원격 디버깅

- Android v4.4(킷캣)이상에서 구동 가능하다.

- 시뮬레이터 구동시 4.4 이상으로 맞추고 구동한다.

- 안드로이드 시뮬레이터의 원격디버깅이 가능하도록 설정앱에서 Developer option > USB debugging 항목을 세팅한다.

- Eclipse에서 필요한 js파일의 필요한곳에 "debugger"라는 구문을 추가하고 앱을 기동한다.

- 앱이 실행된것을 확인한 후 크롬브라우저에서 crome://inspect 라고 입력하고 엔터를 친다.

- 구동중인 앱 목록이 보이면 정상이다. Inspect를 클릭하면 원격디버깅이 시작된다.

- "debugger"라는 구문을 만나면 앱 실행이 정지한다. 스텝별로 실행하거나 별도 명령어를 입력하여 디버깅할 수 있다. ex) device.version

18. iOS 커스텀 플러그인

- 가이드 샘플 다운로드 : egovframe.go.kr > 다운로드 > 모바일디바이스API > 실행환경 > iOS Version 3.5 다운로드

- 맥OS에서 iOS용 실행환경을 다운로드 한 후 압축을 풀고 xcodeproj 파일을 실행한다.

- Accets/config.xml에는 플러그인 설정의 집합체이다. Custom plugin을 추가하고 설정한다. name값을 javascript에 주입될 객체의 명칭이다.

   ex) <feature name="CustomMyPlugin">

<param name="ios-package" value="CDVCustom"/>

  </feature>

- Xcode에서는 .h 헤더파일과 .m 구현파일이 존재한다. CDVPlugin을 상속받는다.

   ex) eGovPlugins/CDVCustom.h : @interface CDVCustom : CDVPlugin

-  Xcode에서 .m에 실재 커스텀 기능을 구현한다.

   ex) eGovPlugins/CDVCustom.m : @implementation CDVCustom

- Xcode에서 CustomMyPlugin 클래스와 바인딩될 javascript 객체와 추가 코드를 정의한다.

   ex) Assets/www/custom.js

19. Android 커스텀 플러그인

- 가이드 샘플 다운로드 : egovframe.go.kr > 다운로드 > 모바일디바이스API > 실행환경 > Android Version 3.5 다운로드

- Eclipse에서 New > Import를 선택한 후, Android > Existing Android Code into Workspace를 선택한 후 압축을 푼 프로젝트를 오픈한다.

- res/xml/config.xml에는 플러그인 설정의 집합체이다. Custom plugin을 추가하고 설정한다. name값을 javascript에 주입될 객체의 명칭이다.

   ex) <feature name="CustomMyPlugin">

<param name="android-package" value="kr.go.egovframework.hyb.plugin.CustomPlugin"/>

  </feature>

- Eclipse에서 커스텀 Plugin은 CordovaPlugin을 상속받아서 구현되어야 한다.

  ex) src/kr.go.egovframework.hyb.plugin/CustomPlugin.java : public class CustomPlugin extends CordovaPlugin {

- CustomMyPlugin 클래스와 바인딩될 javascript 객체와 추가 코드를 정의한다.

  ex) accets/www/js/custom.js

발표자료 : http://open.egovframe.go.kr/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000015&nttId=17549

모바일전자정부프레임워크로하이브리드앱쉽게개발하기_20160222(최종).pdf

동영상 : http://olc.kr/course/course_online_view.jsp?id=10063&cid=531