Creating Web Applications

This topic describes how to create a new Tizen project using the Tizen Extension in VS Code.

You can create a new Tizen project using the provided templates and samples, and the available configuration settings.

To create a new Web project, use the Tizen Project Wizard, which is a Tizen Extension tool. If you have an existing Tizen project you want to update, open the folder of the project in VS Code.

The Tizen Extension provides various project templates and samples that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen Project Wizard uses to automatically create basic functionalities for the application. The default project files and folders are also created.

In the Tizen Project Wizard, you can select a profile and version, application type, and template or sample to create the project. In addition, you can set basic project properties, such as the project name, location, and working sets.

To create a new Web application:

1. To launch the Tizen Project Wizard, in the VS Code Tizen Extension, click on the "Create Project" button under the "ACTIONS" tree.
   
   
   

2. The Project Wizard Window will launch:
   
   
   

3. Select "Application Type" from "web", "dotnet", "native", and "rpk".
   
   
   

4. Select the Tizen "Version" target for the application.
   
   

5. Select the target "Device" for the application.
   
   
   

6. Select a "Template" for the application.
   The "Template" option provides a list of templates with a basic structure where you can start the Web application project:

   • Basic Project: Template project for a simple Tizen application that you can launch. The "main.js" file in this template includes a keycode handling template for handling remote controller keys. This template is recommended as a general-purpose template.
   • Caph3.0-Empty Template for AngularJS/jQuery: Template projects based on CAPH 3.0. CAPH is a Web UI framework for Smart TV that lets you develop high-performance Web applications easily and quickly. For more information, see CAPH.
   NoteCAPH is supported only for Smart TVs, not for hospitality displays nor signage displays.
   • Empty: Template project containing an empty "main.js" file, basic "icon.png" and "config.xml" files, and an empty "index.html" file. This template is recommended when you want to develop an application from scratch.
   • jQuery Navigation: Template project for developing applications based on jQuery Mobile.
     
     

7. Define the Project Properties "Project Name", and project "Location".
   
   Set also the additional "Set this as a working project" and "Add this project to current workspace" check boxes.

   NoteThe Tizen API names cannot be used as project names. The project name is case-insensitive and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.
   
   The options you can set are listed in the following table.

   Property	Description
   Project name	A name for the project to be created.
   Location	Manually select the location of the project.
   Set this as a working project	Created project will be set as the working project.
   Add this project o current workspace	Created project will be added to current workspace.

   Table 1. Project properties

8. Once the properties are set, click on "Create Project".
   
   
   

9. Configure the application
   All application configuration settings are made inside the "config.xml" file. It contains information about the application, such as required device features and platform version, application icons, application ID and package name.
   
   
   For more information on configuring the application, see Configuring Web Applications.