[uengine.org-uengine day] 스마트폰과bpm의만남:프로세스터치프로젝트발표자료
DESCRIPTION
TRANSCRIPT
Process Touch(모바읷 앱)개발을 위한 최적의 기술
유엔짂 오픈소스 프로젝트2010년 11월 03일김보상 책임 커미터[email protected]
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
감사합니다