# Getting Started with eTS in the Traditional Coding Approach > ![icon-note.gif](public_sys-resources/icon-note.gif) **Noteļ¼š** > To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later. > > For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development. ## Creating an eTS Project 1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. ![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png) 2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters. ![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.png) 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. ## eTS Project Files - **entry** : OpenHarmony project module, which can be built into an ability package (HAP). - **src > main > ets** : a collection of eTS source code. - **src > main > ets > MainAbility** : entry to your application/service. - **src > main > ets > MainAbility > pages** : pages contained in **MainAbility**. - **src > main > ets > MainAbility > app.ets** : ability lifecycle file. - **src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. - **src > main > config.json** : module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. - **build-profile.json5** : module information and build configuration options, including **buildOption target**. - **hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation. - **build-profile.json5** : application-level configuration information, including the signature and product configuration. - **hvigorfile.js** : application-level compilation and build task script. ## Building the First Page 1. Use the **Text** component. After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **<Text>** component. The sample code in the **index.ets** file is shown below: ``` @Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') } } ``` 2. Add a **<Button>** component. On the default page, add a **<Button>** component to accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below: ``` @Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // Add a button to accept user clicks. Button() { Text('Next') .fontSize(30) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') } .width('100%') } .height('100%') } } ``` 3. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks on the Previewer. ![en-us_image_0000001216239356](figures/en-us_image_0000001216239356.png) ## Building the Second Page 1. Create the second page. In the **Project** window, choose **entry** > **src** > **main** > **ets** > **MainAbility**, right-click the **pages** folder, choose **New** > **Page**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder: ![en-us_image_0000001223397122](figures/en-us_image_0000001223397122.png) 2. Add **<Text>** and **<Button>** components. Add **<Text>** and **<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below: ``` @Entry @Component struct Second { @State message: string = 'Hi there' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) Button() { Text('Back') .fontSize(25) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') } .width('100%') } .height('100%') } } ``` ## Implementing Page Redirection You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below: 1. Implement redirection from the first page to the second page. In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below: ``` import router from '@system.router'; @Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // Add a button to accept user clicks. Button() { Text('Next') .fontSize(30) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') // Bind the onClick event to the Next button so that clicking the button redirects the user to the second page. .onClick(() => { router.push({ uri: 'pages/second' }) }) } .width('100%') } .height('100%') } } ``` 2. Implement redirection from the second page to the first page. In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below: ``` import router from '@system.router'; @Entry @Component struct Second { @State message: string = 'Hi there' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) Button() { Text('Back') .fontSize(25) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') // Bind the onClick event to the Back button so that clicking the button redirects the user back to the first page. .onClick(() => { router.back() }) } .width('100%') } .height('100%') } } ``` 3. Open the **index.ets** file and click ![en-us_image_0000001262219043](figures/en-us_image_0000001262219043.png) in the Previewer to refresh the file. The figure below shows the effect. ![en-us_image_0000001260684127](figures/en-us_image_0000001260684127.png) ## Running the Application on a Real Device 1. Connect the development board running the OpenHarmony standard system to the computer. 2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. ![en-us_image_0000001268077317](figures/en-us_image_0000001268077317.png) 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262206247](figures/en-us_image_0000001262206247.png). The display effect is shown in the figure below. ![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png) Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)