Connecting AppGyver Application to public API for fetching exchange rates
Let me share my learnings on SAP Build apps for connecting a public API by parsing URL from screen inputs .
SAP Build Apps is a no-code app builder tool which helps us to develop enterprise-grade applications for desktop, browser, and mobile at a faster pace.
In this tutorial we will build an application using AppGyver community edition (also referred as SAP Build Apps ) .
For today we will build an exchange rate converter application by consuming public API .
Thanks to https://Exchangerate.host as they provide open API for getting exchange rates dynamically .
After building this application we will be able to know
- How to consume a Restful API’s in SAP build app
- Passing screen inputs to API place holders.
- Binding the results back to screen.
Once we are aware of consuming any open API’s it will be same play with our real time business cases like getting a Purchase order / Sales order details etc..
Will start building our application …
As a prerequisite create user account by signing to AppGyver platform.
After login to application click on CREATE NEW
- Provide your application name you will directed to UI Canvas ,on Left side of the tool we can see all the UI & right side we can define properties of the screen elements .
- We will add a Title & two input field elements.
- In the latter step we define a data variable for holding the input data & further this input values are parsed to URI.
- Desired properties can be defined for each element of the screen . .
- On top of the tool, you can find toggle tool where we can switch between views & data variables.
- Now we will switch to variable & define three App variables, two of them will hold screen input values (Form & To currency codes) and the other one for storing the API result.
- We can define different kind of variables like APP variables (Variable data can be accessed throughout the App), Page variables (variable data can be access with in the defined page)
- Once we define data variable, we will navigate to DATA tab where we define our backend data source .
- For our application it’s a REST API direct Integration & our source of data will be a public API
As we want to fetch exchange rates dynamically, we have to define a place holder for From & To currency values.
Select Get records(GET) among the CRUD option as we are fetching only single record from API repose .
Complete URI will look like this
Note : Place holder are case sensitive .
You can test the results of API by providing static text to place holder & set response schema to app
Now we are ready with our backend data Config. 😊 … Best part of the tool is we doesn’t required any third party tool like POSTMEN for testing API calls .
We will navigate back to UI & bind the variables.
Assign App variables to input fields which we had created in our earlier steps from properties tab.
Adding button element to the app which action trigger our API call.
At bottom of the page, you can find the logic to Button & define what actions need to be performed for it.
As we have only one data source define, by default Get record action will refer to same.
Output of the Get record will be assigned to the App variable (ExchangeRate) which was defined to hold the response value in our previous steps.
Assign the data variable with specific value which we are intended for .
Bind rate from response scheme to our output variable ExchangeRate .
Added one Text element for displaying exchange rate & bind ExchangeRate variable to text field .
All done with our App development 😉 ,,, will test our application ..
We can test in web portal, or we can download SAP build apps from App store connect it to your AppGyver community edition.
Here I am displaying results from mobile application using SAPBuild Apps.
SAP Build Apps will drastically reduce development efforts on UI & we can easily integrate pre-built business logic components to our application which can address most of the business use cases.
In this blog, I had taken a small use case of consuming RESTful API by parsing the URL from screen input elements & binding the API response back to UI element for displaying the results .
I hope you found this blog post informative and helpful.
Please share your feedback, it would be helpful to learn and explore more!
Thanks for taking your time & going through the blog.
Related Information :