Our React Native EU Conference is back
REGISTER
arrow icon
Get your ticket for React Native EU conference
GreenBits

GreenBits

Greenbits: Creating a Hardware Module and an Offline Library

hire us
No items found.

INTRODUCTION

<cyan>A mobile app<cyan> that works as a station to weight products and print labels with QR code

Greenbits is a company equipping stores with hardware and software to weight and sell their products. Our goal was to create a mobile application for Android tablets which can work as a station to weight products and print labels with QR code.

GreenBits app screen


CHALLENGE

Integrating the <cyan>external hardware<cyan>

The major challenge with developing the app was to integrate the external hardware. There were a few basic requirements:

  • it should work with Zebra label printers and jewelry scales
  • this integration should be possible via USB, Bluetooth, and network
  • there should be an option of searching new devices, printing and measuring the weight.

Another big problem to solve was to make application network issues resistant. It had to work in both online and offline environments. The requirements were as following:

  • it should work without internet connection,
  • there should be an option of performing some actions in offline mode,
  • the data should be up to date all the time.
user of the GreenBits app

APPROACH

<cyan>Combining<cyan> Java and JavaScript

It was no surprise that nobody has created any React Native library to communicate with peripheral label printers and scales before. We had to move part of our development from JavaScript to native Java. We could have proceeded with one of the two possible approaches:

  • using an external Java SDK,
  • writing everything from scratch.

To support the offline mode we had even more options. This happens to be a common problem, so there were many available solutions out there:

  • use Realm Database to store whole offline data and synchronize data using WebSockets when online,
  • use advanced caching solution to cumulate data offline while using the application,
  • synchronize all data with API while starting the application,
  • not allowing any actions to be performed in offline mode,
  • queue every action in offline mode and call them after going back online.
GreenBits app screen

SOLUTION

External library that <cyan>adds an offline mode<cyan> to any React Native application

First of all, we had to deal with the hardware integration. We chose to use an existing third-party Java SDKs. We have created a Java module with standardized API which can be used in our React Native app. It allows to search devices via different connections, connect with detected devices and use it (for printing and reading weight). Source

After dealing with the hardware integration we started to think about the best solution for implementing an offline mode. We've decided to combine two different approaches together. We used Realm to store all important data. And we decided to synchronize it using WebSockets (in online mode) and also to fetch all data on every application launch and after going back online. This combined solution allowed us to be sure that the data in the application will always be up to date, even after a long period of being in an offline mode.

We also decided to queue every action when the app is in offline mode. We created a queue in Realm Database to allow case when a user does something in offline mode, then closes the app, opens it again and goes back to online mode. Every qued action should be called after that. We prepared this solution as a standalone offline library which can be used also in the other clients’ applications. The library allows to describe the shape of every data entity. There is also an option of configuring API endpoints for each data type and the behavior of WebSocket synchronization. Source

No items found.

OUTCOME & BENEFITS

Hardware module and offline library that can be <cyan>used across all clients’ applications<cyan>

After months of developing we have managed to meet all requirements and this was the result of our work:

  • an external React Native module allowing native connections with some hardware,
  • an external library which can be used to easily add an offline mode to any React Native application,
  • an Android application using above modules to support store workers and allowing to measure the weight of products and printing labels with code.
GreenBits app screen

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

contact

Let's work together!

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.