Building cross platform mobile app using Kony AppPlatform

In the last 48 hours, we built a fully functional production grade Android and iOS app using Kony AppPlatform. The rest of the blog talks about the experience. The app allows a user to get a real-time exchange rate for any two cryptocurrencies. It fetches the exchange information from ShapeShift APIs

Kony AppPlatfom primarily consists of two components:

1. Kony Visualizer: Kony Visualizer is an IDE that allows building mobile application interface using drag and drop – similar to Android Studio or Xcode. If you are developing an application, make sure you download Kony Visualizer Enterprise edition.

Kony Visualizer
Kony Visualizer Enterprise

 

2. Kony Fabric: This helps you build a server-side application for your mobile application on Kony’s cloud.

Kony Fabric
CryptoExchange App on Kony Fabric

Building application using Kony Visualizer:

The interface to build the application is very simple. Each screen is essentially a form. You create containers (flex containers) which are a logical group of various UI elements. In the screenshot below, frmDashboard represents the dashboard screen. It has lblTitle which represents ‘Choose Which Asset to Trade’ title. After that, there are three containers corresponding to three states in the UI – loading, loaded, error. In the example, below I have turned its visibility on for demo purpose.

You can control the size of the container by adjusting various properties under Look tab on right side. Notice that it is set to left as 24dp  and  right as 24dp . This essentially instructs the runtime to stretch the container width wise to occupy full width of the screen and keep at 24dp  to from both left and right edges.  Center X as 50%  tells the framework to center it horizontally and  Center Y as 50%  to center it vertically.

Screen Shot 2018-10-03 at 12.41.35 AM

You can similarly layout the rest of the components. In order to share the same style, you can create something call Skin (under Skin tab), very much like a CSS class in HTML.

Wiring up code

In order to add interaction to your user experience, you can directly invoke common actions (such as navigating to a form) by clicking under ‘Action’ tab and associated handler for the right event of the element. The below screenshot associates  onClick event handler for ‘Get Started’ button on the home screen to navigate to the dashboard page.

Screen Shot 2018-10-03 at 12.53.26 AM
onClick handler set to navigate to dashboard page

In order to handle more complicated scenarios, you can write custom Javascript. Each form has an associated controller where you can write the functions specific to the form. As an example, when the form is initiated, we invokegetAllCoins  function to fetch all the available cryptocurrencies from our backend.

  getAllCoins: function() {
    var self = this;
    self._showGetAllCoinsLoadingContainer();
    CryptoExchangeServices.getAllCoins(function (err, response) {
      if (response && response.coins) {
        self._coins = response.coins;
        
        self._setDepositToken(self._coins.length > 0 ? self._coins[0] : null);
        self._setReceiveToken(self._coins.length > 1 ? self._coins[1] : null);
        self._showGetAllCoinsLoadedContainer();
        
        // Get exchange info
        self.getExchangeInfo();
        
        self._setClickHandlers();
      } else {
        self._showGetAllCoinsErrorContainer();
      }
    });
  }

It relies on CryptoExchangeServices  module to fetch all the coins. Any functionality that is non-UI specific can be written in a separate module that is available to all controllers. In our case, I createdappServices.js and added it under Modules folder.

CryptoExchangeServices = {};

CryptoExchangeServices.getAllCoins = function (done) {
  var serviceName = "Shapeshift";
  var integrationObj = KNYMobileFabric.getIntegrationService(serviceName);
  var operationName =  "getcoins";
  var data = {};
  var headers = {};
  integrationObj.invokeOperation(operationName, headers, data, function (res) {
    done(null, res);
  }, function (res) {
    done(res);
  });
};

As you can see, this makes a call to Kony Mobile Fabric. The app on Kony Fabric talks to ShapeShift and returns back the response.

Kony Fabric

In order to talk to an external service, you first need to create a new service:

Screen Shot 2018-10-03 at 1.08.58 AM
Add new service to your app on Kony Fabric

Once you have done that, you can define basic details about the service you are going to integrate to and expose various operations to it. Most of the fields are pretty self-explanatory. For Shapeshift integration, this is how the service definition looks like:

Screen Shot 2018-10-03 at 1.10.41 AM
Shapeshift service definition on Kony Fabric

I will talk more about building a marketInfo endpoint on this service:

In order to get the exchange info between two coins, a call to Shapeshit looks like:

https://shapeshift.io/marketinfo/btc_ltc

In order to accept the currency pair, we first define front end url exposed to mobile app (or any other client) in general as follows. It accepts pair variable in url.

Screen Shot 2018-10-03 at 1.12.56 AM

We also define it as part of Request input

Screen Shot 2018-10-03 at 1.13.12 AM

Once it’s done, we tell Kony Fabric to pass this variable to Shapeshift endpoint as follows:

Screen Shot 2018-10-03 at 1.12.36 AM

Now, the call to Kony Fabric can be made from the app as follows:

CryptoExchangeServices.getExchangeInfo = function (pair, done) {
  var serviceName = "Shapeshift";
  var integrationObj = KNYMobileFabric.getIntegrationService(serviceName);
  var operationName =  "marketinfo";
  var data = {
    pair: pair
  };
  var headers = {};
  integrationObj.invokeOperation(operationName, headers, data, function (res) {
    done(null, res);
  }, function (res) {
    done(res);
  });
};

In the next blog, we will talk about how to set up your environment to enable debugging and hence faster development.

Overall, the platform seems pretty straightforward and can be used to build cross-platform quickly.  Questions? Drop in the comments.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s