Create a Huawei Health Integrated Dashboard in Xamarin Forms

Hamdi Aktar
Huawei Developers
Published in
5 min readJul 28, 2021

Hello Everyone,

In this article, we will learn how to use Huawei Health kit in Xamarin Forms.

HUAWEI Health Kit allows ecosystem apps to access fitness and health data of users based on their HUAWEI ID and authorization. Health Kit provides a mechanism for fitness and health data storage and sharing based on flexible authorization.

In order to use Health kit in Xamarin forms platform; we need to expose some of the native features of the Health kit by using DependencyService class. DependencyService is a service locator that enables Xamarin.Forms applications to invoke native platform functionality from shared code. we’ll discuss the details in the sections below.

Preparations

Before we dive into the details we have a few steps we need to do in order to start developing our app.

Configuring App Information in AppGallery Connect

First of all, we need to be a registered as Huawei Mobile Developer and create an application in Huawei App Console in order to use Health Kit. After that we need to configure the signing certificate fingerprint to connect with HMS core SDK and finally register for the required services. Follow the link below for more details: Configuration For Health Kit.

Installing Huawei Health kit Package

We need to install Huawei Health kit NuGet package in the Android project. For installation: Open NuGet Package Manager and install Huawei.Hms.Health.

Adding the App ID Information

In the Android project, Open the AndroidManifest.xml file and add the app ID generated while creating the app on HUAWEI Developers to the application section

The Health Model Class

Let’s start with the model. The model contains some properties that we’ll pull from Health kit like the number of steps, distance, burnt calories and Heart Rate.

Exposing Native Features With DependencyService

In order to use Health kit in a shared code project (Xamarin.Forms) we need to expose some of the native functionality that we’ll use in the project. to do so, we’ll use DependencyService. The DependencyService class is a service locator that enables Xamarin.Forms applications to invoke native platform functionality from shared code. The process can be summarized in 3 steps:

  1. Create an interface for the native functionality that we’ll use.
  2. Implement the interface in the required platform projects.
  3. Register the platform implementations with the DependencyService. This enables Xamarin.Forms to locate the platform implementations at runtime.

We’ll use DependencyService to expose two main functionalities. Authorization and Data Retrieving.

Authorization

Before Accessing Health Data stored on the cloud, the app need to grant the access to the data from users. The app can only access data upon user authorization.

We will start with creating an interface that defines the APIs for interacting with the native platform functionality. This interface should be placed in the shared code project.

The Interface contains one method SignIn() that’s we’ll use to handle the signing in and authorization processes.

After creating the interface, it must be implemented in each platform project. We’ll be implementing the interface on Android platform

In SignIn() method, first we’ll define the scope of the permissions and the range of health data that’s the user has to approve. Then we’ll try to sign in with HUAWEI ID associated with the user, If authorization has been granted by the current account then the authorization screen will not appear and the app completes the logging in successfully, otherwise the authorization screen will show and the user will decide whether to grant the authorization or not.

After that, to access the Health app data, we need to enable the Health app authorization process and guide the user to complete HUAWEI ID and Health app authorizations.

Fetching Health Data

Similar to what we did with authorization, we’ll use DependencyService to retrieve Health Data.

First we’ll create the interface with one method GetHealthData().This method return a list of HealthData our model class.

Then we’ll implement the interface in the Android project. In the implementation we’ll query the different types of health data then return the list that’s contain the result.

If we take a look inside one of the query methods, we can see that we used ReadDailySummationAsync method from Health SDK. Providing the start date, the end date and the data type to be queried, the method return a list of SamplePoint object. This object contains the data that we queried grouped by day.

The ViewModel

The app is created using MVVM pattern, which is design pattern helps to cleanly separate the business and presentation logic of an application from its user interface (UI). For further reading check this Model-View-ViewModel.

The view model class implements properties to which the view can data bind to, and notifies the view of any state changes through change notification events. The properties and commands that the view model provides define the functionality to be offered by the UI, but the view determines how that functionality is to be displayed.

In our view model class, we’ll have a list of HealthData instances and some calculated variables like total distance and total calories. in the constructor we’ll use DependencyService class to get an instance of IDataController interface then we’ll use it to retrieve Health data. After receiving the result, we’ll calculate the properties that’s will be displayed in the view.

The Views

The app contains two views, the MainPage view where the user will be asked to sign in and authorize the app and the Cards view where the health data will be displayed.

The Cards view is a grid structured view contains card shaped tiles displaying Health Data. The view contains 3 tiles: a chart shows the number of steps over the last mont, a tile shows the total distance and total burnt calories in the same period, a tile show the last heart rate reading.

The chart and card tile components added using syncfusion NuGet package.

The Final Result

Conclusion

In this article, we saw how we can use DependencyService to expose some of the Huawei Health kit functionalities in Xamarin Forms. There are still some details to be discovered in the full code which can be found on Github.

Thanks for your time reading the article. If you have any questions, you can ask in Huawei Developer Forums.

References and useful links

--

--