Huawei HiAnimals AR project development(Part I)

In this article I will talk about all the details of the HiAnimals application. It will be a long article so I divided 3 parts. In this part we will set up AndroidManifest and gradle files. Then we will integrate Huawei Kits(Account Kit, Auth Service and Ads Kit). Let’s start.

1- AndroidManifest.xml

We have to give Camera, Internet, and Write external storage permissions.

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.INTERNET" />

Then we will change theme as NoActionBar for all activites

<activity
    android:name=".AnimalActivity"
    android:theme="@style/Theme.AppCompat.NoActionBar" />

And we add meta data tag to properly use Huawei AR engine

<meta-data
    android:name="com.huawei.ar.engine"
    android:value="required" />

2.1 - build.gradle(app)

We will set minSdkVersion and targetSdkVersion as 26 and 29.

minSdkVersion 26
targetSdkVersion 29

Then set abiFilters.

ndk {
    abiFilters "armeabi-v7a"
}

And set java source compatibility as 1.8.

compileOptions {
    sourceCompatibility = 1.8
    targetCompatibility = 1.8
}

Now we should add dependencies for Huawei AR, OpenGL and Cloud DB.

implementation fileTree(include: ['*.aar'], dir: 'libs')
implementation 'com.huawei.agconnect:agconnect-core:1.3.2.301'
implementation 'com.huawei.agconnect:agconnect-database:1.2.1.301'
implementation 'com.huawei.hms:arenginesdk:2.12.0.1'
implementation 'de.javagl:obj:0.3.0'

2.2- build.gradle

We will modify project level build.gradle as adding repositories and App Gallery Connect dependencies like that

3- Integration of Huawei Account Kit

The task of the Account Kit is to provide fast, simple and reliable login to 3rd party smartphone applications using a single account, your Huawei ID.

Let`s start Account Kit integration

Before coding part, we need to enable Account Kit. Let’s go to Huawei Developer AppGallery Connect site and select our project. (Develop> Project Setting> Manage APIs) And let’s enable the Account Kit.

And then, let’s add the Account Kit sdk to build.gradle in the app directory to access the methods of Ads Kit from Android Studio.

implementation 'com.huawei.hms:hwid:4.0.0.300'

With the code blog below, we are using the Account Kit to login with Huawei ID.

Here we are creating HuaweiIdAuthService using HuaweiIdAuthParams. And by running the getSingInIntent() method from the HuaweiIdAuthService object, we call the intent for the Huawei login page. And we start this intent with the startActivityForResult method. The opened page is as follows.

To capture the result of the login process, we use the onActivityResult() method.

After logging in, we can get the user’s several information. (username, avatar url, etc.)

huaweiAccount.getDisplayName();
huaweiAccount.getPhotoUrl();
huaweiAccount.getUid();

For detailed information about Account Kit;

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/introduction-0000001050048870

4- Integration of Huawei Auth Service

AppGallery Connect Authentication Service helps you to create a fast and secure user authentication system for our applications to authenticate the users. And it supports multiple third-party authentication methods, you can see the methods it supports below.

First of all, let’s go to Huawei Developer AppGallery Connect site and select your project (Develop> Build> Auth Service) and enable Auth Service.

After enabling Auth Service, we see the modes that auth service supports. Let’s enable HUAWEI Account and Anonymous Account from here.

While enabling Huawei Account, a popup shows up. Here you need to put your APP ID and APP Secret key of app. You can find this information by going to Develop> Project Setting> Convention.

And then let’s add the Auth Service sdk to build.gradle in the app directory to access the methods of Auth Service from Android Studio.

implementation 'com.huawei.agconnect:agconnect-auth:1.3.1.300'

After completing the integration of Auth Service, now we can transmit the accessToken that we have reached with the Account Kit into AppGallery Connect.

Also you can see the users logged in by visiting Auth Service part from Huawei Developer website.

We should check if the user receives the information with AppGallery Connect on the login page. If the user is logged in, let’s direct to HomePage or any page. The getCurrentUser method is used to get the user’s information.

AGConnectAuth.getInstance().getCurrentUser()

You can access the data with the getCurrentUser () method via the AGConnectAuth class to show user-related information.

AGConnectAuth.getInstance().getDisplayName();
AGConnectAuth.getInstance().getPhotoUrl();
AGConnectAuth.getInstance().getUid();

To log out and delete the cached information, we must use the AGConnectAuth class and call signOut() method.

AGConnectAuth.getInstance().signOut();

We should check if the user receives the information with AppGallery Connect on the login page. If the user is logged in, let’s direct to HomePage. The getCurrentUser method is used to get the user’s information.

We also have anonymous account login part, to log in as anonymous, we use the singInAnonymously () method here and add successListener and FailureListener to listen to the results.

For detailed information about Auth Service;

https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-auth-service-introduction

5- Integration of Huawei Ads Kit

HMS Ads Kit is a mobile service that helps us create high quality and personalized ads in our application. It provides many useful ad formats such as native ads, banner ads and rewarded ads to more than 570 million Huawei device users worldwide.

Let`s start Ads Kit integration

First of all, let’s add the Ads Kit sdk to build.gradle in the app directory to access the methods of Ads Kit from Android Studio.

implementation 'com.huawei.hms:ads-lite:13.4.30.301'

And then, let’s add BannerView component into layout xml file. We use this area to show ad. (We can also set the properties of the ad on XML.)

<com.huawei.hms.ads.banner.BannerView
android:id="@+id/hw_banner_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />

Let’s call HwAds.init () in the onCreate () method of the MainActivity.java class to launch the HUAWEI Ads sdk. And then, after setting AdId and AdSize, we need to call loadAd() method to reach an ad.

Finally, we need to import needed ads classes.

import android.widget.RelativeLayout;
import com.huawei.hms.ads.BannerAdSize;
import com.huawei.hms.ads.banner.BannerView;

You can use the table below to use different banner sizes.

For detailed information about Ads Kit;

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/publisher-service-introduction-0000001050064960

You can reach second part from here.

You can reach third part from here.

You can reach source code from here.

Team-M3/HiAnimals

You can download app from here.

https://appgallery.huawei.com/#/app/C102935435