DEV Community: Sherlock

Grow your app business to new levels with AppGallery Connect

Sherlock — Fri, 26 Mar 2021 08:27:09 +0000

The success of an app is not just dependent on the value it offers users, but also how efficiently it reaches them. HUAWEI AppGallery Connect app service platform is designed to help app developers improve development and operations efficiency, attract a wider range of users and generates greater revenue, by offering end-to-end services at every step along the way, from app innovation and development, to distribution, operations, and analysis, with support for a broad range of devices.

App developers share a number of common challenges when releasing an app. For example, how to acquire most users? How to reach target users with optimal precision? How to improve monetization while continuing to acquire users? All of these challenges, and many others, are addressed at the AppGallery Connect Academy · Live event, offering actionable insights on how to grow your app business to new levels.

Partner with AppGallery Connect to grow your business, by harnessing global app distribution and broad-based device support.

As a top-3 global app marketplace, HUAWEI AppGallery provides access to a wide variety of both global and locally-oriented apps across 18 app categories and has attracted over 530 million MAU in 170+ countries and regions by the end of 2020.

In order to continuously provide quality and safe app experience for users, AppGallery has launched AppGallery Connect, a one-stop app service platform that empowers developers' app creativity and business growth. As of the end of 2020, AppGallery Connect had already partnered with 2.3 million developers across the globe, facilitating 384 billion app distributions on AppGallery in 2020 alone.

A/B Testing: Conduct group experiments to determine the best variant for your app.

A/B Testing enables you to make informed operations decisions based on specific data. It conducts group experiments to determine user preferences related to UI design, written content, and product functions. A/B Testing does not directly boost user activity, but its experiment results help you determine user preferences, and improve indicators such as DAU and MAU.

In one notable example, an app team split users into two groups to determine whether a new function could facilitate user engagement. This function was only made available to one group. Two weeks later, the daily active duration of users in the treatment group was half an hour longer than that for users in the control group. In light of this, the team ultimately decided to release the function, and was proven correct, as the daily user activity duration rose by 15%.

Remote Configuration: Change how your app looks and works, without requiring users to update the app.

Sleep Sounds is an app that provides lullabies and natural white noise to help users fall asleep with greater ease. The Sleep Sounds team utilized AppGallery Connect Remote Configuration to make changes to their app, while also avoiding the need to release a new version. The team simply made changes on the cloud, and the changes took effect on the app side. This enabled Sleep Sounds to make targeted recommendations to users based on their local market, age, gender, and other attributes, upon obtaining the user's consent. Just two weeks into using the service, Sleep Sounds saw an 8% increase in its number of users, and a 10% increase in user engagement.

App Linking: Provide a consistent link access across platforms and versions, for higher conversion rates.
App Linking helps you create deep links for in-app content, and display them across a wide range of channels, including those on social media. By tapping a link, the user can directly access the in-app content. Those users who have not installed the app will be redirected to HUAWEI AppGallery for download and installation.

For example, if you are planning a promotion in your app, App Linking can help you place the promotional link on a diverse range of ad platforms. Existing users can then launch the app and open the specific page with just a tap; new users will be redirected to AppGallery to download and install the app, and then to the specific promotional page upon launching the app.

Linking premium in-app content enables you to convert mobile web users into native app users, which provides a way to grow your user base. App Linking also supports tracing parameters, which means that you can view data analysis and trace traffic sources across different channels.

App Messaging: Send contextual messages to engage users.

With the Call Screen app, users can choose from a range of customized incoming call skins, some of which have visual alerts to ensure that important calls aren't missed. But the developer found that some of the new skins they had released were not being downloaded by very many users, and reviews of the skin were mixed. To address this, the developer used the App Messaging service in AppGallery Connect to notify users of new available skins, after obtaining their consent. Now, when a user signs in, Call Screen provides them with skin recommendations based on their preferences. The service helped increase the number of app users by 11% in just three weeks.

AppGallery Connect Academy · Live: We Connect, You Grow

If you'd like to learn more about the operations and growth services in AppGallery Connect, you simply can't miss AppGallery Connect Academy · Live held from 11:00 UTC+02:00 on March 31, 2021. This event will walk you through how to harness AppGallery's global distribution capabilities to grow your user base, and how to better monetize your app by using AppGallery Connect's operations services to target and activate users. These services, and many others, can help your app stand out from the competition.

Any doubts about this LIVE, click here to leave your reply.
We'll answer some questions during the FAQs session.

[Invitation] Grow your user base and revenue with AppGallery Connect Academy · Live

Sherlock — Thu, 25 Mar 2021 02:01:40 +0000

Dear developer
As a mobile app developer, you must be fully aware of how important app distributions, targeted operations, and monetization are in cultivating a strong user base. But this can be difficult to achieve in practice. That's why HUAWEI AppGallery Connect has decided to host AppGallery Connect Academy · Live. This unique live event focuses on the growth services in AppGallery Connect that can help you acquire new users and grow your business to new levels. This AppGallery Connect Academy · Live is an event that should never be missed by developers who intend to distribute apps on AppGallery.

Live content: This event can give you crucial insights into how to grow your business, by harnessing the global app distribution capabilities on HUAWEI AppGallery, which cover a wide range of device models.

You can also learn from illuminating case studies on how AppGallery Connect's operations and growth services have been a game changer. The following FAQs session will address the most relevant challenges you may face when using the services.

Time: March 31st, 2021 11:00-11:45 UTC+2

Duration: Around 45 minutes

Target audience: Developers who are eager to increase their apps users and revenue.

Click here to subscribe on YouTube:

If you have any questions, please leave your reply below the post or send us an email via agconnect@huawei.com. We'll answer some questions during the FAQs session.

Using Huawei Map Kit on Flutter Applications

Sherlock — Tue, 20 Oct 2020 02:12:32 +0000

Introduction

Flutter is a mobile application development kit for crafting high-quality native experiences on iOS and Android platforms in record time. Even though Flutter is enough to build great mobile apps, interactivity, such as map integration, is needed in order to increase the user experience.

Huawei Map Kit

Huawei Map Kit is a development kit and map service developed by Huawei to easily integrate map-based functions into your apps. The kit currently covers map data of more than 200 countries and regions, supports 40+ languages, provides UI elements such as markers, shapes, and layers to customize your map, and also enables users to interact with the map in your app through gestures and buttons in different scenarios.

With the recently released Huawei Map Kit Flutter Plugin, Huawei developers now can use these features and integrate map-based functions to their Flutter projects. Hence, in this article, to explore the kit and Huawei Services, we will try to build a mobile app featuring Huawei Map using the plugin and Flutter SDK.

HMS Core Github:
https://github.com/HMS-Core/hms-flutter-plugin/tree/master/flutter-hms-map

Required Configurations

Before we get started, to use Huawei Map Kit, and also other Huawei Mobile Services, you should be a Huawei Developer Account holder. For more detailed information on Developer Accounts and how to apply for them, please refer to this link.

Creating an App

· Sign in to AppGallery Connect using your Huawei ID and create a new project to work with, by clicking My projects>Add Project button.
· Click Add App button to add a new application to your project by filling the required fields such as name, category, and default language.
· Map Kit APIs of your app is enabled by default, but just to be sure, you can check it from the Manage APIs tab of your project on AppGallery Connect. You can also refer to Enabling Services article if you need any help.
· Open your Android Studio and create a Flutter application. The package name of your Flutter application should be the same with the package name of your app which you created on AppGallery Connect.
· Android requires a Signing Certificate to verify the authenticity of apps. Thus, you need to generate a Signing Certificate for your app. If you don’t know how to generate a Signing Certificate please click here for related article. Copy your generated Keystore file to your android/app directory of your project.

A side note: Flutter project structure have folders, such as ios and android folders, which belongs to different platforms, by nature, yet Android Studio treats them as a Flutter project folders and throws errors on these files. For this reason, before changing anything related to Android platform, you should right click to your android folder on your project directory and select Flutter > Open Android module in Android Studio. You can easily modify the files and also generate Signing Certificates from the Android Studio window that opened after selection.

· After generating your Signing Certificate (Keystore) you should extract SHA-256 fingerprint using keytool, which provided by JDK, and add to the AppGallery Connect by navigating to the App Information section of your app. You may also refer to Generating Fingerprint from a Keystore and Add Fingerprint certificate to AppGallery Connect articles for further help.

Integrating HMS and Map Plugin to Your Flutter Project

You also need to configure your Flutter application in order to communicate with Huawei to use Map Kit.
· Add the Huawei Map Kit Flutter Plugin as a dependency to your project’s pubspec.yaml file and run flutter pub get command to integrate Map Plugin to your project.

dependencies:
  flutter:
    sdk: flutter
  huawei_map: ^4.0.4+300

· Download the agconnect-services.json file from the App Information section of the AppGallery Connect and copy it to your android/app directory of your project.

Your project’s android directory should look like this after adding both agconnect-services.json and keystore file.

· Add the Maven repository address and AppGallery Connect plugin to the project level build.gradle (android/build.gradle) file.

buildscript {
    repositories {
        //other repositories       
        maven { url 'https://developer.huawei.com/repo/' }
    }
    dependencies {
        //other dependencies       
        classpath 'com.huawei.agconnect:agcp:1.2.1.301'   
    }
}
allprojects {
    repositories {
        //other repositories       
        maven { url 'https://developer.huawei.com/repo/' }
    }
}

· Open your app level build.gradle (android/app/build.gradle) file and add the AppGallery Connect plugin.

  apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'  //Added Line
apply plugin: 'kotlin-android'

· In the same file (android/app/build.gradle), add the signing configurations, and change the minSdkVersion of your project as shown below.

 android {   
   /*    
    * Other configurations    
    */
  defaultConfig {
        applicationId "<package_name>" //Your unique package name
        minSdkVersion 19  //Change minSdkVersion to 19
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
   signingConfigs {      
       config{           
           storeFile file('<keystore_file>')           
           storePassword '<keystore_password>'           
           keyAlias '<key_alias>'           
           keyPassword '<key_password>'       
       }   
   }  

   buildTypes {       
       debug {           
           signingConfig signingConfigs.config
       }      
       release {           
           signingConfig signingConfigs.config
       }   
    }
}

· Finally, to call capabilities of Huawei Map Kit, apply for the following permissions for your app in your AndroidManifest.xml file.

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

— To obtain the current device location following permissions are also needed to be declared in your AndroidManifest.xml file (on Android 6.0 and later versions, you need to apply for these permissions dynamically). But we won’t use the current location in our app, this step is optional.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Using Huawei Map Kit Flutter Plugin

Creating a Map

Now that we are ready to use Huawei’s Map features, let’s implement a simple map.

Huawei Map Kit Flutter Plugin provides a single widget, called HuaweiMap, for developers to easily create and manage map fragments. By using this widget, developers can enable or disable attributes or gestures of a map, set initial markers, circles, or other shapes, decide the map type, and also set an initial camera position to focus an area when the map is ready.

Let’s choose a random location from İstanbul as an initial camera position. While declaring the initial camera position, the zoom level, which indicates the value of magnification, and target, which indicates the latitude and longitude of the location, is required. You can find my target coordinates and zoom level below, which we will use while creating our map.

static const LatLng _center = const LatLng(41.027470, 28.999339);
static const double _zoom = 12;

Since now we have an initial position, we should implement the map itself. We will first create a simple Scaffold and set a simple AppBar, then create a HuaweiMap object as a Scaffold’s body. HuaweiMap object, as mentioned before, has different attributes which you can see below. The following code will create a HuaweiMap object that is full-screen, scrollable, tiltable, and also shows the buildings or traffic.

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  static const LatLng _center = const LatLng(41.027470, 28.999339);
  static const double _zoom = 12;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Map Demo"),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: HuaweiMap(
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: _zoom,
        ),
        mapType: MapType.normal,
        tiltGesturesEnabled: true,
        buildingsEnabled: true,
        compassEnabled: true,
        zoomControlsEnabled: false,
        rotateGesturesEnabled: true,
        myLocationButtonEnabled: false,
        myLocationEnabled: false,
        trafficEnabled: true,
      ),
    );
  }
}

Considering creating a ‘clean’ map, I disabled myLocationEnabled, myLocationButtonEnabled and zoomControlsEnabled attributes of the map, but do not forget to explore these attributes by trying yourself since they are great to boost your user experience of your app.

Resizing the Map

A full-screen map is not always useful in some scenarios, thus, since HuaweiMap is a standalone widget, we can resize the map by wrapping it to Container or ConstrainedBox widgets.

For this project, I will create a layout in Scaffold by using Expanded, Column, and Container widgets. The following code shows a HuaweiMap widget which fills only one-third of a screen.

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  static const LatLng _center = const LatLng(41.027470, 28.999339);
  static const double _zoom = 12;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Locations"),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: Column(
        children: [
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.green, width: 2)),
                child: HuaweiMap(
                  initialCameraPosition: CameraPosition(
                    target: _center,
                    zoom: _zoom,
                  ),
                  mapType: MapType.normal,
                  tiltGesturesEnabled: true,
                  buildingsEnabled: true,
                  compassEnabled: true,
                  zoomControlsEnabled: false,
                  rotateGesturesEnabled: true,
                  myLocationButtonEnabled: false,
                  myLocationEnabled: false,
                  trafficEnabled: true,
                ),
              ),
            ),
          ),
          Expanded(flex: 2, child: Container()),
        ],
      ),
    );
  }
}

Adding Interactivity by Using Markers and CameraUpdate

Let’s assume that we are building an app that shows different restaurant locations as markers on our HuaweiMap object. To do this, we will set some initial markers to our map using HuaweiMap widget’s markers field.

Markers field of the widget takes a Set of markers, hence we should first create a set of Marker objects. Then use them as initial markers for our HuaweiMap widget.

As you know, the two-third of our screen is empty, to fill the space we will create some Card widgets that hold the location’s name, motto, and address as a String. To reduce the redundant code blocks, I create a separate widget, called LocationCard, which returns a styled custom Card widget. To not lose the scope of this article, I will not share the steps of how to create a custom card widget but you may find its code from the project’s GitHub link.

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  static const LatLng _center = const LatLng(41.027470, 28.999339);
  static const double _zoom = 12;

  //Marker locations
  static const LatLng _location1 = const LatLng(41.0329109, 28.9840904);
  static const LatLng _location2 = const LatLng(41.0155957, 28.9827176);
  static const LatLng _location3 = const LatLng(41.0217315, 29.0111898);

  //Set of markers
  Set<Marker> _markers = {
    Marker(markerId: MarkerId("Location1"), position: _location1),
    Marker(markerId: MarkerId("Location2"), position: _location2),
    Marker(markerId: MarkerId("Location3"), position: _location3),
  };

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Locations"),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: Column(
        children: [
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.green, width: 2)),
                child: HuaweiMap(
                  initialCameraPosition: CameraPosition(
                    target: _center,
                    zoom: _zoom,
                  ),
                  mapType: MapType.normal,
                  tiltGesturesEnabled: true,
                  buildingsEnabled: true,
                  compassEnabled: true,
                  zoomControlsEnabled: false,
                  rotateGesturesEnabled: true,
                  myLocationButtonEnabled: false,
                  myLocationEnabled: false,
                  trafficEnabled: true,
                  markers: _markers, //Using the set
                ),
              ),
            ),
          ),
          //Styled Card widgets
          Expanded(flex: 2, child: Padding(
                  padding: EdgeInsets.all(8),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        LocationCard(
                          title: "Location 1",
                          motto: "A Fine Dining Restaurant",
                          address:
                              "Avrupa Yakası, Cihangir, 34433 Beyoğlu/İstanbul Türkiye",
                        ),
                        LocationCard(
                          title: "Location 2",
                          motto: "A Restaurant with an Extraordinary View",
                          address:
                              "Avrupa Yakası, Hoca Paşa, 34110 Fatih/İstanbul Türkiye",
                        ),
                        LocationCard(
                              title: "Location 3",
                              motto: "A Casual Dining Restaurant",
                              address:
                                  "Anadolu Yakası, Aziz Mahmut Hüdayi, 34672 Üsküdar/İstanbul Türkiye",
                            )
                      ],
                    ),
                  ),),
          )],
      ),
    );
  }
}

Now we have some custom cards beneath the map object which also has some initial markers. We will use these custom cards as a button to zoom in the desired marker with a smooth camera animation. To do so, users can easily tab a card to see the zoomed-in location on a Huawei map and explore the surrounding without leaving the page.

Resized Map with Location Cards

Before turning cards into a button we should first set a HuaweiMapController object in order to provide a controller for HuaweiMap, then use this controller on HuaweiMap widgets onMapCreated field to pair map and its controller. Below, I created a controller, and with the help of a simple function, use it in our HuaweiMap object.

 HuaweiMapController mapController;

  void _onMapCreated(HuaweiMapController controller) {
    mapController = controller;
  }

/*
  This section only shows the added line. Remaining code is not changed.
*/
                child: HuaweiMap(
                  initialCameraPosition: CameraPosition(
                    target: _center,
                    zoom: _zoom,
                  ),
                  onMapCreated: _onMapCreated, // Added Line
                  mapType: MapType.normal,
                  tiltGesturesEnabled: true,

/*
  Rest of the code
*/

We now have a controller for non-user camera moves, so let’s use the controller. I wrapped the LocationCards with InkWell widget to provide an onTap functionality. There are several useful methods in plugins CameraUpdate class which enables us to zoom in, zoom out, or change camera position. We will use the newLatLngZoom method to zoom in the stated location then, by using the controller and animateCamera method, we will animate the camera move to our new camera location. You can find the wrapped LocationCard with the CameraUpdate and controller.

InkWell(
     onTap: () {
       CameraUpdate cameraUpdate =
           CameraUpdate.newLatLngZoom(
               _location1, _zoomMarker);
       mapController.animateCamera(cameraUpdate);
     },
     child: LocationCard(
       title: "Location 1",
       motto: "A Fine Dining Restaurant",
       address:
           "Avrupa Yakası, Cihangir, 34433 Beyoğlu/İstanbul Türkiye",
     )),

The used _zoomMarker variable is a constant double and has a value of 18. Also, the used _location1 variable is the variable we set while creating our markers.

After implementing these steps, tap a card and you will see a smooth camera move animation with the change of zoom level in your HuaweiMap widget. Voila! 🎉

As I mentioned before, you can also set some circles, polylines, or polygons similar to the markers. Furthermore, you can add some on-click actions both to your map and shapes or markers you set. Do not forget to explore other functionalities that Huawei Map Kit Flutter Plugin offers.

I am leaving the project’s GitHub link in case you want to check or try this example by yourself. You may also find LocationCard’s code and other minor adjustments that I made, from the link.
https://github.com/SerdarCanDev/FlutterHuaweiMapTutorial

Conclusion

Since Huawei created its own services, the demand for support to cross-platform frameworks such as Flutter, React Native, Cordova or Xamarin, is increased. To meet these demands Huawei continuously releasing plugins and updates in order to support its developers. We already learned how to use Huawei’s Map Kit in our Flutter projects, yet there are several more official plugins for Huawei Services to explore.

For further reading, I will provide some links in the “References and Further Reading” section including an article which showcases another service. You may also ask any question related to this article in the comments section.
https://developer.huawei.com/consumer/en/hms/huawei-MapKit
https://pub.dev/publishers/developer.huawei.com/packages
Sending Push Notifications on Flutter with Huawei Push Kit Plugin：
https://medium.com/huawei-developers/sending-push-notifications-on-flutter-with-huawei-push-kit-plugin-534787862b4d

For more details, you can go to:
l official website:https://developer.huawei.com/consumer/en/hms
l Documentation page:https://developer.huawei.com/consumer/en/doc/development
l Reddit to join our developer discussion: https://www.reddit.com/r/HMSCore/
l GitHub：https://github.com/HMS-Core
l Stack Overflow：https://stackoverflow.com/questions/tagged/huawei-mobile-services

How to use React Native Push Plugin?

Sherlock — Mon, 19 Oct 2020 11:51:15 +0000

Introduction

Mobile push notifications are notification messages sent by a server to mobile application users. Implementing push notifications has many benefits, such as improving user engagement by informing users about new special offers, products and services, increasing app retention rates of inactive users, tracking user behavior with A/B tests, and more.

Huawei push plugin for React Native enables developers to use Android HMS push kit in React Native applications. The publishers can push the notifications by using Huawei developer console or posting HTTP requests to Huawei push kit, which will send the notifications to the app users accordingly. The diagram below depicts the workflow of Huawei push kit.

Push Plugin Workflow
In this article, I’ll illustrate how to create your project in the Huawei developer console, integrate the plugin, and use it.

Creating Your Project in Huawei Developer Console

Registering a Huawei ID

You need to register a Huawei ID to use the plugin. If you don’t have one, follow the instructions here.

Creating a Huawei App

To create a Huawei App, visit the developer console and authenticate your Huawei ID. Follow the instructions in this tutorial to create an application.

Generating a Signing Certificate Fingerprint

Signing certificate fingerprint is required to authenticate your app to Huawei mobile services. Make sure JDK is installed. To create one, go to JDK directory’s bin folder and open a terminal in this directory. Execute the following command:

keytool -genkey -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks -storepass <store_password> -alias <alias> -keypass <key_password> -keysize 2048 -keyalg RSA -validity 36500

This command creates the keystore file in application_project_dir/android/app with the configurations you’ve typed in <…>.

Adding SHA256 Key to the Huawei Project in App Gallery

The next step is obtaining the SHA256, which is needed for authenticating your app to Huawei services, for the keystore file. To obtain it, type the following command in terminal:

keytool -list -v -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks

After an authentication, the SHA256 key will be revealed as shown below:

Copy the SHA256 key and visit Huawei developer console//General Information. Paste it to the field SHA-256 certificate fingerprint, set the data storage location to Germany.

Finally, enable the push kit from Project Setting/Manage APIs.

You’ve completed configuring your React Native application in App gallery. In the further steps, I’ll explain how to integrate the plugin to your React Native application.

Integrating the Plugin

To integrate the plugin open a terminal in your project directory and type the following command:

npm i @hmscore/react-native-hwpush

After the command is executed, the file tree is supposed to be in the following way:

projectdir
    |_ node_modules
        |_ ...
        |_ @hmscore
            |_react-native-hwpush
            |_ ...
        |_ ...

Then, download the agconnect-services.json file from your push kit project in app gallery from the General Information tab. Place the file in android/app directory in your React Native project

Go to android/app/build.gradle directory in your React Native project. Follow the steps below:
Add the AppGallery Connect plug-in dependency show below to the file header.

apply plugin: 'com.huawei.agconnect'

In android/defaultConfig node, set the value of the field applicationId as the package name you entered in the AppGallery and set minSdkVersion to 19 or higher

defaultConfig {   
  applicationId <package_name_of_the_project_in_app_gallery>   
  minSdkVersion 19   
  ...   
}

In android/signingConfigs/config node, enter the keystore file credentials.

signingConfigs {   
  config {   
  storeFile file(<keystore_file_name>)   
  storePassword ‘<store_password>’   
  keyAlias ‘<alias>’   
  keyPassword ‘<key_password>’   
  }   
}

Go to android/build.gradle directory in your React Native project. Follow the steps below:

Add maven {url ‘https://developer.huawei.com/repo/'} to buildscript/repositories and allprojects/repositories.

Add classpath ‘com.huawei.agconnect:agcp:1.2.1.301’ to buildscript/dependencies.

The file content should look like as below.

buildscript{   
  repositories{   
     google()   
     jcenter()   
     maven {url 'https://developer.huawei.com/repo/'}   
  }   
  dependencies{   
     classpath 'com.huawei.agconnect:agcp:1.2.1.301'   
  }   
}   
allprojects{   
  repositories{   
     google()   
     jcenter()   
     maven {url 'https://developer.huawei.com/repo/'}   
  }   
}

Go to android/settings.gradle and add the following:

include ‘:react-native-hwpush’   
project(‘:react-native-hwpush’).projectDir = new File(rootProject.projectDir, ‘../node_modules/@hmscore/react-native-hwpush/android’)

You’ve integrated the plugin to your app. In the next section, I’ll explain how to use the plugin.

Using the Plugin

Obtaining a Token

In order to push notifications to a device, you need to obtain a token which is a unique identifier for your test device for push notifications. To get the token, use getToken method of the RNHmsInstanceId module.

import {NativeModules} from 'react-native'   
NativeModules.RNHmsInstanceId.getToken((result, token) => {   
  console.log(JSON.stringify(token));   
});

Pushing Notification Messages

To push a notification message to your device, go to your Huawei developer console and navigate to your project/Growing/Push Kit/Add notification.

Then fill in the fields, type the token for your device in Device token field. Finally, click submit to push the notification.

Pushing Data Messages

Data messages are the messages with key-value pairs. Unlike the notification messages, they don’t pop notifications. Thus, they must be listened by a NativeEventEmitter. To listen data messages, listen for the event PushMsgReceiverEvent as shown below.

import {EventEmitter} from 'react-native'
let emitter = new NativeEventEmitter();
listener = emitter.addListener('PushMsgReceiverEvent', (event) => {
  console.log(JSON.stringify(event))
});
// call listener.remove() to stop listening data messages

To push a data message, go to the Huawei push console to push a new notification, choose Data Message as the type.

Subscribing to Topics

Subscribing to a topic enables the users to receive data messages by the subscribed topic. To subscribe a topic, use subscribe method of the RNHmsMessaging module. Note that you need to listen the data messages (i.e. listen for the PushMsgReceiverEvent) to receive the topic specific messages.

import {NativeModules} from 'react-native'
NativeModules.RNHmsMessaging.subscribe('myTopic', (result, errinfo) => {
  if (result == RNErrorEnum.SUCCESS) {
    console.log('Subscribed!');
  } else {
    console.log('Failed to subscribe : ' + errinfo);
  }
});

To push a notification or data message by topic, go to the Huawei push console to push a new notification, choose push scope as Subscriber and then select the topic of the message to be sent.

Unsubscribing from Topics

Unsubscribing from a topic lets the user not to listen data messages by the unsubscribed topic. To unsubscribe from a topic, use unsubscribe method of the RNHmsMessaging module.

  import {NativeModules} from 'react-native'
  NativeModules.RNHmsMessaging.unsubscribe("myTopic", (result, errinfo) => {
    if (result == RNErrorEnum.SUCCESS) {
      console.log("Unsubscribed!")
    } else {
      console.log("Failed to unsubscribe : "+errinfo);
    }
  });

Conclusion

HMS React Native push plugin enables you to integrate Huawei push kit for React Native applications. With Huawei push plugin, developers can push notifications to the users for various purposes such as improving app retention, informing users about special offers and news, performing A/B tests to make business decisions, sending data messages to alter app behavior, and more.

Github link: https://github.com/HMS-Core/hms-react-native-plugin/tree/master/react-native-hms-push

You may read further about HMS push kit from the articles in references and leave your questions in comments.

REACT NATIVE | How to install & use HMS Site Kit

Sherlock — Tue, 29 Sep 2020 06:50:30 +0000

Introduction
Hello everyone. In this article we are going to take a look at Huawei Mobile Services(HMS) Site Kit Plugin for react native. We will cover how to install and use HMS Site Kit.

HMS Site Kit has following features

Keyword Search: Returns a place list based on keywords entered by the user.

Nearby Place Search: Searches for nearby places based on the current location of the user's device.

Place Details: Searches for details about a place.

Place Search Suggestion: Returns a list of place suggestions.

Before we begin, you need to have Huawei developer account to use Huawei Mobile Services and thus the HMS Site Kit. You can sign in/register to Huawei developer website from here.

Configure your project on AppGallery Connect
First of all, you need to integrate Huawei Mobile Services with your application. I will not get into details about how to integrate your application but you can use this article as step by step guide.

Installation
First things first, let's install the library.

npm i @hmscore/react-native-hms-site

After the installation completed, we can import the library.

import RNHMSSite from '@hmscore/react-native-hms-site'

Before we can use the features of HMS site kit. We need to initialize it. In order to initialize the service, you will need an API key. When you integrated your application with HMS, AppGallery Connect will automatically provide an API key for you. You can find your API key on AppGallery Connect > YourApp > Project Settings > General information > App information.

Since we have our api key let's call initialize service function.

const config = {
apiKey: '<Your_API_KEY>' // You can find it in AppGallery Connect > YourApp > Project Settings > General information > App information};

RNHMSSite.initializeService(config)
.then(() => {
    console.log('Service is initialized successfully');
})
.catch((err) => {
    console.log('Error : ' + err);
 });

If your API key is correct you will see "Service is initialized successfully" on your console.

Usage
Now we can start using HMS React Native Site Kit. Let's start with keyword search.

Keyword (Text) Search
HMS Site kit keyword search feature let's you implement a functionality that returns place list based on your user's keyword input. Also you can specify a location which search result will be baised. You can specify search radius, country, language and page size. For the keyword search you can set the POI (Point of Interest) where results can be filtered based on POI. User can search Bakery, School, ATM etc.

Let's create a TextSearchRequest object, which is used as the request body for keyword search. Related parameters are as follows, among which query is mandatory and others are optional:

query: search keyword.

location: longitude and latitude to which search results need to be biased.

radius: search radius, in meters. The value ranges from 1 to 50000. The default value is 50000.

poiType: POI type. The value range is the same as that of LocationType.

countryCode: code of the country where places are searched, which complies with the ISO 3166-1 alpha-2 standard.

language: language in which search results are displayed. For details about the value range, please refer to language codes in Language Mapping. If this parameter is not passed, the language of the query field is used in priority. If the field language is unavailable, the local language will be used.

pageSize: number of records on each page. The value ranges from 1 to 20. The default value is 20.

pageIndex: current page number. The value ranges from 1 to 60. The default value is 1.

After that we can call textSearch function and send our TextSearchRequest object as a parameter like this.

Let's find international school at Paris

const onTextSearch = () => {
let textSearchReq = {
    query: 'International',
    location: {
        lat: 48.893478,
        lng: 2.334595,
    },
    radius: 1000,
    countryCode: 'FR',
    language: 'en',
    pageIndex: 1,
    pageSize: 1,
    poiType: RNHMSSite.LocationType.SCHOOL
};
RNHMSSite.textSearch(textSearchReq)
    .then((response) => {
        console.log(JSON.stringify(response));
    })
    .catch((err) => {
        console.log(JSON.stringify(err));
    });
};

The response json should be like this and as you can see there is alot of information to play around with.

{
"totalCount": 1,
"sites": [
    {
        "siteId": "FB3941B313927D74413FFF0E883144FE",
        "poi": {
            "rating": 0,
            "poiTypes": [
                "SCHOOL"
            ],
            "phone": "+(33)-(1)-42000679",
            "openingHours": {},
            "internationalPhone": "+(33)-(1)-42000679"
        },
        "viewport": {
            "southwest": {
                "lng": 2.3455935548062814,
                "lat": 48.87367776679441
            },
            "northeast": {
                "lng": 2.3494610451937183,
                "lat": 48.87622143320559
            }
        },
        "name": "Acting International",
        "formatAddress": "15, Rue Ambroise Thomas, 75009, 9e Arrondissement, Paris, Ile-de-France, France",
        "address": {
            "subLocality": "9e Arrondissement",
            "subAdminArea": "Paris",
            "postalCode": "75009",
            "thoroughfare": "Rue Ambroise Thomas",
            "countryCode": "FR",
            "locality": "Paris",
            "country": "France",
            "adminArea": "Ile-de-France"
        },
        "distance": 2269.4454697030014,
        "location": {
            "lng": 2.3475273,
            "lat": 48.8749496
        }
    }
]
}

Nearby Place Search
HMS Site kit nearby search feature let's you implement a functionality that returns nearby places using the current location of the user. Also you can specify search keyword, search radius, language and page size. For the nearby search you can set the POI (Point of Interest) where results can be filtered based on POI. User can search Bakery, School, ATM etc.

Let's create a NearbySearchRequest object, which is used as the request body for nearby place search. Related parameters are as follows, among which location is mandatory and others are optional:

location: longitude and latitude to which search results need to be biased.

radius: search radius, in meters. The value ranges from 1 to 50000. The default value is 50000.

query: search keyword.

poiType: POI type. The value range is the same as that of LocationType.

pageSize: number of records on each page. The value ranges from 1 to 20. The default value is 20.

pageIndex: current page number. The value ranges from 1 to 60. The default value is 1.

After that we can call nearbySearch function and send our NearbySearchRequest object as a parameter like this.

Let's find an ATM nearby.

const onNearbySearch = () => {
let nearbySearchReq = {
    location: {
        lat: 51.500775,
        lng: -0.115756,
    },
    query: 'BANK',
    radius: 1000,
    poiType: RNHMSSite.LocationType.ATM,
    language: 'en',
    pageIndex: 1,
    pageSize: 1
};
RNHMSSite.nearbySearch(nearbySearchReq)
    .then((response) => {
        console.log(JSON.stringify(response));
    })
    .catch((err) => {
        console.log(JSON.stringify(err));
    });
};

The response json should be like this and as you can see there is alot of information to play around with.

{
"totalCount": 1,
"sites": [
    {
        "siteId": "7B4F4024A4FD4D700E61B659247BB854",
        "poi": {
            "rating": 0,
            "poiTypes": [
                "ATM"
            ],
            "openingHours": {},
            "internationalPhone": ""
        },
        "viewport": {
            "southwest": {
                "lng": -0.11576103182719415,
                "lat": 51.498155166794405
            },
            "northeast": {
                "lng": -0.11167496817280585,
                "lat": 51.50069883320559
            }
        },
        "name": "Bank of Ireland - Post Office",
        "formatAddress": "125-131, Westminster Bridge Road, Lambeth, London, England, the United Kingdom",
        "address": {
            "subAdminArea": "London",
            "thoroughfare": "Westminster Bridge Road",
            "countryCode": "GB",
            "locality": "Lambeth",
            "country": "the United Kingdom",
            "adminArea": "England"
        },
        "distance": 206.06612089844526,
        "location": {
            "lng": -0.113718,
            "lat": 51.499427
        }
    }
]
}

Place Details Search
Place details search returns search details about a place based on the unique ID (Site Id) of the place. SiteId can get from keyword or nearby or Place Suggestion search.

Let's create a DetailSearchRequest object, which is used as the request body for place details search. Related parameters are as follows, among which siteId is mandatory and others are optional:

siteId: ID of a place.

language: language in which search results are displayed. If this parameter is not passed, the local language will be used.

After that we can call detailSearch function and send our DetailSearchRequest object as a parameter like this.

Let's look at the details of the atm we found on nearby search.

const onDetailSearch = () => {
let detailSearchReq = {
    siteId: '7B4F4024A4FD4D700E61B659247BB854',
    language: 'en'
};
RNHMSSite.detailSearch(detailSearchReq)
    .then((response) => {
        console.log(JSON.stringify(response));
    })
    .catch((err) => {
        console.log(JSON.stringify(err));
    });
};

The response json should be like this and as you can see there is alot of information to play around with.

HMS Core 5.0.2 Launch Announcement

Sherlock — Tue, 29 Sep 2020 06:18:40 +0000

ML Kit

Features:

Added the liveness detection service, which supports silent liveness detection and captures faces in real time. It can determine whether a face is of a real user without requiring the user to follow specific instructions.

Added the image super-resolution service, which removes the compression noise of images to obtain clearer images, with the resolution unchanged.

Added the document skew correction service, which automatically identifies the location of a document in an image and adjusts the shooting angle to the angle facing the document, even if the document is tilted.

Added the hand keypoint setection service, improved the speed and accuracy of bank card recognition, enhanced the translation service, optimized the text to speech service, and other features.

Link:

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/version-changehistory-0000001050040023

Scene Kit

Features:

Added APIs for you to create apps which blend the virtual and the real, with features such as dynamic face stickers, 3D Qmojis, and virtual object placement.

Link:

https://developer.huawei.com/consumer/en/hms/huawei-scenekit/

Push Kit

Features:

Added the messaging by user time zone, scenario, and geofence, improving user experience.*

*The functions involving user data must be implemented with users' authorization.

Link:

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/automated-notifications-0000001051072150#EN-US_TOPIC_0000001051072150__section17240145319447

Analytics Kit

Features:

Supported integration of web apps with Analytics Kit to implement data collection and unified analysis.
Supported automatic collection from mobile phones and tablets as well as configuration of the app installation source.

Link:

https://developer.huawei.com/consumer/en/hms/huawei-analyticskit

Updates of all HMS Core versions

Learn more:

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides-V5/hmssdk-kit-0000001050042513-V5

Scene Kit

Sample Code:

Added the ARView and FaceView development procedures.

Github:

https://github.com/HMS-Core/hms-scene-demo

ML Kit

Sample Code:

Added a demo for the messaging by scenario.

Github:

https://github.com/HMS-Core/hms-ml-demo

Push Kit

Sample Code:

Added a demo to illustrate how to integrate web apps with Analytics Kit.

Github:

https://github.com/HMS-Core/hms-push-clientdemo-android

Analytics Kit

Sample Code:

Added a demo to illustrate how to integrate web apps with Analytics Kit.

Github:

https://github.com/HMS-Core/hms-analytics-demo-javascript

Singapore Geospatial Week+ 2020 Summit Review

Sherlock — Mon, 28 Sep 2020 03:21:57 +0000

Last week, Singapore Geospatial Week+ 2020 is successfully held. More than 300 business leaders and developers from top real estate, retail, and e-commerce developers join this online event.

The Singapore Geospatial Week is held annually by the Government of Singapore Land Authority and brings together industry participants and the public. The event is led by Singapore Mobile Ecosystem Development BD Goh Cheng Wee and partners to organize a series of activities to explore the potential of industry technologies and promote in-depth cooperation among various industries on Huawei mobile services.

During the morning tech forum event entitled "Unlocking Countless Potential in Real Estate", Liusihao from HMS Core Product Dept, participated in the technical panel entitled "How to use technology innovation to serve the retail and real estate industries" with technical experts from CapitaLand, PTGEM, etc.. He shared HMS Core refined analytics operation service, indoor and outdoor location service and AI technologies, helping developers in application innovation. The online developers discussed and expressed full interest in these service kits.

At a special session on the afternoon of the same day, released HMS Core lifestyle and e-commerce solutions for Asia-Pacific Region. Li Mingnan(Nando), lifestyle industry owner of the HMS Core Product Dept, discussed technical solutions and application scenarios with more than 100 online developers, and answered their questions. Then showed how HMS Core opens network, 5G, and AI technologies to bring brand-new experience to lifestyle applications, as well as the actual scenarios of indoor location and Super GNSS.

This activity explored new cooperation models with partners and established long-term dialogues, which are expected to further force the go-onboard and integration of regional applications and also improve the influence of the HMS ecosystem in the industry in the region. Next, we will provide product and technical support for developers.