DadIamBored – No Code Challenge

Hello Low coders and SAP community.

I have done a few other blogs related to LCNC before on the #SAPCommunity

• To Code or Not to Code, that is the question
• Master Detail scenario

however, as I visited the SAP community page last week, I read that there was a LCNC challenge – -. I wanted to do a fun/funny project rather than a strict/serious type of project; of course, every time I decide to do something fun, there are 2 humans asking me what they should do because they are bored – I decided to do this kind of for them as well.

to read this blog in spanish, visit DadIamBored Low code challenge – spanish version

here is the link to the app: DadIamBored

The background story

The “Dad, I am bored” low code app is one most of us parents can identify themselves – I think – and it would be awesome to just show your kids for fun. While I was looking for a free REST APIs, I found the bored API  so I decided to see what it was all about.

The backend technical details

The bored API allows developers to get activity suggestions, it also allows parameters such as number of participants, activity type, price, and other filters. There is good documentation found here https://www.boredapi.com/documentation  so you can view and test it our yourself.

For my demo, I decided to use the number of participants parameter because my kids usually want to do things individually or when their friends come over, then it will be 2 or more people participating. I think this app is very fit for my scenario.

First, let’s set up the data. Let’s use the URL provided above and then go to the Data section of the AppGyver tool to set up our scenario. There are various request types (Get collection, Get Record, Create, Update, Delete). More details as to how to use a REST API can also be read on my other blogs I mentioned above.

Once you are done setting up the Data and testing that it flows through, proceed to the UI.

The app itself

My app has 3 pages: a landing page, a suggestion page, and a profile page.

The landing page shows a title, a paragraph description, an image, a button for navigation to the second page with text “Show suggestions”, and a person icon at the bottom that will show my profile on the third page. It looks like the following image.

The button and the icon use the tap event and the Navigation component. Very simple to use. The LC tool allows you to drag and drop each control or logic into the Logic section under the main canvas.

On the second page of the application, I added a title at the top.

Then, I added a drop-down control allowing the user to select the number of participants in the activity which is set to a page variable. The drop-down control uses an option list, with 5 objects in the list of values. Page variables are variables you use for this page only. I used a page variable to hold the value of the selected item.

There are other types of variables in the AppGyver tool such as Data variable and page parameters. Variables are accessible via the View/Variables toggle button towards the top of the page.

Finally, two buttons; the first one will show the suggestion and the other one is to cancel the suggestion and navigate back to the landing/home page.

The Suggest button has some logic to verify the number of participants. If the number is not selected (I assume there is no one else participating) I simply show a static message to “Read a book”. However, if the number of participants is between 1 and 5, then I call the bored REST API to bring a suggestion and show it in a Toast message displayed at the bottom of the screen.

As you can see in the previous screenshot, the LCNC logic can be built in several steps:

• On button tap event, I validate the selected value is a number

Using an If condition, If the value is not a number, I am suggesting to read a book

• However, If the option selected is indeed a number, I am calling the Get Record operation from the Data option I configured for my API passing the iParticipants variable (selected value from the drop-down control)
• If the API call returns an error, then I am showing an alert to let the user know something is not working…

But if a successful response is returned, then I am showing a Toast message on the screen with the suggested activity from the bored api response.

How do you know it is working correctly? How about seeing network requests as shown below.

The suggestions presented in these screenshots even match some activities that my kids like to do so it is an additional win for me.

My daughter is involved in sports, and she currently plays basketball. In the next activity she selected 5 participants. She suggested I should add a notification to her teammates’ parents to see if they wanted to go out and play. This may sound like too much kid stuff in this simple app, however, if you think about it, this app has some of the business rules we would be doing if this was indeed a business application.

When the user input is validated a business rule is met, a trigger to an automated workflow could be triggered in the BTP such as what my kid was describing – email, text notification, or another process could be started. It gets more interesting huh?

Anyways, I really enjoyed putting this fun app for myself to participate in the LCNC challenge and I also added a profile page for me below for those of you who do not know me. This page is visible when the user navigates from the landing page via the icon press event. Oh yeah, that pic was from my the last in-person Tech Ed event I participated back in 2019. Looking forward to the next one – Hasta la vista.

At the bottom of this profile page, there is another button to navigate back to the landing page so there is navigation closure since I do not have a navigation bar across at the top of this page. The phone back arrows also work during navigation back in case those are needed.

What I liked while doing this LCNC challenge app and blog:

• Easiness of development – creating pages, navigation between them and placement of controls
• Deploying the application was easier than I thought – follow the Web builds instructions https://docs.appgyver.com/publishing/build-service/web-builds
• More and more documentation about how to do additional scenarios are coming up in the community page, specially seeing the other participants entries

What I think it still could be better:

• Sharing the project to a code repo from AppGyver (without having to download it)
• A place to include notes/documentation within the project in case the project is being worked on by multiple developers
• The Build service is kind of hidden. It was not as easy to find – I had to go to the Launch icon, then on the left nav, I had to go to the Distribute section, then clicking on the Build service. The build service is not working for version 4.x and version 3.x will be deprecated on june 3rd, 2022 **

Thank you for reading this blog and hope you have some questions and if you have not added your entry, please go ahead, and participate. This is a very easy activity that will help you understand how to build a simple or complex application with low code.