Utilize Low-Code/No-Code Applications and Automations for Citizen Developers

Making a Plan for an Online Barcode Scanner App

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Make a plan for an online barcode scanner app

Making a Plan for an Online Barcode Scanner App

In this lesson, we introduce the app you are going to build. Some things to remember from your previous course:

  • User interface, logic and data are the three main parts of application development that require advance planning, as well as the work-flows between them.
  • The opportunities offered by Application Programming Interfaces (APIs) are vast. If something has an API, you can build an app for it.

And that's exactly what we are going to do. So, what will you be building?

Presenting the Scenario

Before we start building our app in SAP AppGyver, we look at the entire scenario and then create a high-level plan for the development process for our online barcode scanner app. First, I’ll show a short demo of the barcode scanner app so that you can see what you’ll be able to deliver after taking this course.

The scenario is simple. You create an app with a button that says, Scan Barcode. When you tap the button, it opens your camera. You aim the camera at the barcode on a bag of mixed nuts or other food product. The app immediately reads it and displays the product name and the number of calories per 100g.

In case you’re not familiar with what a barcode is, it simply represents a sequence of numbers. The scan then sends the barcode data to an Application Programming Interface (API) and nutritional information comes from back from OpenFoodFacts, a free and open database that gathers information about food products from around the world.

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.

As explained in the previous unit, APIs can be used to access information over the web and are a central part of many modern-day applications, such as Netflix or smart lighting systems. OpenFoodFacts, and other web-based APIs, are accessed with a URL, except, instead of returning a page, they return data.

Making a High-Level Plan for the User Interface (UI), Logic, and Data

Now that you understand the scenario, we start with the most important first step, planning.

We can create a high-level plan for our app, including the three main areas of application development covered in the previous unit, user interface, logic, and data. Planning is 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.

Often, people ask me "Can I build a social media app in SAP AppGyver?" The answer to this is yes, but, you still need to think about what functionality the app actually includes. Do you want to have a news feed? A comments section? Photo sharing? All of these features have different requirements, and so you’ll need to understand the workflow before you start building the app.

Back to our barcode scanner app.

First, let’s make a sketch of the user interface. The user interface 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 navigation right now.

In this 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.

Planning the Work Flow

Now that we have the UI figured out, we should also think about the two other areas of development: logic and data. Remember that in SAP AppGyver’s no-code approach, logic is implemented with visual programming techniques and is presented as a sequence of events and actions. So, what events and actions are occurring in this app?

  1. The user taps a button to scan a barcode.
  2. The app uses that barcode to query (or request information from) the OpenFoodFacts API.
  3. Our app displays two pieces of data about the scanned product: name and calories.


It's quite straightforward. Now we’re ready to get started no-coding in SAP AppGyver. You’ve made your plan for this scenario. The user interface is sketched, the work-flow logic is clear, and the data sources are available.

Save progress to your learning plan by logging in or creating an account