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

What is Kony AppPlatform?

Kony Studio from Kony Inc. is a mobile app development platform used for the creation of native and cross-platform mobile apps for Android, BlackBerry, iOS and Windows devices.It allows developers to build cross-platform mobile apps using a single codebase.

Kony AppPlatfom primarily consists of two components:

• 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 Fabric: This helps you build a server-side application for your mobile application on Kony’s cloud.

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.

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 handler for ‘Get Started’ button on the home screen to navigate to the 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 invoke getAllCoins function to fetch all the available cryptocurrencies from our backend.

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.

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:

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:

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:

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.

We also define it as part of Request input

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

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

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

What’s the biggest thing you’re struggling with right now that we as a technology consulting company can help you with? Feel free to reach out to us at info@jalantechnologies.com. We hope our assistance will help!