IT 기술 따라잡기

지난시간에 Sencha Touch 2.0 Beta SDK Tutorial에 있는 예제를 해 봤습니다.
3개의 Tab 이 있었고 첫번재 탭은 이미지와 텍스트 뿌리는 거였고 두번째 탭은 원격 블로그를 JSON으로 불러오는 거 였습니다.
여기 두번째 까지 다뤘었구요. 세번째 이메일 보내는 탭을 할 차례인데요. 이거 하기 전에 두번째 탭에 대해 조금 더 살펴 보고 가죠.

Tutorial에는 없는 내용인데 그냥 제가 궁금해서 한번 살펴 봤습니다.
두번째 탭에서 가장 중요한 부분은 아래 부분이었습니다.

 url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',

구글 api를 이용해서 http://feeds.feedburner.com/SenchaBlog 의 내용을 가져 오는 거 였습니다.
저 웹사이트를 한번 가 봤습니다.

우리가 지난시간에 만들었던 List 첫번째 제목과 이 웹싸이트 첫번째 글 제목이 같네요.
그리고 이 List의 첫번째 아이템을 클릭하면 저 웹싸이트의 해당 글 내용이 그대로 나옵니다.
위 웹사이트의 소스를 한번 봤습니다.

제목이 <title> 태그 안에 있죠? <author>도 있고 <content> 도 있습니다.

이는 지난시간에 했던 아래 fields tag랑 일치합니다.

fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],
즉 proxy에서 설정한 url로 가서 fields 에 명시한 필드들의 값을 googleapi를 거쳐서 가져 오는것 같습니다.

혹시나 해서 저 소스를 복사해서 제 local 에 넣고 proxy의 url 을 local의 해당 파일로 설정했는데 잘 안 되더라구요.
이번 tutorial에서는 client side에서 작업하는 것만 돼 있고 원격 server side에서 작업하는 방법이 자세하게 설명돼 있지 않아서 방법을 잘 모르겠습니다.

혹시 server side 에서 어떻게 하는지 아시는 분이나 이것 관련해서 자세히 설명된 강좌 싸이트 아시는 분 알려주시면 감사하겠습니다.

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

그럼 지난시간에 이어서 세번째 탭인 이메일 보내기를 해 보겠습니다.

***** Creating a Contact Form

마지막으로 우리가 다룰 부분은 contact form을 생성하는 겁니다.
우리는 유저이름과 이메일 주소 그리고 메세지를 받을겁니다. 그리고 이것을 FieldSet을 이용해서 보기 좋게 만들거구요. 아래 코드를 참조하세요.
Ext.application({
    name: 'Sencha',

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

            items: [
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: '(email address is optional)',
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit();
                            }
                        }
                    ]
                }
            ]
        });
    }
});

이 코드를 보시면 fieldset을 가지고 있는 form을 생성한 것입니다. fieldset에는 3개의 field가 있습니다. (name,email,message)
그리고 layout은 VBox layout을 사용했구요. 이것은 아래위로 아이템들을 정렬합니다. 아래쪽에는 tap handler와 함께 Button이 하나 있구요. 이 버튼이 눌려지게 되면 데이터가 url로 전달되고 submit을 통해서 결과값을 받습니다.

이 예제에서는 여기까지만 있는데요. example 폴더의 getting started 예제를 보면 버튼이 아래와 같이 돼 있습니다.
{
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',

                            // The handler is called when the button is tapped
                            handler: function() {

                                // This looks up the items stack above, getting a reference to the first form it see
                                var form = this.up('formpanel');

                                // Sends an AJAX request with the form data to the url specified above (contact.php).
                                // The success callback is called if we get a non-error response from the server
                                form.submit({
                                      success: function() {
                                        // The callback function is run when the user taps the 'ok' button
                                        Ext.Msg.alert('Thank You', 'Your message has been received', function() {
                                            form.reset();
                                        });
                                    }
                                });
                            }
                        }

버튼을 누르면 Contact.php로부터 결과값을 받아서 성공했을 경우 Message를 띄워 주는 겁니다.

Contact.php에는 간단하게 아래와 같이 돼 있네요.
{
    "success": true
}

일단 여기까지 3개 화면 모두 각각 만들어 봤습니다.

이제 이것을 하나로 모으는 일이 남았습니다.

모으는 방법은 .join("") 을 사용하는 방법이 있고 , 를 찍고 그냥 다음 item을 넣는 방법이 있습니다.

아래가 전체 소스입니다.
//We've added a third and final item to our tab panel - scroll down to see it
Ext.application({
    name: 'Sencha',

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

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    html: [
                        '<img width="65%" 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</h2>'
                    ].join("")
                },
                {
                    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'));
                        }
                    }
                },
                //this is the new item
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: '(email address is optional)',
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit();
                            }
                        }
                    ]
                }
            ]
        });
    }
});

위 화면이 완성된 화면입니다.

이 Tutorial은 여러분 localhost :  http://localhost/sencha-touch-2-rc/docs/#!/guide/first_app 로 가시면 보실 수 있습니다.
웹으로 보시려면 http://docs.sencha.com/touch/2-0/#!/guide/first_app
로 가시면 보실 수 있습니다.

그리고 Sencha Touch SDK 는 http://www.sencha.com/products/touch/download/ 로 가셔서 아래 2.0 베타버전을 다운 받으셔서 여러분 서버에 설치하세요.

2.0 Release Candidate for Developers

이번 시간은 본격적인 Tutorial로 들어가기 전에 샘플 앱을 하나 만들어 본 겁니다.
다음 시간부터 본격적으로 Sencha Touch Tutorial을 정리해 보도록 하겠습니다.

***** *****

처음 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 나오면 정리할께요.
그럼....

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