My first experience with AppGyver

[TimothySanty]

I had been looking for an excuse to dig into the whole Low-Code/No-Code (LCNC) hype for a while. With a tool named after my favorite youth series, a challenge from SAP, a few days off and the chance to win a free hoodie, I had no reason to put this off any longer.

I decided to take up the challenge playfully. Since I now have a lot of free time ahead of me thanks to LCNC, I wanted to make an app to make the most of that time...enter Procrastinator V1.

You can find the details about the LCNC challenge in this blog post.

You can find the web version of the Procrastinator here.

My App

APIs have become the norm in software development today, including in the ABAP world. That's why I definitely wanted to take a closer look at the API connectivity options. I had in mind to create a homepage with three options, each with a suggestion to kill some time. With that in mind, I started looking for free public REST APIs. That's how I found BoredAPI, JokeAPI and DogAPI.

I may be one of the worst graphic designers with absolutely no sense of style. That is also one of the main reasons why I have always remained a backend developer. For this reason, I definitely also wanted to test how easy it is to get the UI to a somewhat acceptable level. I would be happy if I could use the delaware theme colors in the Procrastinator.

I didn't want to make it too easy on myself. I decided to create just one result page that would then dynamically display a title and result depending on the user's menu choice. DogAPI is also a bit more complicated as it returns a list which I then have to process and adjust the image url based on the result.

Coding the Procrastinator in the classic way would undoubtedly take a lot of time. HTTP calls to the various APIs, parse the result of the API, create data structures to store the results, build screens and buttons, program navigation between screens, and so on. I am very curious in how much time I can build all this via AppGyver. I set the bar for myself at four hours. Anything more would be disappointing to me.

My Experience

Designing the UI

Okay, let's do this. The onboarding process was very simple. In no time I had an account and the “Composer” up and running and I could start building my app.

At the bottom of the "Composer" you can open a toolset called "Your Learning Status", which contains some tutorials to help you get started. It guides you through the entire development process through gamification where you can earn a higher level for each tutorial you complete. They have text and a training video. Short and sweet. Very handy! “Ain’t nobody got time to read a manual”. I watched a few to get things rolling but couldn't wait to get my hands dirty.

I started my app by creating the user interface. It's very clear how to do this and in no time I had made my home screen with three buttons. As a next step, I wanted to know how easy it is to change the default layout. To do this, I watched the "Change component styles" tutorial. In a few clicks I was able to completely customize the UI style to my preference, excellent.

It’s a nice feature that you can save your tweaked style so you can easily apply it afterwards.

Let's see what this app looks like on my phone already! Through the tutorial “Preview on device” I found out that there is an app on Android/iOS called “SAP AppGyver Preview” that you can easily download. Then you have to scan a QR code and you will get a menu with all your available apps. Click on the one you want to open and tadaa, magic! I love this feature.

App preview

Time to get those buttons working

The idea behind each button is the same. Call a public REST API and display the result on the screen.
To retrieve data from an API, you must create a data source and associate it with a REST API. You can do this in the "data" tab, as I learned from the "Use REST API to Display Data" tutorial.

I started with the BoredAPI, which is the simplest. It took me some effort to get everything working, but in less than ten minutes I got my results in a variable that I could easily use. Imagine! Ten minutes without any experience.

Connecting to an API made easy

Since I didn't want to create the same page three times, my result page needed to know which button was clicked so that I could dynamically set the header and result. It was very easy to create an app variable with a value that I could then retrieve on the page so that I knew which button was clicked.

What I did was bind the result page header to a formula. The formula replaced part of the header with the value of the app variable. I was able to do this without watching a tutorial. After spending some time in the composer, things start to come naturally. That's what I like most about this tool. It is so intuitive and easy to use.

Bind the output of a text to a formula

Most properties of a screen object can be linked to a formula, as well as the "visible" property. I needed this to show/hide image container for the random dog picture.

Putting it all together

To complete the development of the Procrastinator, I still had to code the logic behind the buttons. You do this by creating a so-called “logic flow”. As an example, you can see the logic flow of the "Random Dog Photo" button.

1. store the result of the DogAPI in an app variable (this is an array)


2. set an app variable so the result pages know which button was clicked


3. open the results page and set a page parameter (p_imageurl) containing the contents of the first record of the DogAPI result (which contains the image url)

Logic flow for “Random dog picture”

My Conclusion

The Procrastinator was created in about an hour and a half, which is pretty amazing considering I had no previous experience with AppGyver or with mobile development in general. This contains quite a bit of trail and error and research. An experienced AppGyver developer will probably make this in half an hour.

What I absolutely love about AppGyver is that it is so intuitive. After a while, things just start to come naturally. This is undoubtedly due to my nearly two decades of programming experience. For a user with no technical background, the learning will be much higher.

Of course, the tool cannot help you with graphical insight. The Procrastinator still looks like it could have been designed by a ten-year-old. This means you still need a graphic designer if you want to make it more professional. There is the option to save a custom style, but unfortunately it is only saved per app. It would be a great added feature if you could save custom themes that you can reuse in other apps. This way I could have our graphics team create all the beautiful stuff that I can then easily apply to my app.

Another nice feature could be the integration with SAP backend annotations. Imagine if you can generate the UI in AppGyver like you would in a Fiori Elements app and then continue your UI development in AppGyver.

There were some other minor annoyances like the fact that you can't copy and paste pages or the fact that the application can take quite some time to save, but overall I thought the experience was great and I see great potential for it.

Learn more

SAP Learning Journey

AppGyver Academy

YouTube tutorial by thomas.jung

SAP AppGyver Community