Cocos Creator Integrates with AppGallery Connect APM – Integrating the APM SDK - Huawei Developers

After learning how to release a Cocos-based app in HUAWEI AppGallery Connect, you can monitor your app's performance data using AppGallery Connect APM. Currently, the APM SDK supports only the Android platform. Take APM as an example. Let's see how to integrate a service.
Configuring Relevant Information in Cocos Creator
1. On the Service panel of Cocos Creator, find and enable APM.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Before integrating a service, you need to associate the service with an app. Click Association. In the dialog box that is displayed, click Create. The Cocos console is displayed.
3. On the Cocos console, create a game.
4. Go back to Cocos Creator and create, refresh, or select an association.
Configuring Relevant Information in AppGallery Connect
1. Sign in to AppGallery Connect, click My projects, and find your project, and click the game you created last time on the project card.
2. Go to Quality > APM and click Enable.
3. Go to Project settings and download the latest agconnect-services.json file.
4. Save the downloaded agconnect-services.json file to the settings directory in your Cocos project.
Packaging and Running an App
Currently, AppGallery Connect APM does not provide a JavaScript SDK. Therefore, you need to package your app and install it on an Android device to view its performance data. Perform the following steps:
1. Package the current Cocos-based app. Access Cocos Creator, go to Project > Build..., choose HUAWEI AppGallery Connect, and set a package name.
Note: The package name must be the same as the package name configured in AppGallery Connect, that is, the name of the JSON file in the previous step. Otherwise, a compilation error is reported.
2. Find the corresponding APK file in the \build\jsb-link\publish\android directory of the project.
3. Install the file on an Android device by running the adb install –r packageName.apk command in the CLI.
4. Launch the app and perform normal operations. Check whether the corresponding APMS logs are generated. If so, you have integrated the APM service successfully.
Viewing App Performance Data
After the app runs for about 5 minutes, you can view its performance data in AppGallery Connect (under My projects > Quality > APM). For details, check Viewing App Performance Data.
Additional APM Features
In addition to the basic features, APM has some additional features, including custom tracing parameters. You can use these features to monitor app performance in specific scenarios, such as app sign-in and ANR problems.
1. Setting custom tracing parameters:
Code:
huawei.agc.apms.apmsService.startCustomTrace("traceID");
2. Setting the attribute names and values of a custom trace:
Code:
huawei.agc.apms.apmsService.putCustomTraceProperty(traceID, pName, pValue);
3. Creating a network request indicator instance for each network request to collect network performance data:
Code:
let id = huawei.agc.apms.apmsService.initNetworkMeasure(url, "POST");
console.log("createNetworkMeasure, id = ", id);
For more details, you can go to:
APM (AppGallery Connect) quick start for a Cocos-based app:
https://docs.cocos.com/creator/manual/en/cocos-service/agc-apm.html
AppGallery Connect APM development guide:
https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-apms-introduction
Cocos Creator Integrates with AppGallery Connect APM – Releasing a Cocos-based App:
https://developer.huawei.com/consumer/en/forum/topicview?fid=0101271690375130218&tid=0203359161844040878&pid=0303359161844040067

Related

Integration Practice | Sending Messages by HUAWEI Push Kit in Cocos

Cocos Creator has supported HMS Core and HUAWEI AppGallery Connect, through which you can quickly release your games with one click, reducing such complex operations as the SDK integration and app upload during development. In this way, you can build high-quality and innovative apps to improve game experience.
Based on this guide, you can learn how to send messages by Push Kit in Cocos step by step.
Procedure Overview
1. Create a game on the Cocos website, and create the game project in Cocos Creator.
2. Create an app and configure the app information in AppGallery Connect, configure Cocos SDKHub and the building flow, and add the HUAWEI_HMS (Push) plugin and select HUAWEI AppGallery Connect from SDKHub Configuration.
3. Perform coding to obtain a token and build an APK.
4. Test the function of sending notification messages and data messages.
Procedure Details
Step 1: Create a game on the Cocos website, and create the game project in Cocos Creator.
1. Visit https://passport.cocos.com/auth/signup, and sign in with a Cocos developer account. (If you have no account, register one.) Then create a game.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Visit http://www.cocos2d-x.org/products#creator, and download and install Cocos Creator.
3. Start Cocos Creator, choose Project, and click New. In the window that is displayed, configure project information, and click Save. The project creation is completed.
If the following error occurs during creation, download Editor.
In Cocos Creator, choose Editor, select version 2.4.2 on the right, and click Download.
Step 2: Create an app and configure the app information in AppGallery Connect, configure Cocos SDKHub and the building flow, and add the HUAWEI_HMS (Push) plugin and select HUAWEI AppGallery Connect from SDKHub Configuration.
1. Create an app and configure the app information in AppGallery Connect by referring to the guide in https://developer.huawei.com/consum...re-Guides/android-config-agc-0000001050170137.
The key steps include:
Generating a signing certificate fingerprint
Configuring the signing certificate fingerprint
Setting a data storage location
Enabling required services
Downloading the agconnect-services.json file
After the app information configuration, perform configuration in Cocos Creator.
2. Choose Panel > Service.
3. Select your project.
Select Cocos SDKHub on the page that is displayed.
4. Click Plugin Manage.
5. Select Push and click OK. The page shown in the preceding figure is displayed.
6. Move the cursor to Not Configured in Params. The editing icon is displayed. Click it.
7. Select a required JSON file, and click OK.
8. Choose Project > Build.
The Build panel is displayed on the right.
9. Set SDKHub Configuration to HUAWEI AppGallery Connect, and click Build.
If the following error occurs during building, install NDK.
After the installation, click Compile. The progress status becomes completed.
Step 3: Perform coding to obtain a token and build an APK.
The following figure shows the project structure.
In Cocos Creator, select js-sdkhub.js file from Assets at the lower left corner.
More information, you can visit https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201368424613350372&fid=0101187876626530001
https://forums.developer.huawei.com/...87876626530001 This seems a new platform for asking integration questions about HMS. I will try this.
Sherlock F said:
https://forums.developer.huawei.com/...87876626530001 This seems a new platform for asking integration questions about HMS. I will try this.
Click to expand...
Click to collapse
Yep, welcome to experience it~

Sending Messages by Push Kit in Cocos

Cocos Creator has supported HMS Core and HUAWEI AppGallery Connect, through which you can quickly release your games with one click, reducing such complex operations as the SDK integration and app upload during development. In this way, you can build high-quality and innovative apps to improve game experience.
Based on this guide, you can learn how to send messages by Push Kit in Cocos step by step.
Procedure Overview
1. Create a game on the Cocos website, and create the game project in Cocos Creator.
2. Create an app and configure the app information in AppGallery Connect, configure Cocos SDKHub and the building flow, and add the HUAWEI_HMS (Push) plugin and select HUAWEI AppGallery Connect from SDKHub Configuration.
3. Perform coding to obtain a token and build an APK.
4. Test the function of sending notification messages and data messages.
Procedure Details
Step 1: Create a game on the Cocos website, and create the game project in Cocos Creator.
1. Visit https://passport.cocos.com/auth/signup, and sign in with a Cocos developer account. (If you have no account, register one.) Then create a game.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Visit http://www.cocos2d-x.org/products#creator, and download and install Cocos Creator.
3. Start Cocos Creator, choose Project, and click New. In the window that is displayed, configure project information, and click Save. The project creation is completed.
If the following error occurs during creation, download Editor.
In Cocos Creator, choose Editor, select version 2.4.2 on the right, and click Download.
Step 2: Create an app and configure the app information in AppGallery Connect, configure Cocos SDKHub and the building flow, and add the HUAWEI_HMS (Push) plugin and select HUAWEI AppGallery Connect from SDKHub Configuration.
1. Create an app and configure the app information in AppGallery Connect by referring to the guide in https://developer.huawei.com/consum...re-Guides/android-config-agc-0000001050170137.
The key steps include:
Generating a signing certificate fingerprint
Configuring the signing certificate fingerprint
Setting a data storage location
Enabling required services
Downloading the agconnect-services.json file
After the app information configuration, perform configuration in Cocos Creator.
2. Choose Panel > Service.
3. Select your project.
Select Cocos SDKHub on the page that is displayed.
4. Click Plugin Manage.
5. Select Push and click OK. The page shown in the preceding figure is displayed.
6. Move the cursor to Not Configured in Params. The editing icon is displayed. Click it.
7. Select a required JSON file, and click OK.
8. Choose Project > Build.
The Build panel is displayed on the right.
9. Set SDKHub Configuration to HUAWEI AppGallery Connect, and click Build.
If the following error occurs during building, install NDK.
After the installation, click Compile. The progress status becomes completed.
Step 3: Perform coding to obtain a token and build an APK.
The following figure shows the project structure.
In Cocos Creator, select js-sdkhub.js file from Assets at the lower left corner.
1. Compile the following code in the js-sdkhub.js file:
Code:
var onPushResult = function (code, msg) {
console.log("on push result action.");
console.log("code: " + code);
console.log("msg: " + msg);
}
var init = function () {
let _global = global || window;
_global.sdkhub = _global.sdkhub || {};
sdkhub.getPushPlugin = () => null;
if (typeof SDKHub === 'undefined')
return;
sdkhub.getPushPlugin = () => SDKHub.AgentManager.getInstance().getPushPlugin();
sdkhub.getPushPlugin().startPush();
sdkhub.getPushPlugin().setListener(onPushResult, this);
}
init();
2. Click Build and then Compile to generate an APK, and install the APK to your device for testing.
The following error will occur during app running if you do not configure a correct certificate fingerprint.
Obtain the device token based on tag jswrapper|HUB_LOG in the logs.
Step 4: Test the function of sending notification messages and data messages.
1. Sign in to AppGallery Connect and select Push Kit by referring to the guide in https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/msg-sending-0000001050042119.
a. Configure notification message information.
The testing result is as follows.
b. Configure data message information.
The testing result is as follows.
Congratulations! Your game can send messages by Push Kit in Cocos.
For more details, please refer to the following documents.
HMS Core overview: https://developer.huawei.com/consumer/en/hms
HMS Core sample code on GitHub: https://github.com/HMS-Core
HMS Core Stack Overflow: https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest

Integrating HUAWEI Game Service Based on Cocos SDKHub - Integrating Cocos SDKHub

1. Creating a Game on the Cocos Console
Create a game on the Cocos console as instructed (https://account.cocos.com/#/game/game_list).
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Creating a Game in HUAWEI AppGallery Connect
Step 1: Create a project in AppGallery Connect and add your app to the project.
Set Platform to Android, Device to Mobile phone, and App category to App or Game based on your needs.
Step 2: Configure the signing certificate fingerprint.
Go to Project settings > General information. In the App information area, click the icon next to SHA-256 certificate fingerprint, and enter the obtained SHA-256 certificate fingerprint.
Step 3: Enable the services you need.
Go to My projects > Project settings > Manage APIs, and enable the APIs you need to use.
If your app includes in-app purchases, go to Earn > In-App Purchases, and click Settings to enable HUAWEI IAP.
Step 4: (Optional) Configure achievements and events for your game.
For details, see the official documentation.
3. Associating a Game in Cocos Creator
You can enable third-party services for your app in Cocos Creator. But first, you need to set a Cocos AppID. Select a created game, and click Association, as shown in the following figures.
4. Integrating Cocos SDKHub
After Cocos SDKHub is integrated, you can run the sdkhub command in Developer Tools to access related APIs and functions.
5. Configuring Cocos SDKHub
1. Configuring a plug-in: Click Config Plugin, select the Huawei services to be enabled, and click OK.
2. Setting parameters: Click the following button and set parameters in the dialog box that is displayed.
Obtain the payment public key from Earn > In-App Purchases in AppGallery Connect.
Now that you have integrated Cocos SDKHub, you can develop your game in the Cocos development environment.
Next time, we'll take a look at how to package and release an app in AppGallery Connect.
For more details, check:
AppGallery Connect documentation:
https://developer.huawei.com/consumer/en/doc/distribution/app/agc-create_app
Cocos SDKHub Quick Start:
https://docs.cocos.com/creator/manual/en/cocos-service/sdkhub.html

How Can I Integrate Remote Configuration of AppGallery Connect in Flutter?

Recently, it is found that some services of AppGallery Connect start to support cross-platform frameworks, including Flutter. Let's have a try on Remote Configuration.
Integration Procedure
1. Install the Flutter environment.
a) Download the Flutter SDK package from https://flutter.dev/docs/get-started/install/windows.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Decompress the package to any directory, for example, D:\Flutter.
b) Add Flutter to environment variables. Here, the path is D:\Flutter\flutter_windows_1.22.2-stable\flutter\bin.
c) In Android Studio, go to File > Settings > Plugins, download the Flutter and Dart plug-ins, and restart Android Studio for the plug-ins to take effect.
2. Create a project and enable Remote Configuration.
a) Create an Android project in AppGallery Connect and enable Remote Configuration.
b) Add the following configuration items to Remote Configuration.
c) In Android Studio, go to File > New > New Flutter Project… and create a Flutter project.
d) Go to Project settings > General information in AppGallery Connect. In the App information area, download the agconnect-services.json file.
e) Place the agconnect-services.json file in the directory shown in the following figure.
f) Configure the Maven repository and Remote Configuration plug-in in the app-level build.gradle file.
g) Open the build.gradle file in the android/app directory of the Flutter project and add the build dependencies and AppGallery Connect plug-in address.
3. Integrate the Remote Configuration SDK.
Add the SDK dependency of Remote Configuration to the pubspec.yaml file.
Click Pub get to synchronize the data.
4. Test basic functions.
Here I implement a simple demo app to demonstrate several of the most important functions.
In the UI design, the Mode 1:Fetch And Activate Immediately, Mode 2:Fetch And Activate Next Time, and Clear Data buttons are provided to implement the following functions:
1. Obtain data from the cloud. This operation takes effect this time.
Tap Mode 1:Fetch And Activate Immediately to call fetch and then applyLastFetched to obtain the data fetched this time. The operation will take effect immediately. Therefore, we call the getMergedAll API to apply all the settings to the device. Then, we can obtain the data from the cloud on the device. The following figure shows the tap effect.
2. Obtain the cloud data and make the setting obtained last time take effect.
The API for delaying the setting to take effect shares the same implementation logic as that for making the setting take effect immediately, and they differ in the execution sequence.
Tap Mode 2:Fetch And Activate Next Time to call apply and getMergedAll to apply the last fetch result, and then call fetch to obtain the latest setting for next use.
3. Clear the data.
To clear data, tap Clear Data to call the clearAll API.
4. Set local configuration items.
You can create a Map parameter in the*.dart file and call the applyDefault API to apply the local settings.
HTML:
Map defaults = {
'mLong': 1000,
'mString': 'hello world',
'mDouble': 3.14,
'mBoolean': true
};
AGCRemotConfig.instance.applyDefaults(defaults);
5. Package your app.
Similar to Android, you only need to run your project in Android Studio.
Precautions
Different from setting local configuration items on the Android platform, Flutter cannot use XML files to store local configuration items.
For more details, check:
Flutter official guide: https://flutter.dev/docs/get-started/install/windows
To view more about how to integrate Remote Configuration into an Android project, visit https://developer.huawei.com/consum...-connect-Guides/agc-remoteconfig-introduction.
Demo of Remote Configuration(Flutter):https://developer.huawei.com/consum...oteconfig-flutter-samplecode-0000001056579535
Is there any usage restriction?
riteshchanchal said:
Is there any usage restriction?
Click to expand...
Click to collapse
there are some restriction as follows. For more restriction, please focus on the official document
A single project can have a maximum of 2000 parameters and 500 conditions. The total length of all parameter strings cannot exceed 800 KB.
The interface invoking frequency cannot exceed 20 times per hour.

Push Kit Integration with Cocos

Introduction:
This article will demonstrate to Integrate Push kit in Cocos using Huawei HMS Core App Services Plugin. Huawei Push Kit is a messaging service. It establishes a messaging channel from the cloud to devices. By integrating Push Kit, you can send messages to your apps on users devices in real time. This helps to maintain closer ties with users and increases user awareness and engagement with your apps.
Note: Cocos is free but not open source.
Requirements:
1. Cocos Creator tool
2. Notepad++ for editing and writing script
3. HMS Device
4. Android Studio for Analyzing APK and Checking Log
Output:
Push Notification, Data Message.
Steps to Integrate:
1. Install and launch cocos creator.
2. Make sure to configure NDK Root and Android SDK Root in Cocos Creator, choose File> Settings>Select Native Develop.
3. Click in Cocos Dashboard, click New.
Create project name in Name section and click on hello-world and then Create and open.
Click on Project tab and then Build.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Enter Platform, Build Path and Package Name in build window.
Note: The package name should be same in app gallery connect.
In the same build popup, in the keystore section we can use default keystore (default location is /Users/<username>/.android/debug.keystore) and we can generate SHA key or we can create custom keystore and can generate SHA key.In Command line terminal execute the command below and get SHA key:
Code:
keytool -list -v -keystore keystorepath\keystorename.keystore
Steps to create custom key store file:
a) Uncheck use debug keystore
b) In keystore path section click on New button.
c) Enter all the details in New Keystore details and then click Save.
4. Step 1: Create a project in AppGallery using created SHA key
Step 2: Configure the signing certificate fingerprint
Choose Project settings > General information. In the App information area, click the icon next to SHA 256 certificate fingerprint, and enter the obtained SHA-256 certificate fingerprint.
Step 3: Download agconnect-services.json file and put in setting folder in cocos project.
Example:
Right click on Assets folder and then select Open in Explorer
Place agconnect-services.json file inside settings folder
5. Click Enable for Cocos SDKHub in Service tab.
Click on Association button and register project in Cocos Console
Associating a Game in Cocos Creator You can enable third-party services for your app in Cocos Creator. But first, you need to set a Cocos AppID. Select a created game, and click Association, as shown in the following figures.
Select Plugin Manage under Service tab.
Select Push option in Plugin Manage under Service tab.
Place mouse cursor over the "Configured" text so that "Edit" and "Delete" icons will be appeared. Click on edit icon.
Put public key(from AppGallery connect) in the "Payment Public key" field and select "en" option for "Support language" field and then click OK.
Script code for Notification and Data message:
onLoad: function () {
sdkhub.getPushPlugin().startPush();
sdkhub.getPushPlugin().setListener(this.onPushResult, this);
},
onPushResult: function (code, msg) {
console.log("on push result action.");
console.log("code: " + code);
console.log("massage: " + msg);
this.label.string=msg;
this.showToast(code, msg);
switch (code) {
case sdkhub.PushResultCode.kStartPushSucceed:
console.log("kStartPushSucceed", msg);
break;
}
},
6. Click on Build, Compile, Play under the Project tab to generate APK file.
Tips & Tricks:
Make sure to keep the same package name as kept in the Huawei AppGallery Connect project.
Conclusion:
To promote products and launch marketing activities, games, e-commerce apps, and utility apps can call Push Kit APIs to select target audiences by tag and push messages to them, attracting more users and improving the marketing activity conversion rate.
References:
> Note: this version of the documentation has been archived and is no longer maintained. Please move to the latest version. · Cocos Creator
docs.cocos.com

Categories

Resources