이 글은 Implementing Facebook Single Sing-On 으로 올라온 Corona SDK 튜토리얼을 번역한 글입니다.
이번주에 Corona SDK에서 새로 추가된 주요 기능에 대한 튜토리얼은 Game Center Integration, ScrollView Widget, Facebook Single Sign-On 이렇게 세가지 입니다.
오늘 facebook Single Sign-On을 다루면 모두 다 소화하고 가는 거네요.

Implementing Facebook Single Sign-On
Jonathan Beebe

Corona SDK 의 Facebook Single Sign-On 기능은 iOS와 Android 모바일 디바이스에서 가능합니다. (그리고 만들기에 안드로이드 쪽이 사용이 훨씬 간편합니다.)
이 기능은 Corona Build 2011.707 이후 버전에서만 지원 됩니다.
오늘 날짜 기준으로 Corona에서는 Build 2011.704를 무료 배포 버전으로 오픈했기 때문에 유료 구매자가 아니면 707 버전이 공개될 때까지 기다리셔야 됩니다.

***** Your Facebook App

우선 여러분의 앱을 Facebook에 등록해야 합니다.
그러면 여러분은 App ID를 받으실 수 있습니다. 그 이후에 앞으로 진행하는 일들을 하실 수 있습니다.
아래 링크를 따라가서 여러분의 앱을 등록 하세요.

https://developers.facebook.com/apps

저도 이 부분은 등록을 한적이 한번도 없어서요 자세히 설명을 드리지는 못하겠네요.

우선 위 링크로 가면 이 화면이 나옵니다. (facebook에 로그인을 안 했으면 로그인 하라는 화면부터 나올 겁니다.)

Create New App 버튼을 누르면 App Display Name 과 App Namespace를 넣으라는 화면이 나옵니다.

오른쪽에 ?에 마우스를 올려 놓으시면 그게 뭔지 설명이 나옵니다.

그리고 동의란을 체크하고 Continue버튼을 누릅니다.

다시한면 Security Check를 위한 화면이 나오고 해당 텍스트를 입력 한 다음에 submit을 누르면....

이렇게 핸드폰 번호나 신용카드로 인증과정을 사전에 거쳐야 다음 사항을 진행 할 수 있다고 나옵니다.
그 다음 과정은 진행해 보지 않았습니다.
지금 회사라서 주말에 집에서 차근차근 해 봐야겠습니다.

일단 이 과정들을 모두 거쳐서 햅이 등록됐다고 치고 다음 단계를 보겠습니다.


앱이 등록된 후 Native iOS App 이나 Native Android App를 체크해야 합니다.

iOS앱에서는 iOS Bundle ID가 Corona를 빌드한 provisioning profile과 같아야 합니다. 그리고 iPhone App Store ID 란에 여러분의 iTunes App ID를 넣어야 합니다. 여러분의 앱이 iTunesConnect 포탈에 추가 됐으면 여러분의 앱에 App Store ID가 부여 됐을 겁니다. (앱을 업로드하기 이전에도 받을 수 있습니다.)

아직 여러분의 앱이 iTunes App ID가 없다면 다른 iTunes App ID를 쓰셔도 됩니다. 하지만 나중에 앱이 ID를 받게 되면 곧바로 바꾸셔야 합니다.

제대로 된 bundle ID와 정확한 iTunes ID를 입력하는 것은 아주 중요합니다. 그렇지 않으면 여러분 앱에 Facebook을 implementation 하지 못합니다.

***** build.settings
이 부분은 iOS에만 해당 되는 것입니다. 안드로이드용 앱에는 build.settings에 아무것도 할 필요가 없습니다.

iOS는 CFBundleURLTypes키를 넣어야 합니다. 그 안에 CFBundleURLSchemes 키를 넣기 위해서요.
아래 샘플 코드가 있습니다.
settings = {
    iphone = {
        plist = {
            UIApplicationExitsOnSuspend = false,
            CFBundleURLTypes =
            {
                {
                    CFBundleURLSchemes =
                    {
                        "fbXXXXXXXXXXXXXX",
                    }
                }
            }
        }
    }
}
괄호가 너무 복잡하게 돼 있죠? 그냥 이거 복사해서 쓰세요.

디폴트로 UIAppLicationExitsOnSuspend는 기본으로 false로 세팅돼 있습니다.  그래서 이 부분을 명시하지 않아도 false로 세팅됩니다.
위에 굳이 false로 선언한 것은 만약 이것이 false가 아니면 작동하지 않기 때문에 그것을 remind하기 위해 넣었습니다.
"fbXXXXXXXXXXXXXX 부분에 X표시들은 여러분의 Facebook App ID를 넣으셔야 할 부분입니다.
이 CFBundleURLSchemes에 더 많은 URL schemes를 넣으실 수 있습니다.
CFBundleURLSchemes =
{
    "fb1234567890",
    "YourCustomScheme",
    "AndAnotherOne"
}

Test, test, test!
이렇게 세팅하면 facebook 싱글 사인 온 작업을 할 수 있습니다.
하지만 반드시 테스트를 해 보는건 기본이죠.

facebook.login()함수를 call했을 때 Facebook app이 디바이스에 인스톨 돼 있으면 그것이 나올 겁니다. 그리고나서 당신의 앱을 인증하라고 나올 겁니다. (아직 한번도 인증과정을 거치지 않았다면요)
facebook앱이 없다면 웹브라우저가 실행 될 겁니다. 그리고 유저가 로그인 과정을 다 거치면 다시 원래 앱으로 돌아 올 겁니다.
(이 과정에서 UIApplicationExitsOnSuspend 에 false로 선언되어 있어야 제대로 동작합니다.)

자 여기까지가 Facebook Single Sign-On 을 implemation하는 과정입니다.
facebook쪽 등록하는 부분하고 Corona SDK에서 iPhone인 경우 build.setting에 등록하는 부분이 좀 작업을 해야 하네요.
반면에 안드로이드 쪽은 Facebook쪽에만 등록을 시키면 그 다음엔 별다른 세팅 없이 진행 시킬 수 있나 봅니다.

여기까지 완료 됐으면 이제 facebook single sign on 을 할 기본 환경이 갖춰진 것이구요.
이제 여러분이 코딩하면서 facebook을 이용하면 됩니다.

여기를 클릭하시면 위와같이 Corona SDK의 facebook관련 API를 보실 수 있구요.

SampleCode-Networking-facebook으로 가시면 위와같은 샘플 앱이 있습니다.

이 부분은 나중에 자세히 다뤄 보겠습니다.

Basically JavaScript is for dynamic display in Web Programming.
In HTML5 Not only JavaScript but also CSS has excellent dynamic display functions.

One of the Thing is below webkit-transition.

-webkit-transition

HTML5 는 JavaScript와 CSS와 협력해서 여러 효과를 냅니다.
주로 JavaScript 가 동적인 효과를 주는데 사용되는데요. 이제 CSS에서도 이런 동적인 효과를 줄 수 있습니다. webkit 중에 transition을 사용하시면 됩니다.

Just Click the Right and Left Button then you can see it.
왼쪽 오른쪽 버튼을 눌러보세요.



Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)


The Red rectangle below is moving smoothly with using webkit-transition.
아래 사각형은 아주 자연스럽게 움직이죠?
Animation 효과도 줄수 있고 게임에서도 이용할 수 있지 않을까요?

아래 소스코드가 있습니다. 다운 받아 가세요.
Download the source code below.

Tutorial: Game Center Integration (iOS)
Jonathan Beebe

iOS의 게임센터를 이용할 수 있는 기능이 daily build 2012.725에 포함 됐습니다.
이 iOS 의 Game Center를 어떻게 이용해야 하는지 살펴보겠습니다.
이번에 선보인 iOS Game Center 이용 기능은 기존의 gameNetwork API의 연장입니다.

iOS Game Center를 이용하기 위해 Apple side에서 어떤 일을 해야 하고 (iTunes Connect), 코로나에서는 어떤 셋업이 필요한지 그리고 여러분의 앱에서 이 기능을 제대로 이용하려면 어떻게 해야 되는지에 대해 간단히 알아보겠습니다.

Game Center는 다른 game networks(OpenFeint, Papaya)와 비교해서 좀 다른식으로 적용해야 합니다. build.settings와 System Event 파트를 다룰 때 이 부분을 이야기 하겠습니다.

***** iTunes Connect
Link: Visit the iTunes Connect Portal

Game Center를 이용하기 위해 Apple 쪽에서 해야 할 일에 대해서는 자세히 언급하지는 않겠습니다.
간단히 말해서 여러분은 여러분의 앱에서 Game Center 기능을 이용하기 위해 우선 Leaderboard(high score boards)와 Achievements 를 생성해야 합니다.
또한 개개의 Leaderboard와 Achievement ID도 할당해 줘야 합니다.

1. Manage Your Application 링크를 클릭

2. 여러분의 앱 아이콘을 클릭

3. 오른쪽에 있는 파란색의 Manage Game Center 버튼을 클릭

4. Enable 버튼을 클릭

5. Leaderboard 와 Achievements 부분에 있는 Edit(Set up) 을 클릭

6. Leaderboards와 Achievements를 추가

7. 각각의 Leaderboard ID와 Achievement ID

물론 여러분의 게임에 Achievements(혹은 Leaderboard)를 넣고 싶지 않다면 이 부분은 그냥 지나가셔도 됩니다.

***** build.settings

주목:이 파트는 여러분들이 Game Center를 이용하려고 하던지 OpenFeint와 Game Center를 동시에 이용하려고 하던지 어떤 경우에도 아주 중요합니다.
만약 여러분이 OpenFeint를 사용하지 않고 오직  Game Center만 사용하려고 한다면 코로나에 openfeint 컴포넌트를 앱에서 빼내 버리고 컴파일 하라고 알려줘야 합니다.

그 방법은 아래와 같이 components 테이블에 빈 대괄호만 넣어 주면 됩니다.
settings =
{
    iphone =
    {
        components = {}
    }
}

OpenFeint와 Game Center 를 모두 사용하시려면 openfeint 컴포넌트를 사용할 거라고 build.settings에서 확실히 알려 줘야 합니다.
settings =
{
    iphone =
    {
        components = { "openfeint" }
    }
}

build.settings와 관련해서 알아야 할 또 하나는 Leaderboards 와 Achievements를 셋업하지 않고 테스트만 하고자 할 경우 여러분은 GKTapper Xcode 샘플을 이용해서 구현 할 수 있습니다.
그러기 위해서는 아래와 같이 하시면 됩니다.
settings =
{
    iphone =
    {
        plist =
        {
            CFBundleIdentifier = "com.appledts.GKTapper",  -- temporary line for testing!
        },
        components = {}
    }
}

***** System Events and initCallback
일반적으로 gameNetwork.init()은 main.lua 처음 시작할 때 불려 집니다. 그리고 앱이 끝날 때까지 다시 불려질 일은 없습니다. Game Center를 이용하는 방법은 이 gameNetwork.init()과 비교해서 크게 두가지 다른 점이 있습니다.
Game Center는 iOS안의 system-wide 프로세스입니다. 유저들은 앱이 suspend될 때마다 Game Center에서 로그 아웃 됩니다. 그래서 앱이 applicationStart 시스템 이벤트를 Receive 받을 때마다 gameNetwork.init()을 불러야 할 겁니다. 이것이 첫번째 다른 점 입니다.
두번째 다른 점은 init request가 마무리 됐을 때 한번 불려지는 initCallback 함수 입니다.

아래 소스는 network 제공자로 Game Center를 사용할 때 gameNetwork.init()을 어떻게 사용해야 하는지를 보여주는 코드입니다.

local gameNetwork = require "gameNetwork"
local loggedIntoGC = false

-- called after the "init" request has completed
local function initCallback( event )
    if event.data then
        loggedIntoGC = true
        native.showAlert( "Success!", "User has logged into Game Center", { "OK" } )
    else
        loggedIntoGC = false
        native.showAlert( "Fail", "User is not logged into Game Center", { "OK" } )
    end
end

-- function to listen for system events
local function onSystemEvent( event )
    if event.type == "applicationStart" then
        gameNetwork.init( "gamecenter", initCallback )
        return true
    end
end
Runtime:addEventListener( "system", onSystemEvent )

initCallback 리스너 함수를 보면 event 테이블에는 한개의 프로퍼티 event.data 가 있습니다. 이것은 Game Center 에 로그인이 성공하면 true가 되고 실패하면 nil이 됩니다.
유저가 로그인 상태가 아닐 경우 체크해서 어떤 핸들링을 할 수가 있습니다.
좀 더 자세한 사실은 gameNetwork.init() documentation 를 보세요.


***** Game Center Request
Game Center를 사용할 때 아래 열거한 것들을 gameNetwork.request()와 함께 사용될 수 있습니다.
    •    setHighScore
    •    loadScores
    •    loadLocalPlayer
    •    loadPlayers
    •    loadFriends
    •    loadAchievements
    •    unlockAchievement
    •    resetAchievements
    •    loadAchievementDescriptions
    •    loadFriendRequestMaxNumberOfRecipients
    •    loadLeaderboardCategories

보다 자세한 용도를 보려면 gameNetwork.init() documentation 를보세요.
대부분의 위 request들은 요청한 데이터를 받기 위한 리스너를 가질 수 있습니다.
Game Center request(요청) 들에서 가장 헛갈리는 부분은 이 이벤트 테이블을 통해서 어떤 데이터가 당신의 callback 리스너에 전달 되느냐 입니다. 다시 한번 말씀드리자면 보다 자세한 사항은 gameNetwork.init() documentation 나 Official Game Kit Documentation 안의 해당 페이지를 통해 알아 볼 수 있습니다.
만약에 fail일 경우 JSON 스트링을 통해 event table에 encode됩니다. 그리고 전화기의 native alert으로 전화기 화면에 표시 됩니다. 아래 샘플 예제를 참조하세요.
local gameNetwork = require "gameNetwork"
local json = require "json"

-- callback listener for Game Center requests
local function requestCallback( event )
    if event.type == "loadFriends" then
        local data = json.encode( event.data )
       
        -- show encoded json string via native alert
        native.showAlert( "event.data", data, { "OK" } )
    end
end

gameNetwork.request( "loadFriends", { listener=requestCallback } )

***** Corona GCTapper Sample
이상으로 GameCenter의 아주 기본적인 사항들을 살펴 봤습니다.
Corona SDK에서는 Apple의 GKTapper Xcode Sample 을 수정해서 Corona에서 사용할 수 있도록 했습니다.
아래 링크를 클릭하시면 그것을 이용한 샘플 코드를 받아 보실 수 있습니다.
View the Corona Game Center Sample Project on Github

위 내용 원본은  Corona SDK 웹싸이트에있습니다.
http://blog.anscamobile.com/2012/01/tutorial-game-center-integration-ios/

오늘은 iOS Game Center를 사용하기 위한 기초 지식을 공부했구요.
다음엔 위에 다운 받은 샘플 파일을 분석할 생각입니다.