⛅Weather App with SAP AppGyver and BTP

Let’s build a weather application using SAP AppGyver and SAP Business Technology Platform. 

The UI of the app will be built using the AppGyver and the backend server will be deployed on the SAP BTP as an MTA application.

The architecture of the application looks something like below:

Steps: 

1. Develop and Deploy node.js server on SAP BTP

Our application is supported by the node.js server deployed & hosted on the SAP Business technology platform as a MTA application in the cloud foundary environment.

I’ve used the BTP trial account to deploy the server. The codebase of the server can be found at this github repo 

Overview :

1. 1. The user enters the location name/search term.
   2. The server takes the location as a query string and determines the Latitude and Longitude of the place from the Mapbox Geocode API. 
   3. The coordinates are further passed to the OpenWeather API to fetch the weather details of that location. 

You can sign-up to access the trial account of these APIs :

• • https://openweathermap.org/
  • https://www.mapbox.com/ 

Index

 Geocode

Forecast

mta.yaml

Note: make sure you have the mta.yaml file which is basically used to bundle the modules and deploy the app on the BTP

After successful deployment, you can test your service end-points using tools like Postman.

2. Build the frontend or UI of the app using AppGyver

The AppGyver side of the app looks like as shown in the below screenshots.

This app consists of only one page, where the user can enter the location name, and on tap of a button, the weather details of that location are shown on that same page.

The landing page of the app:

Create Page and Data variables:

Page Variables:

Data Variables:

Bind UI elements with the variables which we created earlier:

Formula to bind with image element

The Flow Function that will run on tap of the button looks like below after adding all required functions

Flow Function config: 

Your node server running on BTP is added as a Data resource at this point with the base url of the service.

Endpoints of the service are defined with query parameters.

3. Save and Run 

Save all the changes to the application in the AppGyver and use the launch tab on the top to launch.

Follow the instructions on the page to launch the app on a mobile device or as a web app in your browser.

In the below videos you can see how the app looks while running on a mobile phone and an iPad.

I’ve kept the development of the app as simple as I could. 

Please share your feedback and thoughts below & have fun while building amazing cross-platform applications with SAP AppGyver.

Check out the below blog series by Shibaji to get more familiar with Appgyver’s basics and terminologies.

https://blogs.sap.com/2021/03/17/appgyver-a-new-joy-to-build-apps/

For more info on the AppGyver, you can check the Appgyver product page :

• https://www.appgyver.com/
• https://docs.appgyver.com/appgyver-academy/quick-onboarding-videos