Skip to content

Latest commit

 

History

History

HMS Analytics Ionic Demo

Contents


1. Introduction

This demo application demonstrates the usage of the HMS Analytics Kit Cordova plugin.


2. Installation Guide

Before you get started, you must register as a HUAWEI Developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.

2.1. Creating a Project in AppGallery Connect

Creating an app in AppGallery Connect is required in order to communicate with the Huawei services. To create an app, perform the following steps:

  1. Sign in to AppGallery Connect and select My projects.
  2. Select your project from the project list or create a new one by clicking the Add Project button.
  3. Go to Project Setting > General information, and click Add app.
    • If an app exists in the project and you need to add a new one, expand the app selection area on the top of the page and click Add app.
  4. On the Add app page, enter the app information, and click OK.

2.2. Configuring the Signing Certificate Fingerprint and Obtaining agconnect-services.json and agconnect-services.plist

A signing certificate fingerprint is used to verify the authenticity of an app when it attempts to access an HMS Core (APK) through the HMS SDK. Before using the HMS Core (APK), you must locally generate a signing certificate fingerprint and configure it in the AppGallery Connect. You can refer to 3rd and 4th steps of Generating a Signing Certificate Codelab tutorial for the certificate generation. Perform the following steps after you have generated the certificate.

  1. Sign in to AppGallery Connect and select your Android project from My Projects. Then go to Project Setting > General information. In the App information field, click the icon next to SHA-256 certificate fingerprint, and enter the obtained SHA-256 certificate fingerprint.
  2. After completing the configuration, click OK to save the changes. (Check mark icon)
  3. In the same page,
    • If platform is Android ,click agconnect-services.json button to download the configuration file.
    • If platform is iOS, click agconnect-services.plist button to download the configuration file.

2.3. Ionic

  1. Install Ionic CLI and other required tools if haven't done before.

    npm install -g @ionic/cli cordova-res native-run
  2. Open the demo project's root directory.

  3. Install project dependencies.

    npm install

2.3.1. With Cordova Runtime

  1. Enable the Cordova integration.

    ionic integrations enable cordova
  2. Update the widget id property which is specified in the config.xml file. It must be same with client > package_name value of the agconnect-services.json and agconnect-services.plist files.

  3. Set preference in your Ionic project config.xml platform iOS.

    <!--platform name="ios"-->
     <preference name="deployment-target" value="11.0" />
     <preference name="SwiftVersion" value="5" />
  4. Add the Android or iOS platform to the project if haven't done before.

    ionic cordova platform add android
    ionic cordova platform add ios
  5. Install HMS Analytics plugin to the project.

    ionic cordova plugin add @hmscore/cordova-plugin-hms-analytics
  6. Install HMS Analytics Ionic Native wrappers.

    npm install @ionic-native/core @hmscore/ionic-native-hms-analytics
  7. Build Ionic app to generate resource files.

    ionic build

NOTE
During the development, you can enable the debug mode to view the event records in real time, observe the results, andadjust the event reporting policies. --> Configuration and Description

2.3.1.1. iOS App Development
  1. Open Xcode project.

  2. Add agconnect-services.plist file to the app's root directory of your Xcode project.

  3. Run the application.

    ionic cordova run ios --device
2.3.1.2. Android App Development
  1. Copy agconnect-services.json file to <project_root>/platforms/android/app directory your Android project.

  2. Add keystore(.jks) and build.json files to your project's root directory.

    • You can refer to 3rd and 4th steps of Generating a Signing Certificate Codelab tutorial page for generating keystore file.

    • Fill build.json file according to your keystore. For example:

    {
      "android": {
        "debug": {
          "keystore": "<keystore_file>.jks",
          "storePassword": "<keystore_password>",
          "alias": "<key_alias>",
          "password": "<key_password>"
        },
        "release": {
          "keystore": "<keystore_file>.jks",
          "storePassword": "<keystore_password>",
          "alias": "<key_alias>",
          "password": "<key_password>"
        }
      }
    }
  3. Run the app.

    ionic cordova run android --device

2.3.2. With Capacitor Runtime

  1. Enable the Capacitor integration.

    ionic integrations enable capacitor
  2. Initialize Capacitor.

    npx cap init [appName] [appId]
  3. Update the appId property which is specified in the capacitor.config.json file according to your project. It must be same with client > package_name value of the agconnect-services.json and agconnect-services.plist files.

  4. Install HMS Analytics plugin to the project.

    npm install @hmscore/cordova-plugin-hms-analytics
  5. Install HMS Analytics Ionic Native wrappers.

    npm install @ionic-native/core @hmscore/ionic-native-hms-analytics
  6. Build Ionic app to generate resource files.

    ionic build
  7. Add the Android or iOS platform to the project.

    npx cap add android
    npx cap add ios
2.3.2.1. iOS App Development
  1. Open the project in Xcode.

    npx cap open ios
  2. Add agconnect-services.plist file to the app's root directory of your Xcode project.

  3. Initialize HMS Core Analytics SDK iOS platform, add the following code:

    • Check Signing & Capabilities your Xcode project.
    • Swift sample code: didFinishLaunchingWithOptions method in AppDelegate.swift
    // import HiAnalytics
    HiAnalytics.config();//Initialization
  4. Run the app.

2.3.2.2. Android App Development
  1. Copy agconnect-services.json file to <project_root>/android/app directory your Android project.

  2. Copy keystore(.jks) and agconnect-services.json files to <project_root>/android/app directory.

  3. Open the build.gradle file in the <project_root>/android/app directory.

    • Add signingConfigs entry to the android section and modify it according to your keystore.

    • Enable signingConfig configuration for debug and release flavors.

    ...
    
    android {
    
        ...
    
        // Modify signingConfigs according to your keystore
        signingConfigs {
            config {
                storeFile file('<keystore_file>.jks')
                storePassword '<keystore_password>'
                keyAlias '<key_alias>'
                keyPassword '<key_password>'
            }
        }
        buildTypes {
            debug {
                signingConfig signingConfigs.config // Enable signingConfig for debug flavor
            }
            release {
                signingConfig signingConfigs.config // Enable signingConfig for release flavor
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    ...
  4. Open the build.gradle file in the <project_root>/android directory. Add Huawei's maven repositories and agconnect classpath to the file.

    buildscript {
        repositories {
            /*
                <Other repositories>
            */
            maven { url 'https://developer.huawei.com/repo/' }
        }
        dependencies {
            /*
                <Other dependencies>
            */
            classpath 'com.huawei.agconnect:agcp:1.9.1.301'
        }
    }
    
    /*
        <Other build.gradle entries>
    */
    
    allprojects {
        repositories {
            /*
                <Other repositories>
            */
            maven { url 'https://developer.huawei.com/repo/' }
        }
    }
  5. Updates dependencies, and copy any web assets to your project.

    npx cap sync
  6. Open the project in Android Studio and run it.

    npx cap open android
  7. Run the app.


3. Configuration and Description

Using the Debug Mode for Android and iOS platforms

During the development, you can enable the debug mode to view the event records in real time, observe the results, and adjust the event reporting policies.

Android Platform:

  1. Run the following command on an Android device to enable the debug mode:

    adb shell setprop debug.huawei.hms.analytics.app <package_name>
  2. To disable the debug mode, run the following command:

    adb shell setprop debug.huawei.hms.analytics.app .none.

iOS Platform:

  1. To enable the debug mode: Choose Product > Scheme > Edit Scheme from the Xcode menu. On the Arguments page, click + to add the -HADebugEnabled parameter. After the parameter is added, click Close to save the setting.
  2. To disable the debug mode: Choose Product > Scheme > Edit Scheme from the Xcode menu. On the Arguments page, click + to add the -HADebugDisabled parameter. After the parameter is added, click Close to save the setting.

NOTE : You can examine events from AppGallery Connect, under App debugging section.

Enable HUAWEI Analytics

  1. Sign in to AppGallery Connect and click My projects.
  2. Find your project, and click the app for which you want to view analytics data.
  3. Select any menu under HUAWEI Analytics and click Enable Analytics service.

Configuring Obfuscation Scripts

Before building the APK, configure the obfuscation configuration file to prevent the HMS Core SDK from being obfuscated.

NOTE: This step is required only if you want to minify and obfuscate your app. By default obfuscation is disabled in Cordova and Ionic apps.

The obfuscation is done by ProGuard. By default, in Cordova and Ionic apps ProGuard is disabled. Even though ProGuard is not available, ProGuard support can be added through 3rd party ProGuard plugins. If ProGuard is enabled in your project, the Huawei Cordova Analytics plugin's ProGuard rules need to be added to your project. These rules are as follows:

-ignorewarnings
-keepattributes *Annotation*
-keepattributes Exceptions
-keepattributes InnerClasses
-keepattributes Signature
-keep class com.huawei.hianalytics.**{*;}
-keep class com.huawei.updatesdk.**{*;}
-keep class com.huawei.hms.**{*;}
-repackageclasses

4. Questions or Issues

If you have questions about how to use HMS samples, try the following options:

  • Stack Overflow is the best place for any programming questions. Be sure to tag your question with huawei-mobile-services.
  • GitHub is the official repository for these plugins, You can open an issue or submit your ideas.
  • Huawei Developer Forum HMS Core Module is great for general questions, or seeking recommendations and opinions.
  • Huawei Developer Docs is place to official documentation for all HMS Core Kits, you can find detailed documentations in there.

If you run into a bug in our samples, please submit an issue to the GitHub repository.


5. Licensing and Terms

Huawei Analytics Kit Cordova Plugin is licensed under the Apache 2.0 license.