Hybrid Platform – HyWAI 3.5

ETRI 창의미래연구소 표준연구센터서비스표준연구실

전종홍

Hybrid Web Application Interface

3

Introduction

q HyWAI is an HTML5 based Hybrid Web Application platform that allows you to author native applications with web technologies and get access to APIs and app stores.

q HyWAI leverages web technologies developers already know best... HTML and JavaScript.

......

GPS

Contacts

Phone Call

Gallery

…

Internet

4

Historyq Version 0.5 (Dec 2009)

§ Support iOS 2.x, Android 1.x § Considering interoperable with W3C Device APIs

q Version 1.0 (Dec 2010)§ Support iOS 3.x, Android 2.x

q Version 2.0 (Dec 2011)§ Support iOS 5.x, Android 4.x§ Implemented NFC API

q Version 2.1 (Dec 2012) § Support iOS 6.x, Android 4.x§ Implemented NFC API, File API, Sensor API, Remote Access,

q Version 3.0 (Dec 2013) § Support iOS 7.x, Android 4.x § Partiality implemented Bluetooth API, WiFi API, Web of Things features

q Version 3.5 (Dec 2014) § Support iOS 8.x, Android 4.x§ Full Restructuring, Web Bluetooth API § Considering browser based APIs

5

Native App vs. Web App

Native App

Web App

Web page

NativeWeb App

Hybrid Web App(Cross Platform)

Multi-platform support

6

Introduction - How HyWAI Works

qBuild your app once with web-standards§ Based on HTML5, HyWAI leverages web technologies

developers already know best... HTML and JavaScript.

qWrap it with HyWAI§ Using HyWAI or the free open source framework(e.g:

PhoneGap, Appspresso) build you can get access to native APIs.

qDeploy to multiple platforms!§ HyWAI uses standards-based web technologies to bridge web

applications and mobile devices.

7

Smart Phone

HyWAI Native AppHyWAI Native App

Web BrowserWeb Browser

HTML page

CSS

Javascript

HyWAI APIs

Native ApplicationCreated using the

Android SDK or Xcode.Automated using HyWAI

Native ApplicationCreated using the

Android SDK or Xcode.Automated using HyWAI

Web BrowserWebkit on iPhone or

Android

Web BrowserWebkit on iPhone or

Android

Javascript & CSSSencha, jQueryMobile, jQTouch

HyWAI provide system APIs for access to native

features. Also it can be use to external UI

frameworks to provide better UX.

Javascript & CSSSencha, jQueryMobile, jQTouch

HyWAI provide system APIs for access to native

features. Also it can be use to external UI

frameworks to provide better UX.

App Store

Open API MashupExternal Open APIs(e.g: Google Maps, Twitter, Facebook…)

Open API MashupExternal Open APIs(e.g: Google Maps, Twitter, Facebook…)

HyWAI Technology

8

HyWAI 2.1

Web ApplicationWeb Application

WebServerWebServer

HyWAI API (Java Script)HyWAI API (Java Script)

HyWAI BrokerHyWAI Broker

Native APINative API

Sync Process

AsyncProcess

Ajax (Async)Ajax (Sync)

Notification

Ajax (Async)

9

HyWAI APIs

• applauncher• calendar• contact• file• gallery• mediacapture• messaging

• nfc• sensor• sysinfo• task• telephony• ui• util

http://www.w3c.or.kr/hywai/api/

10

HyWAI 3.5

q Latest Platform support § iOS 8.X§ Android 4.X

q Refactoringq Web Bluetooth API support

11

Android, iOS, Web 프로젝트 구성기존 HyWAI 프로젝트 구성 새로운 HyWAI 프로젝트 구성

Android

- Jar 파일 형태로 라이브러리 구성- Jar를 기존 샘플 프로젝트에서 생성하도록 되어

있음

- AAR (Android ARchieve) 파일 형태로 라이브러리 구성

- AAR 을 빌드 할 수 있는 Module과 샘플프로젝트를 빌드 하는 Module이 구별되어 있음

- Gradle을 통하여 빌드정보를 관리함.

iOS

- .a (Archive) 파일 형태로 빌드하기 위한 별도 프로젝트 라이브러리 구성

- HyWAI iOS 라이브러리를 사용하기 위해 개발자가 .a 및 .h 파일을 알맞게 가져와 사용해야 함.

- framework 파일형태로 프로젝트 라이브러리 구성

- 빌드 된 framework 파일은 .a 및 .h를 모두 포함하는 형태이므로 개발자는framework 파일을 프로젝트 설정에 추가하는 것으로 HyWAI 사용 가능.

Web

- jQuery Mobile로 만들어진 샘플 프로젝트 소스와명확히 구분되지 못하고 있음

- HTML, CSS, JS, Image 등 정적 파일이 모두 압축되지 않은 형태임

- Lint 등 기본적인 코드 구성 확인에 대한 도구가없어 디버깅 시 Native 프로젝트에 포함 시켜 확인해야 함.

- Yeoman을 이용한 빌드 구성> yo : 프로젝트 생성(스캐폴딩)> grunt : 태스크 자동화> bower : JS 라이브러리 관리

- Angular.JS를 이용하여 샘플 프로젝트를구현하였지만 모듈을 명확히 분리하여 다른 framework에서도 동작 용이

- grunt를 이용하여 JS Lint/ 빌드/ 테스트/ 문서생성 태스크를 자동화

12

Android Project기존 HyWAI 새로운 HyWAI

구성

설명

- 위 스크린 샷은 기존 프로젝트를 현재 버전의Android Studio(1.0 RC)에서 import 하였을 때 프로젝트 구성이다.

- app/src/main/java 폴더에 라이브러리 및 샘플 프로젝트 구별 없이 java 소스가 구성되어 있다. Jar 생성을 위해서는 java 폴더내의 소스 중 라이브러리 관련 소스만 분리하여 jar export를 수행해야 한다.

- assets/ 폴더에 html, css, js, image 등 웹용 리소스파일이 위치하고 있다.

- Gradle 파일은 import 시 구성되었으나 프로젝트의여러 곳에 혼재되어 존재 한다.

- app / hywai / Gradle Scripts 형태로 구성된다.> app : 샘플 프로젝트를 생성하기 위한 모듈

> hywai : AAR을 생성하기 위한 모듈è hywai 모듈을 빌드 하는 것으로 AAR 파일 생성

가능

> Gradle Scripts : app, hywai 모듈의 빌드를 관리하기 위한 GradleScripts

è 소스와 분리하여 빌드 스크립트를 관리

13

기존 HyWAI 새로운 HyWAI

구성

설명

- iOS 라이브러리 (.a)파일 빌드를 위한 별로 프로젝트가 존재

- 빌드시 생성되는 .a파일과 프로젝트 내의 .h파일들을 앱 프로젝트로 이동하여 사용

- HyWAI Workspace 안에 라이브러리 빌드를 위한 프로젝트와 샘플 앱 프로젝트 빌드를 위한 프로젝트로 구성

> hywai : hywai framework 프로젝트è .h와 .a 파일을 모두 포함하는 framework를 빌

드하여 타 프로젝트에서 사용이 용이하게 함.

> hywai container : hywai 샘플 앱 프로젝트è framework으로 분리된 라이브러리를 참조하

여 라이브러리 부분과 앱의 소스 구분이 명확

iOS Workspace

14

기존 HyWAI 새로운 HyWAI

구성

설명

- 별도 구별 없이 Android, iOS 프로젝트에 포함되어 있음

- HTML, CSS, JS, 이미지 리소스가 압축(minify) 되어 있지 않아 실 사용시 로딩 성능 문제 발생소지 있음

- 릴리즈 용 소스와 테스트 용 소스가 명확하게구분되어 있지 않음

- Yeoman을 이용한 빌드 구성을 갖는 별도 프로젝트로 분리

> yo : 프로젝트 생성(스캐폴딩)> grunt : 태스크 자동화> bower : JS 라이브러리 관리

- Angular.JS를 이용하여 샘플 프로젝트를 구현하였지만 모듈을 명확히 분리하여 다른 framework에서도동작 용이

- grunt를 이용하여 JS Lint( jshint) / 빌드(concat, uglifyjs, htmlmin, cssmin, imagemin, svgmin)/ 테스트(karma) / 문서생성(jsdoc3) 태스크를 자동화

Web Project

15

W3C FirefoxOS ChromeTizen (Web API) iOS

Android(SDK) HyWAI 3.5

블루투스 LE 지원 O O1 O X O O O

BR/EDR 전용API 지원 X O O O X2 O O5

페어링 처리기기 객체가페어링 여부확인

전역아답터 객체

자동전역아답터 객체

자동자동/기기 객체

자동

LE 메시지수신 처리

Promise와GATT 객체

Promise와이벤트 객체

Callback Function

Callback Object

Delegate Protocol

Callback Object (Java)

Callback Function

LE 메시지송신 처리

GATT 속성별 객체

GATT 속성별 객체

블루투스전역 객체

N/A기기 객체 /전역 매니저객체

기기별GATT 객체

GATT속성별 객체

BR/EDR 통신 방법 LE용 API 이용

Callback Function3

소켓 기반통신

소켓 기반통신

LE용 API 이용소켓 기반통신

소켓 기반통신6

예외 처리종류 및 처리방법만 제시

Promise 이용

전역 런타임에러 객체

에러 콜백객체

콜백에 에러객체 전달

Exception 객체

Promise 이용

서버 역할지원 X LE BR/EDR BR/EDR LE BR/EDR, LE BR/EDR7, LE

1기존 OS에는 미탑재, API 표준 논의중. 기존 OS에는 승인된 Application만 사용 가능한 BR/EDR용 API만 있음2Apple사의 MFi 프로그램을 통해 개발된 기기들을 중심으로 한정적인 지원3특정 Profile들만 지원: HFP, A2DP, 등4크롬 OS는 소켓 기반 통신만 지원.5, 6, 7iOS기기는 BR/EDR 통신 API를 지원하지 않음.

Web Bluetooth API 구현 및 표준화

15

16

Web�Bluetooth의 활용성

Demo – Cloud & HySense

18

Smartphone & Sensors

19

Crowd Sensing - HySense

감사합니다.

http://www.mw2.or.kr

Thank you for you attention

Demo – HyWAI 3.5 APIs

http://mobile2.tistory.com/8

22

Contact

q HyWAI is Hybrid Web Application Interface Platform

q If you have any questions and suggestions, please contact us.§ Jonghong Jeon (Principal Researcher)

• Tel: +82-42-860-5333• Email : hollobit@etri.re.kr

§ Seungyun Lee (Team Manager)• Tel:+82-42-860-5508• Email : syl@etri.re.kr

23

경청해주셔서감사합니다