100 Days of LCNC: Days 2-4

This blog post details my 100-day low-code, no-code journey, and hopefully provides some tips and tricks for you.

In the last post, I described the learning materials on the community AppGyver site, as well as other resources, including the now complete low-code, no-code learning journey.

In the current post, I will describe how I made sense of the AppGyver UI, experimented with on-device data storage and finally using a REST API.

Day 2 – Setting up

Before starting any app development, I want to install the AppGyver clients so I can easily test how the app will look on a phone, in my case my iPhone 8 Plus.

I went to the App Store, and searched for AppGyver:

There are 2 AppGyver clients: Preview and Legend.

• Preview has the latest AppGyver runtime.
• Legend has an older runtime, for projects built with older version of AppGyver. You will want to generally use the Preview.

When you want to see your app in action, you can go to Launch and then open the web app:

You will get tiles for all your apps, and you can then open the app. Note that any mobile device feature, like opening the camera, will not work.

The other way is to open the AppGyver client you installed and scan the QR code for your app. The QR code is available from the same Launch page, and then clicking in the Mobile Apps area to get a temporary QR code. This opens the client to all your apps in this AppGyver tenant.

What’s cool is once you have opened the client to your app, every time you make changes and save the app, the app on the client is automatically reloaded.

If you click on your name in the apps/home screen, you can a bunch of settings, and you can turn on a debugger and check variables and other things while your app runs. This can be quite helpful, I think, but I’ll try that out later.

One thing that is annoying, or I haven’t figured out, is if I open an app in the client, I cannot get back to the home screen except to close and reopen the client. Not terrible, but a little annoying. Let me know if I am missing a workaround.

Day 3 – Getting oriented

After creating a new app, I get the following screen:

• At the top left, I can see the name of my app, plus the name of my first page (“Empty Page”). If I want to create additional pages for my app, I click my current page and I can then see all my pages.
• In the middle is my default page, already with Title and Text controls.

All around are my tools for changing my app.

App Tools

At the top are the tools for managing stuff that affects the entire app, not just the current page.

• Launch: Lets me run the app.
• Theme: Lets me set colors and fonts.
• Navigation: Lets me create a navigation bar so I can navigate to different pages. Not every page has to appear, for example, pages that are detail pages can be navigated to from within tan overview or list page.
• Data: Let’s e define data sources from bringing in data.
• Auth: Lets you require users to authenticate to use the app (soon this will also be against SAP BTP, but more on this later).
• Community: Gives you access to documentation and forums, as well as release information about AppGyver.

When I started opening these tabs, I wanted to return to the page UI. It still takes me a second to realize where the X button is to go back. But now I see that instead you can simply re-click the tab and it will return to the page UI, within needing to click the X.

Components

On the left, are all of the components that you can add to your project:

There are 3 sections:

• Core: A set of common components
• By Me: You can create your own components, for example, putting together different existing components, configuring the components, add properties and events. This is a pretty interesting area, and I will devote some time to explain how this works.
• Installed: Components you installed from the marketplace. Click on Component Marketplace, and you can install all kinds of cool components. Note that these are all created by the SAP AppGyver team, but in the future this marketplace may include third-party components.

Some components you can add? Lists with images, form controls like a date picker, and much more.

What’s really cool is you can take these components and modify them yourself, adding subcomponents or events or inputs/outputs.

Configuration

On the right side is where you configure controls, setting color and text and more.

A common thing that needs to be done is “binding” a control to a data source, so that the value in the control comes from the data source. We’ll see some of this later.

Properties is where you set the values for a component, like colors or text values, including the ability to bind values. Style deals with colors and how the component looks, and Layout deals with how it is displayed in relation to the rest of the page.

Views and Variables

For each page, you have the view of the page, all the components and their configuration, what we saw above.

For each page, you can also define variables to store information. Sometimes these are simply settings for your app, and sometimes this is the data you will be retrieving into your app. Variables are of the following types:

• App Variables: Variables exposed to all pages of the app.
• Page Variables: Variables exposed to the current page.
• Page Parameters: Parameters required to be passed when a new page is navigated to, like the ID number of a record when navigating to a detail page for that record.
• Data Variables: Variables that hold values retrieved from data sources.

Logic

And then, on the bottom, there is the logic panel, where you program what you want to happen when certain events happen, like the user clicks on a component, or the values of variables change.

When you click on a control, you can open up the Logic panel:

You automatically get a Receive Event block, which is triggered when a specified event occurs (click on the block and you can then change the event in the Properties area at the top right).

Then you can drag and drop “flow functions” or actions that you want to occur, and then connect the event block with the flow function, and then create a series of actions that you want to occur. Here’s a case where when I click the button I want the phone’s camera to open:

And now if I test the app on the phone, I see the button, and if I tap the button, the camera opens:

Day 4 – On-device data

This is my first attempt at adding a UI, and working with data.

When I create my baseball app, I will get data from the MLB service, but I will also want to store my own list of players that I am interested in. So this is a good candidate for simple on-device storage. This is my first data source.

As an experiment, I will simulate the simplest to-do-list, to better understand how the whole thing works.

I created a UI made of a:

• Title
• An input box where I will enter a new task
• A button to add the task
• A text box that will display all the tasks

Data Source

On the Data tab (at top), I created a data resource called todo of type “on-device storage”, with 2 fields: id and task, both text fields.

Data Variable

To use the data on a specific page, you need to create data variables. And you need to create a variable for the entire collection of records, and one for a new/changed/retrieved item.

So I went to the Variables area, then to the Data Variables area, and created new data variables, one for “Collection of data records” and one for “New data record”. Both were based on the todo data resource I created in the previous step.

Binding

We now have to bind the data variables to the fields. Here I set the input field to the single record variable.

And then to see the records, I bound the collection variable to the repeat property of the text box, and set the Task field as the content of each instance of the field.

Finally, I had to have the new record saved when I clicked the button. So I clicked on the button, opened the logic pane. When the user clicks the button, I run a “Create record” flow function.

For “Create record”, I indicate which data resource to update, and where to get the data for the record.

Improvements

That was easy, but there were some things I didn’t like:

• The list of items did not update except every 5 seconds. This is the standard flow, which you can see by going into the data variable for the collection and seeing the flow functions.
  
• The input box did not clear once the record was added.

So I modified the flow functions when a user clicks the button. After adding the record, I run the “Get record collection” and “Set data variable” again (the same as the default logic above), and I “Set data variable” for the single data variable to nothing.

Worked really nicely.