Our React Native EU Conference is back
REGISTER
.svg)
Callstack is one of the best software teams I've ever worked with. They plug into your team and process seamlessly. They are responsive and professional. I've worked with a lot of software contractors and firms. Callstack is simply the best.
<cyan>User onboarding<cyan> with an internet-connected device
Mining cryptocurrencies has been gaining popularity for quite some time, while at the same time being difficult to set up and manage. Here’s where Coinmine One steps in - an XBOX-sized plug-n-play miner for everyone. One of the features that make Coinmine One so easy to operate is its companion Mobile App, where all the setup and management is done. Therefore, it is crucial to provide users with a great and smooth onboarding experience. Similarly to other IoT devices, Coinmine One is an Internet-connected device, which means the user has to configure it and setup an Internet connection. Hence, the onboarding performed from the companion Mobile App has to provide the user with a straightforward, smooth and robust flow.
Providing the user a <cyan>seamless and robust experience<cyan>
When configuring Coinmine One Internet-connected device, for the user onboarding experience to be smooth and seamless, we needed to meet the following criteria:
Given that the device was already in the pre-production stage, there was no option to change the underlying mechanism to configure it. We had to use WiFi and a hotspot provided by the device.
A deep dive into the <cyan>Native side<cyan>
We knew from the beginning that there would be native code needed for this functionality. Unfortunately, there wasn’t any community-made solution that would work on both iOS and Android with similar capabilities. From our research, we have concluded that we would need to sacrifice some of the features of the Android platform, to make the experience similar to iOS. When it comes to iOS, the API for interacting with hotspots is very limited:
<cyan>A minimal API<cyan> with platform tweaks
Having considered all the functionalities and limitations of each platform, we have settled on writing a Native module in Objective C for iOS and Kotlin for Android. The solution would provide only the API that is supported on both platforms with platform-specific tweaks and assertions in JavaScript to account for behavior differences on each platform.
The onboarding flow could be split into the following steps:
The first order of business is to connect the Mobile App to the hotspot. The first thought would be to check if the hotspot is on. In other words, to check whether the Wi-Fi network from Coinmine One is available. This could be done on Android, however, iOS doesn’t provide any API to do so. Instead, from the native module (Objective-C/Kotlin), the Mobile App tries to connect to the Coinmine One’s Wi-Fi network by adding a new network configuration and then after some delay, it checks if the mobile device is connected to the aforementioned Wi-Fi network, by comparing SSIDs of the connected Wi-Fi network and the hotspot network, the Mobile App should have connected to.
There’s also an edge case the Mobile App has to handle. It is a situation when the Mobile Device is already connected to Coinmine One’s hotspot, so again a simple SSID check is needed.
We could finish the first step here, but in order to make it even more robust, the Mobile App does a ping GET request to Coinmine One, to check if the request can reach the device. This check is more important than it seems. We found that on Android Pie, when mobile data is on and the Mobile Device is connected to Coinmine One’s hotspot, Android system routes all requests through the cellular network, since it has a connection to the Internet, whereas the Coinmine One’s hotspot does not.
To overcome this problem, on Android the Mobile App creates HttpURLConnection from Coinmine One’s hotspot, to ensure the requests will always go through the correct network interface.
Now, the Mobile App established valid means of requests transport to the Coinmine One device, it does GET requests to fetch all Wi-Fi networks seen by the Coinmine One device and asks the user to select one, provide credentials and sends this information to the device with PUT request. On Android, all of those requests are routed through HttpURLConnection bound to Coinmine One’s hotspot network.
The last order of business now is to remove Coinmine One’s hotspot network from the list of remembered Wi-Fi networks. The effect of this step is also checked by comparing SSIDs of the currently connected Wi-Fi network if there is any.
Thanks to those extensive checks and edge case handling we ensure Coinmine One’s configuration and onboarding is smooth and robust.
A stable solution with an <cyan>excellent user experience<cyan>
The result of our work was achieving a stable solution with a low error rate that allowed to provide a flawless user experience. Moreover, it provided the ability to set up the WiFi network or the physical device without leaving the app and manually connect to the device’s hotspot. It resulted in making the whole user onboarding quick and effortless.
Need help with React or React Native? Let us know!
I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.
