IT 기술 따라잡기

처음 Sencha SDK 설치 한 후 지지난 번에 첫번째 Sencha Application을 만들어 봤습니다.

그 다음에 Sencha에서 제공하는 Tutorial대로 차근차근 배워보기로 하고 지난 시간에 간단한 맛보기 코드를 다뤘습니다.

오늘 공부할 걸 보니까 다시 Sencha Touch로 만든 첫 번째 앱이네요.
지난번 만든건 1.1.1 버전으로 만든거니까 이번에 할 거는 2.0 베타 버전으로는 처음 만드는 앱입니다. ^^

오늘 배울 앱을 보니까 메인 화면에 Sencha Logo 가 나오고 밑에 텍스트가 나오네요.
그리고 bottom에 toolbar가 있고 세개의 버튼이 있습니다.
두번째 blog는 JSON으로 원격 웹 페이지 내용을 보여주는 부분이구요.
세번째 Contact us는 이메일을 보내는 form이 나오더라구요.

정확히 어떤 앱이고 또 이 앱을 구현하려면 어떻게 코딩을 해야 하는지 자세히 공부해 보도록 하겠습니다.

***** Getting Started
첫번째로 할 부분은 우리가 지난시간에 했던 코드랑 거의 비슷합니다. 화면이 있고 툴바가 하나 있으니까 우선 그것부터 만들어 보겠습니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});
처음엔 별거 없습니다. launch:function()안에 코딩을 하는데 Ext.create 을 사용해서  안에 Ext.tab.Panel을 사용합니다. fullscreen은 true로 하고 item에는 Home버튼을만들고 Welcome이라는 글을 쓰게 될 겁니다.

아주 기초적인 부분입니다. 처음부터 꼼꼼히 다 알려고 하면 지칩니다.
자꾸자꾸 반복해서 몸으로 익히세요. 첨부터 머리로 익히려고 하면 골치 아픕니다.

이제 할 일은 tabBar를 밑으로 내리고 Welcome 부분에 이미지도 넣고 텍스트도 조금 더 넣을 겁니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                }
            ]
        });
    }
});

tabBar를 밑으로 하는건 tabBarPosition을 Bottom으로 하면 되구요. 이미지와 텍스트를 추가하는건 html부분을 바꾸시면 됩니다.

이제 첫번째 화면은 완성 됐죠? tabBar 넣는 일은 이제 여러번 반복해서 쉽게 하실 수 있을 겁니다.

***** Adding The Blogs Page
이제 두번째 페이지를 넣을 차례입니다.

두번째 페이지는 위와 같이 display할 겁니다.
위 아래 tab bar가 있고 가운데에는 List 가 들어갑니다. 이 텍스트들은 JSON을 통해서 외부에서 불러옵니다.
그러면 저 텍스트를 클릭하면 그에 따른 내용들이 보여집니다. 일반 웹페이지를 불러온거니까 일반 웹페이지 Navigate하는 식으로 다 작동 될 겁니다.
코드는 아래와 같습니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',

                    store: {
                        type: 'tree',

                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },

                        proxy: {
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    },

                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    }
                }
            ]
        });
    }
});

코드가 너무 복잡하죠? 중괄호{}도 너무 많구요. 직접 코딩하실 때는 중괄호 끝나는 부분에 } 이게 어떤 부분의 끝인지 주석을 달아 주시면 나중에 수정하거나 분석할 때 편하실 겁니다.
여기선 몇개의 못보던 configuration들이 있죠? xtype,displayField,store 같은 것들이요.
store config는 nested list에게 data를 어떻게 수집(fetch)하는지를 알려 줍니다.
store config 내에 여러가지 요소가 있는데요.
type을 tree로 한 건 tree store를 생성한다는 거구요.
fields는 블로그 내 데이터 중 어떤 fields들을 가져오겠다고 알려주는 겁니다.
이 경우엔 블로그에서 데이터를 어떤 field 이름을 사용해서 처리했는지를 알아야 겠죠?
proxy는 이 데이터를 어디에서 가져올 거라는 것을 알려 줍니다. 이 부분은 나중에 좀 더 자세히 다룰 겁니다.
root는 leaf가 아니라는 것을 알려 줍니다.
이 Store configuration중에서 proxy가 가장 중요한 역할을 합니다.
이 예제에서는 블로그의 데이터를 JSON-P 양식으로 리턴하기 위해 Google의 Feed API Service를 사용할 거라는 것을 proxy에게 알려줍니다.
Google의 Feed API Service는 어떤 블로그의 데이터에서도 쉽게 데이터를 가져와서 우리들의 엡에 display할 수 있도록 해 줍니다.
@@@@@ url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://rss.slashdot.org/Slashdot/slashdot', 이렇게 바꾸시면 다른 데이터를 가져 올 수 있습니다. 서버단에서 웹 페이지는 어떻게 만들어야 되는지는 나중에 다룰 겁니다. @@@@@
그 다음으로 proxy안에는 rootProperty: 'responseData.feed.entries' 부분이 있습니다.
이 부분은 그냥 이렇게 하면 Google에서 알아서 처리를 합니다. 마지막에 entries라고 복수형을 썼기 때문에 배열 형식으로 구글에서 처리할 겁니다.
이건 그냥 나중에 copy and paste해서 계속 이렇게 사용하시면 됩니다.

그 다음에 나오는 것이 detailCard와 listeners입니다.
detailCard는 유저가 tab했을 때 특정한 view를 제공할 수 있도록 해 줍니다. 우리는 스크롤이 가능하도록 세팅을 했고 글자를 좀 더 보기 좋게 하기 위해서 styleHtmlContent를 사용했습니다.

다음은 listeners에 있는 itemtap인데요.
이건 어떤 item을 tap했을 때 그 해당 item이 무엇인지 알 수 있도록 해 줍니다.
각 아이템을 클릭하면 detail들이 나올텐데요 클릭한 item을 보내줘야 해당 details를 가져올 수 있습니다.

조금 코드가 생소해서 어렵게 느껴 질 수도 있겠지만 이 코드로 직접 만들어 보시고 이것 저것 변형 시키면서 익히시면 훨씬 이해가 빠르실 겁니다.

오늘은 여기까지 하구요.
다음 시간에는 메일 보내는 화면을 마치고 세개의 화면을 하나의 앱속에서 표현될 수 있도록 하는 작업을 해 보겠습니다.

Corona SDK를 만든 Ansca의 모토 중 하나가 숙련된 프로그래머가 아닌 보통 사람들도 모바일 앱을 만들 수 있도록 하자 입니다.

Corona SDK가 나온지 2년여 됐고 이런 사례들은 많이 나왔습니다.

오늘도 한 평범한 아이가 Corona SDK를 이용해서 자신의 앱을 만들고 이를 마켓에 올린 이야기를 소개합니다.

======= o  ======= o ======= o ========

제 이름은 Tyler Poon 이고 9살입니다. 저는 Corona를 이용해서 게임을 만들었습니다.

저는 Visual Basic Express for Kids라는 책을 통해서 7살때 처음 프로그래밍을 접하게 됐습니다.
그리고 Code Academy라는 웹사이트의 온라인 Tutorial들을 통해서도 배웠습니다.
그리고 나서 Youtube의 tutorial들을 보기 시작했고 테스트 프로그램들을 만들어 보기 시작했습니다.

Corona는 내가 좋아하는 툴입니다. 왜냐하면 아주 powerful하거든요. 그리고 간단하고 재밌어요. 레고처럼 아이들도 끼워 맞추면서 프로그램을 할 수 있더라구요. 코로나는 사용하기 아주 편하고 강력해서 더 재밌어요. 누구든지 관심이 있고 프로그래밍 능력이 아주 조금만 있어도 게임을 만들 수 있어요.
코로나는 또한 21세기에 맞아요. 왜냐하면 스마트폰이나 태블릿용 앱을 만드는데 사용될 수 있거든요. 스마트폰과 태블릿 용 앱을 모두 개발하고 싶으시면 코로나로 하시면 되요. 자동적으로 두 플랫폼에 맞게 빌드해 주거든요.

제가 만든 앱은 Balloons and Bombs예요.

만들면서 아주 재밌었어요 그리고 올리자마자 몇주 안에 1000번이 넘는  다운로드가 있었어요. 이 세상에서 제가 아는 사람은 1000명이나 되지 않아요. 그러니까 내 가족하고 친구들만 다운 받은건 아니예요.

제가 이 앱을 만든 과정은 코딩하고 테스트하고 수정하고 개선하고 하는 이런 과정들을 계속 반복했어요. 코딩을 할 때는 메인 게임을 만들고 타이틀 스크린을 만들었어요. 내가 할 수 없었던건 graphic이었어요. 저는 그래픽 웹 사이트를 통해서 좋은 이미지들을 얻어왔어요.
메인 게임을 코딩하고 나서 내 가족들하고 친구들한테 게임을 테스트 해 달라고 했어요. 가족들하고 친구들은 버그를 찾고 개선사안들을 제안하고 해 줬어요. fix하는 단계에서는 그들이 찾은 버그들을 수정했어요. 개선단계에서는 여러 제안들을 제 앱에 적용했어요. 그리고 나서 이 과정들을 반복했어요.

내 스스로 코딩을 할 수 있다는게 너무 재밌고 멋졌어요. 다음엔 꼭 제가 직접 디자인한 그래픽으로 제 앱을 만들고 싶어요.

제일 재밌었던건 앱을 테스트 하면서 새로운 것들을 배우기 위해 Corona API를 찾고 하나하나 배우는 것이었어요. 처음에는 문제점이 발견되면 뭘 해야 될지 몰랐지만 그 방대한 API에서 하나하나 찾아내는 방법을 알고 난 뒤엔 너무 재밌었어요.

Ansca에서 저에게 이런 글을 써 달라고 제안이 왔을 때 너무 좋았어요. 한가지 더 제가 얻은 보너스는 제 친구들도 아주 재밌어 한다는 거예요. 코로나는 애들이 배우고 사용해도 될 만큼 아주 쉬워요. 나는 내 친구들에게 코로나에 대해 가르쳐 줄 생각이예요. 걔네들도 다른 애들한테 가르쳐 주면 아주 많은 아이들이 코로나를 알 수 있겠죠? 또 한가지 보너스로 얻은 것은 제 아빠도 코로나로 게임을 만들려고 한다는거예요. 아빠는 주로 JAVA와 C로 프로그램을 만드셨거든요.

제 생각엔 코로나는 애들이 사용하기 쉽고 또 애들이 아주 훌륭한 앱을 만드는데 함께 할 툴이라고 생각해요.


======= o ======= o ======= o ======== o ========

애가 아주 귀엽게 글을 잘 썼네요.
Corona SDK는 Script 언어이기 때문에 이렇게 평범한 사람들도 배우기 쉽습니다. 그리고 Box 2D를 사용한 Physics엔진을 지원하고 또 쉽게 사용할 수 있도록 만들어서 간단하게 Physics 효과를 줄 수 있습니다.
그래서 쉽게 간단한 게임을 제작할 수 있습니다.

Tyler Poon이 만든 Balloons and Bombs는 코로나에서 제공하는 여러 샘플들을 잘 연구하고 또 나름대로 아이디어를 내서 적용해서 만든 것 같네요.
그래픽 이미지는 웹 싸이트에서 다운 받아서 썼다구 하구요.

Tyler는 2년 전에 Visual Basic에 대해 공부하고 유튜브등을 통해 프로그래밍 기법을 배웠다고 하는걸로 봐서 프로그래밍에 관심이 많았나 봐요.

Corona 가 아주 쉽다고는 하지만 이정도의 관심은 있어야 프로그래밍을 할 수 있을거예요.
그리고 Tyler의 아버지도 프로그래머 셨네요. 아마 그 영향도 있었나 봅니다.

모바일 앱을 만들고 싶으시면 여러분들도 한번 도전해 보세요.
재밌을 거에요.

그리고 혹시 프로페셔널 프로그래머들 이 글을 읽고 아무나 프로그래밍을 하면 내 밥줄 끊어지는거 아냐? 하면서 걱정하실 필요 없어요.

게임 만들면서 적용해야 하는 여러 로직이나 전체 설게 기타 전문적인 지식은 항상 필요하고 이건 단시간에 되는게 아니라 오랫동안 노하우가 축적되야 하니까 본인의 실력을 차근차근 높이시면 걱정하실거 없습니다.
단지 남들 소스 코드 가져다가 약간 변형해서 사용하는 정도가 아니라 확실히 자신의 것으로 만들고 자신의 노하우를 익히고 또 여러 정보를 공유해서 네트워크를 만들고 커리어를 만들고하는 전문가적인 활동을 하셔야 겠죠?

======= o ======= o ======= o ======= o ======= o =======

또 한가지 짜투리 소식은 조만간 안드로이드를 위한 in App Purchase도 나온다고 하네요.
관련 동영상 보시려면 여기를 클릭하세요.

안드로이드를 위한 In App Purchase는 안드로이드 마켓에만 적용 될 겁니다.
아마존이나 Nook에서는 적용이 안 될 거구요.
나중에 Tutorial 나오면 정리할께요.
그럼....

오늘도 꾹~~꾹~~~ 추천 날려 주시면 감사하겠습니다.  ~~~~~~~~

안녕하세요?

이번주에는 코로나에서 enterFrame에 대한 블로그 강좌를 했네요.
이 강좌 내용을 아래에 정리했습니다.

원본은 여기를 클릭하시면 보실 수 있습니다.

Understanding Corona’s enterFrame Event

오늘은 코로나의 enterFrame Event에 대해 알아보겠습니다.
Event 전반에 대해 알고 싶으시면 여기를 클릭하세요.

****** What is an enterFrame event?

앱이 시작하면서 여러분의 앱은 아주 빠른 속도로 화면을 새로 갱신하면서 보여주게 됩니다.
이 속도를 나타내는 단위는 frames-per-second (FPS)입니다. 코로나에서는 두가지 세팅을 지원하는데요. 30과 60 FPS입니다.
관련된 정보는 여기에 있습니다.

이 속도를 다른 말로는 framerate이라고도 합니다.
여러분이 config.lua파일에 60FPS로 설정을 했으면 이것은 1초에 스크린을 60번 다시 그린다는 겁니다.

enterFrame아라는 말은 새로운 프레임에 entering하는 순간을 말합니다. 즉 framerate이 30이라면 이 enterFrame이벤트는 1초에 30번 일어나게 됩니다.
그러니까 이 enterFrame 이벤트를 사용하면 여러분은 매 프레임마다 어떤 컨트롤을 할 수 있게 되는 겁니다.

****** enterFrame Listeners
이 enterFrame이벤트와 다른 많은 코로나 이벤트와 다른점은 리스너를 Runtime으로만 설정할 수 있다는 겁니다.
각 object마다 이 enterFrame을 따로 적용할 수는 없습니다.

아래 이 enterFrame 사용 예제를 보세요.

-- listener function
local function onEveryFrame( event )
    print( "This function will be called on every frame." )
end

-- assign the above function as an "enterFrame" listener
Runtime:addEventListener( "enterFrame", onEveryFrame )

우선 함수를 만들고 그 다음에 Runtime에 enterFrame 이벤트를 add합니다.
이 예제는 아주 기본적인 거구요. 다음 예제에서 조금 응용한 걸 보여드리겠습니다.

***** Translating objects
아래 예제는 각 프레임마다 객체가 천천히 아래로 내려갔다가 한번에 다시 올라가고 또 내려오는 동작을 반복하는 움직임을 보일 겁니다.

local ball = display.newImage( "redball.png" )
ball.x = math.random( display.contentWidth )
ball.y = -ball.contentHeight

-- listener function for enterFrame event
local function onEveryFrame( event )
    ball:translate( 0, 1 ) -- move ball 1pt down on every frame

    -- move ball above top of screen when it goes below the screen
    if ball.y > display.contentHeight then
        ball.y = -ball.contentHeight
    end
end

-- assign the above function as an "enterFrame" listener
Runtime:addEventListener( "enterFrame", onEveryFrame )

***** Tracking Time

enterFrame 리스너의 이벤트 테이블 안에는 여러분의 앱이 시작한 이후부터 지금까지의 시간에 대한 정보가 들어있습니다.
event.time이 시작한 시간인데요. system.getTimer()메소드를 통해서 값을 얻을 수 있습니다.
아래 예제는 유저가 버튼을 누르고 3초 이상 지났을 때를 체크하는 코드 입니다.
local timeThresh = 3

local button = display.newImage( "button.png" )
button.markTime = system.getTimer()

-- enterFrame listener function
local function trackTime( event )
    local secondsPassed = (event.time - button.markTime) / 1000 -- divide by 1k to get seconds
   
    if secondsPassed >= timeThresh then
        print( "You held down the button for at least " .. timeThresh .. " seconds." )
       
        -- stop tracking time
        Runtime:removeEventListener( "enterFrame", trackTime )
    end
end

-- touch event for the button object
function button:touch( event )
    if event.phase == "began" then
        print("Touched");
       
        -- assign touch focus to this object
        display.getCurrentStage():setFocus( self )
        self.isFocus = true
       
        -- mark time and start tracking time with enterFrame listener
        self.markTime = system.getTimer()
        Runtime:addEventListener( "enterFrame", trackTime )
   
    elseif self.isFocus then
        if event.phase == "ended" or event.phase == "cancelled" then
           
            -- stop tracking time
            Runtime:removeEventListener( "enterFrame", trackTime )
           
            -- remove touch focus from button
            display.getCurrentStage():setFocus( nil )
            self.isFocus = false
        end
    end
   
    return true
end

button:addEventListener( "touch", button )

이 코드 아주 유용하게 쓰여질 수도 있겠네요.

****** Special Considerations

이 enterFrame은 각 프레임별로 체크를 하기 때문에 아주 강력합니다. 대신에 메모리를 많이 소비하므로 꼭 필요할 때만
사용하고 그렇지 않을 때는 없애 줘야 합니다.
한 scene에서 enterFrame을 사용했는데 다른 scene으로 넘어갈 때 이 enterFrame을 제거하지 않는다면 유저가 다시 첫번째
scene으로 돌아 왔을 때는 각 프레임마다 이 enterFrame이 두번 실행 될 겁니다.
다시 다른데 갔다가 돌아오면 세번 실행되겠죠? 각 프레임마다.... 그럼 performance가 아주 형편 없어질 겁니다.

이 enterFrame사용시 절대 잊어서는 안되는 것이 이런 상황을 만들지 않는 겁니다.

~~~~~ ~~~~~