Beginning of 2021, SAP acquired AppGyver – a no-code platform that supports the development of  React and React Native based apps for mobile and web. This service is now Generally Available on SAP Business Technology Platform (BTP).

I have spent few days exploring the capabilities of AppGyver and I am sharing my experience in this blog post for those who are looking to get started. You really don’t need any coding experience to get started. AppGyver Composer Pro is the web-based tool to drag and drop controls and configure properties. Though it’s a no-code platform, I found there are still ways in which you can add JavaScript in case you want additional flexibility.

Getting Started

AppGyver offers a trial environment for anyone to signup and use the platform to build applications. The Composer Pro provides an easy to use visual editor to configure and build your apps.

When you create your first project, you can access the on-boarding tutorials/videos at the footer and they guide you on all the fundamental concepts. You can follow the tutorials and apply those concepts on the open project and monitor your progress. I really enjoyed this feature as it gave me  a structure on what I need to know before I go away and build my first app.

You can also find these video at AppGyver Academy

There are plenty of Introductory blog posts from SAP Community Members. Please go through them and you will be able to easily get started and build simple apps.

Developing your App

I recently came across a requirement to showcase AppGyver to build extensions for SAP Cloud for Customer (C4C). The end user should be able be able to lookup customer contacts and product information in real time using a mobile device. The app should also leverage some of the device capabilities like the use of camera for barcode scanning to fetch product details as well as integrate components like Google Maps to show the location of customers.

Here are the pages which I have used within the project. A Home page to display information, List & Detail page for customer contacts and a Product scan page to lookup product details.

AppGyver supports the integration of REST APIs. I have configured C4C APIs in the Data Configurations and used the List control within the List page to display customer contacts.

In the Details page, apart from using the core title label components to display the customer details, I have used WebView component from the marketplace to render Google Maps. AppGyver comes preloaded with set of core components. However, if you are looking for additional components you can browser through the component marketplace and install them for your projects.

In order to scan the product barcode, there are few options which are available to tap into the device capabilities. As you can see below, I have leveraged the “Scan barcode” in the flow logic and used it to fetch the product details from C4C.

The whole app took me about 15 mins to build. Here is the outcome of this project.

Dealing with CORS Issue

SAP Cloud for Customer (C4C) has an OData API reference library and this was helpful to identify the relevant business objects and properties. However, when I tried to use these REST APIs within the Data Configuration of AppGyver, it gave me a CORS error.  Most of my time went into finding a solution for this.

Few other members in the community bumped into similar issues previously. However, they were able to overcome this by enabling CORS within their service which is deployed on SAP BTP. Since I am directly consuming a service from a SaaS solution like C4C, I had to look for alternate options.

This is where the SAP Integration Suite became handy. Many thanks to my colleague Paul Fewster who showed me this approach.

The below steps might not be easy to follow if you have not accessed SAP API Management before. I would encourage you to go through some of the Developer Tutorials to familiarize yourself before you attempt to use it to solve the CORS issue. Using API Management, I was able to create a proxy endpoint and define no routes for the preflight request which comes in via the OPTIONS method.

Within the Policies of the API Management, I was able to assign a post-flow message which sets the Header attributes for CORS.

I have also used API Keys which needs to be provided every time AppGyver invokes these APIs

These steps have also been documented in this guide. Using the API Proxy URL along with the API Keys, I was able to successfully create a data configuration within AppGyver.

Below is the Solution Diagram of how AppGyver connects with C4C using SAP Integration Suite

App Deployment

You can easily preview your app either using the preview portal or using Preview app from the iOS/Android store. The video which I have recorded above is using iOS Preview App. Though there are debugging capabilities which you can turn on to evaluate status of events and variables, I found the preview portal convenient as you have access to the browser developer tools to trace any issues.

You can explore the distribute menu which gives you options to build the app for Web/Mobile usage

I would like to point you to a blog post from Lalit Mohan Sharma where he describes how you can build and enhance the Web App and finally deploy it in the Cloud Foundry runtime of BTP. I hope these manual steps will be automated soon.

Availability & Pricing

You can find more details on AppGyver in the SAP Discovery Center – including the regional availability and pricing. Existing SAP BTP customers on CPEA & Pay-as-you-go consumption model would also get access to this service.

Overall, I found it easy to get started and build simple apps. These would be great for customers who don’t have professional developers and want their in-house teams to build apps quickly to support some of their business requirements.

If you have any questions on this topic, please raise a question in the SAP Community Forum.