How we puzzled Chinese language out in a month and developed our first IoT project

Mobile app development for Chinese hardware is similar to the first bike ride. Generally, you understand how to spin the pedals but this time you have to ride the bike on Chinese roads — you cannot figure out how to make it all work together to enjoy the process. The development of EnerGO, an app for power bank rent, became such a ‘ride’ for us where the hardware was the Chinese charging stations. At some point, we were even riding three bikes simultaneously. I’m Alexandra Rumyantseva, a PM at Purrweb, and I want to share how we struggled with the station operation protocol, managed to build three apps instead of one, broke all the deadlines because of the COVID-19 pandemic, and still made it all tip-top.

Reading time: 8 minutes

Table of contents

Eastern inspiration

EnerGO is a startup that makes power bank renting accessible in the Moscow metro and cafes: just take it from one station and drop it in another one.

The client decided to create an app while traveling to China. There he met guys who produced big (with media screens) and small (without screens, only slots) power bank charging stations. Although there were already some competitors in the Russian market, the client still wanted to enter it solely occupying a promising niche — the Moscow metro. Judge for yourself, no competitors there and enormous human traffic every day. On the app level, there were no ‘killer features’ because the billing and maps integrations took a huge chunk of time to implement. And the client wanted to enter the market as fast as possible.  

One app turns into three

The client contacted us in September 2019 with the request to develop a mobile app for his startup. We already had relevant experience — the design of a similar startup ChargedUp based in London. 

Initially, we agreed to make just one app for power bank users. However, there were 2 more apps that came along on the road and were urgent:

  1. App for advertising. The client intended to make money on advertising in the stations: video playlists and banners. To make it work there should be an app.
  2. App for maintenance. The servicemen needed an app for setting up and maintaining the stations.

The best of unreleased

We started off with the design and decided to piggyback on EvTrip and ChargedUp , similar projects that we previously worked on. On top of that, we analyzed the competitors and Apple frameworks — backdrops had just started gaining popularity at that time. To make the backdrops work on React Native, we had to break a sweat a little bit. More about that a bit later on.

The designer took black and yellow as the primary colors — yellow as a symbol of energy, black as a good contrasting color. 

The UI/UX design scope was planned out into weekly sprints. It took us only 2 to finish it smoothly because we had already gained niche insights working on the ChargedUp project. We used the best parts of ChargedUp: optimal UX-solutions and bold UI ideas waved aside by the ChargedUp team. 

IoT mobile app development. Energo design

IoT development: what kind of animal is that?

The final design was quickly approved, and we proceeded with the IoT application development. The team included: a project manager, UI/UX designer, and 3 developers. We used our classic stack — React Native + Nest.js. 

The main app consists of two blocks: the user app and the module for working with the stations. EnerGO became the first project where we tested the waters of IoT development — Chinese power bank charging stations. We buddied up with Google Translate to make sense of the Chinese original station documentation. Of course, the result of such friendship leaves much to be desired — that’s why we contacted the station manufacturer from China and the previous client’s developer who worked on the first version of the desktop app. Although the old code was written in Java (we work with Node.js), we managed to make reverse engineering and got the gist of it.

We found out that:

  1. Station ≠ server It sends queries but doesn’t process them.
  2. Station connects to a fixed IP And we cannot change it.
  3. Station is set up to work with mobile service providers Spoiler alert: not with all of them 🙃
See also  Photographers, $250,000 of investments, and 300 screens of 'some sort of' design. Purrweb’s case

Check the connection

Keep in mind that the charging station is not just a ‘box’ with power banks. It’s a smart device with its own SIM card Internet connection. And the SIM cards played a dirty trick on us. Originally the Chinese stations don’t work with Russian SIM cards. The stations have to be rewired and we did that in China. When we started testing it, the stations still didn’t want to work in the right way. We spent much time trying to find out why. Thought that we’re dumb because there were requests in the logs. It turned out that we’re not. The stations palled with all Russian operators except for one — Beeline. Guess which one we’re using all this time?

The teamlead of the project, looks back at that a-ha moment with a smile.

Teamlead on EnerGO

When we realized how the station worked, we tried to connect to it with our SIM card. But it didn’t work out. For a long time, we couldn’t figure out why the station didn’t log in to our server. We saw the queries but they weren’t making it up to the server. We switched the Beeline SIM card to another operator, and off it went. It turned out that the station didn’t ‘respect’ Beeline.

Teamlead on EnerGO 
IoT mobile app development. The back view of the Energo station.

The charging station is not just a ‘box’ with power banks

Mission possible: change the IP

It was impossible to deploy the station on-premise. You have to constantly have it connected to the up-to-date code run on a server. This ain’t handy at all. 

We couldn’t change the IP by ourselves either. At least the manufacturer said so. We asked them to help — got the TeamViewer installed, gave access to the code, and observed the magic happening. 

Teamlead on EnerGO

Without the Chinese changing the IP would be hard indeed — it was written in hieroglyphs. Surely, we noted all the steps and then figured out that they input the hexadecimal data in a particular order. It wasn’t a big deal to render and translate ASCII to HEX. That’s how we learned to change the station’s settings

Teamlead on EnerGO 

React Native and backdrops

The client badly wanted to have iOS Maps-like backdrops in the app. We thought that it’s just a matter of 4 hours, but it turned out to be a bit harder. 

React Native uses JavaScript for animations. So, when you animate all properties of an element, the frame rate drops down to 30fps.

We got creative and found the solution: use the PanResponder API and make the absolute object layout. Thanks to the right positioning, we managed to ‘hide’ the backdrop — it’s already there in the main screen. So, when the user swipes up for a particular amount of pixels, the magic happens. 

Teamlead on EnerGO

We wanted to have beautiful and fast-working backdrops. So, we found the solution but had to enter many variables for every position of the backdrop. The screen sizes vary a lot — that’s why it was important to find the one-size-fits-all interface layout which would be displayed without screw-ups in 100/100 cases. So said so done

Teamlead on EnerGO 

Had to be done yesterday

When the first app was ready, those two extra apps ‘entered the chat’. 

Although there were no difficulties with developing the app for advertising, the deadlines were really tight. The development of that app was an obligatory requirement from metro administration. The app itself works simply: it pings our backend and picks up a playlist with ads. If there is a new playlist, the app just downloads and plays it. 

Telegram news about Energo stations in metro. IoT mobile app development.

EnerGO stations are spotted in Moscow metro

The third app for technicians became a priority after the main app release. We realized this after launching several stations in the cafes: the technicians had to rent power banks with real money to maintain the system. 

The deadlines were our main ‘headache’ yet the whole thing was easy to implement. There was ready-made code on the backend, we only needed to tweak the client-side a little bit. In terms of functionality, the app is similar to the one that users download to rent a power bank. We focused on the deadlines and didn’t pay much attention to the UI part.

To hell with the deadlines 

It’s pretty hard to find a project that started in 2020 and wasn’t affected by the COVID. Initially, we expected to get the stations in the middle of November 2019. However, at that time there was already a lockdown in China. The shipment was delayed first to the middle of December, then to January. While we were waiting for the power banks and the stations, we went beyond the MVP: made animations in the app, created the landing page, and tweaked the admin panel. 

We facilitated the customs process as hard as we could — answered the technical questions in the declaration. By the end of January, the stations made it to Moscow. One small station was delivered to our office in Omsk for app testing. A large station wasn’t delivered though because it’s too heavy and bulky. But we had to test the app on it anyway — the flow of the small and large stations differed a lot. To be 100% sure of the successful launch, our TeamLead headed to Moscow field testing. IoT app development isn’t an easy matter 😅

See also  Is React Native a good choice for ‘advanced’ functionality? Agriculture software development case study

People have their own logic 

The first stations were located in Moscow cafes. And right off the bat, we stumbled upon a classical case — people were not acting as we planned them to. 

Most were simply unfamiliar with the format of power bank renting. They could not figure out how it worked: fretted and fumed a lot. Some users thought they should insert the smartphones in the charging slots. So we came up with the solution to write detailed instructions on the stations. That solved the problem.

Instruction on the stations. IoT mobile app development.

Now it’s clear, how this thing works

The installation of the charging stations in the metro turned out to be a real challenge. Because of the anti-terrorist measures, there shouldn’t be any open containers in the metro station (e.g. boxes or waste bins). That’s why for the metro we purchased special stations with closing shutters that can be opened only from the app. In the small stations, the shutter can be opened by pushing on it. 

We had to write a separate return flow and write new requests on the server. In such a way the history of all openings and closings is stored on the backend and some crazy people will not be able to litter the station or plant a bomb in it.

For the return flow, we suggested an interesting design solution. Now the app is asking the user which station he looks at. The small one — insert the power bank. The large one — scan the QR-code and wait when the shutter opens. If the request is successful, the green light blinks to the left of the slot. 

See also  Music marketplace for author of Hollywood trailers: how we helped the client jump into a highly competitive market. Purrweb’s case

More stations and reaching the breakeven point

Now there are 730 stations in Moscow, 100 of them in the metro. The biggest chunk of the traffic we expect to get in the metro, but we also don’t forget about the cafes. Until June 15, 2021, we plan to install 200 “toasters” in cafes. It’s a small 4-slot station. 

This is how it looks. 

Toaster — a new 4-slot station. IoT mobile app development.

“Toaster” — a new 4-slot station

The startup reached the breakeven point on June 1st. Now we are moving beyond the MVP.

“Only in the metro” filter 

In the middle of March, we released a renewed version of the app with the train button that lets the users filter only the stations in the metro. Yep, there are already so many stations.

Filter station in the metro. IoT mobile app development.

Push the train button to see the stations in the metro

Apple Pay and Google Pay 

There were no ready-made SDKs for React Native. So, we had to write our own app shells. At the beginning of April, we already deployed Apple Pay. Google Pay — in May.

In the backlog 

The app owner gushes forth with ideas on how to develop the project further. No spoilers, you will see it really soon. A great emphasis will be done on how people use the app — which tariffs are more popular, the renting frequency. We will collect the data and structure it. The more data there is — the better understanding we have. 

How useful was this post?

Rate this article!

29 ratings, аverage 4.8 out of 5.

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!