How to Integrate HUAWEI Ads Plugin to Outsystems
Introduction
Hello everyone, I will show how to integrate Huawei Ads Plugin to an Outsystems project in this article.
OutSystems is a modern application platform designed to dramatically accelerate the development of your most critical applications while also delivering unprecedented levels of flexibility and efficiency. Address your top digital transformation priorities with applications that make a difference across all areas of the business — from customer experience transformation and workplace innovation to process automation and application modernization.
Prerequisites
You should install Outsystems Service Studio on your PC. And create an account from Outsystems Sign In page.
Configuring App Information in AppGallery Connect
Before you get started, you must register as a HUAWEI developer and complete identity verification on HUAWEI Developers.
Firstly, let’s create an AppGallery Connect Project.
- Sign in to AppGallery Connect and select My projects.
- Click Add project.
3. Enter a project name and click OK.
After the project is created, the Project settings page is displayed. Before you use the development capabilities provided by AppGallery Connect, you need to add an app to your project first.
- In section Project settings > General information, click Add app.
- On the Add app page, enter app information.
Enter App Information
3. On the Project settings page, enter SHA-256 certificate fingerprint and then download the configuration file agconnect-services.json for the Android platform.
A signing certificate fingerprint is used to verify the authenticity of an app when it attempts to access an HMS Core (APK) through the HMS SDK. Before using the HMS Core (APK), you must locally generate a signing certificate fingerprint and configure it in the AppGallery Connect. You can refer to 3rd and 4th steps of Generating a Signing Certificate Codelab tutorial for the certificate generation. Perform the following steps after you have generated the certificate.
Installation
Firstly, open Outsystems Service Studio. Log In to your account which created before.
Create a new application. We are choosing “From scratch” to create an application.
And we are selecting “Phone App”.
We are filling the App Name and Descriptions part. After that, we are clicking to Create Module button and the project will be created.
Now, we must create a screen. So we are clicking the Screen component from the left side and selecting Empty screen.
We created a screen. Now, we must install HUAWEI Ads Plugin from Forge. Click the Forge tab from the top left of the Outsystems Service Studio. And search for “HMS Ads Plugin”, click it then install it.
When installation finished, go back to the demo project. Click the Module tab and click to Manage Dependencies ( You can also use the Ctrl+Q shortcut ). Search HMSAdsPlugin and enable it.
Now, we can use every method in HUAWEI Ads Plugin.
Native Ads
Native ads fit seamlessly into the surrounding content to match your app design. Such ads can be customized as needed.
Creating a Native Ad View with a Companion DIV
We need to create a companion DIV for a native ad view. Here, use the HTML div tag, which varies according to the “100px” height size as an example. We can also give height “200px ,300px or 350px” .
Now, we need to use create method to create a native ad. To use a create method, navigate to Logic > HMSAdsPlugin > HMSNativeAd > create. Drag and drop the client action.
The example input value for the create method, shown below.
After that, we need to subscribe to ad load events. When an ad is loaded, it will be shown. You need to subscribe to events before calling the loadAd function.
Also, a listener must be added for the show method. We are creating a ListenerNativeAds addition is as follows;
After creating listener action, we must call the show method in the listener. To call show method, navigate to Logic > HMSAdsPlugin > HMSNativeAd > show. Drag and drop the client action.
We must listen for ad events using the onHMSNativeAd method. To use the onHMSNativeAd method we need to write a callback for it.
Here is an example callback. In this callback when the native ad loaded, the ListenerNativeAds method will be triggered.
Now we need to call the load method to load a native ad. To call method, navigate to Logic > HMSAdsPlugin > HMSNativeAd > loadAd. Drag and drop the client action.
Now, everything finished we can test our demo.
Conclusion
In this article, I integrated HMS Ads Plugin into an Outsystems and showed the basic functionalities of the Ads Kit. I tried to explain the Native Ads.
Thank you for reading, I hope it was helpful.
