Integrating Huawei Analytics, Map and Location Flutter Plugins to Forks & Spoons : A Restaurant App — Part 2
Learn how to use the Huawei Flutter Plugins in a meal order app.
Taking the flag where Ali Türkay Avci left, we will continue to integrate Huawei Flutter Plugins to our app in order to increase its usability. Since you already know the initial configuration steps from Part 1 — also you may find related documentations from References and Further Reading section, I will jump directly to the introduction of the plugins.
Huawei Analytics Flutter Plugin
Huawei Analytics is a one-stop user behavior analysis platform for your products such as mobile apps, in this case it is Fork & Spoons, and it offers scenario-specific data collection, management, and analysis in favor of enterprises to achieve effective user acquisition, product optimization, precise operation, and business growth. Based on the user event and behavior data automatically collected by the Analytics Plugin, Huawei Analytics can automatically generate data dashboards and analysis reports.
Huawei Map Flutter Plugin
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.
Huawei Location Flutter Plugin
Huawei Location Kit combines the Global Navigation Satellite System and base station location functionalities into your app to build up global positioning capabilities as well as identifying user activity status and geofencing, allowing you to provide flexible location-based services for global users. Even though Huawei Location Flutter Plugin provides many other capabilities, we will focus on Fused Location Service which enables us to quickly obtain the device location based on the GNSS, Wi-Fi, and base station location data.
Forks & Spoons
Remembering the Part 1, Forks & Spoons is a restaurant app that allows its users to explore and order the meals that listed on the application. In this article, we will implement few methods to track the app user for user and event analysis, then create a page that uses Huawei Map and Location services to locate the user and the nearest restaurant to serve from. Lets start!
Tracking the User Events
Huawei Analytics Initialization & Debugging
Before implementing the analytics methods right away, we should initialize the service first. After creating the HMSAnalytics instance to use, call the setAnalyticsEnabled API to start. Also calling the enableLogWithLevel API is pretty handy to obtain logs since the great majority of the APIs returns void.
In normal circumstances, Huawei Analytics reports analytic events when cached events reaches threshold or when the app is switched to the background. It is useful to limit the usage for your customers on released apps, yet not practical while developing the application. There are two ways to shorten the report interval while debugging the app, and we will use both of them during the implementation.
The first way is the debug mode. During the development you can enable the debug mode to view event records in real time, observe results, and adjust the reporting policies. To enable the debug mode, run the following code:
Your first user events will be reported instantly after enabling the debug mode and launching the application. You may ask that “how can Huawei Analytics reports an event without even implementing it”. The answer is Automatically Collected Events, but we will cover that later.
To view and analyze the reports, Sign In to AGC and find your project. Since we are using the Debug Mode currently, your events will be listed under Huawei Analytics > App Debugging page.
We will use Debug Mode throughout the Huawei Analytics integration, however, as mentioned earlier and in terms of user analysis, there is another and more viable way to shorten the report interval. You may change the report interval by using the setReportPolicies API and set scheduledTime property to 60 for reporting events in every 60 seconds. You may also use the other report policies to configure your app for your use cases.
Note that reporting policies take effect only when the debug mode is disabled. Considering that you can’t use the debug mode on a released app, as previously explained, we will continue to use debug mode during Huawei Analytics integration and disable it after configuring the events. Using the events outside of the debug mode will help us to test the analytics features even further in later development and initial testing processes.
Event Types and Handling Events
Now that we have configured the Huawei Analytics and enabled the debug mode, we can start implementing our events. There are three types of events in Huawei Analytics; Automatically Collected Events, Predefined Events and Custom Events.
Automatically Collected Events are reported without extra coding, and the only requirement is that the function of collecting system is enabled, which is enabled by default. We already got our first automatically collected event reports during the debug mode initialization and in case that you didn’t notice, there are also parameters that defined for the events. Considering that Huawei Analytics provides a wide range of user analysis tools, such parameters make our job as effortless as possible. You may find detailed information about automatically collected events and their parameters from Official Huawei Analytics Flutter Plugin Documentations.
Predefined Events are predefined by the HMS Core Analytics SDK based on common application scenarios. Similar to Automatically Collected Events, the system has been enabled to provide various insight reports based on predefined events, hence it is recommended to use them where appropriate. With this in mind we will implement several events in Forks & Spoons.
Let’s start with Add Product To Cart event. In e-commerce applications, user behaviors such as adding or deleting products, starting and completing the checkouts are significantly important to analyze the flow and users. This applies to our application too. As event IDs are already defined for us, all we need to do is sending an event to Huawei Analytics using onEvent API with the help of HAEventTypes. Futhermore, you may also use HAParamTypes as well as custom Map objects as a parameter while sending event.
As mentioned earlier Huawei Analytics provides user analysis tools and Funnel Analysis is one of them. To complete the purchase funnel you may also use predefined events such as Complete Purchase or Delete Product From Cart. Likewise there are 40+ predefined events and their combinations with analysis tools are only limited to your imagination.
In case that you couldn’t find any automatically collected or predefined events to meet your analysis requirements, there is also a third option which allows you to create a personalized Custom Events for your customers. Suppose that we want to conduct an experiment about “Image Attractiveness” on Fork & Spoons. To achieve that, we can easily implement Custom Events and set different parameters to them similar to Predefined Events.
As you noticed, comparing to predefined events, only the name and parameters are changed while sending a custom event. Thus you need to pay attention while defining custom event names to not mix them with predefined ones. Otherwise, the custom event will be identified as a predefined event.
In order not to extend this article any further we will move on to Location and Map integration, yet don’t forget to check GitHub repository to see events in action.
Ordering a Meal
Map Integration
As you know Forks & Spoons already has bunch of different dishes that we can order, yet lacks a page to complete the order. We have created a simple page to begin with, and implemented the simplest Huawei Map instance using plugin’s HuaweiMap widget. All you have to do is calling the widget by specifying a initial camera position to it.
It feels great to have a fully functioning map with only writing few sentences, but we should add custom features to it in order to meet our requirements. Say that Fork & Spoons have three restaurants in city that located in different neighborhoods and we want to show them on our map with a custom logo. To achieve that, first, we should obtain the Uint8List of the custom marker icon, then create a BitmapDescriptor using the bytes that we obtained.
The rest is simple, as we always do, create a marker by specifying marker id and position, then set the BitmapDescriptor to icon parameter of the marker.
Location Integration
The page that we have created is useless without a marker that shows user’s location. For demo purposes, and also to showcase a great feature of the Huawei Location Flutter Plugin, we will start by setting a mock location using the FusedLocationProviderClient.
After creating a FusedLocationProviderClient instance call the setMockMode API to enable the mock location mode of the plugin and set coordinates of your choice using the setMockLocation API. Since we are overriding the user location, you should also set Forks & Spoons to System and Updates > Developer Options > Select Mock Location App from your device settings.
As you can see from the code above, regarding that now we know the exact location of the user, we implemented a user marker with a different marker icon similar to restaurant markers.
Let’s spice things up! Assume that we want to serve customers within 10 km range from the closest restaurant. Since we mocked our location, we can now use the getLastLocation API of the FusedLocationProviderClient and combine it with the restaurants’ coordinates, which we already marked them on the Huawei Map, in order to find closest restaurant to serve the customer.
Luckily, Huawei Map Flutter Plugin has distanceCalculator API which returns the distance between two coordinate points. All we need to do is calling the API repetitively for user and restaurant coordinates then obtaining the smallest value.
distanceCalculator API returns distance between the specified two coordinate points in meters, therefore we checked the closest point’s distance to user using meters to decide to serve. You may decrease the servable distance to 2000 m to test the flow. After little styling, here are the results;
Additional Features to Order Page
We always get lost while exploring the maps. A button that can center the user location whenever needed is always a good idea to enhance the user experience. To achieve that, we will create a HuaweiMapController instance which provides useful APIs such as animateCamera to animate the camera position to any location of your choice. The process is simple, we need to create a CameraUpdate object for the desired location, in this case it is the mock location of the user, and call the animateCamera API using the created object.
Even though we centered the map to user marker, markers can be hard to locate either because of it’s color or the marker density of the map instance. Therefore we will also animate the marker to make things easier. To Animate a marker you should chose an animation that Huawei Map Flutter Plugin offers. Currently there are four animation types and ten interpolators for you to implement according to your preferences.
Say that, we want to flash the user marker after centering the camera to it. To do that, let’s create a HmsMarkerAlphaAnimation, and set the animation to user marker’s animation set.
After creating the animation, all we need to do is calling the startAnimationOnMarker API of the HuaweiMapController by specifying the marker. Since we want to animate the marker on centering the user marker, we will slightly change the centerMyLocation method that we created earlier, accordingly. The 500ms delay is set to wait for the camera animation.
Conclusion
It was a long journey, yet we have come to an end 🎉. Even though we have only covered the APIs that we need to implement specific use cases, Huawei Flutter Plugins offers much more for both general and special use. Since they are also official plugins, they are constantly updated and improve themselves to meet your requirements, so don’t forget to check References and Further Reading section for the pub.dev link and feel free to explore GitHub repository of Huawei Flutter Plugins.
For further reading, I have provided the Development Guides of the mentioned plugins to explore even deeper. You may also ask any question related to this article in the comments section.
