DOC 5. [Overview] Using Sencha Command

원문 : http://docs.sencha.com/touch/2-0/#!/guide/command

번역 : 정건우 [Github:NangChun]

Using Sencha Command

Sencha Command is a cross-platform command line tool that helps make developing applications with Sencha SDKs full of enjoyment. The tool consists of many useful automated tasks around the full life-cycle of your applications, from generating a fresh new project to deploying for production.

센차 명령어 사용하기

센차 명령어는 개발하는 어플리케이션을 만드는데 도움이 되는 동시에 센차 SDKs를 최대한 즐길수 있는 크로스 플랫폼 커맨드 라인 도구입니다. 이 도구는 제작을 위한 새로운 프로젝트를 생성에서 배포하기까지의, 응용프로그램을 둘러싼 생명주기 전체에 유용한 많은 자동화된 작업으로 구성되어 있습니다.

Requirements

Please note that all commands only apply to Sencha Touch 2. Only OS X or Windows operating systems are currently supported.

Step 1: Setup an HTTP server on your computer if you don't have one running. This guide assumes that the host name is localhost, and the document root is at /path/to/www

Step 2: Download and install the latest SDK Tools on your development machine. The latest version as of this writing is 2.0.0 beta.

Step 3: Download the latest Sencha Touch 2 SDK. Extract the SDK to a local directory.

Step 4: Verify that Sencha Command is working properly onp your machine:

Open a command line terminal, and run the following commands. Replace /path/to/sencha-touch-2-sdk with the actual path to the SDK that you extracted to previously, as mentioned in Step 2.

cd /path/to/sencha-touch-2-sdk
sencha

If a help message appears with the first line that says: "Sencha Command v2.0.0 for Sencha Touch 2", you are all set.

자격요건

모든 명령이 센차터치 2로 적용 된다는 점에 유의하십시오. 현재 OS X 또는 Windows 운영체제만 지원됩니다.

1 단계 : 만약 실행이 되지 않는다면 컴퓨터에 http서버를 설치합니다. 본 가이드는 호스트 이름이 '로컬호스트' 임을 가정하고, 문서 루트는 /path/to/www에 있습니다.

2 단계 : (http://www.sencha.com/products/sdk-tools) 개발 컴퓨터에 다운로드 [최신 SDK 도구]를 설치합니다.

3 단계 : [최신 Sencha 터치 2 SDK] (http://www.sencha.com/products/touch/)을 다운로드 합니다. 로컬 디렉토리에 SDK를 추출합니다.

4 단계 : 센차 명령이 컴퓨터에서 제대로 작동하는지 확인합니다:

커맨드 라인 터미널을 열고 다음 명령을 실행합니다. 2 단계 에서와 같이 언급한, 이전에 추출한 것으로 SDK의 실제 경로와/path/to/sencha-touch-2-sdk를 교체합니다.

cd /path/to/sencha-touch-2-sdk
sencha

첫 번째 라인과 함께 도움말 메시지가 : "Sencha Command v2.0.0 Sencha Touch 2 '이라고 나타나면, 모두 설정됩니다.

Getting Started

All commands have the exact same syntax as follows:

sencha [module] [action] [arguments...]

Some typical examples:

# Minify app.js and write the output to app.minified.js
sencha fs minify app.js app.minified.js

# Create a new project based on the current SDK with namespace 'MyApp' and store inside '/path/to/www/myapp'
sencha app create MyApp /path/to/www/myapp

To see a list of all available modules, simply type: sencha (when the current working directory is either the SDK directory or a project directory)

Similarly, to see a list of all available actions for a specific module, run: sencha [module], for example: sencha app

Lastly, typing sencha [module] [action] prints out the full list of arguments for that typical action, for example: sencha app create

시작하기

모든 명령은 다음과 같은 구문을 가집니다 :

sencha [module] [action] [arguments...]

전형적인 몇가지 예입니다 :

# app.js를 축소하고 app.minified.js으로 출력하도록 작성합니다.
sencha fs minify app.js app.minified.js

# 지금의 SDK를 기반으로 새로운 프로젝트를 네임스페이스 'MyApp'과 '/path/to/www/myapp' 에서의 저장소를 만듭니다.
sencha app create MyApp /path/to/www/myapp

사용 가능한 모든 모듈의 목록을 보려면, 간단히 입력합니다 : 'sencha' (현재 작업중인 디텍터리는 sdk디텍터리 또는 프로젝트 티텍터리 중 하나)

유사하게, 특정 모듈에 대한 모든 가능한 동작의 목록을 보려면, 실행합니다 : sencha [module], 예를 들면 : sencha app

마지막으로, 입력 sencha [module] [action] 전형적인 동작에 대한 인수의 전체 목록을 출력합니다, 예를들면 : sencha app create

Creating a New Application

The following command generates a new application with the namespace MyApp to /path/to/www/myapp:

#  Make sure the current working directory is the Sencha Touch 2 SDK
cd /path/to/sencha-touch-2-sdk
sencha app create MyApp /path/to/www/myapp

To try it out, simply point your (WebKit-based) browser to http://localhost/myapp.

Congratulations, you have just created a fully working Sencha Touch 2 application in seconds!

새 응용프로그램 만들기

다음 명령은 /path/to/www/myapp로 네임스페이스 MyApp과 새로운 애플리케이션을 생성합니다 :

#  센차터치 2SDK 디텍터리가 현재 작업중인지 확인하십시오
	cd /path/to/sencha-touch-2-sdk
sencha app create MyApp /path/to/www/myapp

시도했다면, 간단하게 http://localhost/myapp로 (웹킷-기반) 브라우저로 지정됩니다.

축하합니다, 방금 두번째로 완벽하게 작동하는 센차터치2 응용프로그램을 만들었습니다!

Understanding Your Application's Structure

The generated application should have the following file structure:

app						# Your application's source code in MVC structure
	controller
	model
	profile
	store
	view
		Main.js			# The main view of the application

resources
	css
		app.css			# The main stylesheet, compiled from app.scss

	sass
		app.scss		# The SASS file which compiles to app.css above,
						# includes Sencha Touch 2 theme by default

	icons				# Application icons for all mobile devices
						# When replacing these default images with your own,
						# make sure the file name and the dimension stays exactly the same
		...
	loading				# Application start-up screens for iOS devices
						# Similarly to icons, make sure the file names and
						# dimension stays the same
		...
	images				# Put other images used by your application here

sdk						# A copy of the SDK from which this application was generated
	...

index.html
app.js					# Contains application's initialization logics
app.json				# Configuration for deployment
packager.json			# Configuration for native packaging

Both app.json and packager.json have inline documentation for each configurable item. Simply open the files and edit them as you need.

응용프로그램의 구조 이해하기

생성된 응용프로그램은 다음과 같은 파일구조를 가지고 있어야 합니다 :

app						#  MVC 구조안에서의 응용프로그램의 소스코드
	controller
	model
	profile
	store
	view
		Main.js			# 응용프로그램의 메인 뷰

resources
	css
		app.css			# app.scss에서 컴파일된 기본 스타일 시트

	sass
		app.scss		# 위의 app.scss를 sass파일로 컴파일
						# 기본적으로 센차터치2 테마를 포함

	icons				# 모든 모바일 장치를위한 응용프로그램 아이콘
						# 혼자서 기본적인 이미지를 대체할때,
						# 파일 이름과 크기가 완전히 동일하게 유지하는지 확인
		...
	loading				# iOS장치를 위한 응용프로그램 시동화면
						# 마찬가지로 아이콘에서, 파일이름을 확인
						# 크기는 동일하게 유지
		...
	images				# 여기에서 응용프로그램에 의해 사용되는 다른 이미지 넣기

sdk						# 응용프로그램이 생성되어있는 SDK의 사본
	...

index.html
app.js					# 응용프로그램의 초기화 logics을 포함
app.json				# 배포를 위한 구성
packager.json			# 네이티브 포장을 위한 구성

app.json과 packager.json 둘다 각각 설정 가능한 항목을 위한 본문 설명서를 가졌습니다. 간단히 열고 필요한대로 편집할 수 있습니다.

Developing Your Application

sencha generate helps you quickly generate common MVC components such as: Controller, Model and Profile.

For example:

#  Make sure the current working directory is the application's directory, i.e 'cd /path/to/www/myapp'
sencha generate model User --fields=id:int,name,email

The command above will automatically generate a new Model class named User with 3 fields of id, name and email to app/model/User.js, and add its reference to your app.js.

응용프로그램 개발하기

'sencha generate'는 빠르고 공통적인 MVC 컴포넌트를 생성하는데 도움이 됩니다 : 컨트롤러, 모델 그리고 프로파일 등.

예를들어:

#  현재 작업 디텍터리가 응용프로그램의 디텍토리 인지 확인합니다,  i.e 'cd /path/to/www/myapp'
sencha generate model User --fields=id:int,name,email

위의 명령은 자동으로 새 클래스 모델을 app/model/User.js 에서 'User' 함께 'id', 'name' 그리고 'email'의 이름으로 3가지 입력란이 생성될것이며, app.js의 참조를 추가합니다.

Deploying Your Application

Developing your application simply means editing source code and refreshing the browser. All source files are dynamically loaded on demand. There's no building process involved.

When it comes to deployment, Sencha Command provides 4 different build environment options, namely 'testing', 'package', 'production' and 'native':

• 'testing' is meant for QA prior to production. All JavaScript and CSS source Files are bundled, but not minified, which makes it easier for debugging if needed

• 'package' creates a self-contained, re-distributable production build that normally runs from local file system without the need for a web server

• 'production' creates a production build that is normally hosted on a web server and serves multiple clients (devices). The build is offline-capable using HTML 5 application cache, and has built-in over-the-air delta updating feature

• 'native' first generates a 'package' build, then packages it as a native application, ready to be deployed to native platforms

As an example, the following command generates a 'testing' build for your application:

#  Make sure the current working directory is the application's directory you're deploying, i.e 'cd /path/to/www/myapp'
sencha app build testing

And similarly when you're ready for production deployment:

sencha app build production

The default deployment paths are taken from the buildPaths item inside app.json. For more details on optional arguments, run

Sencha Command automates all optimizations for your application, including but not limited to:

• Resolving dependencies required by the application and only including exactly what is used for optimal file size / performance
• Enabling HTML 5 application cache via automatic generation of cache.manifest and resources checksum
• Minifying all JavaScript and CSS assets
• Storing all JavaScript and CSS assets inside Local Storage on first load, and patches them via delta updates between releases

As a result, your production build can load instantly on subsequent access and updates on-the-fly with minimal network transfer.

Important Note: The cache.manifest file is automatically generated for you. However, please make sure that your web server serves it with the correct Content-Type header of text/cache-manifest. To learn more about HTML 5 application cache, please refer to this article.

응용프로그램 배포하기

응용프로그램 개발은 단순히 소스코드 편집하기와 브라우저의 새로고침을 의미합니다. 모든 소스파일은 요구되면 동적으로 로드됩니다. 복잡한 빌딩과정은 없습니다.

배포되면, 센차 커맨드는 4가지의 서로 다른 빌드 환경 옵션을 제공 합니다, 즉 'testing', 'package', 'production' 그리고 'native' 입니다 :

• 'testing'은 제작 이전의 QA를 나타냅니다. 모든 자바스크립트와 CSS 소스 파일은 번들로 제공되고, 그러나 축소하지 않으며, 필요한 경우 디버깅을 위해 쉬워지게 된다.

• '패키지'는 독립적으로 만들어지며, 일반적으로 웹서버 없이 로컬 파일 시스템에서 재 배포하여 제작되는 빌드.

• 'production'은 웹 서버에서 정상적으로 호스트된 빌드를 제작하여 만들어지며 여러 클라이언트(장치)를 제공. 빌드는 HTML 5의 응용프로그램 캐시로 오프라인 상태에서 사용 가능하며, 무선 델타 업데이트 기능을 내장.

• 'native' 먼저 'package'빌드를 생성합니다, 그리고 네이티브 응용프로그램으로 포장하고, 네이티브 플랫폼에서 배포할 준비.

예를 들어, 다음 명령은 응용프로그램을 위해 'testing' 빌드를 생성합니다 :

# 현재 작업하는 디텍토리는 배포하는 응용프로그램의 디텍토리에 있는지 확인, i.e 'cd /path/to/www/myapp' 
sencha app build testing

그리고 제작 배포를 위한 준비가 비슷하게 되었을때 입니다 :

sencha app build production

기본 배포 경로는 'app.js' 내부 'buildPaths' 항목에서 가져옵니다. 선택적 인수에 대한 더 자세한 내용을 원하면, 실행합니다.

센차 명령을 포함한 응용프로그램의 모든 최적화를 자동화, 포함하지만 제한되지 않습니다 :

• 응용프로그램에 필요한 의존성을 해결에만 최적화된 파일 크기 / 성능을 위해 사용되는 정확한 포함.
• cache.manifest 및 자원 검사값 자동 생성을 통해 HTML 5의 응용 프로그램 캐시를 활성화.
• 모든 JavaScript와 CSS의 자산을 축소.
• 먼저 부하에 대한 로컬 저장소 안에서 모든 JavaScript와 CSS의 자산을 저장하고 하는 것은 릴리스 사이 델타 업데이트를 통해 그들을 패치.

결과적으로 제작 빌드는 최소한의 네트워크 전송과-The-Fly 방식에 대한 후속 액세스 및 업데이트를 즉시 로드할 수 있습니다.

중요 ** 참고 ** : cache.manifest파일이 자동으로 생성됩니다. 그러나, 웹 서버가 text/cache-manifest의 올바른 Content-Type의 헤더와 함께 제공하고 있는지 확인하십시오. HTML 5 응용 프로그램 캐시에 대한 자세한 내용을 보려면, [문서] (http://www.html5rocks.com/en/tutorials/appcache/beginner/)를 참조하십시오.

Packaging Your Application for Distribution on App Stores

packager.json contains all configurable values to package your application.

If you are using OS X and have Xcode installed, this one-liner will automatically package your application and run it on iOS Simulator:

sencha app build native

For more details on working with packager.json, please refer to the Native Package guide

앱 스토어로의 배포를 위한 응용프로그램 포장

packager.json은 응용 프로그램을 포장하기위한 모든 구성 값이 들어 있습니다.

OS X을 사용하고 Xcode가 설치되어있다면, 이 단일 라이너는 자동으로 응용프로그램을 패키지 및 iOS 시뮬레이터에서 실행합니다 :

sencha app build native

packager.json과 작업에 대한 자세한 내용은, [네이티브 패키지 가이드] (#! / 가이드 / native_packaging)를 참조하시기 바랍니다.