Reviewing the Scenario and Planning the No-Code App

In this unit, you will be using the SAP AppGyver Community Edition, which is available for free and is convenient for training purposes as well as making it easy for you and your colleagues to get right into the product experience with a few clicks.

The scenario you will develop using SAP AppGyver is a Food Barcode Scanner Mobile Application. It will be able to scan a barcode on a food item in your kitchen, and tell you about the nutritional content.

We'll begin the development process with planning - a critical part of software development because it makes us break down the problem we're trying to solve, as well as the application design, into smaller sections. We'll plan the three main areas of application development - defining the user interface, logic, and data.

The scenario you will build is simple. When it is ready, you will open the app, and tap a button that says Scan Barcode. Then you can scan a bag of mixed nuts or other food products to immediately see the nutritional information.

What is a Barcode?

• A barcode is a way to encode information in a machine-readable visual format, a code in the form of numbers and a pattern of parallel lines of varying widths, printed on a commodity such as food packaging.
• When scanned into a computer, a barcode interacts with a pre-established algorithm that delivers information back to the system, such as nutritional data.

The way it works is that the scan sends the barcode data to an Application Programming Interface (API) from OpenFoodFacts, a free and open database that gathers information about food products from around the world. The app immediately reads it and displays the product name and the number of calories per 100g.

It’s possible you won’t find data on every single product in your kitchen. That’s because OpenFoodFacts is maintained by volunteers who add products to the database. However, you should be able to find something that works for this exercise.

First, let’s make a sketch of the user interface (UI). The UI includes all the elements the user can see and interact with on the screen. In this app, we’ll only be working with one main view, so we don’t need to worry about working with multiple views or navigation right now.

In the main view, we have a button to scan the barcode. Then, we have some text that is going to be populated by the data returned from the OpenFoodFacts API when it reads the barcode. This includes two parts, the name of the product, and calories per 100g.

Now that we have the UI figured out, we should also sketch out the two other areas of the app that we need to develop: logic and data.

Logic is implemented with visual programming techniques and is presented as a sequence of events and actions – i.e. you should sketch it as a workflow.

And for Data, in this scenario, it is coming from the API.