diff --git a/en/application-dev/quick-start/figures/changeToAPI10.png b/en/application-dev/quick-start/figures/changeToAPI10.png new file mode 100644 index 0000000000000000000000000000000000000000..32c7660ccf7dbd05c206b7753a2dfdb72cca5d0e Binary files /dev/null and b/en/application-dev/quick-start/figures/changeToAPI10.png differ diff --git a/en/application-dev/quick-start/figures/chooseStageModel.png b/en/application-dev/quick-start/figures/chooseStageModel.png index 3125c8ba0591ce0c53344f35fb780eb956601624..b7dd96b6b7c5d2afd241e0c6fd9ee91977692115 100644 Binary files a/en/application-dev/quick-start/figures/chooseStageModel.png and b/en/application-dev/quick-start/figures/chooseStageModel.png differ diff --git a/en/application-dev/quick-start/figures/createProject.png b/en/application-dev/quick-start/figures/createProject.png index 7a56a44e0e7f80671b86c521792352db625ccad7..6c884853a1afcb2dbb72f1e5f7914ab063908299 100644 Binary files a/en/application-dev/quick-start/figures/createProject.png and b/en/application-dev/quick-start/figures/createProject.png differ diff --git a/en/application-dev/quick-start/figures/deleteRuntimeOS.png b/en/application-dev/quick-start/figures/deleteRuntimeOS.png new file mode 100644 index 0000000000000000000000000000000000000000..8087b03be057d646ae6e3348abae73c1e840b781 Binary files /dev/null and b/en/application-dev/quick-start/figures/deleteRuntimeOS.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001609333677.png b/en/application-dev/quick-start/figures/en-us_image_0000001609333677.png new file mode 100644 index 0000000000000000000000000000000000000000..88e2fede373b6b369375bc2d8e58b2dba0770da6 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001609333677.png differ diff --git a/en/application-dev/quick-start/figures/targetSdkVersion.png b/en/application-dev/quick-start/figures/targetSdkVersion.png new file mode 100644 index 0000000000000000000000000000000000000000..e3846adab2a4b644e09dd00c7e66c79db94cbb18 Binary files /dev/null and b/en/application-dev/quick-start/figures/targetSdkVersion.png differ diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md index deb8f8029bc24a78a362f0babdaf5e85c2e000f3..2bc53666dce570f5c9c5c9c5a0b8c48e353422d2 100644 --- a/en/application-dev/quick-start/start-overview.md +++ b/en/application-dev/quick-start/start-overview.md @@ -29,8 +29,9 @@ The application model is the abstraction of capabilities required by OpenHarmony Along its evolution, OpenHarmony has provided two application models: -- Feature Ability (FA) model. This model is supported by OpenHarmony API version 7 and 8. It is no longer recommended. For details about development based on the FA model, see [FA Model Development Overview](../application-models/fa-model-development-overview.md). -- Stage model. This model is supported since OpenHarmony API version 9. It is recommended and will evolve for a long time. In this model, classes such as **AbilityStage** and **WindowStage** are provided as the stage of application components and windows. That's why it is named stage model. For details about development based on the stage model, see [Stage Model Development Overview](../application-models/fa-model-development-overview.md). +- **Stage model**: This model is supported since API version 9. It is recommended. In this model, classes such as **AbilityStage** and **WindowStage** are provided as the stage of application components and windows. That's why it is named stage model. For details about development based on the stage model, see [Stage Model Development Overview](../application-models/stage-model-development-overview.md). The examples in this document are all based on the stage model. + +- **Feature Ability (FA) model**: This model is supported since API version 7. It is no longer recommended. For details about development based on the FA model, see [FA Model Development Overview](../application-models/fa-model-development-overview.md). For details about the differences between the FA model and stage model, see [Interpretation of the Application Model](../application-models/application-model-description.md). @@ -39,8 +40,8 @@ To help you better understand the preceding basic concepts and application devel ## Tool Preparation -1. Download the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio). +1. Download the latest version of [DevEco Studio](../../release-notes/OpenHarmony-v4.0-beta1.md#version-mapping). 2. Install DevEco Studio and configure the development environment. For details, see [Setting Up the Development Environment](https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/environment_config-0000001052902427-V3). -When you are done, follow the instructions in [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md), [Getting Started with ArkTS in FA Model](start-with-ets-fa.md), and [Getting Started with JavaScript in FA Model](start-with-js-fa.md). +When you are done, follow the instructions in [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md). diff --git a/en/application-dev/quick-start/start-with-ets-stage.md b/en/application-dev/quick-start/start-with-ets-stage.md index fb8593d555aec31c44e7a6658f6a68f2ab99dccb..b36b98e08c31e1132ada81230d3ef8110227a422 100644 --- a/en/application-dev/quick-start/start-with-ets-stage.md +++ b/en/application-dev/quick-start/start-with-ets-stage.md @@ -1,20 +1,27 @@ # Getting Started with ArkTS in Stage Model -> **NOTE** -> -> To use ArkTS, your DevEco Studio must be V3.0.0.900 Beta3 or later. -> -> For best possible results, use [DevEco Studio 3.1 Beta2](https://developer.harmonyos.com/cn/develop/deveco-studio) for your development. - +> **NOTE** +> +> To use ArkTS, your DevEco Studio must be V3.0.0.900 Beta3 or later. +> +> In this document, DevEco Studio 4.0 Beta1 is used. You can download it [here](../../release-notes/OpenHarmony-v4.0-beta1.md#version-mapping). ## Creating an ArkTS Project -1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **Choose Your Ability Template** page, select **Application** (or **Atomic Service**, depending on your project), select **Empty Ability** as the template, and click **Next**. +The procedure for creating a project varies, depending on whether the API version is later than 9 or not. + +The following describes how to create the OpenHarmony projects of API 10 and API 9. + +### Creating a Project of API Version 10 + +1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. + +2. On the **Choose Your Ability Template** page, select **Application** (or **Atomic Service**, depending on your project), select **Empty Ability** as the template, and click **Next**. ![createProject](figures/createProject.png) -2. On the project configuration page, set **Compile SDK** to **9**, **Model** to **Stage**, and retain the default values for other parameters. +3. On the project configuration page, set **Compile SDK** to **3.1.0(API 9** and retain the default values for other parameters. ![chooseStageModel](figures/chooseStageModel.png) @@ -25,27 +32,102 @@ > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. > > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above. - -3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. -4. After the project is created, in the **entry** > **build-profile.json5** file, change **runtimeOS** under **targets** to **OpenHarmony**, and click **Sync Now** in the upper right corner to start development. +4. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. + +5. After the project is created, in the project-level **build-profile.json5** file, move the **compileSdkVersion** and **compatibleSdkVersion** fields from under **app** to under the current **products**. You can identify the current **products** by clicking the ![en-us_image_0000001609333677](figures/en-us_image_0000001609333677.png) icon in the upper right corner of the editing area. + + ![changeToAPI10](figures/changeToAPI10.png) + +6. Change the value of **targetSdkVersion** from **9** to **10** and set **runtimeOS** to **OpenHarmony**. + + ![targetSdkVersion](figures/targetSdkVersion.png) + +7. Delete the **runtimeOS** configuration from the **targets** field in all module-level **build-profile.json5** files. + + ![deleteRuntimeOS](figures/deleteRuntimeOS.png) + +8. Click **Sync Now** and wait until the synchronization is complete. A project of API version 10 is now created. + +### Creating a Project of API Version 9 + +1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. + +2. On the **Choose Your Ability Template** page, select **Application** (or **Atomic Service**, depending on your project), select **Empty Ability** as the template, and click **Next**. + + ![createProject](figures/createProject.png) + +3. On the project configuration page, set **Compile SDK** to **3.1.0(API 9** and retain the default values for other parameters. + + ![chooseStageModel](figures/chooseStageModel.png) + + > **NOTE** + > + > You can use the low-code development mode apart from the traditional coding approach. + > + > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. + > + > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above. + +4. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. + +5. In the module-level **entry** > **build-profile.json5** file, set **runtimeOS** in **targets** to **OpenHarmony**. + +6. Click **Sync Now** and wait until the synchronization is complete. A project of API version 9 is now created. + + +## ArkTS Project Directory Structure (Stage Model, API Version 10) + +![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png) + +- **AppScope > app.json5**: application-level configuration information. + +- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). + - **src > main > ets**: a collection of ArkTS source code. + + - **src > main > ets > entryability**: entry to your application/service. + + - **src > main > ets > pages**: pages included in your application/service. + + - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories). + + - **src > main > module.json5**: 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. For details, see [module.json5 Configuration File](module-configuration-file.md). + + - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. + + - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation in this file. + +- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212). +- **build-profile.json5**: application-level configuration options, including **signingConfigs** and **products**. The **runtimeOS** field in **products** indicates the runtime OS. Its default value is **HarmonyOS**. If you are developing an OpenHarmony application, change the value to **OpenHarmony**. -## ArkTS Project Directory Structure (Stage Model) +- **hvigorfile.ts**: application-level build script. + +## ArkTS Project Directory Structure (Stage Model, API Version 9) ![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png) -- **AppScope** > **app.json5**: global configuration of your application. +- **AppScope > app.json5**: application-level configuration information. + - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). - **src > main > ets**: a collection of ArkTS source code. + - **src > main > ets > entryability**: entry to your application/service. + - **src > main > ets > pages**: pages included in your application/service. + - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories). + - **src > main > module.json5**: 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. For details, see [module.json5 Configuration File](module-configuration-file.md). - - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application. - - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation. + + - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. The **runtimeOS** field in **targets** indicates the runtime OS. Its default value is **HarmonyOS**. If you are developing an OpenHarmony application, change the value to **OpenHarmony**. + + - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation in this file. + - **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212). -- **build-profile.json5**: application-level configuration information, including the signature and product configuration. + +- **build-profile.json5**: application-level configuration information, including the **signingConfigs** and **products** configuration. + - **hvigorfile.ts**: application-level build script. @@ -127,7 +209,7 @@ ![secondPage](figures/secondPage.png) - > **NOTE** + > **NOTE** > > You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes. - Configure the route for the second page: In the **Project** window, choose **entry** > **src** > **main** > **resources** > **base** > **profile**. In the **main_pages.json** file, set **pages/Second** under **src**. The sample code is as follows: