Create an Application with SAP Build Apps
- 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
Daniel WroblewskiDecember 3, 2022
Prerequisites
- Either SAP Build Apps on SAP BTP, as described in Subscribe to the Low-Code / No-Code Service in SAP BTP or the free community edition of SAP AppGyver, available at AppGyver.com.
- Access to the SAP Build Apps/AppGyver Previewer App on a smart phone or tablet: iOS / macOS/ Android
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:
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.
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.
Within the application development lobby, click Create > Build an Application.
Enter
Scanner Applicationfor the project name, and an optional description, then click Create.
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
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
Click the Paragraph field and edit the text to read:
Scan a barcode of a food product using your smartphone
- 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.
Edit the Button text to read
Scan.
Click Save.
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.
Then using your Preview app login screen, scan the available QR code.
The application refreshes and your project is available to view.
What do you need to do to preview the app on your phone?