Integrating Huawei Crash, Push Kit and Account Kit to Forks & Spoons: A Restaurant App — Part 1
Learn how to use the Huawei Flutter Plugins in a meal order app.
Hello all,
As you’ve probably know already, Huawei has released its own mobile services as the HMS (Huawei Mobile Services) platform and thankfully these services are also supported on third party SDKs such as Flutter, React-Native, Cordova, Xamarin and more.
In this article we will dive in to some of the HMS Flutter Plugins to enhance an imaginary online restaurant app called Forks & Spoons with useful features. We will integrate Huawei Crash, Push and Account Plugins into our app to meet certain use cases in the first part of these series. Before we begin let me introduce Forks & Spoons to you.
Forks & Spoons
Forks & Spoons is a a local restaurant that is having a hard time because of Covid-19 epidemic like most of us. The precautions for the epidemic has prohibited the restaurant to accept customers so the owner has started online food delivery in order to reach to its customers and save its business.
We will now integrate Huawei’s Mobile Services to the online food delivery app for the purpose of enriching the user experience and providing useful features with ease. Before we begin I would like to mention that I won’t go into details about the UI code and some business logic to not make this article like a never ending TV series but you can find all the source code in the github repository.
If you are ready let’s begin by integrating the first service to the app.
Account Kit
Most of the apps on the market these days are offering various ways to authenticate their users. Huawei Account Kit provides you with simple, secure, and quick sign-in and authorization functions. Instead of entering accounts and passwords and waiting for authentication, users can just tap the Sign in with Huawei button to quickly and securely sign in to your app with their HUAWEI IDs.
Note
> If you are going to implement this service into your app don’t forget to add an app to AppGallery Connect, as described in this document.
> You can find the integration and configuration details of Huawei Flutter Account Kit Plugin here.
Let’s add the Sign In function to authenticate users with their HUAWEI ID. First we create an AccountAuthParamsHelper object to set the fields we need in the response and we pass this object to the AccountAuthService.signIn method. Furthermore we can verify the user’s token after we have obtained the id from the sign in method.
We connected the _signIn method above to a user icon button on the app bar and once the user signs in successfully their first and last name will be displayed instead of the icon. Let’s see it in action:
It is a high possibility that you would need the id information again on some part of the app. In Forks&Spoons we had needed it in the drawer widget which displays the user’s shopping cart. In order to obtain the already signed in Huawei ID information we call the AccountAuthManager.getAuthResult method.
We let people sign in to our app but there is no way to sign out yet. Let’s fix this by adding a sign out function.
AGC Crash
The next service that we are going to integrate to our app is the AppGallery Connect Crash Service which provides a powerful yet lightweight solution to app crash problems. With the service, we can quickly detect, locate, and resolve app crashes, and have access to highly readable crash reports in real time.
> You can find the integration and configuration of AppGallery Connect Crash here.
To get started with agc crash we need to add the latest version of the agconnect_crash plugin to our pubspec file as follows:
After adding the dependency we can catch and report all non-fatal exceptions of our app to the AGC Crash Service by adding the following code to our main method.
Note that below configuration is for Flutter version 1.17 and above. If you are using a lower version please check this document from Huawei Developers.
Manually handling and reporting errors to AGC Crash Service
Meet Jerry, The Forks&Spoons is his favorite restaurant and he orders from the app occasionally. Unfortunately his wifi is not working when he opened the app today and he tries to log in to the app. Below is the source code for the login process, notice that we are catching the error and reporting it to the crash service by the recordError method. If you use the try / catch block the thrown exception will not be catched by the configuration we did earlier, so we have to handle it ourselves.
Let’s see what happens when Jerry tries to log in to the app.
Ooops something went wrong. Let’s see the crash report on the AppGallery Connect. Be sure to add the Exception filter to see the exception reports.
Here is the exception report; we can check the stack trace, device information and more in this page, isn’t it cool ?
We can also test an exception by just throwing one and sending its report on the catch clause.
Furthermore we can set a userId or any custom key value pair to be sent in the crash/exception report.
Apart from exceptions Flutter can also have build phase errors or what i like to call widget errors. To catch all of these errors you can use ErrorWidget.builder class along with the crash kit. I have also returned a custom error widget to be rendered on error. Spoiler alert: it contains ducks.
Push Kit
Let’s move on to one of the most indispensable services for the app: Push Kit. Push Kit is a messaging service provided for you to establish a messaging channel from the cloud to devices. By integrating Push Kit, you can send messages to your apps on user devices in real time. This helps you maintain closer ties with users and increases user awareness of and engagement with your apps.
> You can find the integration and configuration details of Huawei Flutter Push Kit Plugin in this document.
Before we start to send messages like your ex we need to obtain a push token. We can achieve this by setting a callback to token stream and requesting a token by the Push.getToken method. We can also set auto initialization to true for automatically requesting tokens on startup.
After we add the initPush function to a stateful widget’s initState method in our app we should be able see the push token on the logs.
This token will be very useful while sending messages to our app. Let’s start with a push notification message.
Sign In to the AppGallery Connect and select your project, then select Grow /Push Kit on the side bar and click the Add Notification button. The page below will be displayed.
Let’s quickly prepare a push notification for our belowed users. You can see the message preview on the right side.
To send this push message to our users we can tap the Test Effect button and enter the push token we obtained earlier. We can also send this message to all users by pressing the Submit button above.
We have successfully sent our first push message to our app but it still seems somewhat flat. We can spice things up by adding a deep link and navigating the users to the content directly. This would empower the UX of our app.
Before we jump into the code first, we need to add the intent filter below to the project’s AndroidManifest.xml file inside activity tag. Here we are using the scheme “app” but if you are going to release your app it’s better to change it to something related to your domain name.
For the implementation let’s return to the initPush function again and add a callback to the intent stream of Push kit. Here we can also use the same callback for handling the startup intent. This intent is included in the notification that opens your app from scratch.
Here is the callback function that would open the content in the app. In this case if the incoming custom intent string is equal to “NewYorkSteak” the ProductDialog that includes the corresponding meal info will be displayed on the screen.
Now for the best part let’s go back to the AppGallery Connect again and add a button with custom intent uri string to the notification we’ve prepared earlier.
Let’s press the button on the notification and see the deep linking in action.
Offering discounts using data messaging
Some features of your app may require you to send data messages up or down (App To Server or Server To App). By the help of data messaging from Push Kit this operation becomes very easy to achieve.
The Forks&Spoons restaurant’s owner is very generous and he wants to occasionally give discounts to the loyal customers like Jerry who orders from the app oftenly. To implement this we will go back to the initPush method again but this time we will add a callback to the onMessageReceived stream.
And for the data message callback, a function that displays a discount dialog and sets the discount value to the state is enough to cover our feature.
Now we head over to the AppGallery Connect and open the Push Kit Console again. This time we will send a data message that includes a discount value.
Oh a very generous fifty percent discount, Nice! Jerry will be walking on air. I can see him smiling with hunger.
Let’s check the discounted prices.
Jerry is excited to order with the reduced prices but he got a text message and he forgot to order, Let us remind him that he left his meal in the cart by using the local notification feature of the Push Kit Plugin.
Did you forget your meal in the cart feature
To implement this feature we need to check the user’s cart before the app goes to background or killed state. To monitor the app state we can use the WidgetsBindingObserver class from Flutter SDK. But before that we need to add the permissions that are required to send a scheduled local notification to our AndroidManifest.xml file.
For the implementation, first we mix the WidgetBindingObserver to our widget’s state, then add the observer as on the code below to the initState function and override the didChangeAppLifecycleState callback from the WidgetBindingObserver mixin.
Inside the callback we are sending a scheduled local notification to 1 minute after the app is paused. If the user opens the app again we are cancelling all the scheduled notifications.
We reminded Jerry to order and he is going for it but which one of our restaurants will be serving to him? Apart from that the owner of the restaurant thinks that we can learn one or two things from Jerry by analysing his user behavior in the app.
Unfortunately this article has came to an end. My colleague Serdar Can will discuss about all these topics on the second part of our article. Thank you and congratulations on finishing the first part. If you have any questions related to article, feel 100% free to ask them in the comments section.
You can also check References and Further Reading section for more information about the Huawei Mobile Services and HMS Flutter Plugins.
