SAP Learning Journey

Creating the Mobile App UI

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Open the project and preview app
  • Explore the components
  • Use components to build the UI

Introduction: Opening the Project and Preview App

What is the role of a User Interface (UI) in an app? It covers what the end-user of an application is going to see and be able to do.

A UI not only defines the elements that can be seen, but it also defines some of the basic interactions in the app, such as a clickable button or a dialog that appears on top of other content.

No-code development environments are typically equipped with a set of tools for creating a UI – ways to define sets of different views for different parts of an application, the navigation, and drag-and-drop components to represent everything from text paragraphs to buttons.

Every part of the UI in the Barcode Scanner Mobile App that you are building needs to be represented by a component. This includes all the buttons, text, images, icons, and so on.

Open the Project and Preview App

Open SAP AppGyver Community Edition and start a new project by going to the dashboard and choosing Create New. Delete the default components so we can begin with a blank canvas. Since we already made the plan for our User Interface (UI), we already know what components we’ll be using and we don’t need the default options.

While we are working, keep the project open on your phone using the SAP AppGyver Preview app, which you can find in all common app stores and download for free. If you don’t already have it, you should get it now – check the prerequisites sections for how to do that.

The default setting for the Preview device may be set to iPhone, but you can change this to match whatever device you are using.

It’s a good idea to use the Preview app while building, so you can see the changes you’re making to the UI and the components in real-time, and test them out.

Prerequisites

Exploring the Components

Every part of the UI in our app needs to be represented by something. This includes all the buttons, any text, images, icons, and so on.

In application development, all of these individual elements are represented by components. Components are visual development tools. They are the building blocks of any UI.

There are no fixed limits to how big or small components can be. The smallest components are things like an individual icon or a divider line. The largest components might be something like a map component for geolocation or a video player.

Using Components to Build a UI

All the components you need to build with SAP AppGyver Community Edition can be found on the left side of the composer in the component market. Let’s start working with them and build your first UI.

These are the required steps:

  1. Select Button from the view components and drop it onto your screen.
  2. You can change the label of the button as it appears on the screen from the properties panel on the right. Change it to Scan Barcode.
  3. Save your changes.
  4. Check your phone. On the preview app, you’ll see the button that you've added, but it doesn’t do anything yet. For the text on our app, there are two things we want to show: 1) the name of the product and 2) number of calories.
  5. For this, we’ll use two paragraphs, which are also added as components.
  6. Select the Paragraph component and drop it on the canvas, just above the button.
  7. Do the same thing again for the second paragraph.
  8. Save, and we’re ready to move into implementing logic.

Log in to track your progress & complete quizzes