Cocos Creator Integrates with AppGallery Connect APM — Releasing a Cocos-based App

6 min readNov 2, 2020

According to the introduction of Cocos Creator from its official website, Cocos Creator 2.4.1 and later versions support HUAWEI AppGallery Connect and have been providing multiple AppGallery Connect services. The following figure shows all supported AppGallery Connect services.

To test how well Cocos supports AppGallery Connect services, this article uses the App Performance Management (APM) service as an example to monitor the performance data of a Cocos-developed app. First, let’s see what APM is.

AppGallery Connect APM

APM of AppGallery Connect provides minute-level app performance monitoring capabilities. You can view and analyze app performance data collected by APM in AppGallery Connect to comprehensively understand the performance features of developed apps, helping you quickly and accurately rectify possible performance problems and continuously improve user experience.

That is, APM can help you monitor your app performance data in a variety of scenarios, including app launch, page loading, and network request. We can assume that APM can quickly locate performance-related problems for games, which attach great importance to performance as it greatly affects user experience.

Before You Start

Downloading and Installing the Cocos Dashboard

1. The Cocos Dashboard is the GUI-based development tool provided by Cocos. You can download it from https://www.cocos.com/creator/ (latest version: 2.4.2).

2. You need to install the Visual Studio as well to obtain the Cocos dependency package. The following figure shows the installation procedure.

3. After the installation is complete, click Run

Downloading and Installing Cocos Creator

1. Open the Cocos Dashboard and click Signin in the upper right corner. You can sign up first if you do not have an account.

2. After sign-in, click Editor on the left, and then click Download in the lower right corner.

3. On the Editor page, select the latest version of Cocos Creator, click the download button on the right, and agree with the terms.

4. Once the download is complete, you can create a Cocos project on the Project page. Take a HelloWorld project as an example.

5. When you open the project for the first time, the system prompts you to select a language. Just select English. Select the corresponding running environment and click Run.

Configuring the Visual Studio Code Compilation Environment

The built-in code editor of Cocos is too simple and is only suitable for code viewing and a small amount of editing. Therefore, we need a more mature and powerful compilation environment. This is where Visual Studio Code comes in.

1. Download and install Visual Studio Code of the required version based on your computer environment.

2. Open your project in Cocos Creator and choose Developer > VS Code Workflow > Install VS Code Extension from the main menu to add an adaptation plug-in to Cocos Creator.

3. If the information shown in the following figure is displayed, the installation is successful.

4. If you want the system to autocomplete the Cocos Creator engine API during coding, you need to generate the API autocompletion data and put the data in the project path through the menu. Choose Developer > VS Code Workflow > Update VS Code API Source.

5. Double-click the HelloWorld.js script in the project directory. In the dialog box that is displayed, click Yes and select Visual Studio Code as the default editor.

6. Double-click the HelloWorld.js script again to develop your app.

Packaging and Releasing a Cocos-based App in AppGallery Connect

Cocos Creator 2.4.1 and later versions allow you to package and release your app to HUAWEI AppGallery through AppGallery Connect. In addition, Cocos Creator suports various AppGallery Connect services, such as APM, which can be quickly integrated and used. The detailed procedure is as follows:

1. Sign in to AppGallery Connect and create an app.

2. Sign in to Cocos Creator, choose Project > Build…, and select HUAWEI AppGallery Connect as the release platform.

3. Click Build. If Built huawei-agc successfully is displayed, the build is successful.

Note: When you build a project for the first time, you need to choose File > Settings… and configure the Android SDK path and NDK path on the native development environment page.

4. Click Compile and wait until the compilation is successful.

5. A jsb-default or jsb-link directory (depending on the template selected on the Build… panel) is generated in the build directory of the default release path. AppGallery Connect services are automatically integrated in the directory. Open the publish directory in the jsb-link directory to view the generated APK file.

6. Upload the packaged APK file locally or using AppGallery Connect.

l Uploading the file on the Upload… panel.

a) Login Type: OAuth

Set the parameters according to the following table.

Parameter

Description

APP ID

App ID. To obtain it, sign in to AppGallery, click My apps, find and click your app, and go to App information.

APK Path

APK file path.

Click Confirm, sign in to your HUAWEI ID (with sufficient permissions), and select the check box of the corresponding permissions. The APK file will be uploaded automatically.

b) Login Type: API Client

Sign in to AppGallery Connect to obtain related configuration. Go to Users and permissions > Connect API > Create, create an API client, select a role as required, and click OK.