hacking/web2011/06/30 18:52

단일 페이지 인터페이스 웹/앱 개발

크리에이티브 커먼즈 라이선스
Creative Commons License
지난 두 달 동안 k-mobile을 통해서 "모바일웹 & HTML5 하이드브리드 앱 개발"이라는 주제로
3일에 걸쳐 매일 3시간씩 총 9시간 강의가 있었는데,
여기서 소개하는 자료는 그 중에서 첫날 3시간 동안 발표한 내용이다.

강의 자료를 대충 살펴보면 알겠지만,
뜬구름 같은 트렌드 혹은 패러다임을 "얘기"하고 있어서,
구체적인 기술이 중요한 3일짜리 속성 과정에 적합하지 않은 것 같아 자진 사퇴(?)하고, 발표자료를 공개(?)한다.
내가 발표했던 첫날 3시간은 @ibare님이 좀 더 실무적이고 유익한 내용으로 강의하실 듯~ ^^
단일 페이지 인터페이스 웹/앱 개발
View more presentations from iolo
may the keynote be with you...
저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

단일 페이지 인터페이스 웹/앱 개발  (1) 2011/06/30
xui.js - 모바일 html5 웹앱을 위한 초경량 자바스크립트 라이브러리  (0) 2011/04/08
CORS(Cross-Origin Resource Sharing)을 활용한 크로스도메인 Ajax  (4) 2011/03/29
앱스프레소 확장 API를 사용한 AJAX  (6) 2011/03/24
웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기  (0) 2011/03/14
웹에서 아이폰스러운 Carousel 구현하기  (0) 2011/03/13
Posted by iolo
TAG hybridwebapp, jquerymobile, mobileweb, Sencha Touch, SPI, webapp, 모바일웹, 웹앱, 하이브리드앱
Trackback 0 Comment 1
hacking/web2011/03/24 14:30

앱스프레소 확장 API를 사용한 AJAX

크리에이티브 커먼즈 라이선스
Creative Commons License

앱스프레소 확장 API를 사용한 AJAX

/*
앱스프레소(Appspresso)는 이클립스 기반의 SDK 형태로 배포되어 사용하기 더 편리하다(?)는 것과 WAC(Wholesale Applications Community)의 Waikiki API를 제공한다는 점을 빼면  폰갭(PhoneGap)과 비슷한 하이브리드 웹앱 프레임웍/툴이다. 이 녀석을 만든 장본인이라 블로그질 하기가 좀 뭣하지만... 어차피 보는 사람도 별로 없는 블로그라 ㅋㅋ
*/

일반적인 웹 어플리케이션(혹은 웹 서비스)이 갖는 크로스 도메인 제약이 (폰갭과 달리) 앱스프레소로 만든 웹앱에도 동일하게 적용됩니다.

W3C에 준비중인 Cross-Origin Resource Sharing(CROS)이 표준화되어 모바일 webkit에 적용되면 좋겠지만, 현재로썬 크로스도메인 제한을 극복하려면 script 태그(JSONP)나 iframe 태그(Facebook의 XFBML, dojo의 iframe IO 등)를 이용해야 합니다.

앱스프레소에서는 개발의 편의를 위해 확장 API를 제공하는데, 네트웍 관련 API들은 ax.ext.net에 모여있습니다.

이 글에서는 예제를 통해 크로스도메인 AJAX 요청을 지원하는 앱스프레소 확장 API들에 대해 알아보겠습니다.
 
중요: 첨부된 예제의 src/apis 폴더 아래에 여러개의 js 파일들이 들어있는데, 이는 기존에 배포된 Appspresso SDK의 버그로 인해 사용할 수 없었던 확장 API를 사용할 수 있도록 임시로 제공되는 것이며, 이후에 배포될 Appspresso SDK에서는 이 js 파일들이 없어도 확장 API를 사용할 수 있습니다.



예제 웹앱 프로젝트


AxExtNet.zip 파일을 Appspresso SDK의 Workspace 디렉토리에 압축을 풀고, File/Import/Existing Projects into Workspace로 이클립스 프로젝트로 추가하세요.

src/index.html에 이 글에서 설명할 ax.ext.net.get/post/curl API를 사용한 예제 코드가 모두 들어있습니다.

GET 요청 보내기 - ax.ext.net.get

function successCallback(result) {
if(result.status >= 200 && result.status < 300) {
var data = JSON.parse(result.data);
var etag = response.headers['ETag'];
// ...
}
}

function errorCallback(error) {
alert(error);
}

ax.ext.net.get('http://.../api/item.json?id=123',
successCallback, errorCallback);


첫번째 인자로 지정한 URL로 GET 요청을 보냅니다.
요청이 성공하면(서버의 응답 코드와 무관하게, 요청이 서버로 보냈고 응답을 받았으면) success 콜백함수가 호출되고, 실패하면 error 콜백함수(생략가능)가 호출됩니다. success 콜백 함수로 전달되는 인자의 data, status, headers 등의 속성을 이용해서 응답의 세부 결과를 확인할 수 있습니다.

참고:jQuery.get

POST 요청 보내기 - ax.ext.net.post

var params = { 'firstname': 'foo', 'lastname': 'bar', … };
ax.ext.net.post('http://.../api/update.json', params,
successCallback, errorCallback);


ax.ext.net.get과 동일하지만, 두번째 인자로 전달한 key-value 쌍들을 포함하는 POST 요청을 보냅니다.

더 복잡한 HTTP 요청 보내기 - ax.ext.net.curl

var settings = {
'method': 'DELETE', // 'GET', 'POST', 'PUT', …
'url': 'http://.../...',
'headers': { 'X-Custom-Header': 'custom header value', .. },
'params': { 'param1': 'value1', 'param2': 'value2', .. },
'files': { 'fileparam1': 'filepath1', 'fileparam2': 'filepath2', .. },
'success': successCallback,
'error': errorCallback,
'sent': sentCallback,
'received': receivedCallback,
...
};
ax.ext.net.curl(settings);


GET, POST 외에 PUT, DELETE 등의 요청 메소드, 커스텀 요청 헤더, 파일 등을 포함한 더 다양한 형태의 요청을 보냅니다. method와 url을 제외한 모든 속성은 생략할 수 있습니다.

참고: jQuery.ajax

ax.ext.net에는 이 글에서 설명한 것 외에도 업로드/다운로드(진행 상황을 확인까지), 메일 보내기 등의 기능을 제공합니다. 이 확장 API들을 활용하기 위해서는deviceapis.filesystem를 함께 사용해야 하는데, 다음 기회에 별도의 예제와 함께 설명하겠습니다.

오늘은 여기까지~ 휘릭=3=3=33
저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

xui.js - 모바일 html5 웹앱을 위한 초경량 자바스크립트 라이브러리  (0) 2011/04/08
CORS(Cross-Origin Resource Sharing)을 활용한 크로스도메인 Ajax  (4) 2011/03/29
앱스프레소 확장 API를 사용한 AJAX  (6) 2011/03/24
웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기  (0) 2011/03/14
웹에서 아이폰스러운 Carousel 구현하기  (0) 2011/03/13
터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
Posted by iolo
TAG appspresso, webapp, 앱스프레소, 웹앱
Trackback 0 Comment 6
hacking/web2010/11/18 14:50

HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿

크리에이티브 커먼즈 라이선스
Creative Commons License
얼마전에 쓴 "HTML5/CSS3/JavaScript로 아이폰 앱 만들기"에서 설명(응? 언제 설명했는데?) 반복적인 초기 작업을 더 쉽게 할 수 있도록 Xcode 프로젝트 템플릿을 만들어 보았다.

Dropbox에 올려둔 hellowebapp-ios-xcode_project_templates.tar.gz 를 받아서,
"~/Library/Application Support/Developer/Shared/Xcode/Project Templates"에 풀고,
Xcode에서 File 메뉴의 New Project를 선택하거나,
Xcode를 실행하고 "Create a new Xcode project"를 선택)하면,
프로젝트 템플릿을 선택하는 대화상자가 나오는데,
"User Templates" 아래에 "WebApp" 카테고리 안에 "HelloWebApp"을 선택하면,
지정한 이름으로 깔끔한 "웹 앱" 프로젝트가 만들어 진다.
(입맛대로 Device나 Simulator로 타겟을 바꾸고)
이제 그냥 "Build & Run" 하시면 되시겠다~


참고로, 지난 번 스크린캐스트 이후에, 웹 리소스(html, css, js, png...)들을 다른 소스와 분리해서 "www" 디렉토리 안에 몰아 넣도록 약간 수정된 버전이다.

안드로이드용 템플릿은 어떻게 만들까 고민 중... -_-; 이거 하자고 이클립스 플러그인을 만들 수도 없고...

저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

웹에서 아이폰스러운 Carousel 구현하기  (0) 2011/03/13
터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
Posted by iolo
TAG HTML5, iPhone, JavaScript, project template, webapp, Xcode
Trackback 0 Comment 1
hacking/web2010/11/16 12:55

HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기

크리에이티브 커먼즈 라이선스
Creative Commons License
사무실에 앉아서 이짓꺼리(?) 하고 있다.

이런 쓰잘데기 없는 동영상을 굳이 만들어 올리는 이유는 "웹 앱"(WebApp; HTML5App)이 그렇게 거창한 것도 아니고, 어려운 것도 아니고, 멀리 있는 남의 나라 이야기도 아니라는 것을 보여주기 위해서다.
PhoneGap, Titanium, QuickConnect 같은 거창한(?) 제품을 동원하지 않더라도 JQueryMobile, Jo, Wink, Sencha Touch 같은 UI 툴킷과 HTML5 canvas 태그 그리고 HTML5 JS API들(WebStorage, WebSQLDatabase, WebWorker, ...), 그리고 W3C의 DAP(Geolocation, ...)를 사용하면 웬만한 앱은 만들 수 있다.

(저번에 XCode로 했던 짓이랑 비슷해서 이번에는 시간이 많이 안걸렸다능 -.-V)



동영상 간의 의존성을 제거(?!)하기 위해 html과 js를 직접 입력했지만, 저번에 아이폰 앱 만들때 썼던 파일을 그대로 써도 된다. 당연한 얘기~

마찬가지로, 예제 소스는 github에 올려두었다.

담(이건 정말 술 이름인데...)에는 좀 더 그럴싸한 앱을 만들어보자. 뭘 만들까? 흠...

저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
Posted by iolo
TAG android, app, HTML5, JavaScript, Mobile, web, webapp, 스크린캐스트, 안드로이드, 자바스크립트
Trackback 0 Comment 0
hacking/web2010/11/14 21:18

HTML5/CSS/JavaScript로 아이폰 "앱" 만들기

크리에이티브 커먼즈 라이선스
Creative Commons License
풍경 1. 아이폰이 국내에 출시된지 1년도 안됐는데... 아... 아이폰 없던 시절이 어땠는지 기억조차 가물가물... 먹고 살려니 아이폰 개발 공부는 해야겠는데, 망할 놈의 옵씨... 옵씨는 그렇다 치고, 코어 파운데이션, 코어 그래픽스, 코어 애니메이션, 뭔 코어가 이렇게 많냐? 핵분열도 아니고... OTL

풍경 2. 없는 살림에 거금 10만원 들여 아이폰 앱 개발자 등록해서 1년 동안 앱 3개 겨우 올렸는데... 안드로이드가 대세? 열라 안드로이드 공부해서 앱 좀 올려 볼려니... 안드로이드 마켓은 뭐고 티스토어는 뭐고 올레마켓은 또 뭐냐? 그까이꺼 대충~ 눈감고 넘어가려니... 블랙베리? 심비안? 팜프리? 윈폰7? 바다? OTL

풍경 3. 아래아한글 새 버전 나온 줄 알았던 넷스케이프와의 첫만남, 문자열과 한판 승부를 벌였던 CGI 시대, ASP, PHP, JSP... OOO 서버 페이지 시대, 유행따라 삼만리 AJAX 시대... 어느새 HTML만으로 어플리케이션을 만드는 시대??? 먹고살려니 안할 순 없고... OTL

풍경 4. 스마트폰(그게 뭔데? 먹는거냐?)용 앱을 만들긴 만들어야 겠는데.. 새로운 언어 배우기도 귀찮고, API는 낯설고, 당장 할 줄 아는 건 웹... 그래서 웹 기술만으로 앱을 만들 수 없을까... phonegap은 또 뭐고 titanium은 또 뭐고, WAC은 또 뭐냐? OTL

그래서 준비했습니다.

(재생 시간은 3분 남짓이지만 제작하는데는 30분 넘게 걸렸다능...ㅠㅠ)



동영상은 helloworld 수준이지만, 요기까지하고 나면 나머지는 하기 나름...
예제 소스는 github에 올려두었다.

조만간(그건 또 어디서 나온 술 이름이냐?) HTML5/CSS/JavaScript로 안드로이드 앱 만들기도....


저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
JavaScript Common Mistakes(2) - This "this" is not the "this"  (2) 2009/12/09
Posted by iolo
TAG app, HTML5, iPhone, JavaScript, Mobile, web, webapp, 스크린캐스트, 아이폰
Trackback 0 Comment 6
hacking/web2010/10/08 12:57

Jo HTML5 Mobile Application Framework 초간단 리뷰

크리에이티브 커먼즈 라이선스
Creative Commons License

업무상 필요해서 작성한 글이지만,  혹시 도움이 될까 해서 올려봅니다. 블로깅 안한지 너무 오래되서 ㅎㅎ


홈페이지: http://joapp.com/

개발자: Dave Balmer(Palm WebOS 개발자, 전 야후 개발자)

요약: all-in-one 스타일의 경량 자바스크립트 라이브러리.


특징

  • UI 툴킷
    • CSS 기반 테마/SKIN 지원
  • 오픈소스
    • OpenBSD 라이센스
  • 크로스 플랫폼
    • Palm WebOS, Safari(iOS,Desktop,Dashboard), Chrome(Android,Desktop) 등 webkit 기반 브라우져만 지원.
  • 경량
    • 자바스크립트 41K(최소화된 버전) + UI CSS/리소스(176K)
  • PhoneGap 호환(?)
    • PhoneGap과 호환되지 않는 자바스크립트 라이브러리는 ”없음”.



주요 기능


UI


최근 모바일 단말 UI의 de-facto인 iOS의 UI을 염두에 둔 UI 툴킷.
하나의 화면(joScreen)은 상단의 헤더(joTitle, joToolbar)와 푸터(joFooter, joToolbar)로 구성.
화면과 화면 사이를 앞뒤(위아래)로 이동하는 네비게이션 레이아웃(joStackController, joStack).
기본적인 HTML 폼의 입력 필드에 대응하는 위젯들(joControl, ...), 페이지 내부 팝업(joPopup) 등의 필수적인 위젯 제공.
CSS를 통한 테마/스킨 지원.
캘린더, 챠트 등의 고급 위젯 부족.
  • joContainer
    • joCard
    • joFlexcol
    • joFlexrow
    • joFooter
    • joGroup
    • joPopup
    • joScreen
    • joScroller
    • joStack
    • joStackScroller
    • joTitle
    • joToolbar
  • joControl
    • joButton
    • joCheckBox
    • joExpando
    • joHTML
    • joInput
      • joDateTime
      • joPasswordInput
      • joTextarea
    • joLabel
    • joList
      • joMenu
      • joTabBar
      • joTable
    • joKnob
    • joSlider
  • joDivider
  • joShim

Data


HTML5의 WebSQLDatabase(Webkit 기반 브라우져에는 대부분 제공됨)를 통한 로컬(클라이언트측) 데이터베이스 접근 제공.
추후에 PhoneGap과 연계하여 로컬 파일을 통한 데이터 접근을 제공할 계획으로 보임(joFile, joFileDataSource)
원격(서버측) 데이터 접근 부재.
  • joDatabase
  • joDataSource
    • joFileDataSource (x)
    • joSQLiteDataSource
  • joFile (x)


Utility


기본적인(필수적인) 유틸리티 API 제공.
추후에 PhoneGap과 연계하여 모바일에 특화된 기능을 제공할 계획으로 보임.
  • jo, joCache, joScript
  • joEvent, joSubject, joGesture
  • joChain, joYield, joWait
  • joDOM, joJSON, joLocal, joString, joTime
  • joLog
  • joClipboard, joDevice, joFocus, joPreference, joUser


유사 제품과 비교


Jo Sencha Touch jQuery DojoToolkit
지원브라우져 Webkit All All All
IE ✭ ✭✭✭ ✭✭✭ ✭✭✭
FF ✭ ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭
Webkit(Safari,Chrome) ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭
모바일 최적화 ✭✭✭✭✭ ✭✭✭ ✭ ✭
데스크탑 지원 ✭ ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭
용량 ✭✭✭ ✭ ✭✭✭✭✭ ✭
UI 위젯 툴킷 ✭✭✭ ✭✭✭✭✭
EXT2 		 ✭
jQuery UI 필요. jQueryMobile은 10월 중 알파 릴리즈 예정.		 ✭✭
dojox.mobile은 아직 unstable
UI 위젯 성능 ✭✭✭✭ ✭ ✭✭✭ ✭
i18n/l10n/a11y ✭ ✭ ✭✭✭ ✭✭✭✭✭
OOP ✭ ✭✭ ✭ ✭✭✭
DOM/CSS ✭✭ ✭✭ ✭✭✭✭✭ ✭✭✭
Database ✭✭ ✭✭✭✭ ✭✭✭ ✭✭✭✭✭
유틸리티 ✭ ✭✭✭ ✭✭✭✭✭ ✭✭✭
확장성 ✭ ✭ ✭✭✭✭✭ ✭✭✭
문서/예제 ✭ ✭✭✭ ✭✭✭✭✭ ✭✭✭
개발자 생태계 ✭ ✭✭✭ ✭✭✭✭✭ ✭✭✭



결론


비교적 적은 용량에 (모바일) 웹 앱 개발에 필요한 기본적인(필수적인) 기능을 거의 다 포함한 all-in-one 성격의 UI 라이브러리.

단순한 API 구조 덕분에 학습 / 사용이 용이하지만, 고급 기능들이 거의 없어서 jQuery등의 다른 라이브러리들과 혼용해야 함.

(이름과 달리) HTML5나 모바일에 최적화가 부족하고, 프레임워크가 아닌 단순 UI 툴킷 + 유틸리티 라이브러리.

1명의 개발자가 단독으로 개발했고, 비교적 최근(2010.6)에 시작해서 개정 릴리즈가 많지 않았기 때문에 소스 코드의 품질이 매우 높음.

HP가 Palm을 인수한 이후, WebOS의 Mojo를 개선(혹은 대체)하기 위한 여러가지 시도를 하는 것으로 보임.

직접적인 경쟁 상대인 Sencha가 상용/오픈소스로 모호한 라이센스 정책을 갖는데 반해, Jo는 OpenBSD 라이센스(BSD 라이센스와 어떤 차이가 있는지는 추가적인 확인이 필요)에 따름.

이후,  HP/Palm의 지원과 커뮤니티의 반응에 따라 주요 플레이어로 성장할 가능성은 있으나, 10월 중에 첫 릴리즈가 나올 예정인 jQueryMobile의 완성도에 따라서는 수많은 마이너 플레이어 중의 하나로 전락할 가능성이 더 높음.

저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
JavaScript Common Mistakes(2) - This "this" is not the "this"  (2) 2009/12/09
JavaScript Common Mistakes (1) - Async! Async! Async!  (10) 2009/12/08
Posted by iolo
TAG HTML5, JavaScript, Jo, Mobile, phonegap, webapp
Trackback 0 Comment 0