[Huawei Developers] Freemind R:
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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095514.38422276239979082812629864275373:50511103012857:2800:7DC3DA5415B004B81242FE54EBE5A8CC9EED8227353253C742D920C147E77297.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095514.38422276239979082812629864275373:50511103012857:2800:7DC3DA5415B004B81242FE54EBE5A8CC9EED8227353253C742D920C147E77297.png[/IMG]

2. Visit http://www.cocos2d-x.org/products#creator, and download and install Cocos Creator.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095540.48153334021044772234127675063137:50511103012857:2800:79DAE98671A763B71AF9B8A2FC9150DD6853E0914F00CA2E6A7F2BA6300C196C.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095540.48153334021044772234127675063137:50511103012857:2800:79DAE98671A763B71AF9B8A2FC9150DD6853E0914F00CA2E6A7F2BA6300C196C.png[/IMG]

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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095606.54792907401086337763280818472316:50511103032621:2800:AFECFC3CF08448652E89C740957788A30408FCA00CBFF3EAA7DA98F3614FF5CE.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095606.54792907401086337763280818472316:50511103032621:2800:AFECFC3CF08448652E89C740957788A30408FCA00CBFF3EAA7DA98F3614FF5CE.png[/IMG]

If the following error occurs during creation, download Editor.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095623.06651944829486661775155450157671:50511103032621:2800:C7735A203149F8126848F7AF6425F5E669AB267403179D21973FBEC56DD796B9.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095623.06651944829486661775155450157671:50511103032621:2800:C7735A203149F8126848F7AF6425F5E669AB267403179D21973FBEC56DD796B9.png[/IMG]

In Cocos Creator, choose Editor, select version 2.4.2 on the right, and click Download.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095638.01883562664595907909996877294458:50511103012857:2800:BA5FEE9A2D9EB88D283B8BD4D67837861D740B49521E27F4B4463A839CAD5714.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095638.01883562664595907909996877294458:50511103012857:2800:BA5FEE9A2D9EB88D283B8BD4D67837861D740B49521E27F4B4463A839CAD5714.png[/IMG]

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

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095752.59028005300255111258727796078188:50511103012857:2800:97AA67667EA08DFED3AED55434A688E53413973FF25FAF86AB696089C615492E.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095752.59028005300255111258727796078188:50511103012857:2800:97AA67667EA08DFED3AED55434A688E53413973FF25FAF86AB696089C615492E.png[/IMG]

After the app information configuration, perform configuration in Cocos Creator.

2. Choose Panel > Service.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095903.24429108694420729759010614962931:50511103012857:2800:BAC19173A31EF09F5C11BB7E736B1DFE5D3CCA4F603D90B5899A2D36057E62FE.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095903.24429108694420729759010614962931:50511103012857:2800:BAC19173A31EF09F5C11BB7E736B1DFE5D3CCA4F603D90B5899A2D36057E62FE.png[/IMG]

3. Select your project.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095928.22897569604943590887766875972426:50511103032621:2800:8DAF99EB311FE1C4D63777CA6BCD50748A1D88A9DD6C57C5AB958A15DCCFCBBA.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095928.22897569604943590887766875972426:50511103032621:2800:8DAF99EB311FE1C4D63777CA6BCD50748A1D88A9DD6C57C5AB958A15DCCFCBBA.png[/IMG]

Select Cocos SDKHub on the page that is displayed.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095954.44303038221863507894001085509923:50511103012857:2800:C3A94B908AB23FF20683BB3BA204380F82E20936F66BB5C5BBD5C5A30AC54A6F.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930095954.44303038221863507894001085509923:50511103012857:2800:C3A94B908AB23FF20683BB3BA204380F82E20936F66BB5C5BBD5C5A30AC54A6F.png[/IMG]

4. Click Plugin Manage.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930100022.95911783046982230971323513143821:50511103012857:2800:29EDF99A9C8C67B4C7BCD63B10419CD499952AF5C2F888EA56A0EE846009F549.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930100022.95911783046982230971323513143821:50511103012857:2800:29EDF99A9C8C67B4C7BCD63B10419CD499952AF5C2F888EA56A0EE846009F549.png[/IMG]

5. Select Push and click OK. The page shown in the preceding figure is displayed.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930100046.08598134364637695409530110725794:50511103012857:2800:6F9B13AB599691E1D24DC3F4294DC5E4A03E802CA45DC26E15339892C8231289.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200930100046.08598134364637695409530110725794:50511103012857:2800:6F9B13AB599691E1D24DC3F4294DC5E4A03E802CA45DC26E15339892C8231289.png[/IMG]

6. Move the cursor to Not Configured in Params. The editing icon is displayed. Click it.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063701.66039650700768522095746335558915:50511103012857:2800:5D59DAE0396237BFE9B48E112235FED11E62DBD449C3E046326167E873E385E1.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063701.66039650700768522095746335558915:50511103012857:2800:5D59DAE0396237BFE9B48E112235FED11E62DBD449C3E046326167E873E385E1.png[/IMG]

7. Select a required JSON file, and click OK.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063732.05992252329426116401405882786233:50511103012857:2800:4A86379FD58231C9BDE8B606F55D50A6BBA239473A70269159DB20837AF110D4.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063732.05992252329426116401405882786233:50511103012857:2800:4A86379FD58231C9BDE8B606F55D50A6BBA239473A70269159DB20837AF110D4.png[/IMG]

8. Choose Project > Build.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063801.40800977943968681157617524696364:50511103012857:2800:145339A87AA4D06AE280C102698C19024A5D251395DBC9A1235AB41CA97B628E.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063801.40800977943968681157617524696364:50511103012857:2800:145339A87AA4D06AE280C102698C19024A5D251395DBC9A1235AB41CA97B628E.png[/IMG]

The Build panel is displayed on the right.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063921.21708307445921224096235535065763:50511103012857:2800:9DA912B964662322F45BB919A335B8EC61C3E05CE34120FCE027B6D1E0DE65B3.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063921.21708307445921224096235535065763:50511103012857:2800:9DA912B964662322F45BB919A335B8EC61C3E05CE34120FCE027B6D1E0DE65B3.png[/IMG]

9. Set SDKHub Configuration to HUAWEI AppGallery Connect, and click Build.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063953.17086908864428776742963219245826:50511103012857:2800:92280307FC002A64729D2ED04D1C2976E5F0BD3BBEFCA93F83A1F7F0E0A71BB3.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009063953.17086908864428776742963219245826:50511103012857:2800:92280307FC002A64729D2ED04D1C2976E5F0BD3BBEFCA93F83A1F7F0E0A71BB3.png[/IMG]

If the following error occurs during building, install NDK.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064023.46775493954255613377456333613827:50511103012857:2800:E2E54BC54CF252AF7CBFB9975677304C068274B2E150B520126B23504B50620E.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064023.46775493954255613377456333613827:50511103012857:2800:E2E54BC54CF252AF7CBFB9975677304C068274B2E150B520126B23504B50620E.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064043.45153053830163172342693800629986:50511103012857:2800:BB61B85562019C669857FA44F15F5A61C16A86D2D9DCF89353C166CD9B2221F8.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064043.45153053830163172342693800629986:50511103012857:2800:BB61B85562019C669857FA44F15F5A61C16A86D2D9DCF89353C166CD9B2221F8.png[/IMG]

After the installation, click Compile. The progress status becomes completed.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064113.00163802817482520724341315345742:50511103012857:2800:522FE2E2C381F325268E0072737F2946A5B73359528A1649DE14D3DF355C061C.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064113.00163802817482520724341315345742:50511103012857:2800:522FE2E2C381F325268E0072737F2946A5B73359528A1649DE14D3DF355C061C.png[/IMG]

Step 3: Perform coding to obtain a token and build an APK.

The following figure shows the project structure.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064155.27049535835403768062712219246742:50511103012857:2800:BA46D48F6940C67A31BA8F00A3FB9CD30D65018DC27272B278439C36E821542E.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064155.27049535835403768062712219246742:50511103012857:2800:BA46D48F6940C67A31BA8F00A3FB9CD30D65018DC27272B278439C36E821542E.png[/IMG]

In Cocos Creator, select js-sdkhub.js file from Assets at the lower left corner.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064219.92898318546615765443508976516375:50511103012857:2800:AA0436E634D8299FB2CB77C3286EA2C336963BBF619C72D67DB29EB1B76DAF90.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064219.92898318546615765443508976516375:50511103012857:2800:AA0436E634D8299FB2CB77C3286EA2C336963BBF619C72D67DB29EB1B76DAF90.png[/IMG]

1. Compile the following code in the js-sdkhub.js file:

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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064352.21099561906468426220990270906874:50511103012857:2800:59970AF15B277798FE7F6917289C5FBDCFE4E9847EBF36AA0E97410270EEA635.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064352.21099561906468426220990270906874:50511103012857:2800:59970AF15B277798FE7F6917289C5FBDCFE4E9847EBF36AA0E97410270EEA635.png[/IMG]

The following error will occur during app running if you do not configure a correct certificate fingerprint.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064427.27149152924267557373479625751809:50511103012857:2800:062A0F99DB5C22690BC33ED626CA7E995B8F73F534C5E586A687688BBBBC9925.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064427.27149152924267557373479625751809:50511103012857:2800:062A0F99DB5C22690BC33ED626CA7E995B8F73F534C5E586A687688BBBBC9925.png[/IMG]

Obtain the device token based on tag jswrapper|HUB_LOG in the logs.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064444.66769390046959312355425559939460:50511103012857:2800:3B46BE9D84BD0C9A73DB21E83F28B143EB4E86EA6EA3B3CD613BDCF0BFC832C4.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064444.66769390046959312355425559939460:50511103012857:2800:3B46BE9D84BD0C9A73DB21E83F28B143EB4E86EA6EA3B3CD613BDCF0BFC832C4.png[/IMG]

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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064541.61037452956442624397217306095424:50511103012857:2800:56B44EF8DF17C67C3A5EE6A27427FB2A474FB69F2EDEE07A17FB738934270881.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064541.61037452956442624397217306095424:50511103012857:2800:56B44EF8DF17C67C3A5EE6A27427FB2A474FB69F2EDEE07A17FB738934270881.png[/IMG]

The testing result is as follows.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064606.49145391845778085835988280179639:50511103012857:2800:FFF15DF636C731C0FA4AC931E85625E5BC95B07545C57CBBBC079F14C89571CE.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064606.49145391845778085835988280179639:50511103012857:2800:FFF15DF636C731C0FA4AC931E85625E5BC95B07545C57CBBBC079F14C89571CE.jpg[/IMG]

b. Configure data message information.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064642.27749999891641102927026953376222:50511103012857:2800:AC17A6099C56F50E08FC1FE83127F25DEF62A5B74749E5D88CC32310E207FFA2.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064642.27749999891641102927026953376222:50511103012857:2800:AC17A6099C56F50E08FC1FE83127F25DEF62A5B74749E5D88CC32310E207FFA2.png[/IMG]

The testing result is as follows.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064712.23937468075488699214912744497047:50511103012857:2800:7349C6A18AF7794C8D6BB166F090BCB0888AD7A003416FFC17D440D127ED12B9.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20201009064712.23937468075488699214912744497047:50511103012857:2800:7349C6A18AF7794C8D6BB166F090BCB0888AD7A003416FFC17D440D127ED12B9.png[/IMG]

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