DOC 1. [Overview] Getting Started with Sencha Touch 2 (교정완료)

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

번역 : 정건우 [Github:NangChun]

편집 : 윤가희 [Github:5312559]

(최종 편집일 : 2012.03.24)

센차터치 2 시작하기

http://vimeo.com/37974749

Note: This guide will be updated to reflect the content of the video shortly.

참고: 본 가이드는 비디오의 내용을 반영해 곧 업데이트할 예정입니다.

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.

센차터치란?

센차터치를 이용하면 빠르고 쉽게 html 기반의 모바일 앱을 만들 수 있다. 센차터치로 만든 모바일 앱은 Android, iOS 그리고 블랙베리에서 작동되며 브라우저에서 네이티브 앱과 같은 경험을 제공한다.

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 루트에 압축을 푼 폴더를 넣는다. (역자주: MAMP라면, 응용프로그램 -> MAMP -> htdocs가 루트 폴더) 웹 서버가 준비돼 있지 않다면, WAMP 또는 MAMP를 사용하길 추천하며, 다음과 같이 간단하게 한 번의 클릭으로 설치할 수 있다.

웹 서버의 루트에 SDK 폴더를 넣은 후, 웹 브라우저를 열고 주소창에 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:

<!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:

@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 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:

@example raw miniphone
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hello World'
        });
    }
});

앱 시작하기.

센차터치는 센차터치에서 제공하는 간단한 애플리케이션 구조 지침을 따를 때 가장 작 잘동한다. 이 구조 지침은 규약과 클래스의 집합으로 특히 팀의 일원으로 일할 때, 앱을 단순하게 유지하면서 작성할 수 있게 돕는다.

먼저 앱을 실행하기 위한 폴더 구조를 설정한다. 초기 설정에는 두 개의 파일과 센차터치 복사본이 필요하다. 보통 이 세 파일은 다음과 같다:

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>

위 코드는 자주 사용할 아마도 가장 간단한 HTML 가운데 하나일 것이다. Sencha Touch (자바 스크립트 파일과 스타일 시트)와 app.js를 포함한다. 참고로 본문은 비어 있다 – 여러분과 함께 Sencha Touch를 채워나갈 것이다.

다음으로, app.js 파일의 내용을 보자. 항상 alert를 호출하는 간단한 앱을 만들겠다.

@example raw miniphone
Ext.application({
    name: 'Sencha',

    launch: function() {
        alert('launched');
    }
});

위 코드가 시작하는 데 필요한 전부다. 이제 사파리나 크롬을 실행하고 예상대로 작동하는지 확인하라. 또는 예제 옆에 있는 작은 미리보기 아이콘을 클릭해 실행해 볼 수도 있다. 지금까지 많이 하지는 않았지만 ‘alert’ 창의 팝업은 센차터치가 페이지에 있고 앱이 실행됐음을 의미한다.

마지막으로 Panel을 만들고 전통적인 Hello World를 띄워보자. Hello World를 띄우는 일은 매우 간단하다. launch 함수를 갱신하기위해 Ext.create를 사용했으며 코드는 다음과 같다.

@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:

다음 단계

지금까지 가장 간단한 페이지를 만들고 Hello World를 출력했다. 이제 간단한 첫 번째 앱을 만들 차례이다. 다음 단계는 첫번째 응용프로그램 가이드를 익히고, 방금 했던 것과 같이 15분 안에 간단하지만 강력한 앱을 빌드 할것이다.

앞으로 넘어가거나 프레임워크에 대한 자세한 정보를 알고 싶다면 다음 가이드나 예제를 참고한다:

doc01 - KoreaSenchaUserGroup/Lab1 GitHub Wiki

DOC 1. [Overview] Getting Started with Sencha Touch 2 (교정완료)

센차터치 2 시작하기

What is Sencha Touch?

센차터치란?

Things you'll need

준비해야 할 것

Starting your app

앱 시작하기.

Next Steps

다음 단계

Guides

Application Examples

Component Examples

가이드

응용프로그램 예제

컴포넌트 예제

⚠️ GitHub.com Fallback ⚠️

doc01 - KoreaSenchaUserGroup/Lab1 GitHub Wiki

DOC 1. [Overview] Getting Started with Sencha Touch 2 (교정완료)

센차터치 2 시작하기

What is Sencha Touch?

센차터치란?

Things you'll need

준비해야 할 것

Starting your app

앱 시작하기.

Next Steps

다음 단계

Guides

Application Examples

Component Examples

가이드

응용프로그램 예제

컴포넌트 예제

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️