Cryptocurrency info app with SAP AppGyver – No Code Challenge

Purpose

This blog post is my entry to the SAP Low Code, No Code Challenge. My purpose for creating this app is for learning and getting to know 2 topics:

1. SAP AppGyver
2. Cryptocurrencies

I’ve always wanted to learn about the basics of cryptocurrencies so I decided to use this topic for this app challenge.

Resources

Cryptocurrency data: CoinCap API

Development tool: SAP AppGyver Composer Pro

My App

URL: https://mycryptocurrencyhubapp.appgyverapp.com/

Home menu

My app is a basic cryptocurrency info hub that has 3 menu options:

1. Cryptocurrency List – displays basic info about the cryptocurrency, in which exchanges it is traded and conversion calculator
   
2. Exchange List – displays the exchanges that are available in the CoinCap API and links to their website
   
3. Crypto Converter – standalone conversion calculator which also reuses a page that can be accessed via menu option 1 (Cryptocurrency List)
   

My Experience – Development

The look and feel of the SAP AppGyver Composer Pro is simple and easy to navigate. Left side of the screen for the components available, right side of the screen for the specifics of the selected component, bottom part of the screen for the logic of the selected component and on the top part of the screen is for the application configuration tabs.

Composer Pro UI

First thing I did was to set up my data source. The UI for this is straightforward so I did not have any problems with it. I used REST API direct integration for the app

data source setup

In each page creation, there are a couple of variables that can be created within the page. For this app I used the data variable for initializing an “instance” of the data source depending on provided info, the page variable for use in logic within the page and the page parameter for receiving of data from the calling page. Screenshots below are from a single page: Crypto Market Pairs. (a.k.a. Crypto Converter calculator)

data variable

page variable

page parameter

I primarily used the list component and a couple of variations of it for this app. The one thing common to them would be the filtering of data which I achieved using a downloaded combo box linked to a page parameter and a formula in the list component visibility property filtering.

combo box and page variable

list visibility formula

I used button components within the crypto details page for “buy” and “sell” info. When clicked, user will be led into a page that would provide details on the cryptocurrency selected and the “buy” or “sell” info. The target page for both of them is the same and differentiated by the page parameters passed on button click.

button and variables passed to next page

target page list filtering depending on page parameter passed

For the calculator, I used the automatic two-way binding of the input parameter to automatically calculate the conversion while typing and configured the keyboard type to decimal-pad to ensure numeric input.

onChange event and formula calculation with page variables

input keyboard type

For the calculator initialization (menu option 3), we have a pop out notification in case all details are not provided by the user. This was achieved by using IF logic formula on button click and alert component.

data validation

alert message

Another config made to the calculator initialization would be the clearing of variables once the primary input (Buy crypto) was changed. I used event property ‘Selected value’ changed of the dropdown field component to clear the secondary page variables for the user to start over.

calculator variable reset

For the exchange list, I used the Open URL low logic to open the website for the exchange selected in a new tab in the browser.

open exchange URL

My Experience – Testing

Testing was quick and easy with the SAP AppGyver preview app that I downloaded in my phone. The changes are instantly applied and accessed once the app is saved in Composer Pro.

preview app

If you don’t want to download the preview app in your phone, they have a web version of it that is available as well.

web preview

My Experience – Summary

I don’t have much experience in UI development or mobile development so being able to build an app like this is an awesome experience for me. The app itself still needs improvement but developing it has given me enough basic knowledge on the 2 topics that I set myself on learning that I can build on.

In my opinion, the tutorial for the SAP AppGyver Composer Pro was well made and covers a little bit of everything that is enough to provide information when just starting out. It would be nice to have the “app pages” page have some info on which pages are linked to each other as I imagined it would be a huge help for app developers managing multiple app pages (not sure if it’s already there and I missed it so just let me know in the comments).

pages (condensed view)

I would also say that graph/chart components would be interesting to see as part of the standard component list and would be valuable for applications focusing on quick data analysis/overview.

Overall, joining the challenge was an enjoyable experience. There are still other aspects of SAP AppGyver that I still haven’t explored like the UI themes, security, other deployment options, other components, etc. but this is a good start for me 🙂