[Huawei Developers] HMS Community:
Introduction​

In this series of article, we will learn about Navigation Glove application and also we will learn about integration of the Huawei Account kit in Navigation Glove IoT application.

It’s really quite interesting application. Have patience to read the full article. Because great things will take time.

Let us understand how this product works.

Gloves

Navigation Glove Application

What is IoT?

IoT stands for Internet of things. IoT refers to the collective network of connected devices and the technology that facilitates communication between devices and the cloud, as well as between the devices themselves. Thanks to the advent of inexpensive computer chips and high bandwidth telecommunication, now we have billions of devices connected to the internet. This means everyday devices like toothbrushes, vacuums, cars, and machines can use sensors to collect data and respond intelligently to users.

Features of the Navigation Glove application.

Quick, Seamless & Mobile phone-less – Navigation Assistance.

Support for Auto Indicators (Left – Right).

Increased Traffic Safety – Obey Rules, Less Violations, Increased Safety.

Docking Point suggestions and Incentives for the customers.

Quick, Seamless & Mobile phone-less – Navigation Assistance

In this application for navigation mobile phone is not required. Gloves should wear in both the hands left hand and right hand. Application will be connected to Navigation gloves, distance and direction will sent to device from application to device.

Support for Auto Indicators (Left and Right).

Since we are sending direction from mobile application depending upon the left and right command left glove or right glove will blink.

Application information.

In this application, we will learn what all the kits required in the application and how this product works.

Account kit

Map Kit

Site kit

Directions API

Location Kit

Analytics Kit

Ads Kit

Remote configuration kit

Crash Service kit

Push Kit

How does this application works?

You need to open application and login with Huawei Account.

Give all necessary permission from the dialogue box.

Select source and destination place.

Select the mode Driving/Walking/Cycling

Click on navigation button.

Connect the device which are shown from the list of devices.

Once connection is done as the user move user location and directions API distance will be calculated and distance will be sent to glove.

When the distance is less 50 meter the blinking will be faster, otherwise it will blink normally.

From the Navigation glove application left and right command will be sent to the respected left and right glove.

Increased Traffic Safety – Obey Rules, Less Violations, Increased Safety

In this situation rider is not using mobile phone, so direction shown in gloves so rider will be very safe and rider obeys the traffic rules and also there will be less violations. Using mobile phone while riding is very risky, this Navigation glove application avoids the usage of mobile for direction, so rider will be safe.

Docking Point suggestions and Incentives for the customers

When the distance is less than 50 meter LED will blink faster, so end users will understand the turning points.

App Supports for.

App supports two modes – Walking and Driving.

Automatically drives the Indicator System – With Single Click (Left / Right)

Normal and Satellite view sup

Hardware components for Glove

A pair of gloves in which the hardware kit can be embedded (Stitched or pasted based on expert inputs)

Kit for Right Hand Glove – ATTINY85 Microcontroller, Bluetooth modules, LED, 9v Battery, Power Control Circuitry.

Kit for Left Hand Glove - ATTINY85 Microcontroller, Bluetooth module, LED, 9v Battery, Power Control Circuitry, NFC reader.

The above same hardware can be made as gloves, check in below image.

Prerequisite​

AppGallery Account

Android Studio 3.X

SDK Platform 19 or later

Gradle 4.6 or later

HMS Core (APK) 4.0.0.300 or later

Huawei Phone EMUI 3.0 or later

Non-Huawei Phone Android 4.4 or later

Service integration on AppGallery.​

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 the current location.

4. Enabling Account Kit Service on AppGallery.

5. Generating a Signing Certificate Fingerprint.

6. Configuring the Signing Certificate Fingerprint.

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

Client development

1. Create android project in android studio IDE.

2. Add the maven URL inside the repositories of buildscript and allprojects respectively (project level build.gradle file).

maven { url 'https://developer.huawei.com/repo/' }

3. Add the classpath inside the dependency section of the project level build.gradle file.

classpath 'com.huawei.agconnect:agcp:1.5.2.300'

4. Add the plugin in the app-level build.gradle file.

apply plugin: 'com.huawei.agconnect'

5. Add the below library in the app-level build.gradle file dependencies section.

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

6. Add all the below permission in the AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

7. Sync the project.

private fun signIn() {
val authParams =
AccountAuthParamsHelper(AccountAuthParams.DEFAULT_AUTH_REQUEST_PARAM).setIdToken()
.createParams()
val service = AccountAuthManager.getService(this@LoginActivity, authParams)
startActivityForResult(service.signInIntent, 8888)
}

LoginActivity.kt

package com.huawei.navigationglove.ui
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.huawei.navigationglove.R
import com.huawei.hms.common.ApiException

import android.widget.Toast

import com.huawei.hms.support.account.result.AuthAccount

import com.huawei.hms.support.account.AccountAuthManager

import android.content.Intent
import android.util.Log
import androidx.annotation.Nullable

import com.huawei.hmf.tasks.Task

import com.huawei.hms.support.account.request.AccountAuthParams

import com.huawei.hms.support.account.request.AccountAuthParamsHelper
import kotlinx.android.synthetic.main.activity_login.*

class LoginActivity : AppCompatActivity() {
private val TAG: String = LoginActivity::class.java.name

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_login)
huaweiLogin.setOnClickListener {
signIn()
}
}

private fun signIn() {
val authParams =
AccountAuthParamsHelper(AccountAuthParams.DEFAULT_AUTH_REQUEST_PARAM).setIdToken()
.createParams()
val service = AccountAuthManager.getService(this@LoginActivity, authParams)
startActivityForResult(service.signInIntent, 8888)
}

override fun onActivityResult(requestCode: Int, resultCode: Int, @Nullable data: Intent?) {
// Process the authorization result and obtain an ID token from AuthAccount.
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == 8888) {
val authAccountTask: Task<AuthAccount> =
AccountAuthManager.parseAuthResultFromIntent(data)
if (authAccountTask.isSuccessful()) {
// The sign-in is successful, and the user's ID information and ID token are obtained.
val authAccount: AuthAccount = authAccountTask.getResult()
Log.i(TAG, "idToken:" + authAccount.idToken)
Toast.makeText(
this,
"Welcome " + authAccount.displayName,
Toast.LENGTH_LONG
).show()
startActivity(Intent(this, HomeScreenActivity::class.java))
} else {
// The sign-in failed. No processing is required. Logs are recorded for fault locating.
Log.e(
TAG,
"sign in failed : " + (authAccountTask.getException() as ApiException).statusCode
)
}
}
}
}

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
tools:context=".ui.LoginActivity">

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/txtUsername"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="271dp"
android:layout_height="63dp"
android:layout_marginStart="70dp"
android:layout_marginTop="240dp"
android:layout_marginEnd="70dp"
android:hint="Username"
android:textColorHint="#A7A7A7"
app:boxStrokeColor="#EAEAEE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/inputUsername"
android:layout_width="match_parent"
android:layout_height="55dp"
android:textColor="#5B5B5B"
android:textSize="15sp"
android:textStyle="bold"
tools:ignore="TouchTargetSizeCheck" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/txtPassword"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="271dp"
android:layout_height="63dp"
android:layout_marginStart="70dp"
android:layout_marginTop="310dp"
android:layout_marginEnd="70dp"
android:hint="Password"
android:textColorHint="#A7A7A7"
app:endIconMode="password_toggle"
app:boxStrokeColor="#EAEAEE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/inputPassword"
android:layout_width="match_parent"
android:layout_height="55dp"
android:textColor="#5B5B5B"
android:textSize="15sp"
android:textStyle="bold"
tools:ignore="TouchTargetSizeCheck" />
</com.google.android.material.textfield.TextInputLayout>

<Button
android:id="@+id/button4"
android:layout_width="271dp"
android:layout_height="55dp"
android:layout_marginTop="200dp"
android:text="Login"
android:textAllCaps="false"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView4"
android:layout_width="139dp"
android:layout_height="15dp"
android:layout_marginStart="70dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="283dp"
android:text="Don't have account?"
android:textColor="#A7A7A7"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button4" />

<TextView
android:id="@+id/textView6"
android:layout_width="135dp"
android:layout_height="16dp"
android:layout_marginStart="7dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="68dp"
android:text="Create a new account"
android:textColor="#3BA8BE"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/button4" />

<TextView
android:id="@+id/textView7"
android:layout_width="286dp"
android:layout_height="66dp"
android:text="Navigation Glove"
android:textAlignment="center"
android:textColor="#4E4E4E"
android:textSize="24sp"
android:textStyle="normal|bold"
app:layout_constraintBottom_toTopOf="@+id/txtUsername"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.407" />

<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="228dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="70dp"
android:text="Forgot Password?"
android:textColor="#3BA8BE"
app:layout_constraintBottom_toTopOf="@+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtPassword" />

<Button
android:id="@+id/tb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:text="Forgot Password?"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4"
android:visibility="gone"/>

<com.huawei.hms.support.hwid.ui.HuaweiIdAuthButton
android:id="@+id/huaweiLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4" />

</androidx.constraintlayout.widget.ConstraintLayout>

Result​

Tips and Tricks​

1. Make sure you are already registered as a Huawei developer.

2. Set min SDK version to 21 or later, otherwise you will get AndriodManifest to merge issue.

3. Make sure you have added the agconnect-services.json file to the app folder.

4. Make sure you have added the SHA-256 fingerprint without fail.

5. Make sure all the dependencies are added properly.

6. If you get the 6003 error code, there may be SHA-256 certificate issue.

Conclusion​

In this article, we have learnt the main flow to integration of the Huawei Account Kit in your mobile application using Android Studio and Kotlin. We also learnt the product details and how does this application works and other than the Account Kit, HMS core provides a wider range of services to enhance the user experience with the Huawei platform. We have learnt the steps to create projects and steps to integrate the account kit.

Reference​

Account Kit - Official document

Account Kit - Code lab

Account Kit - Training Video