동강 Blog

PhoneGap의 모든것 - 프로젝트 셋팅 (2)

동강 — Mon, 07 May 2012 08:30:00 +0900

이번 문서에서는 PhoneGap를 셋팅하고 (iOS) PhoneGap 프로젝트에서 javascript 초기화에 대해 다룬다.

Getting Start PhoneGap

PhoneGap을 시작하는 사람들을 모두 들어가 봤을만한 공식 사이트다. 아주 친절하게도 http://phonegap.com/start 이 주소로 들어 가면 플랫폼 별로 초기 셋팅을 어떻게 하는지에 대해 순서대로 나와 있다.

주의 해야할 사항은 xcode 를 이용하여 iOS 플랫폼에 셋팅을 하는 경우라면 초기에 PhoneGap을 설치하고 Cordova Project로 생성을 한 뒤에 위와 같은 폴더 구조가 나오는데 바로 컴파일을 하면 제대로된 화면이 안나오고 아래와 같은 메세지를 볼수 있다.

PhoneGap에서 사용되는 javascript 와 html, css파일들은 프로젝트 하위의 www 폴더에 생성되는데 xcode에서 이를 인식하지 못하여 발생하는 문제이다. xcode에 플러그인 형식으로 설치 하는 거라 플러그인에서 생성 시킨 폴더(www)를 자동으로 프로젝트에 추가 해주지 못해서 그런것 같다. 위의 문제는 프로젝트를 한번 컴파일 한뒤에 프로젝트를 저장한 폴더에 이동해 보면 www폴더가 생성되어 있는걸 볼수 있는데 아래와 같이 프로젝트에 추가해 주면 제대로 동작 하게 된다.

www폴더를 드래그 해서 위의 phonegap_sample 프로젝트에 드랍해 주면 프로젝트에서 www를 인식 하게 된다.

www/index.html

<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript">
 
function onBodyLoad() {
 
    document.addEventListener("deviceready", onDeviceReady, false);
}
 
function onDeviceReady()
{
    // Device Ready!
}
 
  
</script>
<body onload="onBodyLoad()">
</body>

www폴더를 보면 PhoneGap을 동작하는데 필요한 cordova.js와 index.html 이 있다. cordova.js를 PhoneGap을 초기화 하고 디바이스와 통신하는데 필요한 준비 및 API로 구성되어 있다. 한번 훑어 보는것도 좋을듯 하다.

위의 코드는 index.html에서 기본적인 source만 뽑아낸 것이다. 어플리케이션이 실행 되면 처음으로 시작되는 곳이 index.html 이다. 모든 초기화는 여기서 이루어 진다. 일반 웹 페이지와 다른 것은 "deviceready" 이벤트를 통해 PhoneGap이 동작하는 기기(플랫폼)가 준비가 되었는지 확인하는 과정이 필요하다. 위의 코드에서 알수 있듯이 onDeviceReady가 호출 된 후에에 PhoneGap API 등을 사용할 수 있다. 그 전에 호출을 해봤자 실행 되지 않는다.

2개의 문서로 마무리를 지으려고 했는데, 문서를 작성하면서 생각이 덧붙여 지면서 분량이 더 많아 졌다. 다음 문서에서는 iOS와 Android 플랫폼에서 동작하는 Plugin 개발하는 방법을 다루겠다.

'Programming' 카테고리의 다른 글

PhoneGap의 모든것 - 프로젝트 셋팅 (2) (0)	08:30:00
PhoneGap의 모든것 - 동작원리 (1) (0)	2012/05/02
Sublime Text 2 에서 Nodejs 셋팅하기 (0)	2012/02/14
Facebook actionscript API (0)	2011/11/27

PhoneGap의 모든것 - 동작원리 (1)

동강 — Wed, 02 May 2012 08:30:00 +0900

PhoneGap

PhoneGap의 기본컨셉은 대부분의 모바일 플랫폼이 WebView를 가지고 있기 때문에 기본적인 기능들은 HTML과 CSS, Javascript로 만들어서 WebView에서 동작하게 하고 Device(Native)의 도움이 필요한 영역은 PhoneGap framework가 도움을 줘서 설치되어 동작하는 어플리케이션을 만들수 있는 방법을 제공 하는 것이다.

Apache Cordova

Adobe가 PhoneGap을 인수한 뒤에 PhoneGap을 Apache재단에 기부하였다. 그래서 Opensource가 되었고, PhoneGap 1.5 (Cordova) 버전부터 클래스 이름이 죄다 바뀌어 버렸다.

PhoneGap에서 제공하는 것들

WebView만으로는 구현이 어렵거나, Native의 도움이 필요한 기본 기능들은 PhoneGap API을 통해 사용 가능하다.

지원하는 API 는 다음과 같다.

각각의 기능별로 예제 코드와 함께 정리가 잘되어 있어서 쉽게 적응할 수 있다.
각 API별로 지원하는 플랫폼이 명시 되어 있다. (iOS와 Android는 대부분 지원)

API Reference

http://docs.phonegap.com/en/1.5.0/index.html

Accelerometer : Tap into the device's motion sensor.

Camera : Capture a photo using the device's camera.

Capture : Capture media files using device's media capture applications.

Compass : Obtain the direction that the device is pointing.

Connection : Quickly check the network state, and cellular network information.

Contacts : Work with the devices contact database.

Device : Gather device specific information.

Events : Hook into native events through JavaScript.

File : Hook into native file system through JavaScript.

Geolocation : Make your application location aware.

Media : Record and play back audio files.

Notification : Visual, audible, and tactile device notifications.

Storage : Hook into the devices native storage options.

PhoneGap의 동작 원리

PhoneGap을 이용하여 만든 어플리케이션들도 결국에는 Native 어플리케이션으로 컴파일되어 설치 된다. Adobe AIR과 같이 코드가 바이너리로 설치 파일에 포함되는 형식이 아니라, Native 어플리케이션 위에서 PhoneGap이 동작하고 이 PhoneGap을 통해 Javascript로 만든 어플리케이션과 통신하는 과정을 통해 실행 된다. 하지만 Javascript는 Native와 다른 환경에서(WebView) 동작한다. JavaScript는 네이티브 코드와 데이터를 공유할 수 없다. 그래서 PhoneGap에서는 별도의 통신 방법을 만들어 웹뷰에서 네이티브 코드와 데이터를 교환한다. 각각의 플랫폼(iOS, Android...) 마다 WebView와 Native와 서로 통신하는 방법이 다르다. 이렇게 통신하는 방법이 다르기 때문에 PhoneGap에서 이를 지원한다. 이러한 방법이 PhoneGap이 동작하는 원리이다.

PhoneGap을 Native에서 동작하는 코드들과 (각각 플랫폼 마다 별개) cordova.js 과의 통신을 통해 동작한다. (Plugin이 있다면 Plugin을 제어 하는 코드들도 함께 동작)

각각의 플랫폼마다 WebView와의 통신 방법이 다르므로 모두 언급할 수 없기에 대표적으로 iOS와 Android를 설명하면 다음과 같다. 더 자세한 내용은 여기를 참고하라.

IOS

Custom Scheme 이란? (예제)

tel:01012341234

kakaolink://sendurl?msg=[message]&url=[url]&appid=[appid]&appver=[appver]

gap://ready

iOS에서는 WebView에서 Native로 명령을 전달하고 받기 위한 방법으로 Custom Scheme를 사용한다. 아래와 같은 형식으로 WebView에서 호출하면 Native에서는 클래스(class), 함수(command) 그리고 함수에 전달될 인자(arguments) 를 통해 Native Code를 실행 한다.

yourscheme://<class>.<command>/[<arguments>][?<dictionary>]

반대로 Native Code에서 WebView로 명령은 iOS SDK의 stringByEvaluatingJavaScriptFromString를 이용한다.

NSString* status = @"Native To WebView!";

[webView stringByEvaluatingJavaScriptFromString:status];

Android

WebView에 있는 addJavascriptInterface를 통해 Javascript가 호출할 수 있는 코드정보를 미리 등록해서 이를 이용해서 WebView에서 Native코드를 실행한다.

등록

webView.addJavascriptInterface(new MyNativeAPI(), "MyNativeAPI");

Class MyNativeAPI {

    public String whereAmI() {

        return "I am in Native";

}

}

호출

MyNativeAPI.whereAmI();

반대로 Native Code에서 WebView로 명령은 WebView클래스의 loadUrl() 을 이용한다.

webView.loadUrl("javascript:alert('I am in WebView')");

PhoneGap을 사용하면 위에서 언급한 제공하는 API 만으로 어플리케이션을 구현하는데 부족함이 많다. 그래서 PhoneGap에서는 이 부족한 기능을 특정 플랫폼에 맞게 PhoneGap Plugin을 개발하여 사용할수 있다. (Adobe AIR의 Native Extention 이라 생각하면 되겠다) PhoneGap의 근본 취지와는 다르게 Plugin은 특정 플랫폼에 맞춰서 따로 따로 개발해 줘야한다. 2번째 문서에서는 간단히 PhoneGap Plugin을 개발하는 방법에 대해 다룰 것이다.

'Programming' 카테고리의 다른 글

PhoneGap의 모든것 - 프로젝트 셋팅 (2) (0)	08:30:00
PhoneGap의 모든것 - 동작원리 (1) (0)	2012/05/02
Sublime Text 2 에서 Nodejs 셋팅하기 (0)	2012/02/14
Facebook actionscript API (0)	2011/11/27

Pix : Pixel Mixer - Adobe AIR를 이용한 Hybrid Mobile Application

동강 — Mon, 19 Mar 2012 11:37:35 +0900

Pix 는 Adobe AIR 를 이용하여 만든 어플리케이션 입니다. 기존에 작성된 Flash Player 용으로 배포된 사진 편집기의 소스(Actionscript3)를 그대로 활용하여 모바일 어플리케이션을 구현하는데 사용하였습니다.

"하나의 코드로 모든 플랫폼을 커버 할 수 있다." 는게 Adobe가 AIR Mobile 을 설명할때 주로 사용하고 있는 말입니다. Pix 는 이 장점을 최대한 활용하여 하나의 프로젝트에서 한번의 컴파일로 iOS(iPhone, iPad), Android OS용 어플리케이션을 구현 하였습니다. 해상도를 맞추는데 어려움이 있었지만, 비교적 짧은 기간 동안 좋은 퀄러티의 어플리케이션을 만들수 있었습니다.

지금까지는 이 블로그가 Flash 관련글을 포스팅 하는 곳이라 기술적인 부분에 대해 나열해 보았는데요. 지금부터 Pix에 대해 소개해 보겠습니다.

Pix 의 장점은 쉬운 UI 구성과 다양한 필터효과를 가지고 있다는 점 입니다. 추가로 Facebook, Twitter로 보내기 기능으로 최대한 빠르게 자신의 사진을 공유 할 수 있습니다. 일단 소개 동영상 부터 보시죠.

주요 기능

- 사진을 더 생동감 있게 해주는 30개의 필터와 24개의 레이어 효과 그리고 16개의 액자를 제공 합니다.

- 필터 중복 적용 기능을 사용하여 좀 더 세밀한 느낌을 만들수 있습니다.

- 즐겨 찾기로 추가하여 자신만의 효과를 빠르게 적용할 수 있습니다.

- Twitter, Facebook 공유 기능과 그밖에 스마트폰에 설치 되어 있는 어플리케이션과의 연동 기능을 제공 합니다.

아직 Adobe AIR를 이용한 모바일 어플리케이션 개발을 고민하고 있는 분들이 많은 걸로 알고 있습니다. Pix 를 설치해 보시고 이미 충분히 좋은 플랫폼이다라는걸 느끼셨으면 합니다. Chrome Web Store 에 등록도 준비 하고 있습니다. Chrome Web Store까지 등록이 되면 Flash Platform으로 구현한 제대로된 Hybrid Application이 될거라 생각 합니다.

Pix 공식 홍보 페이지 : http://goo.gl/ftnZR

iOS 다운로드 페이지 : http://itunes.apple.com/us/app/pix-pixel-mixer/id509144139

Android 다운로드 페이지 : https://play.google.com/store/apps/details?id=air.net.daum.pix

QR 코드로 다운로드 받기

Adobe AIR 를 이용하여 모바일 어플리케이션을 구현 하면서 어려운 점이나, 버그 같은데 딱히 물어 볼곳이 없다는 느낌을 많이 받았습니다. 댓글이나 메일로 문의 주시면 저희 팀이 아는 내용이라면 빠르게 답변 드리겠습니다.

'Review' 카테고리의 다른 글

Pix : Pixel Mixer - Adobe AIR를 이용한 Hybrid Mobile Application (2)	2012/03/19
Daum 수식 편집기와 Daum Paper (읽기도구) 크롬 웹스토어에 오픈! (0)	2011/11/14
Introduce Daum Equation Editor and Daum Paper on Chrome Web Store (0)	2011/11/14
Javascript Vs Actionscript (4)	2009/09/09

Sublime Text 2 에서 Nodejs 셋팅하기

동강 — Tue, 14 Feb 2012 22:43:40 +0900

Sumblime Text 2는 맥을 사용하면서 ecplise 만 사용하다 좀 더 가벼운 툴을 찾던 중에 지인을 통해 알게 된 툴 입니다. (TextMate를 사용하려고 했지만 한글이 제대로 입력 되지 않는 문제가 있기에 패스;;)

다운 로드 : http://www.sublimetext.com/

사용한지는 몇일 않되었지만 벌써 여기 저기 추천하고 다니는걸 보면 툴이 여간 마음에 들었나 봅니다. 맥은 물론, 윈도우, 리눅스까지 모두 지원되고 무/유료 버전이 있습니다. 크게 차이는 없고 무료 버전은 가끔 구매 하라는 알림 팝업이 노출 됩니다.

(이미지 출처 : http://www.sublimetext.com/)

툴 자체는 설치해서 잠깐만 사용해 보면 알테니 생략하고 본 툴에서 Nodejs 를 셋팅하고 테스트 하는 방법에 대해 설명 하겠습니다.

Sublime Text 에는 플러그인 형식으로 추가적인 기능을 사용할수 있습니다. 여기서 설치하는 Package Control 은 추가적인 플러그 인이고 이를 이용하여 Nodejs 환경 셋팅을 하게 됩니다. 다음 절차를 따라 가면 쉽게 셋팅 할 수 있습니다.

0. Nodejs 설치 : http://nodejs.org/#download

1. Sublime Package Control 설치 : http://wbond.net/sublime_packages/package_control/installation

2. 설치된 Package Control 을 통해 Nodejs 환경 설치 : http://blog.dongchimi.org/?p=249

3. 설치가 완료 되면 Tools - Build System - Nodejs 가 추가 된것 확인 할수 있음. 하지만 Nodejs파일을 만들고 Nodejs 빌드(command + B)해 보면 아래와 같이 파일을 찾을수 없다고 나옴

4. Preferences - Browse Packages 을 실행 Nodejs 폴더를 찾아서 Nodejs.sublime-build 파일에 다음 코드를 추가

(http://stackoverflow.com/questions/8638808/problems-with-less-sublime-text-build-system)

"path": "/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin: No such file or directory"

5. 셋팅 완료 : js 파일을 만든후 빌드

설치 하면서 검색 했던 내용들을 정리해 보았습니다. 좀 더 사용해 보고 정식 버전 구매를 고려해 봐야 겠습니다.

'Programming' 카테고리의 다른 글

PhoneGap의 모든것 - 동작원리 (1) (0)	2012/05/02
Sublime Text 2 에서 Nodejs 셋팅하기 (0)	2012/02/14
Facebook actionscript API (0)	2011/11/27
ID3 관련 사이트 (1)	2010/10/10

Flash App Performance : Image Sprite Sheet

동강 — Wed, 25 Jan 2012 16:20:13 +0900

Image Sprite Sheet는 게임이나 웹서비스에서 이미지를 불러올때 여러개로 나눠져 있는 이미지를 불러 오는 것 보다 하나의 이미지를 불러오는게 비교적 좋은 로딩 시간 또는 로딩 되는 파일 크기를 줄일수 있기 때문에 사용하는 방법이다. 많은 서비스에서 이미 CSS Sprite Sheet 를 이용하여 사이트에 포함 되어 있는 이미지를 하나의 이미지를 통해 불러 와서 사용함으로 로딩 타임을 줄이는 이점을 취하고 있다.

이미지를 온라인에서 불러올 경우 요청 횟수를 줄일수 있다.
여러 이미지를 하나의 이미지 파일로 만들기 때문에 이미지 크기를 줄일수 있다. (클수도 있다)
하나의 이미지로 해당 어플리케이션의 스킨을 지정 할 수 있다. (해당 이미지만 교체 하면 스킨이 바뀐다)

Flash/Flex(이하 Flash)로 구현된 어플리케이션(이하 앱)들은 대부분의 이미지가 컴파일 타임에 임베딩 되기 때문에 로딩 시간 단축에 대한 장점은 줄어들겠지만, 메모리 관리 측면에서 보면 상당히 이득을 준다. 이 문서에서는 Flash 앱 개발시에 Image Sprite Sheet 를 만들어서 사용하는 방법에 대해 다룬다.

Image Sprite Tool

합쳐진 이미지를 사용하기에 앞서 Actionscript로 사용하기 편하게 이미지를 합쳐주는 툴이 필요 하다. 물론 수작업으로 해도 되지만, 이미 좋은 툴들이 나와 있으니 아래 나열된 툴중 무료를 사용하도록 하겠다. 툴은 어떤 것을 사용해도 상관 없지만 툴에서 만들어주는 이미지 퀄러티와 설명 파일형식을 고려 해야 한다.

TexturePackerPro : http://www.texturepacker.com/
Sprite Sheet Packer : http://spritesheetpacker.codeplex.com/

Sprite Sheet Packer

Sprite Sheet Packer 는 아래 그림 처럼 이미지를 불러와서 하나의 png/jpeg/bitmap 파일로 만들어 준다. 또한 만들어진 이미지에 대한 좌표값을 가지고 있는 txt/xml 파일도 만들어 준다. 최대 단점은 윈도우에서만 된다는거;;

위와 같이 이미지를 추가한 뒤에 Image File 이름 Map File (합쳐진 이미지의 위치값에 대한 파일) 이름을 설정해 준뒤에 Build Sprite Sheet 버튼을 누르면 아래와 같이 두개의 파일이 생성 된다.

sample.png

sample.xml

sample.xml 과 sample.png 파일이 생성 되었다.

사용 방법

Sprite Sheet Packer 를 통해 이미지를 만들었다면 다음과 같은 방법으로 이미지를 사용할 수 있다. (다른 툴을 이용했다면 해당 툴이서 출력해 주는 xml 또는 text 파일 형식에 맞게 수정해서 사용할 수 있다)

아래 Client Code 에서는 위의 툴을 이용하여 생성한 sample.png와 sample.xml 을 임베딩하여 ImageSpriteSheet.as 클래스를 사용하여 popup_bg를 불러와서 화면에 표시 하고 있다.

client code

package {

    import flash.display.Sprite;

    import flash.display.StageAlign;

    import flash.display.StageScaleMode;

    import flash.utils.ByteArray;

    public class ImageSprite_sprite extends Sprite {

        [Embed (source="/assets/sample.png")]

        private var IMAGE_SHEET:Class;

        [Embed (source="/assets/sample.xml", mimeType="application/octet-stream")]

        private var DATA_SHEET:Class;      

        public function ImageSprite_sprite()

        {

            super();

            // support autoOrients

            stage.align = StageAlign.TOP_LEFT;

            stage.scaleMode = StageScaleMode.NO_SCALE;

            init();

        }          

        private function init():void

        {

            // embed 한 xml과 png 파일을 로드 하여 파싱한다.

                        var xmlData:ByteArray = (new DATA_SHEET()) as ByteArray;

            var spriteSheet:ImageSpriteSheet;

            spriteSheet = new ImageSpriteSheet();

            spriteSheet.init(new IMAGE_SHEET(), XML(xmlData.readUTFBytes(xmlData.bytesAvailable)));

            // xml 에 정의 되어 있는 activity_indicator_160 을 불러와서 추가 한다.

            addChild(spriteSheet.getImage('popup_bg'));

        }

    }  

}

﻿﻿

 ImageSpriteSheet Class

package {

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.geom.Point;

    import flash.geom.Rectangle;

    import flash.utils.Dictionary;

    public class ImageSpriteSheet {

        private var _sheetImage:Bitmap;

        private var _sheetData:Dictionary;

        public function ImageSpriteSheet(){

        }          

        public function init(spriteSheet:Bitmap, sheetXML:XML):void {

            _sheetImage = spriteSheet;

            _sheetData = new Dictionary();

            parseSheetXML(sheetXML);           

        }

        private function parseSheetXML(data:XML):void {

            var i:int = 0;

            var list:XMLList = data.Asset.Item;

            for(; i < list.length(); ++i) {

                var key:String = list[i].Key;

                var value:Rectangle = parseImageBound(list[i].Value);

                _sheetData[key] = value;               

            }          

        }

        private function parseImageBound(data:String):Rectangle {

            var properties:Array =  data.split(" ");

            var bound:Rectangle;

            try {

                bound = new Rectangle(properties[0], properties[1], properties[2], properties[3]);

            }catch(error:Error) {

                throw new Error("Invalid data. please confirm data.");

            }

            return bound;

        }

        public function hasImage(name:String):Boolean {

            return (_sheetData[name])? true : false;

        }

        public function getImage(name:String):Bitmap {

            if(hasImage(name)) {

                var bound:Rectangle = _sheetData[name];

                var image:BitmapData = new BitmapData(bound.width, bound.height, true);

                image.copyPixels(_sheetImage.bitmapData, bound, new Point(0, 0));

                return new Bitmap(image);

            }

            else {

                throw new Error("There is no image. named : "+name);

            }

            return null;           

        }

    }  

}

sample file download : ImageSpriteSample.zip

Image Sprite Sheet 를 사용하는 건 장점도 가지고 있지만, 디자인이 수정될때 마다 다시 생성해야 하는 번거로움도 가지고 있다. 하지만 실제로 앱에 적용하여 테스트 해보면 메모리 점유율 측면에서 많은 이득을 본다는걸 알수 있다. 다음 문서에서는 위의 Image Sprite Sheet 를 적용한 앱과 적용하지 않은 앱에 대해 비교해 보겠다.

검색을 통해 찾은 Sprite Sheet Packer 를 사용하였는데요. 더 좋은 툴을 아시는 분은 공유 부탁 드려요 :D

'Flash platform' 카테고리의 다른 글

Flash App Performance : Image Sprite Sheet 를 사용하면 얼마나 차이가 날까? (0)	2012/03/25
Flash App Performance : Image Sprite Sheet (0)	2012/01/25
[Mobile] Flash Platform for Mobile (0)	2010/09/19
Flex for Mobile Devices (0)	2009/11/06

Flash Platform에서 OAuth 사용하여 인증

동강 — Sun, 08 Jan 2012 20:05:26 +0900

요즘 OAuth 인증 때문에 고생좀 했습니다. 머리속에 있는 개념을 정리도 할겸 제가 사용해본 OAuth 라이브러리에 대해 소개 합니다.

OAuth 란?

OAuth가 사용되기 전에는 인증방식의 표준이 없었기 때문에 기존의 기본인증인 아이디과 비밀번호를 사용하였는데, 이는 보안상 취약한 구조이다.

기본인증이 아닐 경우는 각 애플리케이션들이 각자의 개발한 회사의 방법대로 사용자를 확인하였다. 예를 들면 구글의 AuthSub, AOL의 OpenAuth, 야후의 BBAuth, 아마존의 웹서비스 API 등이 있다.

OAuth는 이렇게 제각각인 인증방식을 표준화한 인증방식이다. OAuth를 이용하면 이 인증을 공유하는 애플리케이션끼리는 별도의 인증이 필요없다. 따라서 여러 애플리케이션을 통합하여 사용하는 것이 가능하게 된다.

(출처 : http://ko.wikipedia.org/wiki/OAuth )

실 서비스 외부에서 API 를 사용할 때 이 OAuth 를 이용하여 인증을 하게 됩니다. 요즘 많이 사용하는 Twitter, facebook, Dropbox에서 제공 하는 API 모두 이 OAuth 를 지원하고 있고 지원하는 버전은 대부분 1.0 입니다. API 를 제공하는 곳에 따라서 2.0 을 제공하는 곳도 있습니다. 저 자세한 내용은 아래 링크에 자세히 설명 되어 있으니 생략하고 Flash 에서 OAuth 를 사용하는 방법에 대해 다뤄 보겠습니다.

OAuth 인증 방식 이해 하기 : http://dev.springnote.com/pages/1083036

Actionscript3.0 으로 구현 된 OAuth 라이브러리

OAuth인증을 하기 위해서는 서비스 프로바이더와 몇번의 통신을 해야 하고 결과적으로 accessToken 과 accessTokenSecret 을 발급 받게 됩니다. 일종의 로그인을 위한 허락 키를 발급 받는 거지요. 이 키와 몇가지 OAuth 에서 원하는 값들을 조합해서 리퀘스트를 날릴때 Header 나 리퀘스트 URL 에 포함 시켜서 보내게 되면 서비스 프로바이더는 해당 리퀘스트를 분석하여 제대로된 인증을 가지고 있을 경우에만 결과 값을 내려 주는 구조로 되어 있습니다.

OAuth 인증을 거치는 과정이 accessToken 과 accessTokenSecret을 발급 받는 과정이지만, 인증이 끝나고 나서 이 값들만 포함 시켜서 리퀘스트를 날리는건 아님니다. OAuth 에서 원하는 값들이 많이 있는데요. 이 값들을 http://oauth.net/ 에 구현 된데로 개인적으로 만들어서 사용해도 되지만, 이미 많은 라이브러리가 구현 되어 사용 되고 있기 때문에 기존 라이브러리를 사용 하는 걸 추천 합니다. (OAuth 인증 절차상 인증이 잘못된 경우 어디서 무엇이 잘못된건지 디버깅 하기가 어렵습니다.)

oauth-as3

oauth-as3 : http://code.google.com/p/oauth-as3/

oauth-as3은 actionscript3.0으로 구현된 oauth 라이브러리 입니다. 기본적인 기능들만 구현 되어 있어서 바로 사용하기 보다는 이 라이브러리를 이용하여 따로 구현해 줘야 할 것들이 많습니다. 그럼 인증을 받는 순서대로 라이브러리를 사용해 보겠습니다.

사용하기 전에 알아 두면 좋은 이론은 라이브러리에 포함 되어 있는 OAuthRequest 는 실제로 서비스프로바이더와 통신을 하기 위해 리퀘스트를 만드는 클래스 이고, 이 클래스에서 OAuth 인증을 할때 필요한 oauth_nonce, oauth_timestamp, oauth_signature 등을 생성하게 됩니다. 서비스 프로바이더와의 통신은(인증할때) URLLoader 를 사용하지만 이 URLLoader의 값을 세팅할때 참조 해야 하는 클래스가 인증에 대한 정보를 가지고 있는 OAuthRequest 클래스 입니다. 그럼 requestToken을 받는걸로 시작해서 코드를 작성해 보겠습니다. Twitter(https://dev.twitter.com/docs/api) 인증을 예를 들겠습니다.

1. 서비스 프로바이더에서 requestToken 을 받는다.

우선 인증을 시작하기에 앞서 인증을 해야 하는 대상 어플리케이션이 존재 합니다. Twitter 등의 서비스 프로바이더에서 어플리케이션을 생성하면 해당 어플리케이션이 갖게 되는 고유의 consumerKey 와 consumerSecretKey 을 알 수 있습니다. 이 값들을 이용해서 OAuthRequest를 생성 합니다.

var twitter = {
  consumerKey : "",
  consumerSecret : "",
  requestTokenURL : "https://api.twitter.com/oauth/request_token",
  authorizeURL : "https://api.twitter.com/oauth/authorize",
  accessTokenURL : "https://api.twitter.com/oauth/access_token",
  callbackURL : ""
}

var oauthRequest:OAuthRequest = new OAuthRequest(OAuthRequest.HTTP_MEHTOD_POST, twitter.requestTokenURL, null, new OAuthConsumer(consumerKey, consumerSecret));

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, oauthLoadHandler);

var request:URLRequest = new URLRequest();

request.method = URLRequestMethod.POST

request.url = oauthRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1(), OAuthRequest.RESULT_TYPE_URL_STRING);

loader.load(request);

private function oauthLoadHandler(event:Event):void {

  //oauth_token=&oauth_token_secret=&oauth_callback_confirmed=
  //위의 값을 oauthRequest 에 저장

  var token:OAuthToken = new OAuthToken();
  token.key = oauth_token값;
  token.secret = oauth_token_secret값;
  oauthRequest.token = token;
}

그리고 Twitter의 경우 requestToken 을 발급 받는 api 가 post 를 사용하므로 셋팅을 해주고 oauthRequest에 인증에 필요한 모든 값들이 들어 있기 때문에 buildRequest 메소드를 이용해서 OAuth인증 값들이 포함 되어 있는 url 을 리턴 받아서 서비스프로바이더에서 리퀘스트를 날리게 됩니다.

buildRequest 에 들어가는 첫번째 파라미터는 oauth_signature_method 값이고 두번째 인자는 OAuth 인증 리퀘스트 값을 어떤 방식으로 받을 것이냐 선택 하는 것 입니다. 파라미터에 따라 URLRequestHeader값 또는 String 으로 받을수 있습니다.

2. requestToken 을 이용하여 서비스 프로바이더에게 접근 한다.

1번에 대한 response 값으로 oauth_token을 받게 되는데요. 이 값을 이용해서 또 다시 서비스 프로바이더에게 인증을 요청해야 합니다. 이번에 요청하는 인증은 URLLoader 를 이용한 인증이 아니라, 직접 URL로 이동하여 사용자가 아이디와 비번을 입력하여자신의 권한을 해당 어플리케이션에 수락 시키는 절차 입니다.

https://api.twitter.com/oauth/authorize?oauth_token=REQUEST_TOKEN입력

위의 URL로 Desktop AIR의 경우 HTMLLoader 를, Mobile AIR의 경우 StageWebView를 이용해서 해당 사이트로 이동하면 위와 같이 인증 화면이 뜨게 됩니다.

웹용 Flash Player에서는 서버를 (Proxy) 사용하지 않고 인증 할 수 없습니다. 웹상에서 클라이언트를 Flash 로 만들경우에는 (javascript 도 마찬가지 입니다) 서버에서 위의 인증 과정을 모두 대리로 수행 해야 합니다.

사용자가 아이디와 비번을 입력하고 인증을 마무리 하게 되면 Twitter의 경우 어플리케이션을 등록할때 지정 했던 callback URL 로 이용하게 되는데요. 이동할때 URL 뒤로 추가적으로 필요한 정보들을 전달 받게 됩니다. 이 인증 절차를 통해 OAuthRequest가 가지고 있는 token 값은 이제 accessToken 을 접근 할 수 있는 인증권한을 갖게 됩니다.

http://www.ddongkang.com?oauth_token=&oauth_verifier=

위의 callback URL 로 전달 되는 oauth_token값은 요청할때 전달했던 값과 같습니다. oauth_verifier값은 이 예제에서는 사용되지 않습니다. 다음 링크를 참조 하세요.

3. 서비스 프로바이더에서 accessToken 을 받는다.

이제 인증의 마지막 절차 입니다. accessToken 을 받는 방법은 requestToken 을 받을때와 같습니다.

oauthRequest.requestURL = twitter.accessTokenURL;

oauthRequest.httpMethod = OAuthRequest.HTTP_MEHTOD_POST;

request.url = _oauthRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1(), OAuthRequest.RESULT_TYPE_URL_STRING);

loader.load(request);

private function oauthLoadHandler(event:Event):void {

// request token 리퀘스트일때
//oauth_token=&oauth_token_secret=&oauth_callback_confirmed=true
// access token 리퀘스트일때
//oauth_token=&oauth_token_secret=&user_id=&screen_name=
//위의 값을 oauthRequest 에 저장

var token:OAuthToken = new OAuthToken();
token.key = oauth_token값;
token.secret = oauth_token_secret값;
oauthRequest.token = token;

}

4. 인증 끝.

위의 과정을 통해 accessToken 과 accessTokenSecret을 갖게 되어 인증이 끝났습니다. 이제 oauthRequest값에 인증 값들이 모두 포함 되어 있기 때문에 이를 이용해서 api 호출을 하면 됩니다.

oauthRequest.requestURL = Resource URL
oauthRequest.httpMethod = Request Method

var api_loader:URLoader = new URLLoader();

var api_request:URLRequest = new URLRequest();
api_request.url = oauthRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1(), OAuthRequest.RESULT_TYPE_URL_STRING);

api_loader.load(api_request);

OAuth를 이용한 인증은 개념을 파악하면 간단하지만 처음 개념 없이 무작정 사용하기엔 어렵습니다. 서비스 프로바이더에 따라 OAuth 인증 실패 이유를 제대로 반환해 주는 곳도 있지만 한번 꼬이기 시작하면 어디서 잘못된건지 찾기도 힘든게 OAuth 인증 같습니다.

웹상에서 Flash 로 Twitter 나 Dropbox 같이 OAuth를 제공하는 서비스를 사용하고 싶으면 서버에 Proxy를 만들어서 서버를 통해서 인증을 받아야 합니다. 클라이언트 단에서 인증이 가능한 서비스 제공 업체도 있겠지만, 대부분은 서버를 통해서 인증을 받아야 보안 제약을 받지 않습니다. 그래서 FLash 를 이용한 방법은 주로 AIR(Desktop, Mobile)에서 사용 가능 합니다.

많이 사용 되는 Twitter API 는 tweetr (http://wiki.swfjunkie.com/tweetr)는 있지만, 인증에 문제가 있는지 잘못 쓴건지 제대로 동작을 하지 않아 따로 만들어 사용하고 있습니다. 검색을 해 보니 github에 Twitter API를 구현한 소스가 올라와 있는데요. 아직 구현중인걸로 보이네요;

조만간 사용하고 있는 라이브러리도 정리 해서 공유해 보겠습니다.

잘못된 점이나 궁금한 점이 있으면 댓글로 문의 주세요~

'Actionscript3.0' 카테고리의 다른 글

Flash Platform에서 OAuth 사용하여 인증 (0)	2012/01/08
[AS3] 외부에서 로드된 객체 복제(재사용) (0)	2011/05/01
[AS3] Flash 로 오디오 플레이어 만들기 (4)	2011/03/05
[AS3] TLF( Text Layout Framework ) 사용시 FlashVars 접근 문제 (2)	2011/02/18

Google Analytics 사용하기

동강 — Sat, 03 Dec 2011 11:54:55 +0900

Google Analytics

서비스를 만들어 보면 페이지뷰가 얼마나 발생하나 실 사용자는 얼마나 되나 같은 분석이 필요 합니다. 하지만 이런 분석 시스템을 구축 하기란 여간 힘든 작업이 아닐수가 없지요. 이 문서에서 소개 해 드릴 서비스는 Google Analytics 입니다. 구글이 내놓은 분석 서비스 입니다.

http://www.google.com/intl/ko/analytics/

위 주소로 들어 가서 계정을 만들면 바로 사용 할 수 있습니다. 로그인을 완료 하게 되면 계정 홈으로 들어가지는데요. 오른쪽 상단에 위치한 설정 아이콘을 클릭해서 들어 가면 분석을 할 대상을 추가 할 수 있습니다.

계정을 만드는 절차를 진행하면 등록된 서비스의 고유한 ID를 부여 받게 되고, 웹 서비스에 추가 할 수 있는 스크립트를 볼수 있습니다.

웹 속성 ID : UA-XXXXXXXX-X

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type =

 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ?

 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];

 s.parentNode.insertBefore(ga, s);
  })();

</script>

위 스크립트를 블로그나 서비스에 추가 하면 설정을 끝납니다. 다시 정리 해 보면 절차는 다음과 같습니다.

1. http://www.google.com/intl/ko/analytics/ 접속
2. 웹 로그 분석 액세스 클릭
3. 계정 홈 - 설정 클릭
4. 새 계정을 추가 해서 사용하거나, 기존에 만들어져 있는 계정에 새 웹 속성을 등록해서 사용
5. 웹 페이지 컨텐츠일 경우 추적 코드를 페이지가 추가

gaforflash

그럼 플래시로 만들어진 컨텐츠는 어떻게 하느냐? 위의 스크립트를 통해 분석을 하는 방법도 있지만, 더 쉬운 방법으로 Actionscript Library가 있습니다.

http://code.google.com/p/gaforflash/

import com.google.analytics.GATracker;

import com.google.analytics.AnalyticsTracker;

var tracker:AnalyticsTracker;

tracker = new GATracker(this, "UA-XXXXXXX-X", "AS3", true);

// ex) tracker.trackPageview("admin/change");
tracker.trackPageview("페이지이름");

이 라이브러리를 사용해서 이벤트에 따라서 페이지뷰를 날리는 방법으로 특정 이벤트에 대해 분석을 할 수 있습니다. 더 자세한 설명은 Google Code 페이지에 되어 있습니다.

http://code.google.com/apis/analytics/docs/tracking/flashTrackingIntro.html

Google Analytics는 정말 여러가지의 분석을 해 줍니다. 자주 보는것 위주로 정리를 하면 다음과 같습니다.

주요 기능

1. 지역별 방문자

2. 페이지 뷰

3. 사용자 유입량

4. 실 사용자 유입량

5. 사용자 접속 환경 ( 브라우저, 플래시 버전 등등 )

6. 실시간 방문 현황 (베타)

7. 사이트 속도

8. 방문자 흐름

9. 방문 형태 (신규 방문, 재방문)

10. 광고 분석

생각 나는 것만 정리해 본 내용이니 실제로 사용할 수 있는 데이터는 엄청 많습니다.

저는 이 블로그와 크롬 웹스토어에 올린 Daum Equation Editor 와 Daum Paper 에 적용해서 사용하고 있는데요. 데이터 질적인 면에서 서비스를 분석하는데 상당히 많이 도움이 되고 있습니다.

무료 서비스와 전문적인 서비스 지원 두가지로 제공 되니 사용해 보세요.

'i'T news' 카테고리의 다른 글

Google Analytics 사용하기 (0)	2011/12/03
Daum 에서 하반기 신입/경력 직원을 모집 합니다. (5)	2010/08/08
여러 나라들의 최저 임금 비교 (0)	2010/05/30
Flash 와 HTML5 비디오 퍼포먼스 비교 (0)	2010/02/28