[Huawei Developers] shikkerimath:
Introduction

This article is based on Multiple HMS services application. I have created Hotel Booking application using HMS Kits. We need mobile app for reservation hotels when we are traveling from one place to another place.

In this article I have implemented Account kit and Ads Kit. User can login through Huawei Id.

View attachment 5207221

Flutter setup

Refer this URL to setup Flutter.

Software Requirements

1. Android Studio 3.X

2. JDK 1.8 and later

3. SDK Platform 19 and later

4. Gradle 4.6 and later

Steps to integrate service

1. We need to register as a developer account in AppGallery Connect

2. Create an app by referring to Creating a Project and Creating an App in the Project

3. Set the data storage location based on current location.

4. Enabling Required Services: Account and Ads Kit.

5. Generating a Signing Certificate Fingerprint.

6. Configuring the Signing Certificate Fingerprint.

7. Get your agconnect-services.json file to the app root directory.

Development Process

Create Application in Android Studio.

1. Create Flutter project.

2. App level gradle dependencies. Choose inside project Android > app > build.gradle.

apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'

Root level gradle dependencies

maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.4.1.300'

Add the below permissions in Android Manifest file.

<manifest xlmns:android...>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
</manifest>

3. Refer below URL for cross-platform plugins.

https://developer.huawei.com/consum...y-V1/flutter-sdk-download-0000001051088628-V1

4. On your Flutter project directory find and open your pubspec.yaml file and add library to dependencies to download the package from pub.dev. Or if you downloaded the package from the HUAWEI Developer website, specify the library path on your local device. For both ways, after running pub get command, the plugin will be ready to use.

name: hotelbooking
description: A new Flutter application.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
sdk: ">=2.7.0 <3.0.0"

dependencies:
flutter:
sdk: flutter
shared_preferences: ^0.5.12+4
bottom_navy_bar: ^5.6.0
cupertino_icons: ^1.0.0
provider: ^4.3.3

huawei_ads:
path: ../huawei_ads/
huawei_account:
path: ../huawei_account/

dev_dependencies:
flutter_test:
sdk: flutter

flutter:
uses-material-design: true
assets:
- assets/images/

5. We can check the plugins under External Libraries directory.

6. Open main.dart file to create UI and business logics.

Account kit

Account kit allows users to login their applications conveniently, quickly and simple login functionalities to the 3rd party applications.

If you examine Account Kit’s Official Huawei resources on internet, it also appears that they imply the simplicity, fastness and security. We can make use of following observation to understand where this fastness and simplicity is originated.

Service Features

Quick and standard

Huawei Account Kit allows you to connect to the Huawei ecosystem using your HUAWEI ID from a range of devices. This range of devices is not limited with mobile phones, you can also easily access applications on tablets, wearables, and smart displays using Huawei ID.

Massive user base and global services

Huawei Account Kit serves 190+ countries and regions worldwide. Users can also use HUAWEI ID to quickly sign in to apps. For details about supported regions/countries, please refer here from official documentation.

Secure, reliable, and compliant with international standards

Complies with international standards and protocols (such as OAuth2.0 and OpenID Connect), and supports two-factor authentication to ensure high security.

Integration

Signing-In

To allow users securely signing-in with Huawei ID, you should use signIn method of HMSAccount module. When this method called for the first time for a user, a Huawei ID authorization interface will be shown Once signIn successful, it will return AuthHuaweiID object.

void _signInHuawei() async {
final helper = new HmsAuthParamHelper();
helper
..setAccessToken()
..setIdToken()
..setProfile()
..setEmail()
..setAuthorizationCode();
try {
HmsAuthHuaweiId authHuaweiId =
await HmsAuthService.signIn(authParamHelper: helper);
StorageUtil.putString("Token", authHuaweiId.accessToken);
Navigator.push(context,MaterialPageRoute(builder: (context) => HomePageScreen()),
);
} on Exception catch (e) {}
}

Signing-Out

signOut method is used to allow user signing-out from app, it does not clear user information permanently.

void signOut() async {
try {
final bool response = await HmsAuthService.signOut();
} on Exception catch (e) {
print(e.toString());
}
}

ADs kit

Nowadays, traditional marketing has left its place on digital marketing. Advertisers prefer to place their ads via mobile media rather than printed publications or large billboards, this way they can reach their target audience more easily and they can measure their efficiency by analyzing many parameters such as ad display and the number of clicks.

HMS Ads Kit is a mobile service that helps us to 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.

Advantages

1. Provides high income for developers.

2. Rich ad format options.

3. Provides versatile support.

View attachment 5207225

1. Banner Ads are rectangular ad images located at the top, middle or bottom of an application’s layout. Banner ads are automatically refreshed at intervals. When a user taps a banner ad, in most cases the user is taken to the advertiser’s page.

2. Rewarded Ads are generally preferred in gaming applications. They are the ads that in full-screen video format that users choose to view in exchange for in-app rewards or benefits.

3. Native Ads are ads that take place in the application’s interface in accordance with the application flow. At first glance they look like a part of the application, not like an advertisement.

4. Interstitial Ads are full screen ads that cover the application’s interface. Such that ads are displayed without disturbing the user’s experience when the user launches, pauses or quits the application.

5. Splash Ads are ads that are displayed right after the application is launched, before the main screen of the application comes.

Huawei Ads SDK integration Let’s call HwAds.init() in the initState()

@override
void initState() {
super.initState();
HwAds.init();
}

Load Banner Ads

void loadAds() {

BannerAd _bannerAd;

_bannerAd = createAd()

..loadAd()

..show();

}

BannerAd createAd() {

return BannerAd(

adSlotId: "testw6vs28auh3",

size: BannerAdSize.s320x50,

adParam: new AdParam());

}

Load Native Ads

NativeAdConfiguration configuration = NativeAdConfiguration();
configuration.choicesPosition = NativeAdChoicesPosition.bottomRight;

Container(
height: 100,
margin: EdgeInsets.only(bottom: 10.0),
child: NativeAd(
adSlotId: "testu7m3hc4gvm",
controller: NativeAdController(
adConfiguration: configuration,
listener: (AdEvent event, {int errorCode}) {
print("Native Ad event : $event");
}),
type: NativeAdType.small,
),
),

Result

View attachment 5207231

Tips & Tricks

1. Download latest HMS Flutter plugin.

2. The lengths of access_token and refresh_token are related to the information encoded in the tokens. Currently, access_token and refresh_token contains a maximum of 1024 characters.

3. This API can be called by an app up to 10,000 times within one hour. If the app exceeds the limit, it will fail to obtain the access token.

4. Whenever you updated plugins, click on pug get.

Conclusion

We implemented simple hotel booking application using Account kit and Ads kit in this article.

Thank you for reading and if you have enjoyed this article, I would suggest you to implement this and provide your experience.

Reference

Account Kit URL

Ads Kit URL

Read full article