[uengine.org-uengine day] 스마트폰과bpm의만남:프로세스터치프로젝트발표자료

Process Touch(모바읷 앱)개발을 위한 최적의 기술

유엔짂 오픈소스 프로젝트2010년 11월 03일김보상 책임 커미터bskim@uengine.org

Contents

1 How to develop a mobile app?

2 Mobile web standard

3 Hybrid development toolkit

4 Conclusion

5 Process Touch

모바일 앱 개발에 대한 고민

How to develop a mobile app?

or

모바일OS 별 점유율 추이

※ 출처: http://metrics.admob.com/2010/06

How to develop a mobile app?

모바일 웹은 한번 개발로 여러 플랫폼에서 사용 가능!

※ 출처: 모비젞 허광남 팀장

플랫폼 별 개발특성 비교

How to develop a mobile app?

Palm Pre WEBOS

※WebKit : 웹 브라우저를 만드는 기반을 제공하는 오픈소스 응용프로그램 프레임워크

모바일 웹 브라우저는 대부분이 Webkit을 지원

스마트폰의 공통점

How to develop a mobile app?

1. 플랫폼에 독립 된 앱를 만들려면 Webkit 기반의 웹 앱으로 개발.

2. 웹 앱에서 다양한 모바일 디바이스들의 제어 방법?

3. 웹 페이지 로딩 속도 개선 방안?

How to develop a mobile app?

WEB, 그리고 남은 숙제

Contents

1 How to develop a mobile app?

2 Mobile web standard

3 Hybrid development toolkit

4 Conclusion

5 Process Touch

Mobile web standard

Adobe-flash support for iPhone

Adobe Flash CS 5에 포함된 iPhone 용 앱 패키지를 통하여 포팅된 아이폰 앱그러나 애플은 이렇게 개발된 앱을 앱스토어에서 승읶하지 않도록 정책을 바꾸었다.

지난 4월 20일, Adobe on Tuesday evening said it is ceasing investment in a software tool that enables Flash develop

ers to port software into native iPhone and iPad apps, according to Mike Chambers, Adobe’s principal product manag

er for Flash developer relations. --wired.com

애플의 변 - “Someone has it backwards-- it is HTML5, CSS, JavaScript and H.264 (all supported by the iPhone and iPa

d) that are open and standard, while Adobe’s Flash is closed and proprietary, an Apple representative said in a statem

ent provided to CNET.

Mobile web standard

Adobe-flash support for iPhone

Mobile web standard

모바일 웹 표준 관계도

※HTML5 : 웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로 모든 브라우저 벤더가 참여하고 있는 산업 표준.※출처 : 실젂 HTML5 가이드

Mobile web standard

W3C의 HTML5 배경

리치 웹 미디어

편리한 폼 기능

확장 된 태그

※출처 : 실젂 HTML5 가이드

Mobile web standard

W3C의 HTML5 특징

※출처 : 실젂 HTML5 가이드

모바일 네트워크 특성- 네트워크에 항시 연결되어있지 않은 WIFI 젂용기기( iPod Touch , iPad ) 들도 있다.- 네트워크 트래픽을 최소화 하는 것이 아주 중요하다.

오프라읶 기능과 로컬 DB의 지원은 웹서버와 독립 된 web app이 가능해짐.

<일반 웹 아키텍처>

<모바일 웹 아키텍처>

Mobile web standard

W3C의 HTML5와 모바일

1. 모바일을 위해서 HTML5에서 특화 된 기능- Offline 지원 : LocalStorage , Web Database , App Cache- 미디어 처리 : Video , Audio , Canvas- 입력 지원 : Advanced Forms- 위치 정보 : GeoLocation ( 연계표준 )

2. HTML5 의 스펙 중 아직 주요 브라우저에서 지원되지 않는 기능.- WebSocket- FileReader- IndexedDB- Web Workers

Mobile web standard

W3C의 HTML5와 모바일

W3C DAP은 HTML5와 함께 모바일 단말에서 단일한 방식으로 모바일 앱의 다양한 표현과기기 접근을 가능하게 할 가장 중요한 두 가지 표준(표준화가 아주 기초 단계)

Mobile web standard

W3C의 Device APIs(DAP)

BONDI initiative 는 2008년 OMTP 멤버쉽에 의하여 탄생했으며 웹앱과 플랫폼 갂 인터페이스를 정의하며 W3C의 DAP와 통합 될 계획.(별도로 웹 플랫폼을 설치해야 웹 어플리케이션이 구동이 가능)

Mobile web standard

OMPT의 BONDI

1. 웹 표준과 모바일 지원기능 사용을 위해서는 HTML5을 적용해야 함.

2. 디바이스 표준에 의한 단말기 통합 접근(Top-down 방식)은 시기상조.

Mobile web standard

모바일 웹 표준의 고찰

Contents

1 How to develop a mobile app?

2 Mobile web standard

3 Hybrid development toolkit

4 Conclusion

5 Process Touch

스마트폰 OS 브라우저들의 Interface를 이용하여 단말의 기능들을 HTML+Javascript만으로 이용할 수 있도록 해주는 하이브리드앱(Web+App) 오픈소스 프레임워크이다.

Hybrid development toolkit

Phonegap의 소개

Hybrid development toolkit

Phonegap의 로드맵

‘WWW’ 폴더 내에 웹 소스를 모두 넣고 어플리케이션을 만들기 때문에 실행 시에 웹이단말기 로컬에서 웹페이지가 실행된다.

Android(eclipse) iPhone(Xcode)

Hybrid development toolkit

Phonegap의 웹페이지 실행

Contact

LBS(???)

Accelerator

DeviceProfile

FileSystem

Application

written in

PhoneGap

JS API

phonegap Native

URLchangeevent

WebKit Browser

PhoneGap Native app

MobileWebApp.(JS)

• Phonegap android ver.

• Phonegap iphone ver.• Phonegap winMo ver.

• Performance with AJAX - UI & Data Separation JSON,XML• Vector Graphic with SVG – raphael + mobile ok Guidelines• UX – native like

①

②

③Device

• iPhone• Android• WinMo

•

•

① URL change event방식(iPhone & WinMo)gap://beep(5)

② Javascript & JAVA obj mapping (Android)

Hybrid development toolkit

Phonegap의 구조

Web page (html)

UIWebkitPhonegapDelegate

Sound Device …..

PhoneGap <iphone><Command>

beep 버튺클릭

LoadWithRequest

execute()

beep(2);

Hybrid development toolkit

Phonegap의 동작

웹 앱을 기반으로 Webkit 브라우저에 내장시켜 보여주는 방식이 아닌 실제 각 플랫폼별 Native App을 생성시켜주는 부분에서 Phonegap과 큰 차이가 있다. (루비와 루비젬스에 익숙해야 사용가능)

Hybrid development toolkit

Rhomobile의 소개

장 점 단 점

Native - 각 플랫폼에서 제공하는 모든 기능을홗용할 수 있다.- 화면 랜더링 속도가 빠르다.

-다른 플랫폼에서 사용 할 수 없다.-개발언어에 제약을 받는다.

Web - 개발이 용이하다.- 모든 플랫폼에서 사용 가능.

- 모든 정보를 웹 서버에서 다운로드를 받아야 한다.(속도, 네트워크)-디바이스 제어가 힘들다.

Hybrid(native +web)

- 웹 개발방식으로 개발하고 모바일 디바이스 제어 가능.- 모든 플랫폼에서 사용 가능.

- 초기 개발홖경 구축 비용.

모바일 앱 개발 방법 비교

Hybrid development toolkit

웹 앱에서 다양한 모바일 디바이스들의 제어 방법?1. Webkit 기반의 PhoneGap으로 단말기 통합 접근(Bottom-up)이 해결법.

Hybrid development toolkit

웹 앱의 디바이스 제어와 로딩 속도

PhoneGap

Ajax

모바일

Json type의 data

서버

네트워크

웹 페이지 로딩 속도 개선 방안?1. PhoneGap은 웹페이지를 로컬에서 실행하기 때문에 화면 로딩 시 일반 웹처럼 HTML 소

스를 네트워크를 통하여 가져올 필요가 없다.2. Ajax를 통하여 UI와 Data를 분리한다.3. 가볍고 사용하기 편한 Json을 사용한다.

Contents

1 How to develop a mobile app?

2 Mobile web standard

3 Hybrid development toolkit

4 Conclusion

5 Process Touch

1. Webkit : 대부분의 단말기 웹브라우저에서 지원하는 플랫폼.

2. HTML5 : 웹 표준, 모바일 지원 기능과 리치 웹 미디어 .

3. PhoneGap : Webkit 기반에 다양한 단말기 디바이스 제어 가능하며 웹페이지 로컬 실행.

4. Ajax : 웹 페이지 로딩 속도를 위한 UI와 data 갂 분리.

5. Json : Ajax의 data의 경량화

Conclusion

모바일 웹 앱 개발을 위한 기술정리

Conclusion

결롞

…WM

DeviceAndroidDevice

iPhoneDevice

PhoneGap

Webkit

HTML5

Ajax Json

플랫폼에 독립적읶 모바읷 앱을 개발하기 최적의 아키텍처

Contents

1 How to develop a mobile app?

2 Mobile web standard

3 Hybrid development toolkit

4 Conclusion

5 Process Touch

• 프로세스 시작 시점의 연결회의 시 가장 홗용성이 높은 모바일 단말(아이폰,안드로이드폰 등)을 홗용하여 LBS와 카메라, 녹음기를 이용하여 참석자 및 회의내용을 기록하여 프로세스의 시작을 암시하는 회의 내용을 젂자화함

• 프로세스의 Traceability를 강화회의 후 회의내용 정리 및 배포를 짂행하고, 회의 내용에 따른 후속 업무와의 연계를 BPM 시스템으로 지원하여 Notification 과 업무확인 및 모니터링의 즉시성을 제공하여 후속업무의 Traceability를 높임

• 오프라읶 업무와의 연계성 강화모바일 홖경 단독으로 처리하기 보다는 기존 시스템과의 연계를 통하여 다양한 시너지를 발행할 수 있으며연계방안은 프로세스 기반의 시스템 홖경이 효율적으로 적용 가능함

모바읷 기반 회의관리 및BPMS의 프로세스와 연계

ProcessTouch

Page 32

회의시갂(타임아웃)설정

회의 녹취 및 사짂첨부, 노트 기능

이슈 발행(프로세스 개시) 기능

워크리스트 확인및 업무 노티 기능

프로세스 모니터링 기능

Process Touch

Introduce

Edited from Oracle Source

Off-line

online

프로세스의 시작(이슈의 발생)

현장직(상황읶지)

팀장/의사결정자(회의실)

현장 담당자

Scenario

Process Touch

Nice mobile web apps

웹 언어를 통한디바이스접근

네트워크 성능최적화

렌더링 속도 리치한 표현

PhoneGap

Webkit

Ajax

JQuery

JsonJQtouch-likeframework

HTML5

Platform and Framework

Process Touch

회의 관리

음성 녹취회의시갂 설정 및완료시갂 알람

참석자자동인식

회의자료첨부

PhoneGap JQuery Ajax

Process Touch

프로세스시작

Nice mobile web app

BPM Client

네비게이터인스턴스리스트

워크아이템핸들러

Functions

Process Touch

Community

Process Touch

http://phonegap.pe.kr

감사합니다