Skip to Content
Personal Insights
Author's profile photo Kai Niklas

Create a Food Alert App with SAP AppGyver – No-Code Challenge

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:

My App – Food Watch Alerts

From time to time there are food alerts. Just recently we had a massive chocolate callback in Germany because of salmonella. What if you could inform yourself about this with an App? Let’s build it.

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.

  1. 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.
  2. 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!

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Stephanie De Camara Marley
      Stephanie De Camara Marley

      You are making me hungry 🙂 In all honesty - great use case!

      Author's profile photo Kai Niklas
      Kai Niklas
      Blog Post Author

      Thanks!

      Author's profile photo Lawrence Nocella
      Lawrence Nocella

      Great work and thank you for the excellent write-up!

      From Google Translate: Tolle Arbeit und vielen Dank für die tolle Beschreibung!
      Author's profile photo Pierre COL
      Pierre COL

      Great app, well done Kai Niklas.

      Could you share the code for letting people adapt it with alerts in their country?

      Author's profile photo Kai Niklas
      Kai Niklas
      Blog Post Author

      What do you mean with sharing the code?

      Author's profile photo Pierre COL
      Pierre COL

      You're right: there is no code 😁

      I meant, sharing the entire project with all of the components, to allow other to simply reuse it, adapting to their local way of getting food alerts from government or health authorities.

      Esmee Xavier, Kanishka Raghuraman, Merituuli Melkko: any advice from your side on how to better  "opensource" an AppGyver project?

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Nice work and thanks for entering.

      As for the missing event on the component you wanted to use: I was able to take, for example, an image list component and add my own custom events, for example, when someone tapped on the image, or on the name, or on the label. [I didn't really create or expose the event, I just opened the component and used the event from inside. I will look how to expose this to the outside.]

      Creating custom controls is an advanced topic but I think adding such events is something a lot of people will want to do.

      Author's profile photo Kai Niklas
      Kai Niklas
      Blog Post Author

      The "standard" component did work. I couldn't get it working using a component from the marketplace. Cannot recall the forum page, but this seems to be an issue which is already on the roadmap to be fixed.

      Author's profile photo Sandy Hathaway
      Sandy Hathaway

      Cool app! Thanks for sharing your experience, Kai.

      Author's profile photo Abir Cherif
      Abir Cherif

      Great app !!