Skip to Content

Create an Application with SAP Build Apps

Create an application with SAP Build Apps on SAP BTP. The application, created in a browser, can be used with the Previewer App to scan physical barcodes on food packaging to display calorific information.
You will learn
  • How to create a no-code project with SAP Build Apps
  • How to add and edit visual elements in the SAP Build Apps Composer tool
thecodesterDaniel WroblewskiDecember 3, 2022
Created by
heytombeck
September 20, 2021
Contributors
thecodester
heytombeck

Prerequisites

In this mission you will learn how to create a no-code application using the SAP Build Apps Composer tool. The application you create will enable you to scan a barcode on a smartphone and retrieve information from a public API. To do this, you will need to download the Preview app (available through iTunes and Google Play store).

The application you’ll create across the tutorials will read barcodes from food packaging and display information about the product using the Open Food Facts API:

Diagram of scanning a food item from a mobile app

The steps provided detail the process using an SAP BTP account within a desktop browser. It is also possible to replicate many of the steps using a free account from AppGyver.com.

All applications are created, edited, and managed within what we call a project, with one application created per project. Projects, and their related applications, are not automatically saved in this service, so care should be taken before closing a browser.

  • Step 1

    If you are working with the free version, just click Create New, fill in a name, and click Create.

    Create in free version
    1. In BTP, SAP Build Apps projects are created from the application development lobby. To access this lobby from the SAP BTP Cockpit, click Services - Instances and Subscriptions and then select SAP Build Apps.

      Access application development lobby
    2. Within the application development lobby, click Create > Build an Application.

      Create SAP Build Apps Project
    3. Enter Scanner Application for the project name, and an optional description, then click Create.

      Create SAP Build Apps Project

    Your SAP Build application is created, with the Composer Pro view displayed. Once created, projects can be accessed again at any time from your application development lobby.

  • Step 2
    Composer Pro

    When working with Composer Pro, the majority of your time will be spent in the App builder area. This area allows you to complete key tasks such as, but not limited to, the following:

    • Define your app’s structure and navigation logic
    • Build pixel-perfect user interfaces
    • Create complex logic with visual programming
    • Integrate with external data resources
    • Bind data to your components to create dynamic views, and more

    For more detailed coverage of the features available in Composer Pro, view the SAP Build Apps documentation.

  • Step 3

    You’ll now start to create a basic layout for your application, starting with editing text.

    Click the existing Headline field and edit the text to read: Barcode Scanner

    Edit UI Headline

    Click the Paragraph field and edit the text to read: Scan a barcode of a food product using your smartphone

    Barcode Scanner
  • Step 4

    Next, you’ll need to add a Scan button which, when tapped, will open the camera device on your smartphone.

    To do this, locate the Button component (found under Core > Forms) and drag and drop this underneath the paragraph field.

    Adding a button

    Edit the Button text to read Scan.

    Edit button text

    Click Save.

    Save Project

    The application is now saved in draft and available to preview using the Preview app on your smartphone.

    In AppGyver Composer Pro, which type of design element is a Button?

  • Step 5

    Once downloaded to your smartphone, you can log into your SAP Build Apps account using a QR code.

    To scan the QR code, click Launch.

    Click launch

    Then using your Preview app login screen, scan the available QR code.

    Scan QR to login to your app

    The application refreshes and your project is available to view.

    What do you need to do to preview the app on your phone?

Back to top