안녕하세요. 김종광입니다.

Sencha Blog 글을 번역해 봤습니다.
정확한 표현을 위해 원글을 유지 했습니다. 번역글의 완성도를 위해 매끄럽지 않은 부분은 여러분이 좀 알려 주시기 바랍니다.

아울러,  “한국 센차 유저 그룹” 페이스북 페이지도 많이 방문해 주세요.^^


Leveraging PhoneGap within Sencha Touch
Sencha Touch 에서의 PhoneGap 활용

November 25, 2013 | Ross Gerbasi

Introduction
소개

With the release of Sencha Touch 2.3 and Sencha Cmd 4, creating your cross platform hybrid applications has never been easier. PhoneGap is now a key feature in the Sencha Touch mobile workflow integrating seamlessly into the newly released, NodeJS based, PhoneGap command line interface. For an in-depth look at creating an application with Sencha Touch and PhoneGap, or Cordova, check out the Sencha & PhoneGap Video Tutorial.

Sencha Touch 2.3과 Sencha Cmd 4의 출시와 더불어, 크로스 플랫폼 하이브리드 애플리케이션의 생성이 매우 간편해졌습니다. PhoneGap은 Sencha Touch 모바일 워크플로 내에서 신규출시된 NodeJS 기반의 PhoneGap 커맨드 라인 인터페이스와 매끄럽게 통합시키는 역할을 하는 것을 특징으로 갖고 있습니다. Sencha Touch와 PhoneGap, 또는 Cordova를 사용한 애플리케이션의 생성에 대해 상세히 살펴보기 위해, Sencha & PhoneGap 비디오 튜토리얼을 확인해 보세요.

Sencha and PhoneGap

Creating Your Application
어플리케이션 만들기

Once you have downloaded the Sencha Touch 2.3 framework and installed Sencha Cmd, you can quickly generate an application with the following command:

Sencha Touch 2.3 프레임워크를 다운로드 하고 Sencha Cmd를 설치하셨다면, 다음과 같은 명령어를 사용하여 애플리케이션을 빠르게 생성하실 수 있습니다:

//sencha generate app [path/to/app] [AppName]
$ sencha generate app ~/Desktop/MyApp MyApp

You will then want to make sure to follow the PhoneGap CLI Getting Started Guide to get your system up and running with PhoneGap and any dependencies for the native platforms you wish to deploy to. **Remember** if you are planning on building with PhoneGap Build, you simply need to install NodeJS and the PhoneGap CLI, and don’t have to worry about native SDKs.

그 다음으로 PhoneGap CLI Getting Started Guide를 따라 시스템을 준비시키고 PhoneGap이나 그 외 deploy 시키고 싶은 네이티브 플랫폼의 dependency를 실행 시키세요. 여기서 잊지말아야 할 점은 PhoneGap Build을 사용하실 계획 이시라면, 간단히 NodeJS와 PhoneGap CLI를 설치하시고, 네이티브 SDK에 신경쓰실 필요가 없다는 점입니다.

To add PhoneGap support to any application, that is Sencha Cmd 4 ready, you run the following command with the optional *APP_ID* and *APP_NAME* arguments.
어떤 애플리케이션에든 PhoneGap 지원을 추가하시려면, Sencha Cmd 4가 준비되어 있습니다. 다음과 같이 명령어에  *APP_ID*와 *APP_NAME* argument를 넣어 실행하세요.

//sencha phonegap init [APP_ID] [APP_NAME]
$ sencha phonegap init com.mycompany.MyApp MyApp

Folder Structure
폴더 구조

Your application is now ready to take advantage of the power of the Sencha Touch framework with the ease of native development provided by PhoneGap. If you are a Sencha developer already, you will notice your normal application build workflow is the same as always, and we have only modified the normal folder structure slightly by adding in a nested PhoneGap project.
이제 당신의 애플리케이션은 PhoneGap에 의해 제공되는 native development의 용이성과 더불어Sencha Touch 프레임워크의 파워를 이용할 준비가 되었습니다. 이미 Sencha 개발자이시라면, 일반적인 애플리케이션의 구축 워크플로가 이전과 동일하다는 점을 눈치채셨을 겁니다. 다만 일반적인 폴더 구조에 nested PhoneGap 프로젝트를 추가하는 방식으로 약간의 변경을 가했을 뿐입니다.

Sencha and PhoneGap Folder Structure
Sencha and PhoneGap Folder Structure

Custom Configuration
사용자 설정

You can configure your PhoneGap application using the standard config.xml, as you would normally do. Sencha Cmd provides a **’phonegap.local.properties’** file to configure the build process. Not only can you use PhoneGap locally to create your own custom native projects, but Sencha Cmd is also integrated into PhoneGap Build allowing you to build your application easily without having the native development tools locally. Below is a sample of the properties file you can configure.
통상 하시던 대로 스탠다드 config.xml을 사용하여 PhoneGap 애플리케이션을 설정하실 수 있습니다. Sencha Cmd는 프로세스 구축을 설정하기 위한 **’phonegap.local.properties’** 파일을 제공합니다. 당신만의 Custom native 프로젝트를 생성하는데 PhoneGap을 국부적으로 사용할 수 있을 뿐 아니라, Sencha Cmd가 PhoneGap Build에 통합되어 네이티브 개발 툴을 부분적으로 가지고 있을 필요 없이 손쉽게 애플리케이션을 구축할 수 있도록 합니다. 다음은 설정할 수 있는 properties file의 샘플입니다.

# The following are supported platforms for local building (blackberry is version 10)
# android, blackberry, ios, wp7, wp8
#
# The following are supported platforms for remote building (blackberry is version 6)
# android, blackberry, ios, symbian, webos, wp7

# This property can be a single platform or a space delimited list
phonegap.platform=ios

# This determines if build is remote (phonegap build) or local
phonegap.build.remote=false

# Username for PhoneGap Build
phonegap.build.remote.username={username}

# Password for PhoneGap Build
phonegap.build.remote.password={password}

Development
개발

The great benefit of this integration is that your development workflow need not change at all. If you are a PhoneGap user, you will want to familiarize yourself with the syntax and structure of a Sencha Touch application, but building your PhoneGap application is business as usual. Since you have a full PhoneGap project inside your Sencha Touch project, adding plugins and using the PhoneGap CLI tool will also work just fine. If you are a Sencha Touch user you will want to go through the PhoneGap Docs, but the syntax is very simple to pick up. You will quickly be able to access native features and hardware within your Sencha Touch application, and by using **’Ext.browser.is.PhoneGap’**, you can detect when you are inside your natively wrapped application or running in the browser.
이런 통합의 큰 장점으로 개발 워크플로가 전혀 변화할 필요가 없다는 점을 들 수 있습니다. 만약 당신이 PhoneGap 사용자라면, Sencha Touch 애플리케이션의 syntax와 구조에 익숙해지는 한편, PhoneGap 애플리케이션을 평소와 같이 구축하기를 원할 것입니다. Sencha Touch 프로젝트 안에 완전한 PhoneGap 프로젝트를 가지고 계시기 때문에, 플러그인을 추가하고 PhoneGap CLI 툴을 사용하는 것만으로도 충분합니다. Sencha Touch 사용자시라면, PhoneGap Docs를 살펴보기 원하시겠지만 syntax는 매우 쉽게 익힐 수 있습니다. Sencha Touch 애플리케이션 내 네이티브 기능 및 하드웨어에 빠르게 접근하고, **’Ext.browser.is.PhoneGap’**를 사용하여 natively wrapped 애플리케이션을 사용중이거나 브라우저를 가동시킬 때를 감지해낼 수 있습니다.

Building and Testing
구축과 테스팅

Building your application for testing in the native emulator or on a device is also as easy as a single command. The *-run* flag is optional and allows you to decide if you would like to run your application after it is built, or simply build the native binaries you will then take to a device.
Native emulator나 기기에서의 테스팅을 위해 애플리케이션을 building 하는 것 역시 단일 명령어만큼이나 간단합니다. *-run* 플래그는 선택적이며, 구축된 이후 애플리케이션을 가동시킬 것인지, 아니면 단순히 native binaries를 구축하여 기기로 옮길 것인지 결정내릴 수 있습니다.

$ sencha app build -run native

Beyond the Command Line

If the command line is not your style and you find yourself using more ‘industrial strength’ IDEs with ANT support, you will be pleased to see that the Sencha Cmd 4 generate application comes with human readable ANT targets for running common commands from right inside your IDE. For those who love Sublime Text, there is also a handy plugin called SuperAnt that will let you get in on all the ANT goodness.
명령행이 당신의 스타일에 맞지 않거나 ANT 지원과 더불어 더욱 강력한 IDE를 사용하고 계시다면, Sencha Cmd 4가 당신의 IDE 내에서 공통 명령을 실행하기 위해 사람이 읽을 수 있는 ANT target이 들어있는 애플리케이션을 생성한다는 점에 만족해할 것입니다. Sublime Text를 사랑하는 분들을 위해 모든 ANT 장점에 참여할 수 있게 만들어줄 유용한 플러그인인 SuperAnt도 있습니다.

Sencha Cmd 4 Targets
Sencha Cmd 4 Targets

Apache Cordova Support
Apache Cordova 지원

Sencha Cmd 4 not only supports PhoneGap but also Apache Cordova for developers that don’t want/need the extras provided by PhoneGap. The commands are identical except instead of initializing PhoneGap, you simply use Cordova instead.
Sencha Cmd 4는 PhoneGap을 지원할 뿐 아니라, PhoneGap이 제공하는 추가적인 사항들을 필요로 하지 않는 개발자들을 위해 Apache Codova 역시 지원합니다. PhoneGap의 초기화를 제외한 모든 명령어가 동일하기 때문에 간단히 Cordova를 사용할 수 있습니다.

//sencha cordova init [APP_ID] [APP_NAME]
$ sencha cordova init com.mycompant.MyApp MyApp

For more information, watch the Sencha & PhoneGap Video Tutorial as it goes into detail on both processes.

A Quick Camera Demo App
빠른 카메라 데모 앱

Adding PhoneGap or Cordova APIs to your application is very simple. If you already have a good understanding of the Sencha framework, learning the Cordova API should not be a problem. In this demo, we will look at a small code snippet to add native photo library support to your Sencha Touch application.
애플리케이션에 PhoneGap이나 Cordova API를 추가하는 방법은 매우 간단합니다. 이미 Sencha 프레임워크에 대해 충분히 이해하고 계시다면, Cordova API에 대해 배우는 것은 그리 문제가 되지 않을 겁니다. 아래 데모에서는 Sencha Touch 애플리케이션에 네이티브 포토 라이브러리 지원을 추가하는 작은 코드 정보를 들여다 볼 것입니다.

Sencha Demo App
Sencha Demo App
Ext.define('SenchaPhoneGapCameraDemo.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    requires: [
        'Ext.Button',
        'Ext.Img'
    ],
    config: {
        layout: {
            type:"vbox",
            pack:"center",
            align:"center"
        },
        items: [
            {
                xtype: "image",
                src: "http://placehold.it/200x200",
                width: 200,
                height: 200
            },
            {
                xtype: "button",
                text: "Photo",
                handler: function() {
                    function success(image_uri) {
                        var img = Ext.ComponentQuery.query("image")[0];
                        img.setSrc(image_uri);
                    }

                    function fail(message) {
                        alert("Failed: " + message);
                    }

                    navigator.camera.getPicture(success, fail,
                        {
                            quality: 50,
                            destinationType: navigator.camera.DestinationType.FILE_URI,
                            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                        }
                    );
                }
            }
        ]
    }
});

In this view, we create a simple image component with a placeholder 200 by 200 image. **A quick note here**, you will need to add placehold.it to your config.xml as an allowed origin.
여기에서200×200 이미지의 placeholder와 함께 간단한 이미지 컴포넌트를 생성합니다. 덧붙이자면, placehold.it을allowed origin으로서 config.xml에 덧붙이셔야 합니다.

<access origin="http://placehold.it*" />

We then add a button handler and call the Cordova Camera API. If you are a current PhoneGap user, you will notice that you use the normal APIs that you are used to in other application frameworks.
그 다음에 button handler를 추가하고Cordova Camera API를 불러들입니다. 현재 PhoneGap을 사용하신다면, 다른 애플리케이션 프레임워크에서 사용하셨던 일반 API를 사용하고 계신다는 것을 눈치 채셨을 겁니다.

Lastly, before you build this application, you will need to add the camera plugin to our PhoneGap application. As of PhoneGap 3.0, all extra libraries are added as plugins (Geolocation, Camera, File, etc). This is done by running the following command from your **'{application}/phonegap’** folder.
마지막으로, 이 애플리케이션을 구축하시기 전, PhoneGap application에 카메라 플러그인을 추가하셔야 합니다. PhoneGap 3.0에서는 모든 추가 라이브러리가 플러그인(지오로케이션, 카메라, 파일 등)으로서 추가됩니다. 이를 위해 다음과 같은 명령을 **'{application}/phonegap’** 폴더에서 실행하시면 됩니다.

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

Now, you can build and run your application in the simulator by running:
이제, 다음을 실행함으로써 애플리케이션을 simulator에서 구축 및 실행하실 수 있습니다.

sencha app build -run native

For those of you who like to see a whole project, I have prepared this ready to go demo, simply download and extract on your system. Then, from inside the folder you will run:
전체적인 프로젝트를 보시고 싶은 분을 위해 데모를 준비했으니 다운로드 하셔서 시스템에 extract하세요. 그리고 폴더 안에서 다음을 실행하시면 됩니다.

sencha app build -run native

Don’t forget to download some images to your iOS simulator. You can search google images for anything, and long press on any image that will give you the option to save it to the photo library.
iOS simulator에 이미지를 다운받아 놓는 것을 잊지 마세요. 어떤 것에 대한것이든 구글 이미지를 검색하셔서 길게 누르면 포토 라이브리러에 저장할 수 있는 옵션을 선택하실 수 있습니다.

Conclusion
결론

Here at Sencha, we’re really excited about these features and hope you are too. We feel that PhoneGap has the community and the leadership to perfectly complement our strong belief that HTML5 apps can compete in the mobile market. Stay updated by checking out our blog and stop by the Sencha Vimeo page for updated tutorials, tips and tricks!
여기 Sencha에서는 이러한 특징들에 대해 크게 기뻐하고 있으며 당신도 마찬가지이길 바랍니다. 우리는 HTML5 앱이 모바일 시장에서 경쟁력을 가질 수 있다는 강력한 믿음에 완벽히 부응하는 커뮤니티와 리더십을 PhoneGap이 가지고 있다고 생각합니다. 이 블로그를 체크하고 업데이트된 tutorial, 팁, 요령을 위한 Sencha 비디오 페이지에 들려 최신 동향을 놓치지 마세요!


번역:

[ 김종광 – JongKwang Kim ]

– 주식회사 종광, 수석연구원/CTO
– 한국센차유저그룹 운영자
– 미래부/NIPA, 소프트웨어 마에스트로 멘토

– E-Mail : kim@jongkwang.com
– Blog : http://jongkwang.com
– Twitter : @jongkwang
– Facebook : https://facebook.com/kimjongkwang