Integration of Huawei Account kit in Navigation Glove IoT application Using Kotlin - Part 1
Tags: android, kotlin, hms, huawei
Published: 2022-03-17 12:46:16

## 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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4k5dcrjgo6pprl9sj2j.png)
 

The above same hardware can be made as gloves, check in below image.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3znb452b7h1o64mpjsw.png)
 
 

## 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](https://developer.huawei.com/consumer/en/doc/10104) account in AppGallery Connect.

2. Create an app by referring to [Creating a Project](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-get-started#createproject) and [Creating an App in the Project](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-get-started#createapp).

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqa3v2balofmoi1fb7ku.png)
 

## 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](https://developer.huawei.com/consumer/en/hms/huawei-accountkit/)

Account Kit - [Code lab](https://developer.huawei.com/consumer/en/codelab/HMSAccounts/index.html)

Account Kit - [Training Video](https://developer.huawei.com/consumer/en/training/course/video/101583015541549183)