[Tizen] Tizen Web Project 생성, 빌드, 실행, 디버깅 방법

Tizen Web Project 의 생성부터 빌드, 실행, 디버깅 방법을 알아보자.

Tizen 2.0 Magnolia SDK 기준 환경으로 설명하겠다.

1. Tizen Web 프로젝트 생성 방법

• Tizen Web IDE > File > New > Tizen Web Project 클릭.
• 
• 클릭하면 다음과 같은 New Tizen Web Project Wizard 가 나타난다.
• 
• Eclipse 답지않게 Tab 으로 카테고리가 분류되어있다.
• Template
• Basic
• 기본 WebApp 구성 파일(html, css, javascript file)로 이루어진 프로젝트 Template
• Tizen Web UI Framework
• jQuery Mobile 을 확장한 Winset 을 가지고 있는 UI Framework 를 사용한 프로젝트 Template 로 Tizen Web UI Builder 프로젝트를 선택하면 UI Builder 로 디자인 구성이 가능하다.
• Single-Page Application
• Multi-page Application
• Master-Detail Application
• Navigation Application
• jQuery Mobile
• jQuery Mobile Framework 를 탑제하여 구성된 프로젝트 Template
• Single-Page Application
• Multi-page Application
• Master-Detail Application
• Navigation Application
• Tizen Web UI Builder
• Tizen Web UI Framework 을 사용하여 UI Builder 로 디자인을 직관적이고 편하게 할 수 있는 프로젝트
• Single-Page Application
• Multi-page Application
• Master-Detail Application
• Navigation Application
• Sample
• 기본 WebApp Template 이 아닌 Tizen Device API 를 이용한 Sample 및 고품질의 WebApp Sample 등의 다양한 프로젝트를 생성 할 수 있다.
• 일부 Sample 들은 다음에서 더 자세히 알아볼 수 있다.
• Tizen Sample Web Applications
• Intel Open Source
• Github
• User Template
• 사용자가 작성한 템플릿으로부터 프로젝트를 생성 할 수 있다.
• User Template Guide
• Basic 프로젝트를 생성해보자.
• 
• 생성되면 다음과 같은 파일구조의 Web 프로젝트가 생성된다.
• config.xml
• W3C 의 Widget 의 스펙을 충족하는 Web Application 의 상세 설정 파일
• index.html
• 기본 html 파일(entry point)
• style.css
• style 을 정의할 수 있는 기본 css 파일
• main.js
• 기본 javascript 파일
• 

2. Tizen Web 프로젝트 빌드 방법

• 프로젝트를 생성한 뒤에 내용을 수정하고 빌드를 해서 wgt 라는 확장자를 가지는 위젯을 만들어야 한다.
• wgt 라는 확장자를 가지는 위젯은 W3C 의 스펙으로, 프로젝트를 묶은파일이다.
• 빌드를 하는 방법은 다음 2가지 방법이 있다.
• Project > Build Project 를 체크하면 Save 시에 항상 빌드를 한다.
• 
• 수동으로 빌드를 하고싶을경우에는 Project 의 Root 폴더에서 마우스 우클릭 > Build Project
• 
• 빌드가 끝나면 다음과 같이 wgt 확장자를 가진파일이 생성되고, 이파일을 열어보면 현재 프로젝트의 내용들이 묶여있는것을 볼 수 있다.
• 

3. Tizen Web 프로젝트 실행 방법

• 왼쪽 하단의 Connection Explorer 의 Emulator Manager 버튼을 클릭하자.
• 
• Emulator Manager 의 tizen-2.0 > x86-standard 의 <<create new... >> 부분을 클릭하고 우측 아래의 Create 버튼을 누른다.
• 이후 Name 에 Emulator 의 이름을 입력한다.
• 
• Confirm 버튼을 누르면 애뮬레이터가 생성된다.
• 
• 우측 하단의 Launch 버튼을 누르면 애뮬레이터가 실행된다.
• 

• 애뮬레이터가 실행되면, 해당 애뮬레이터가 Connection Explorer 에 나타난다. 이곳에서 애뮬레이터 내부의 파일 구조를 탐색하거나 파일에 대해 push/pull 을 할 수 있다.
• 
• 애뮬레이터를 생성한 뒤에 실행할 프로젝트에서 마우스 우클릭 또는 Run 메뉴에서 해당 프로젝트를 실행 한다.
• Tizen Web Application 으로 실행 하면 애뮬레이터에서 실행되고, Tizen Web Simulator Application 으로 실행하면 크롬기반의 Web Simulator 에서 실행이 된다.
• 
• 

4. Tizen Web 프로젝트 디버깅 방법

• Tizen Web 프로젝트를 디버깅 하는 방법을 알아본다. 
• 기본적인 동작은 Debug As 로 실행하는 것외에 Run 과 동일하다. 
• 
• Debug As > Tizen Web Application 을 수행하면, 현재 Connection Explorer 에 선택되어 있는 애뮬레이터 혹은 디바이환경에서 디버깅이 수행되게 된다.
• 디버깅은 크롬기브라우져위에서 Remote Web Inspector 로 수행된다.
• 기본적인 조작법은 Chrome Web Inspector 의 조작법과 동일하다.
•