Create a GitHub Issue App with SAP AppGyver - No-Code Challange

[schmelto]

This is an article / learning journey about some of my experiences and challenges with SAP AppGyver during the No Code Challenge.

The final app can be found here.

Purpose

I thought of an app with which you can search for SAP related open issues on GitHub. This could be straight forward with the help of the GitHub REST API.

There would be two endpoints which could be used to tackle the challenge:

• https://api.github.com/orgs/ORG/issues


• https://api.github.com/repos/OWNER/REPO/issues

Cause I do not want to authenticate a user the ORG issues endpoint is not an option.

My App

To get started I created two pages:

• Issues: List of all open issues


• Setting: customize which repositories should be included in the open issues list

Here you can see the initial setup:

Settings

The repositories in the Settings-Page are customized with the "On Device Storage".

To keep it simple for now the Resource Shema only contains:

• id - Text


• repository - Text

The text value "repository" should contain the combination of OWNER/REPO (for example "SAP/styleguides" to get the issues of https://github.com/SAP/styleguides).

An idea for later would be to implement a check if the repository name is valid. Therefore an API call to the GitHub REST API could be done and check wehter the response is valid or not.

For now you can only add, delete and update repositories here.

Issues

To get the open issues for my first initial draft I only used one API endpoint https://api.github.com/repos/SAP/styleguides/issues.

Here an example output of the API call:

[

  {

    "url": "https://api.github.com/repos/SAP/styleguides/issues/272",

    "repository_url": "https://api.github.com/repos/SAP/styleguides",

    "labels_url": "https://api.github.com/repos/SAP/styleguides/issues/272/labels{/name}",

    "comments_url": "https://api.github.com/repos/SAP/styleguides/issues/272/comments",

    "events_url": "https://api.github.com/repos/SAP/styleguides/issues/272/events",

    "html_url": "https://github.com/SAP/styleguides/issues/272",

    "id": 1226786325,

    "node_id": "I_kwDOCvBjVc5JH0YV",

    "number": 272,

    "title": "Don't declare inline in optional branches",

    "user": {

      "login": "larshp",

      "id": 5888506,

      "node_id": "MDQ6VXNlcjU4ODg1MDY=",

      "avatar_url": "https://avatars.githubusercontent.com/u/5888506?v=4",

      "gravatar_id": "",

      "url": "https://api.github.com/users/larshp",

[...]

At the page the open issues will be displayed in a list and to go to the selected issue I installed the "Open URL" Flow from the marked place which implements the logic when the event "Component tab" is triggered.

At the end due I was not quite satisfied with the layout of the Issue-Page I further added the avatar image of the user who created the issue and further also the first 5 lines of the issue body.

My Experience

Due I never used any low code / no code platform I found the process of SAP AppGyver really straight forward. And within a couple of hours I guess you can make some cool apps.

But also with no code / low code some challenges occurred during making this app.

Delete Button

For me one struggle was to implement a good UI for the Delete Button.

This is the Logik which is implemented right now:

If you want to implement the same with a Toast Dialog.

You can see there is no way to connect the Toast with the Navigate back.

Styling/Alignment of components

What was also really hard to made with the platform is to style components / align components the Issue Card will also contain a little avatar of the GitHub user who created the issue.

Conclusion

It was really fun to explore some no code / low code and I think in future this is something I will definitely have a closer look on.

The most insane thing SAP AppGyver did was the detection of the JSON Shema! Also the ability of the debugger and the live reload on phone and browser blew my mind.

Some final words about the app

Since I set myself a limited time to create such an app, I couldn't figure out how to proceed with multiple API endpoints that require customization of the API URL by the repositories stored in the settings page in the device store (for reference https://forums.appgyver.com/t/how-to-use-multiple-rest-api-endpoints/15617).