Skip to Content
Personal Insights
Author's profile photo Therese Veronica Nerona

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%20menu

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
    Cryptocurrency%20List
  2. Exchange List – displays the exchanges that are available in the CoinCap API and links to their website
    Exchanges%20List
  3. Crypto Converter – standalone conversion calculator which also reuses a page that can be accessed via menu option 1 (Cryptocurrency List)
    Crypto%20Converter

 

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%20Pro%20UI

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%20source%20setup

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%20variable

data variable

page%20variable

page variable

page%20parameter

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.

combobox%20and%20page%20variable

combo box and page variable

list%20visibility%20formula

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%20and%20variables%20passed%20to%20next%20page

button and variables passed to next page

target%20page%20list%20filtering%20depending%20on%20page%20parameter%20passed

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%20event%20and%20formula%20calculation%20with%20page%20variables

onChange event and formula calculation with page variables

input%20keyboard%20type

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%20validation

data validation

alert%20message

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%20variable%20reset

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%20exchange%20URL

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%20app

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%20preview

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%20%28condensed%20view%29

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 🙂

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Bitan Chakraborty
      Bitan Chakraborty

      This is awesome.. nice write-up with amazing exploration. Thanks for the blogpost 🙂

      Author's profile photo Sandra Hathaway
      Sandra Hathaway

      Cool idea! Thanks for the detailed description and feedback on features. It's great to learn that even with limited UI and mobile app development experience, you were able to create a crypto hub app like this.

      Author's profile photo Hon Sen Ngau
      Hon Sen Ngau

      Hi, thank you for the well written blog, it goes to show how easy it is to use SAP AppGyver to build a app. thanks.

      Author's profile photo John Michael Rono
      John Michael Rono

      Good idea having a cryptohub, and you made it look so easy! Excited what else SapAppgyer can do in the future 🙂