원문 : http://docs.sencha.com/touch/2-0/#!/guide/getting_started
번역 : https://github.com/KoreaSenchaUserGroup/Lab1/wiki/DOCS1
글쓴이 : 낭천(Github:nangchun), 한국센차유저그룹 SenchaCon 번역팀

센차터치 2 시작하기

What is Sencha Touch?

Sencha Touch enables you to quickly and easily create HTML5 based mobile apps that work on Android, iOS and Blackberry devices and produce a native-app-like experience inside a browser.

센차터치 란?

센차터치 는 빠르고 쉽게 안드로이드, IOS와 블랙베리 장치에 대한 작업과 브라우저와 네이티브 앱과 비슷한 경험을 제공하는 HTML5 기반의 모바일 앱을 만들 수 있습니다.

Things you’ll need

Here’s what you need to get started:

  • The free Sencha Touch 2.0 SDK
  • A web server running locally on your computer
  • A modern web browser; Chrome and Safari are recommended

Download and unzip the latest version of the SDK. Place the unzipped folder into your web server’s document root. If you don’t have a web server or aren’t sure, we recommend using a simple one-click installer like WAMP or MAMP.

Once you have the folder in the right place, open your web browser and point it to http://localhost/sencha-touch-folder (or wherever your web server is configured to serve from) and you should see the Sencha Touch Welcome page. If that’s all working you’re ready to start your first app.

준비해야 할 것들

시작을 위한 준비사항 :

  • 프리버전의 센차터치 2.0 SDK
  • 로컬로 실행되는 웹서버 컴퓨터
  • 최신 웹 브라우저; 크롬과 사파리를 추천합니다.

SDK의 최신 버전을 다운로드하고 압축을 풉니다. 웹 서버의 document 루트에 압축이 풀린 폴더를 넣습니다. 웹서버가 준비되어 있지 않다면, WAMP또는 MAMP를 사용하길 추천하며, 다음과 같은 간단한 한 번의 클릭으로 설치할 수 있습니다.

일단 웹 브라우저를 열고 http://localhost/sencha-touch-folder (또는 때마다 웹 서버에서 제공하도록 구성됩니다)를 가르키는, 적절한 장소에서 폴더를 맡았고 센차터치 환영 페이지가 나타납니다. 작업을 수행했다면 첫 번째 응용 프로그램을 시작할 준비가 된 것입니다.

Starting your app

Sencha Touch apps work best when they follow the simple application structure guidelines we provide. This is a small set of conventions and classes that make writing maintainable apps simpler, especially when you work as part of a team.

The first step is to set up the simple folder structure that will house the app. Initially all you need is two files and a copy of Sencha Touch. By convention, these are:

  • index.html - a simple HTML file that includes Sencha Touch and your application file
  • app.js - a file where you define the app name, home screen icon, and what it’s supposed to do on launch
  • touch - a copy of the downloaded Sencha Touch folder

Let’s start with the index.html file. Here’s what it looks like:

앱 시작하기.

우리의 간단한 애플리케이션 구조 지침을 수행할 때 센차터치 앱들은 최선으로 작동됩니다. 이것은 클래스의 작은 집합으로, 조직이나 팀의 일원으로 작업시에는 특히 더 간단하며 지속적인 앱들을 작성 할수 있습니다.

첫 번째는 응용 프로그램을 저장하고 간단한 폴더 구조를 설정합니다. 처음에는 당신이 필요로하는 모든 두 개의 파일 과 센차터치의 복사본입니다. 관례적으로, 이들은 다음과 같습니다 :

  • index.html - 센차터치 응용 프로그램 파일을 포함하는 간단한 HTML 파일
  • app.js - 앱의 이름, 홈 화면 아이콘, 그리고 어떻게 실행할지 정의한 파일
  • touch - 다운로드된 Sencha Touch 폴더의 사본

index.html 파일과 함께 시작 하며, 그 내용은 다음과 같습니다 :

<!DOCTYPE html> <html> <head> <title>Getting Started</title> <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"> <script type="text/javascript" src="touch/builds/sencha-touch-all-debug.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html> 

This is probably one of the simplest HTML pages you’ll ever write. All it does is include Sencha Touch (the JavaScript file and its stylesheet), and your app.js. Note that the body is empty – we’ll let Sencha Touch fill that up.

Next, let’s look at the contents of our app.js file. We’ll keep things simple to start and just call alert to make sure everything’s working:

아마도 항상 쓰게 되는 간단한 HTML 페이지 내용일 것 입니다. 실행하는 모든 포함 Sencha Touch (자바 스크립트 파일 및 스타일 시트) 및 app.js.입니다. 참고로 본문이 비어 있습니다 – Sencha Touch 를 그렇게 채워나갈 것입니다.

다음으로, 각자 자신의 app.js 파일의 내용을 보십시요. 항상 경고창을 실행하는 간단한 작업을 시작 할 것입니다.

@example raw miniphone Ext.application({ name: 'Sencha', launch: function() { alert('launched'); } }); 

That’s all you need to get started. Now, launch Safari or Chrome and make sure it works as expected. You can also click the small Preview icon next to the example above to run it. So far it doesn’t do very much, but the fact that the alert message pops up means Sencha Touch is on the page and the app launched.

The last thing we’re going to do is create a {@link Ext.Panel Panel} with the time-honored Hello World. This is really simple, all we need to do is update our launch function to use Ext.create, like this:

이것이 당신이 시작하기 위해 필요한 전부입니다. 이제 사파리나 크롬을 실행하고 예상대로 작동하는지 확인하십시오. 당신은 또한 그것을 실행하기 위 예제 옆에 있는 작은 미리보기 아이콘을 클릭 할 수도 있습니다. 지금까진 간단히 진행 하였으나 센차터치 페이지로 경고 메시지를 띄우는 앱을 실행 하였습니다.

마지막으로 우리가 할 작업은 Panel과 전통적인 Hello World 띄우기 입니다. 이것은 매우 간단하며, 필요한 모든기능을 {@link Ext.Panel Panel} 로부터 갱신 할 수 있으며, 다음과 같습니다 :

@example raw miniphone Ext.application({ name: 'Sencha', launch: function() { Ext.create('Ext.Panel', { fullscreen: true, html: 'Hello World' }); } }); 

Next Steps

Now that we’ve put together the simplest of pages and achieved Hello World, it’s time to create our first simple app. The next step is to go through the First Application guide, which builds on what you’ve just done and builds a simple but powerful app in around 15 minutes.

If you’d like to skip ahead or find out more detailed information about other aspects of the framework we recommend checking out the following guides and resources:

다음 단계

함께 가장 간단한 HelloWorld 페이지를 만들었으니 이젠, 첫번째 간단한 앱을 만들 차례입니다. 다음 단계는 첫번째 응용프로그램 가이드를 익히고, 방금 전 했던 것과 15분 안에 심플하지만 강력한 앱을 빌드 하는 것입니다.

앞으로 넘어가거나 다음과 같은 가이드 및 리소스를 확인하는 것이 좋습니다. 프레임 워크의 다른 측면에 대한 자세한 정보를 알기위한 경우 :

Guides

Application Examples

Component Examples

가이드

응용프로그램 예제

컴포넌트 예제