create-tizen-app

create-tizen-app is a wizard tool for helping to configure and make a tizen web application. If you are a developer who prefers commonjs style or typescript language, It would be the best solution to create tizen web application easily. It also supports the way to use Samsung TV Product API, Tizen common API as a Commonjs style or typescript.

Associated Projects

• tizen-tv-webapis is for supporting Samsung TV Product API as commonjs style.
• @types/tizen-tv-webapis is definitions for supporting Samsung TV Product API as typescript.
• tizen-common-web is for supporting Tizen Web Device API as commonjs style.
• @types/tizen-common-web is definitions for supporting Tizen Web Device API as typescript.

Quick Start

npm install -g @tizentv/create-tizen-app
mkdir workspace
cd workspace
create-tizen-app yourProjectName

Overview

create-tizen-app can create your tizen web application with configuration what you select. You can select language, bundler, editor and even live reloading tool (WITs).

Command

create-tizen-app

Create your tizen application with yourProjectName

create-tizen-app yourProjectName

init

if you are behind proxy, you can pass --proxy option.

create-tizen-app init yourProjectName --proxy http://0.0.0.0:8080

Prompters for selecting

1. ProjectName
   • You can put the name of your application.
     • The character length should be 3~50
     • The starting character should be an alphabet
     • The name should be consisted of alphabet and number
2. Language
   • Select your project's language. Commonjs or Typescript.
   • If you select the Commonjs,
     • then tizen-tv-webapis and tizen-common-web will be installed.
     • Both packages are essential when you bundle your javascripts.
   • [Recommand] If you select the Typescript,
     • then tizen-tv-webapis, tizen-common-web, @types/tizen-tv-webapis, @types/tizen-common-web and typescript will be installed.
     • The @types packages will increse your developing efficiency.
     • Check out the Typescript Get Started.
3. Bundler
   • Select a bundler. We support Webpack and Parcel. The Webpack is most popular bundler. And the Parcel is famous for zero configuration.
   • If you select the Webpack,
     • then webpack,webpack-cli and file-loader will be installed.
     • If you select the typescript, ts-loader is installed, .
     • If you select the commonjs babel-loader, @babel/core and @babel/preset-env are installed, .
     • And webpack.config.js is created, so customize your bundler as your project.
   • If you select the Parcel,
     • then parcel and parcel-plugin-change-file will be installed.
     • It's simple than the Webpack.
4. Editor
   • You can select an editor, then we will install the Tizen SDK extensions.
     Before you select the editor, you should install the editor on your PC.
     • VScode
     • Atom
   • All applications must be signed with valid samsung certificates before you submit the application to seller office.
     You should install the Tizen Studio for making the samsung certificates.
     You can check the guide for creating the samsung certificates.
   • If you select the VScode, then tizensdk.tizentv Extension will be installed.
   • If you select the Atom, then atom-tizentv Extension will be installed.
   • If you select the None, then Tizen SDK will be not installed.
5. WITs (Live Reloading tool)
   • You can choose to use it or not. For details, please refer WITs github.
   • If you decided to use WITs, the some prompters for configuration will be asked.
     • Device Ip address : Target TV IP
     • Application width (1920 or 1280)
     • Profile path : Required for packaging. You need to create a certification (Tizen or Samsung) via one of the editors. (VSCode / Atom / Tizen Studio)
     • Using chrome Devtools for debugging (Y or N) : If you set as "Y", Chrome browser will be opened with inspector

create-tizen-app doctor

Originally Doctor runs at the end of steps when you do create-tizen-app. In case you want to use Doctor for diagnosing your development environment, we support a doctor subcommand for that. If something is missing, Doctor will notify you the solution.

cd workspace/yourProjectName
create-tizen-app doctor

Usage after creating project

cd workspace/yourProjectName
npm run build

# optional (If you choosed WITs)
#    npm run wits-init (For configuration)
#    npm run wits-start (For packaging, connecting, launching, live reloading)
npm run wits-start

Build to Tizen 2.4 (or below)

If you build a tizen application to old version(v2.2.1, v2.3, v2.4), then you should change the target to es5 in tsconfig.json.

// tsconfig.json
{
    "complierOpitons": {
        //"target" : "es6"    // Tizen 3.0 or higher
        "target": "es5" // Tizen 2.4 or below
    }
}