-
Notifications
You must be signed in to change notification settings - Fork 0
doc01
Note: This guide will be updated to reflect the content of the video shortly.
참고: 본 가이드는 비디오의 내용이 반영되도록 곧 업데이트됩니다.
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 기반의 모바일 앱을 만들 수 있습니다.
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의 경우, MAC에서 응용프로그램 -> MAMP -> htdocs가 루트폴더) 웹서버가 준비되어 있지 않다면, WAMP 또는 MAMP를 사용하길 추천하며, 다음과 같은 간단한 한 번의 클릭으로 설치할 수 있습니다.
일단 적당한 장소에 폴더를 가지고 있으면, 웹 브라우저를 열고 주소를 http://localhost/sencha-touch-folder (또는 때마다 웹 서버에서 제공하도록 구성됩니다)로 지정하면 센차터치 환영페이지가 나타납니다. 첫 번째 응용 프로그램을 시작할 준비가 된 것입니다.
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 파일의 내용을 보십시요. 항상 경고창을 호출하는 간단한 작업을 시작 할 것입니다 :
@example raw miniphone
Ext.application({
name: 'Sencha',
launch: function() {
alert('launched');
}
});
이것이 당신이 시작하기 위해 필요한 전부입니다. 이제 사파리나 크롬을 실행하고 예상대로 작동하는지 확인하십시오. 당신은 또한 그것을 실행하기 위 예제 옆에 있는 작은 미리보기 아이콘을 클릭 할 수도 있습니다. 지금까진 간단히 진행 하였으나 센차터치 페이지로 경고 메시지를 띄우는 앱을 실행 하였습니다.
마지막으로 Panel을 만들고 Hello World를 띄우는 전통적인 작업을 할 시간입니다. launched 함수를 모두 갱신할 필요가 있어 Ext.create사용이 필요하며, 다음과 같습니다:
@example raw miniphone
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Hello World'
});
}
});
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분 안에 심플하지만 강력한 앱을 빌드 하는 것입니다.
앞으로 넘어가거나 다음과 같은 가이드 및 리소스를 확인하는 것이 좋습니다. 프레임 워크의 다른 측면에 대한 자세한 정보를 알기위한 경우 :