AppGyver iOS App built on S4 Live Replicated Data in HANA Cloud (OData service)

[VinayBhatt]

Introduction

In this blog post I'm sharing my experience working with AppGyver -SAP's No code/Low code platform to build creative Mobile/desktop apps.

I developed my first iOS app, which gets real time updates on changed records in S4HANA, replicated using a real time SAP Data Intelligence SLT pipeline to HANA cloud and threafter exposed as an Odata Service.

Dataset

A "Flights" table in S4HANA, with details on Flight Carrier, connection ID, date, available seats etc.

We are going to keep a live track of available seats across different connections in the Mobile app.

Architecture

I have used replicated data from S4HANA in HANA cloud , as this lets us also utilize the multi model capabilities of HANA cloud. In this blog post the dataset is only from S4 but we can think about combining datasets from other sources, aggregating on the fly and using predictive capabilites in HANA cloud to reach a data model which best serves the purpose before exposing it out (bounded with several privacy controls) using CAP Odata V2/V4.

 

A Quick Demo

Here is a 3 minute video with the end to end demo:

References

The entire setup was done as a learning exercise and I used following great blogs published in our resplendent SAP community  :

ODATA with HANA Cloud by denys.kempen

ABAP Integration in SAP Data Intelligence by britta.jochum

Build your App in minutes using Appgyver  by muralidaran.shanmugham2

Configuration Steps

S4HANA Table

Here is the S4HANA sample table with the records filtered by Carrier ID LH and connection ID "2407". To simulate a change in records I will change one of these filtered records manually.

 

SLT Replication task

SLT replication usign "SAP Data intelligence" Scenario. This is Real Time Replication and the initial load has already finished, as seen below the replication server is waiting for changes in records.

 

SAP Data Intelligence (SAP DI) Pipeline

Pipelines orchestrates the data movement, the source here is the SLT Replication task ( SFLIGHT Table) and the Target is SAP HANA Cloud. The Connection to HANA cloud is defined in SAP DI and in the HANA cloud operator below we define the

SAP Business Application Studio CDS Project

To setup this project complete details are available in the blog referenced above(HANA CLOUD ODATA). Only change is in the server.js file to enable CORS.

ODATA Service:

 

Building the AppGyver Application

AppGyver Composer Pro

REST API Data Source:

First step is to build our Data Resource i.e REST API Direct Integration and it is covered in the blogs in reference section. I would highlight here the use of Authentication token in the HTTP Header, well its simple enough , below screen shot will make it clear . Please refer the HANA CLoud ODATA blog to know how to generate the Authorization Token.

 

 

 

Once you have the Data Resource configured its mostly just drag & drop of elements from the AppGyver Composer and binding the data variables in the UI elements.

Passing Variables between screens:

This is very easy with the use of page parameters, in the below screen you see that clicking on a flight on the main screen (Event :Component Tap) opens Navigation to the second page (Ignore 'Set App variabe in between I didn't use it finally) and then on the Navigation:Open Page properties you can populate the 2nd page variables from the current variables in page1.

 

Filtering & sorting your data: 

To populate the drop down and to sort the data I had used this useful video :



Some formula I used using the above video:

drop down formula :

CONCAT([{label: "No selection", value: ""}], UNIQUE_BY_KEY(MAP(data.btpvinapp1,{label:item.carrid,value:item.carrid}),"value"))

Sort the data by Date : 

SORT_BY_KEY(data.btpvinapp1, "fldate","desc")

Filtering the data based on selection in dropdown:

CONTAINS(LOWERCASE(current.carrid), LOWERCASE(pageVars.CARRIER_ID)) && CONTAINS(current.planetype, pageVars.AIRCRAFT_TYPE) && CONTAINS(current.connid, pageVars.conn_id) && CONTAINS(current.repl2,"")

Conclusion

I didn't try "Authentication" in the application among other features and necessities for a productive application deployment but I found AppGyver very easy to use and made me wonder on other possible usecases specially the use of ML deployments using the camera in iPhone, which i would be learning subsequently.