This article is about my experience using SAP AppGyver, SAP's No-Code / Low-Code Platform. The challenge details are described here:
You can find the App I created during this challenge here:
I have never ever used SAP AppGyver and was able to build the App within 3 hours. My software engineering background has helped me maneuver some pitfalls. But with the given tutorials and documentation in place it should be possible for non-developers to achieve the same results.
Now let’s dive into the details.
In Germany we have the situation that there is no API to access food warning data, only a RSS feed. To overcome this challenge I found a handy tool to convert a RSS feed into an API: rss2json.com With this “proxy” I created a data resource within SAP AppGyver to access the latest warnings.
What impressed me was the automatic schema detection of the REST API response. It collects the property name, datatype and even example values automatically. I needed to adapt here and there the datatype, but overall it works.
I realized that SAP AppGyver checks the datatype while working with the data resource. Thus, only the right datatype can be used. This helps avoiding errors while implementing the App.
Example values are helpful, as they are displayed in the App editor as preview texts. Also while wiring the data to components or using them in formulas the preview helps to build it properly.
There are a couple of “standard” components which can be used to compose an UI out of the box. More components can be found in the marketplace. Having a marketplace is actually a great idea. Not sure what the plan is, but sharing custom components with colleagues or monetizing them could be quite interesting. Let’s see.
I liked an image list component from the marketplace and used it. It was straight forward to wire the data variable with the component. But then I ran into issues. It was not possible to wire the clicked (tapped) list item to react to it. After googling I found out that I am not the only one who has issues with that. That’s likely the downside of using components from a marketplace. You never know how well tested they are...
I decided to fall back to a standard component, which also looks nice. This time it was possible to access the selected data and open the details page.
Probably one of the most common use cases is to click on a list item and open a detail page. Initially, I thought to just pass the selected item to the page via a parameter. But I figured out that only primitives can be passed, such as strings and integers. The standard approach seems to pass only an ID and request the record from the API again using the ID as identifier. In general this makes sense, but in my scenario this is not possible.
The solution to pass an object to another page is to use an app variable in which the clicked (tapped) item is stored and then opening the page. This is not as intuitive as it could be. Passing a parameter of type object would be easier.
Then the app variable can be accessed within the details page and wired to the view components.
Now it’s time to code a little bit. I need two modifications from the text I receive from the API. This can be achieved using formulas. Very similar to Excel.
Date Conversion: I want to use a more human readable date instead of a technical one. This can be achieved using build in functions. In my case like this:
Text replacement: I receive html tags which cannot be displayed properly. Thus, I need to get rid of the HTML tags except line breaks. In my case this formula was the solution:
One very interesting feature was to see, that the formula gave me a preview of the output based on the examples which are attached to the data resource defined earlier. This eases development.
I wanted to redirect the user to the original alert on the official website. This was possible using the “Open URL” logic component from the marketplace. Again a good idea to have a marketplace, and this time it worked well.
The App can be tested immediately using a web preview. It even auto refreshes after something has changed in the editor. This way the development is very fast.
Another way is to use a preview App. I tested the iOS App. I could connect to my preview App using a QR code. Neat!
If something does not work as expected it is also possible to connect a debugger session with the preview. This was also self explanatory to me. Although I doubt, that a business user will ever use that feature.
The app can be build and deployed with a few clicks as web app to a subdomain of SAP AppGyver. A bit more has to be done if it should be added to the iOS or Android store. I have not explored it, but I trust in SAP AppGyver to handle this properly.
Initially I wanted to push updates to the user via push notifications. In practice this seems to be a bit more complex to setup and run than I thought.
This was a fun challenge. And I could finally try out a low-code / no-code platform.
I could experience many benefits. Especially, the development time can be reduced dramatically. And it does not require much technical knowledge. Thus, this platform enables non-developers to create Apps within a short period of time and minimum effort.
Writing this article took me longer than creating the App, seriously!
You can find the App I created during this challenge here:
My App - Food Watch Alerts
My Experience building the App
I have never ever used SAP AppGyver and was able to build the App within 3 hours. My software engineering background has helped me maneuver some pitfalls. But with the given tutorials and documentation in place it should be possible for non-developers to achieve the same results.
Now let’s dive into the details.
Getting the data
In Germany we have the situation that there is no API to access food warning data, only a RSS feed. To overcome this challenge I found a handy tool to convert a RSS feed into an API: rss2json.com With this “proxy” I created a data resource within SAP AppGyver to access the latest warnings.
What impressed me was the automatic schema detection of the REST API response. It collects the property name, datatype and even example values automatically. I needed to adapt here and there the datatype, but overall it works.
I realized that SAP AppGyver checks the datatype while working with the data resource. Thus, only the right datatype can be used. This helps avoiding errors while implementing the App.
Example values are helpful, as they are displayed in the App editor as preview texts. Also while wiring the data to components or using them in formulas the preview helps to build it properly.
Designing the App
There are a couple of “standard” components which can be used to compose an UI out of the box. More components can be found in the marketplace. Having a marketplace is actually a great idea. Not sure what the plan is, but sharing custom components with colleagues or monetizing them could be quite interesting. Let’s see.
I liked an image list component from the marketplace and used it. It was straight forward to wire the data variable with the component. But then I ran into issues. It was not possible to wire the clicked (tapped) list item to react to it. After googling I found out that I am not the only one who has issues with that. That’s likely the downside of using components from a marketplace. You never know how well tested they are...
I decided to fall back to a standard component, which also looks nice. This time it was possible to access the selected data and open the details page.
Navigation
Probably one of the most common use cases is to click on a list item and open a detail page. Initially, I thought to just pass the selected item to the page via a parameter. But I figured out that only primitives can be passed, such as strings and integers. The standard approach seems to pass only an ID and request the record from the API again using the ID as identifier. In general this makes sense, but in my scenario this is not possible.
The solution to pass an object to another page is to use an app variable in which the clicked (tapped) item is stored and then opening the page. This is not as intuitive as it could be. Passing a parameter of type object would be easier.
Then the app variable can be accessed within the details page and wired to the view components.
Formulas
Now it’s time to code a little bit. I need two modifications from the text I receive from the API. This can be achieved using formulas. Very similar to Excel.
Date Conversion: I want to use a more human readable date instead of a technical one. This can be achieved using build in functions. In my case like this:
FORMAT_DATETIME_LOCAL(DATETIME(repeated.current.pubDate), "YYYY-MM-DD")Text replacement: I receive html tags which cannot be displayed properly. Thus, I need to get rid of the HTML tags except line breaks. In my case this formula was the solution:
STRIP_HTML_TAGS(REPLACE_ALL(appVars.warning.content, "<br>", "\n\n"))One very interesting feature was to see, that the formula gave me a preview of the output based on the examples which are attached to the data resource defined earlier. This eases development.
Marketplace for Logic
I wanted to redirect the user to the original alert on the official website. This was possible using the “Open URL” logic component from the marketplace. Again a good idea to have a marketplace, and this time it worked well.
Test & Debug
The App can be tested immediately using a web preview. It even auto refreshes after something has changed in the editor. This way the development is very fast.
Another way is to use a preview App. I tested the iOS App. I could connect to my preview App using a QR code. Neat!
If something does not work as expected it is also possible to connect a debugger session with the preview. This was also self explanatory to me. Although I doubt, that a business user will ever use that feature.
Build and Deploy
The app can be build and deployed with a few clicks as web app to a subdomain of SAP AppGyver. A bit more has to be done if it should be added to the iOS or Android store. I have not explored it, but I trust in SAP AppGyver to handle this properly.
Push Notifications
Initially I wanted to push updates to the user via push notifications. In practice this seems to be a bit more complex to setup and run than I thought.
- It requires to config push notifications for Android and iOS. Of course, this makes sense and is well documented. But I am not an App developer and don’t have the required information at hand.
- A backend is required to call the push APIs. Unfortunately, this is not included in SAP AppGyver. The documentation mentions firebase, and I think that with firebase functions this could be realized. As SAP AppGyver is now part of SAP it might add value to add low-code style integration with SAP BTP to enable the execution of simple functions. And then we just drag and drop a push notification logic component from the marketplace and are ready to go.
Conclusion
This was a fun challenge. And I could finally try out a low-code / no-code platform.
I could experience many benefits. Especially, the development time can be reduced dramatically. And it does not require much technical knowledge. Thus, this platform enables non-developers to create Apps within a short period of time and minimum effort.
Writing this article took me longer than creating the App, seriously!
- SAP Managed Tags:
10 Comments
