【Journey of HarmonyOS Next】DevEco Studio User Guide (26)

1 -> Create a HarmonyOS application project

1.1 -> New project

1.1.1 -> Prerequisites

Log in to DevEco Studio with a Huawei developer account that has been verified with your real name and registered in China (excluding Hong Kong, Macau, and Taiwan).
Make sure that there is no arrears in your Huawei developer account, as the cloud storage service activation will fail.

1.1.2 -> Select a template

1. Select one of the following methods to open the project creation wizard interface.

If you don't currently have any projects open, you can click "Create Project" on the welcome page of DevEco Studio to start creating a new project.
If you already have a project open, you can create a new project by selecting File > New > Create Project in the menu bar.

1. On the Application tab page, select an appropriate cloud development template and click Next.

illustrate

Currently, only the common cloud development template ([CloudDev]Empty Ability) is supported.

1.1.3 -> Configure project information

1. On the project configuration page, configure the basic information of the project.

1. Click "Next" to start associating cloud development resources.

1.1.4 -> Associating cloud development resources

The resources required for cloud development for the project association, that is, the application with the same package name created by your account team in AGC is associated with the current project. Here's how:

1. (Optional) If you have not logged in to DevEco Studio, click Sign In and log in with your verified Huawei developer account on the account login page.

After successful login, the username will be displayed on the interface.

1. Click on the "Team" drop-down box and select the development team.

1. Connect your app

After a team is selected, the system automatically queries applications with the same package name on AGC based on the project bundle name.

If you find an application, select the application and click "Finish".

If the queried app has not been associated with any items (i.e., a free app), it cannot be selected.

If the data processing location has not been enabled for the project to which the app belongs, click AppGallery Connect in the prompt to set the data processing location.

note

Since cloud development currently only supports the China site, make sure that the data processing location enabled by your project includes the China site.
Regardless of which site is enabled for default data processing in the project, the cloud service resources developed in the future will be deployed at the China site.

If an application is queried but the following message appears, the queried application type is a meta-service, which is inconsistent with the current project type. Make sure that the current project and the application with the same package name as AGC are the same HarmonyOS application type.

If you do not find an application with the same package name in the current team, check whether the package name is incorrect.

If the package name is incorrect, click "go back" in the prompt to return to the project information configuration page.
If the package name is correct, the current team has not created an application with the same package name as the current project in the AGC console. You can click AppGallery Connect in the prompt to go to the AGC console to create a new item.

After the preceding operations are completed, DevEco Studio can obtain the application information with the same package name. Once you have selected the app, click "Finish".

1. If the team has not signed a cloud development agreement, click the agreement link to read the agreement carefully, select Agree to the agreement, and click "Finish".

illustrate

Only the account holder and legal role have permission to sign the agreement.

1. On the main development page, DevEco Studio will synchronize the project, ohpm install for the device-side project, and npm install for the cloud-side project to download the device-side and cloud-side dependencies respectively.

illustrate

If npm install fails to be executed on the cloud side, check whether the npm runtime environment has not been configured.

1. On the main development page, you can view the newly created project.

1.2 -> Project Initialization Configuration

After you successfully create a project and associate it with cloud development resources, DevEco Studio will automatically perform some initialization configurations for your project.

1.2.1 -> Automatically activate the cloud development service

DevEco Studio automatically activates cloud development services such as SCF, CDB, and CSS for projects associated with a project, and you can view the service activation status in the Notifications window.

illustrate

If the service activation fails, you can go to the AGC console through the CloudDev cloud development management panel to manually activate the service.
If the automatic or manual activation of the cloud storage service fails, the account may be in arrears. Please check whether the account balance is insufficient, and then go to the AGC console to manually open the account after making up the full amount.

1.3 -> Directory structure of device-cloud integrated development project

The device-cloud integrated development project mainly includes the terminal development project (Application) and the cloud development project (CloudProgram).

1.3.1 -> Application

The end-end development project is mainly used to develop the business code on the end-side of the application, and the directory structure of the end-side development project of the general cloud development template is shown in the following figure. The Application/cloud_objects module is used to store the end-side call interface classes of cloud objects, and the src/main/ets/pages directory contains the pages of cloud storage, cloud database, and cloud function.

1.3.2 -> CloudProgram

In a cloud development project, you can develop cloud code for your application, including SCF and ApsaraDB code. The following figure shows the directory structure of a cloud development project for a general cloud development template.

clouddb: a cloud database directory that includes a directory of data entries (dataentry) and an object type directory (objecttype).

dataentry: used to store data entry files.
In this directory, data entry sample files are preset based on the cloud development template you select. In the general cloud development template project, a data entry sample file named "d_Post.json" will be preset in this directory, which contains two sample data. You can use, modify or delete as needed.

objecttype: used to store object type files.

In this directory, sample files of object types are preset based on the cloud development template you select. In the general cloud development template project, a sample file of the object type named "Post.json" is preset in this directory, which contains the permissions, indexes, field names, and field values of the object type "Post". You can use, modify or delete as needed.

db-config.json: The module configuration file, which contains the configuration information of the ApsaraDB project, such as the default storage area name and the default data processing location.
cloudfunctions: the SCF directory, which contains the subdirectories of each SCF and cloud object. Each subdirectory contains configuration files, entry files, and dependency files of SCFs/CLOUD objects.
In this directory, example functions are preset based on the cloud development template you select. There is a preset sample cloud object "id-generator" for generating UUIDs in the general cloud development template project, which you can use, modify, or delete as needed.

node_modules: Execute npm install generation during project synchronization, including typescript and @types/node public dependencies.
cloud-config.json: A cloud development project configuration file, including the application name and ID, project name and ID, enabled data processing location, and supported device types.
package.json: Defines "typescript" and "@types/node" public dependencies.
package-lock.json: Execute the npm install generation during project synchronization to record the source and version number of each npm package actually installed in the current state.

2 -> Create a meta service project

2.1 -> New project

2.1.1 -> Prerequisites

You have logged in to DevEco Studio with a Huawei developer account that has been verified with your real name and registered in China (excluding Hong Kong, Macau, and Taiwan).
Make sure that your Huawei Developer account is not in arrears, as the cloud storage service activation will fail.
2.1.2 -> Select a template

1. Select one of the following methods to open the project creation wizard interface.

If you don't currently have any projects open, you can click "Create Project" on the welcome page of DevEco Studio to start creating a new project.
If you already have a project open, you can create a new project by selecting File > New > Create Project in the menu bar.

1. Click the Atomic Service tab, select an appropriate cloud development template, and click Next.

illustrate

Currently, only the common cloud development template ([CloudDev]Empty Ability) is supported.

2.1.3 -> Associating cloud development resources

Associate the resources required for cloud development for the project, that is, link the meta service created by your account team in AGC to the project to be created. Here's how:

1. (Optional) If you have not logged in to DevEco Studio, click Sign In and log in with your verified Huawei developer account on the account login page.

After successful login, the username will be displayed on the interface.

1. Select the APP ID under the logged-in account to associate the meta service on AGC.

After selecting the required app ID from the App ID drop-down list, the name, project, package name, and data processing location of the meta service in the AGC console are displayed. Once confirmed, click "Next".
illustrate

The name of the meta-service package is automatically generated, and the format is a combination of a fixed prefix and an appid (com.atomicservice.[ appid])。 Package names that do not conform to the naming convention cannot be displayed in the APP ID drop-down list.

If the APP ID is empty, the meta service has not been created in the AGC console under the current account. You can click on "Register App ID" to go to the AGC console to create a supplement.
After the creation is successful, return to the DevEco Studio interface, click "Refresh" to refresh the current APP ID list, select the newly generated APP ID, and click "Next".

If the queried meta service has not been associated with any project, it cannot be selected. Please add the free meta service to the AGC project first.

2.1.4 -> Configure project information

1. Go to the project configuration page and configure the basic information of the project.

1. Click Finish to enter the main development interface, where DevEco Studio will synchronize the project, ohpm install will be automatically executed for the device-side project, and npm install will be automatically executed for the cloud-side project to download the device-side and cloud-side dependencies respectively.

illustrate

If npm install fails to be executed on the cloud side, check whether the npm runtime environment has not been configured.

1. On the main development page, you can view the newly created project.

2.2 -> Project Initialization Configuration

After you successfully create a project and associate it with cloud development resources, DevEco Studio will automatically perform some initialization configurations for your project.

2.2.1 -> Automatically activate the cloud development service

DevEco Studio automatically activates cloud development services such as SCF, CDB, and CSS for projects associated with a project, and you can view the service activation status in the Notifications window.

illustrate

If the service activation fails, you can go to the AGC console through the CloudDev cloud development management panel to manually activate the service.
If the automatic or manual activation of the cloud storage service fails, the account may be in arrears. Please check whether the account balance is insufficient, make up the outstanding amount, and then go to the AGC console to manually open it.

2.3 -> Catalog structure of device-cloud integrated development project

The device-cloud integrated development project mainly includes the terminal development project (Application) and the cloud development project (CloudProgram).

2.3.1 -> Application

The end-end development project is mainly used to develop the business code on the end-side of the application, and the directory structure of the end-side development project of the general cloud development template is shown in the following figure. The Application/cloud_objects module is used to store the API classes of cloud objects, and the src/main/ets/pages directory contains the pages of cloud storage, cloud database, and SCF.

2.3.2 -> CloudProgram

In a cloud development project, you can develop cloud code for metaservices, including SCF and cloud database service code. The following figure shows the directory structure of a cloud development project for a general cloud development template.

clouddb: a cloud database directory that includes a directory of data entries (dataentry) and an object type directory (objecttype).

dataentry: used to store data entry files.
In this directory, data entry sample files are preset based on the cloud development template you select. In the general cloud development template project, a data entry sample file named "d_Post.json" will be preset in this directory, which contains two sample data. You can use, modify or delete as needed.

objecttype: used to store object type files. In this directory, sample files of object types are preset based on the cloud development template you select. In the general cloud development template project, a sample file of the object type named "Post.json" is preset in this directory, which contains the permissions, indexes, field names, and field values of the object type "Post". You can use, modify or delete as needed.

db-config.json: The module configuration file, which contains the configuration information of the ApsaraDB project, such as the default storage area name and the default data processing location.
cloudfunctions: the SCF directory, which contains the subdirectories of each SCF and cloud object. Each subdirectory contains configuration files, entry files, and dependency files of SCFs/CLOUD objects.
In this directory, example functions are preset based on the cloud development template you select. There is a preset sample cloud object "id-generator" for generating UUIDs in the general cloud development template project, which you can use, modify, or delete as needed.

node_modules: Execute npm install generation during project synchronization, including typescript and @types/node public dependencies.
cloud-config.json: A cloud development project configuration file, including the application name and ID, project name and ID, enabled data processing location, and supported device types.
package.json: Defines "typescript" and "@types/node" public dependencies.
package-lock.json: Execute the npm install generation during project synchronization to record the source and version number of each npm package actually installed in the current state.
@ 3 -> Conversion of historical projects to device-cloud integrated development projects
If you have created a non-device-cloud integrated development project and want to directly convert it to a device-cloud integrated development project, you can perform the following operations:

illustrate

For historical projects that are not connected to the cloud before DevEco Studio NEXT Beta 1, the integration project needs to be migrated before conversion.

1. Create an integrated device-cloud development project, in which the project type (HarmonyOS application or meta-service) must be the same as your historical project type, and the bundle name must be specified as the bundle name of your historical project. During the creation of a device-cloud integrated development project, the bundle name is associated with cloud resources such as AGC applications and projects.

2. Open the device-cloud integrated development project, right-click the application of the end-end development project, and select Open In > Explorer to open the directory where the project file is located.

1. Delete the Application directory of the device-side project of the device-cloud integrated development project.

1. Copy the historical project directory (for example, MyApplication30) to the device-cloud integrated development project directory in Step 3 and rename it to Application.

2. Reopen the device-cloud integrated development project to find that the device-side code of the historical project has been migrated to the device-cloud integrated development project.