Cryptocurrency info app with SAP AppGyver – No Code Challenge
source link: https://blogs.sap.com/2022/06/03/cryptocurrency-info-app-with-sap-appgyver-no-code-challenge/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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:
- SAP AppGyver
- 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:
- Cryptocurrency List – displays basic info about the cryptocurrency, in which exchanges it is traded and conversion calculator
- Exchange List – displays the exchanges that are available in the CoinCap API and links to their website
- 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
Recommend
-
10
Mahesh Gonda May 17, 2022 3 minute read ...
-
10
Yogesh Gupta June 6, 2022 3 minute read
-
3
Sebastiano Marchesini June 7, 2022 5 minute read...
-
6
Aocheng Yang June 8, 2022 11 minute read ...
-
1
Patrizia Rossi June 10, 2022 5 minute read...
-
7
Pawan Kumar June 10, 2022 3 minute read ...
-
5
Nilesh Puranik June 10, 2022 5 minute read
-
10
Anthony Ewewale Owolabi June 12, 2022 3 minute re...
-
4
Creating a Library Application using SAP AppGyver-low-code-no-code-challenge In the previous blog, I have explained how you can use Barcode scanner functionality to scan the barcode of any book to fetch their details using...
-
3
Introduction SAP AppGyver Low-code and no-code (LCNC) platforms are really cool; this is what I experienced after participating in the
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK