10. 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.
14. Mobile web standard
W3C의 HTML5와 모바일
모바일 네트워크 특성
- 네트워크에 항시 연결되어있지 않은 WIFI 젂용기기( iPod Touch , iPad ) 들도 있다.
- 네트워크 트래픽을 최소화 하는 것이 아주 중요하다.
오프라읶 기능과 로컬 DB의 지원은 웹서버
와 독립 된 web app이 가능해짐.
<일반 웹 아키텍처>
<모바일 웹 아키텍처>
※출처 : 실젂 HTML5 가이드
15. 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
16. Mobile web standard
W3C의 Device APIs(DAP)
W3C DAP은 HTML5와 함께 모바일 단말에서 단일한 방식으로 모바일 앱의 다양한 표현과
기기 접근을 가능하게 할 가장 중요한 두 가지 표준
(표준화가 아주 기초 단계)
17. Mobile web standard
OMPT의 BONDI
BONDI initiative 는 2008년 OMTP 멤버쉽에 의하여 탄생했으며 웹앱과 플랫폼 갂 인터페
이스를 정의하며 W3C의 DAP와 통합 될 계획.
(별도로 웹 플랫폼을 설치해야 웹 어플리케이션이 구동이 가능)
18. Mobile web standard
모바일 웹 표준의 고찰
1. 웹 표준과 모바일 지원기능 사용을 위해서는 HTML5을 적용해야 함.
2. 디바이스 표준에 의한 단말기 통합 접근(Top-down 방식)은 시기상조.
19. Contents
1 How to develop a mobile app?
2 Mobile web standard
3 Hybrid development toolkit
4 Conclusion
5 Process Touch
22. Hybrid development toolkit
Phonegap의 웹페이지 실행
‘WWW’ 폴더 내에 웹 소스를 모두 넣고 어플리케이션을 만들기 때문에 실행 시에 웹이
단말기 로컬에서 웹페이지가 실행된다.
Android(eclipse) iPhone(Xcode)
23. Hybrid development toolkit
Phonegap의 구조
• Phonegap android
PhoneGap Native app ver.
• Phonegap iphone ver.
• Phonegap winMo ver.
Device
Contact
Profile
phonegap
Native
File LBS
WebKit System (???)
① URL change event방식
Browser (iPhone & WinMo)
gap://beep(5)
Accelerator
② Javascript & JAVA obj mapping
Application URL (Android)
written in change
event • iPhone
PhoneGap ③ • Android
Device • WinMo
JS API
•
•
①
• Performance with AJAX - UI & Data Separation JSON,XML
MobileWebApp. • Vector Graphic with SVG – raphael + mobile ok Guidelines
(JS) • UX – native like ②
24. Hybrid development toolkit
Phonegap의 동작
PhoneGap <iphone>
<Command>
Web page Phonegap
UIWebkit Sound Device …..
(html) Delegate
beep 버튺클릭
beep(2);
Load
WithRequest
execute()
25. Hybrid development toolkit
Rhomobile의 소개
웹 앱을 기반으로 Webkit 브라우저에 내장시켜 보여주는 방식이 아닌 실제 각 플랫폼
별 Native App을 생성시켜주는 부분에서 Phonegap과 큰 차이가 있다.
(루비와 루비젬스에 익숙해야 사용가능)
26. Hybrid development toolkit
모바일 앱 개발 방법 비교
장점 단점
Native - 각 플랫폼에서 제공하는 모든 기능을 -다른 플랫폼에서 사용 할 수 없다.
홗용할 수 있다. -개발언어에 제약을 받는다.
- 화면 랜더링 속도가 빠르다.
Web - 개발이 용이하다. - 모든 정보를 웹 서버에서 다운로드
- 모든 플랫폼에서 사용 가능. 를 받아야 한다.(속도, 네트워크)
-디바이스 제어가 힘들다.
Hybrid - 웹 개발방식으로 개발하고 모바일 디바 - 초기 개발홖경 구축 비용.
(native +web) 이스 제어 가능.
- 모든 플랫폼에서 사용 가능.
27. Hybrid development toolkit
웹 앱의 디바이스 제어와 로딩 속도
웹 앱에서 다양한 모바일 디바이스들의 제어 방법?
1. Webkit 기반의 PhoneGap으로 단말기 통합 접근(Bottom-up)이 해결법.
웹 페이지 로딩 속도 개선 방안?
1. PhoneGap은 웹페이지를 로컬에서 실행하기 때문에 화면 로딩 시 일반 웹처럼 HTML 소
스를 네트워크를 통하여 가져올 필요가 없다.
2. Ajax를 통하여 UI와 Data를 분리한다.
3. 가볍고 사용하기 편한 Json을 사용한다.
모바일 서버
네트워크
Ajax Json type의 data
PhoneGap
28. Contents
1 How to develop a mobile app?
2 Mobile web standard
3 Hybrid development toolkit
4 Conclusion
5 Process Touch
29. Conclusion
모바일 웹 앱 개발을 위한 기술정리
1. Webkit : 대부분의 단말기 웹브라우저에서 지원하는 플랫폼.
2. HTML5 : 웹 표준, 모바일 지원 기능과 리치 웹 미디어 .
3. PhoneGap : Webkit 기반에 다양한 단말기 디바이스 제어 가능하며 웹페
이지 로컬 실행.
4. Ajax : 웹 페이지 로딩 속도를 위한 UI와 data 갂 분리.
5. Json : Ajax의 data의 경량화
31. Contents
1 How to develop a mobile app?
2 Mobile web standard
3 Hybrid development toolkit
4 Conclusion
5 Process Touch
32. Process Touch
Introduce
워크리스트 확인 프로세스 모니터
및 업무 노티 기능 링 기능
Process 모바읷 기반 회의관리 및
Touch BPMS의 프로세스와 연계
• 프로세스 시작 시점의 연결
회의 시 가장 홗용성이 높은 모바일 단말(아이폰,안드
로이드폰 등)을 홗용하여 LBS와 카메라, 녹음기를 이용
하여 참석자 및 회의내용을 기록하여 프로세스의 시작
을 암시하는 회의 내용을 젂자화함
회의시갂 회의 녹취 및 사짂 이슈 발행(프로세 • 프로세스의 Traceability를 강화
(타임아웃)설정 첨부, 노트 기능 스 개시) 기능 회의 후 회의내용 정리 및 배포를 짂행하고, 회의 내용
에 따른 후속 업무와의 연계를 BPM 시스템으로 지원
하여 Notification 과 업무확인 및 모니터링의 즉시성
을 제공하여 후속업무의 Traceability를 높임
• 오프라읶 업무와의 연계성 강화
모바일 홖경 단독으로 처리하기 보다는 기존 시스템과
의 연계를 통하여 다양한 시너지를 발행할 수 있으며
연계방안은 프로세스 기반의 시스템 홖경이 효율적으
로 적용 가능함
Page 32
33. Process Touch
Scenario
online
프로세스의 시작 현장직
(이슈의 발생) (상황읶지)
Off-line
팀장/의사결정자 현장 담당자
(회의실) Edited from Oracle Source
34. Process Touch
Platform and Framework
Nice mobile web apps
웹 언어를 통한 네트워크 성능
렌더링 속도 리치한 표현
디바이스접근 최적화
JQtouch-like
PhoneGap Json Ajax
framework
Webkit JQuery HTML5
35. Process Touch
Functions
Nice mobile web app
Process Touch
회의 관리 BPM Client
참석자 회의자료 회의시갂 설정 및 프로세스 인스턴스 워크아이템
음성 녹취 네비게이터
자동인식 첨부 완료시갂 알람 시작 리스트 핸들러
PhoneGap JQuery Ajax
