[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0

하이브리드
앱 제작 사례 공유
푸딩얼굴인식 3.0
앱스프레소랩 | 박종순

1
12년 10월 29일 월요일

Agenda

1. 하이브리드 앱과 프레임워크들
2. 단일페이지 인터페이스
3. 푸딩 얼굴인식 3.0 기술요소
Javascript Library
Appspresso Built-in API
Custom Plugins

4. 실전 앱 제작 테크닉
“웹 개발”스러운 “앱 개발” - 앱스프레소 On The Fly
Fast button click
iScroll 터치 이벤트 처리를 위한 레퍼
button 이벤트를 담당하는 하나의 이벤트 delegate
초기 앱 로딩 속도 개선
...

2

하이브리드 앱과 프레임워크들

하이브리드 앱 프레임워크

Javascript Framework

3


하이브리드 앱 프레임워크
PhoneGap, Appcelerator, Appspresso

플랫폼(iOS/Android/Etc.) 별 앱 빌드기능 제공

카메라 등 장치 접근을 위한 Device API 제공

4


Javascript Framework
jQueryMobile, Sencha Touch, JQTocuh, Jo

모바일 웹브라우저용 웹앱 제작을 위한 프레임워크

순수 웹 기반 (카메라 등 장치접근 불가)

5

단일 페이지 인터페이스

단일 페이지 인터페이스
(SPI: Single page interface)

show/hide

하나의 HTML파일로 페이지 구성
6

푸딩 얼굴인식 3.0 기술요소

Javascript Library

앱스프레소 내장 API

앱스프레소 커스텀 플러그인

7


Javascript Library
Appspresso
jQuery 1.6 KitchenSink
소스코드 공개
xx - 자체 제작 페이지 라이브러리
기존 플랫폼: 퍼포먼스 이슈, 커스터마이징 어려움

iScroll4
jpeg encoder
Android Canvas를 이미지 파일로 저장하기 위함

oauth.js, sha1.js
Facebook, Twitter OAuth 인증용
8


Built-in Plugin
filesystem - 히스토리 이미지, json파일저장 등
device status - 네트워크 상태 체크 등

ax.ext.ios - iOS 고유 네이티브 API
ax.ext.android - Android 고유 네이티브 API
ax.ext.ga - Google Analytics API
ax.ext.media - 화면캡쳐 API
ax.ext.net - cross domain 우회용 네트워크 API
ax.ext.ui - 네이티브 다이얼로그 API
9


Custom Plugin

iOS / Android Camera

Push notification

Admob

Media Share - 카카오톡 등 공유

etc...

10

실전 앱 제작 테크닉

1. 하이브리드앱 주의사항
2. “웹 개발”스러운 “앱 개발” - On The Fly
3. Fast button click
4. iScroll 터치 이벤트 처리를 위한 레퍼
5. 버튼 이벤트는 한곳에 모아 처리
6. 초기 앱 구동 속도 개선
7. 페이지 전환 효과
8. DEMO
9. CSS 개발자 협업
10.다국어 처리
11.파일시스템 레퍼
11


하이브리드 앱 주의사항

12

하이브리드 앱 주의사항

그래서 어떻게??

가능한 모든 리소스는 앱에 포함

오프라인 대응

꼭 필요한 경우에만 웹 리소스 접근

네이티브 앱 UI/UX 구현

15


“웹 개발”스러운 “앱 개발”
앱스프레소 On The Fly

16

“웹 개발”스러운 “앱 개발” - On The Fly

앱 개발 사이클
개발자

설치 및
컴파일 확인

코딩
17


왜그럴까요??

코드 한줄을 수정해도 컴파일 필요
웹 개발에 익숙한 개발자들은 적응안됨
참을 수 없는 컴파일 과정의 답답함

코드수정 > 새로고침 되게 해주세요!!!

18


On The Fly 앱 개발 사이클

리플래쉬 확인

코딩
19


http://appspresso.com

20


Fast button click
터치 반응성 향상 기법

21

Fast button click - 터치 반응성 향상 기법

왜그럴까요??

Click event VS Touch event
브라우저는 터치이벤트인지를 판단할 시간이 필요
약 300ms 의 delay time

https://developers.google.com/mobile/articles/fast_buttons
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

23

Fast button click - 터치 반응성 향상 기법

이렇게 해결했습니다 touchstart
사용

var touchEvent = ‘touchstart’;

// touch event를 지원하지 않는 브라우저에서는 mousedown을 이용
if (typeof document.body.ontouchstart === 'undefined' ) {
touchEvent = ‘mousedown’;
}
document.getElementById(‘someElement’)
.addEventListener(touchEvent, function(e){
// do something
}, false);

24


iScroll 터치 이벤트
처리를 위한 레퍼

25


iScroll
헤더고정 바디영역 스크롤 지원
회전목마(Carousel) 지원
iOS/Android 모두 지원
크로스플랫폼 스크롤 library 중
가장 빠른 속도

터치이벤트 처리의 어려움
플랫폼에 따른 옵션변경 필요

26


이렇게 해결했습니다
touchTime을 계산하여 300ms 미만인 경우
클릭을 위한 터치이벤트로 간주
iScroll 직접수정 대신 wrapper 모듈 작성 - xx.scroll
개발자는 new iScroll(args) 대신
xx.scroll.addScroll(args) 사용
클릭을 위한 터치이벤트에 대해서만 onTouchEnd
콜백 호출
플랫폼 별 옵션 분기처리 자동화

27


touchTime 계산
var touchTime = 0,
var touchTime = 0,
touchStart = 0,
touchStart = 0,
isScrolling = false;

document.addEventListener('DOMContentLoaded', function(){
var body = document.body;
document.addEventListener('DOMContentLoaded', function(){
body.addEventListener(‘touchstart’, function(e){
var body = document.body;
touchStart = new Date().getTime();
}, false);

body.addEventListener(‘touchmove’, function(e){
body.addEventListener(‘touchstart’, function(e){
isScrolling = true;

var myScroll = new iScroll(‘scrollWrapper’, {
}, false);
touchStart = new Date().getTime();
body.addEventListener(‘touchend’, function(e){
}, false);
...,
}, false);
onBeforeScrollEnd: function(){
});
body.addEventListener(‘touchmove’, function(e){
var myScroll = new iScroll(‘scrollWrapper’, { Date().getTime()) - touchStart;
touchTime = (new
isScrolling = true;
...,
},onBeforeScrollEnd: function(){

}, false); = (new Date().getTime()) - touchStart;
touchTime
onTouchEnd: onTouchEnd,
},
onTouchEnd: onTouchEnd,
...
...
body.addEventListener(‘touchend’, function(e){
});
});
...
}, false);
});
28


클릭을 위한 터치이벤트 판단
function onTouchEnd(e){
var args = this.args,
target = e.target,
eventPage,
i = 10;

if (isScrolling) {
} else {
while (i-‐-‐) {
if($(target).hasClass('page')) { 300ms
eventPage = $(target).attr('id');
break; 이상인 경우만
}
target = target.parentNode; 버튼 이벤트
}

if (!xx.page[eventPage] || xx.page[eventPage].info.isShown) {
if(touchTime < 300 && touchTime > 1) {
if (args.onTouchEnd) { args.onTouchEnd(e); }
}
}
}
}

29


푸딩얼굴인식 3.0 사용 예

var onOptionTouchEnd = function(e) {
// 클릭이라 판단된 경우에만 호출됨
// do something
};

if(typeof xx.scroll.wrapperSetting === 'undefined'){
var scrollOption = {
wrapperId: 'wrapperSetting',
scrollbarClass: 'noScroll',
onTouchEnd: onOptionTouchEnd
};
xx.scroll.addScroll(scrollOption);
}

30


버튼 이벤트는
한곳에 모아 처리

31

버튼 이벤트는 한곳에 모아 처리

일반적인 이벤트 처리
document.getElementById(‘someElement’)
.addEventListener(‘touchstart’, function(e){
// do something
}, false);

$(‘#someElement’).bind(‘click’, function(e){
// do something
}, false);

<div onclick=‘alert(“aa”);’>BUTTON</div>

32


버튼 HTML
<div class="header">
<button data-role="button" title="btnSettings" class="back">
<img src="image/icon_option.png" alt="setting" />
<div class="imgfix"> </div>
<span class="bg"></span>
<img class="new hide" src="image/main_btn_new.png" alt="new" />
</button>
<div class="title">
<h1><img id="mainTitle" src="image/beacon.png" alt="얼굴인식"/></h1>
</div>
<button data-role="button" title="btnMy" class="login">
<img src="image/icon_login.png" alt="my" />
<span class="bg"></span>
</button>
</div>

33


하나의 이벤트 delegate
document.body.addEventListener('touchstart', function(e) {
setTimeout(function() {
document.body.addEventListener('touchstart', function(e) {
var target = e.target,
// 버튼 누름효과 제거
var target = e.target,
btnName,

i = 10;
$(target).removeClass('pressed');
while(i-‐-‐) {
if($(target).attr('data-‐role') === 'button') { i = 10;

if (target.getAttribute('data-‐role') === 'button') {
target = target.parentNode;
}

// 실제 버튼 element 찾기
while (i-‐-‐) { // 이벤트가 발생한 페이지 찾기
while(i-‐-‐) { if (target.getAttribute('data-‐role') === 'button') {
if($(target).hasClass('page')) { // 버튼 이름 가져오기
if($(target).attr('data-‐role') === 'button') { btnName = $(target).attr('title');
$(target).addClass('pressed');
eventPage = $(target).attr('id');

btnName = $(target).attr('title');
setTimeout(function() {
}

[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0

More Related Content

What's hot

Viewers also liked

Similar to [H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0

More from KTH, 케이티하이텔

[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0