Create Your First App With SAP Build Apps

Create Your First App With SAP Build Apps

Explanation Screenshot

Business Scenario

You're going to build

an app that lets you
scan the barcode on
a food product, then it
calls an API to get
the calorie content,
and finally it displays
the product name
and calorie count.

In this exercise you

will create your first
App with SAP Build
Apps.

In the following steps,

you will check the
Prerequisites for the
Live Environment.

• Access SAP
Build Apps by
setting up a trial
account that
can be used for
90 days and
using the
booster for SAP
Build Apps.
Additionally,
you can also
setup your own
SAP Build Apps
subscription on

1
Create Your First App With SAP Build Apps

Explanation Screenshot
your SAP BTP
subaccount by
using a booster.
• Set up the SAP
Build Apps
Preview app on
iOS or
Android. When
you are working
on an app, it will
have a QR
code, which you
can scan from
the preview app
to open the app
on the phone.
More
information in
the
documentation
.

In the following steps,

you will create a new
SAP Build Apps
Project.

1. Choose Create.

2
Create Your First App With SAP Build Apps

Explanation Screenshot

2. Choose Build an
Application.

3. Choose Web &

Mobile Application.

4. In the Project
Name field, enter
Barcode Scanner.

3
Create Your First App With SAP Build Apps

Explanation Screenshot

5. In the Short
Description field,
enter Barcode
Scanner.

6. Choose Create.

7. Choose Title
Component.

4
Create Your First App With SAP Build Apps

Explanation Screenshot

8. In the Content
field, replace with
Barcode Scanner.

9. Choose Text
Component.

10. In the Content

field, enter Scan a
barcode of a food
product using your
smartphone.

5
Create Your First App With SAP Build Apps

Explanation Screenshot

11. Choose Button.

12. Drag
Button component.

13. Drop underneath

text component.

14. In the Label field,

enter Scan.

6
Create Your First App With SAP Build Apps

Explanation Screenshot

15. Choose an open

area anywhere on the
canvas.

You can rename your

page from the Page
name field.

16. Choose SAVE.

7
Create Your First App With SAP Build Apps

Explanation Screenshot

In the following steps,

you will preview the
App on your iOS or
Android device.

If you use your own

subaccount with the
region EU10 (cf-
eu10), then you can
use the normal tile to
generate a code, as
this is set as the
default. However, trial
accounts have the
region US10 (cf-
us10), which you
have to select in the
next steps via other
login options.

17. Choose Other

login options.

18. Choose the

dropdown.

8
Create Your First App With SAP Build Apps

Explanation Screenshot

19. Choose SAP

Build Apps US10.

20. Choose Generate

code.

Make a note of the

temporary PIN code,
you will have to enter
this on your Barcode
Scanner app on the
SAP Build Apps
website.

9
Create Your First App With SAP Build Apps

Explanation Screenshot

21. Choose Launch.

22. Choose Open

Preview Portal.

23. In the PIN code

field, enter U2W4NK.

10
Create Your First App With SAP Build Apps

Explanation Screenshot

24. Choose Confirm

pin.

25. Choose Open.

You can now view

see the user interface
you have created so
far.

11
Create Your First App With SAP Build Apps

Explanation Screenshot

In the following steps,

you will add Logic to
open the camera.

26. Choose Scan

Button.

27. Choose Add

Logic to Button 1.

28. Select the scroll

bar to scroll down.

12
Create Your First App With SAP Build Apps

Explanation Screenshot

29. Drag Scan QR /

barcode flow
function.

30. Drop on logic

editor.

31. Drag a
connection from the
Component tap
event's tip.

32. Drop on start tip

of the Scan QR /
barcode flow function

33. Select the scroll

bar to scroll down.

13
Create Your First App With SAP Build Apps

Explanation Screenshot

34. Drag Alert flow

function.

35. Drop on logic

editor.

36. Drag a
connection from top
output tip of Scan QR
/ barcode.

37. Drop on Alert

component tip.

38. Choose Alert.

14
Create Your First App With SAP Build Apps

Explanation Screenshot

39. Choose Binding

for Dialog title.

40. Choose Output

value of another
node.

41. Choose Scan

QR/barcode.

15
Create Your First App With SAP Build Apps

Explanation Screenshot

42. Choose QR
barcode content.

43. Choose SAVE.

44. Choose SAVE.

16
Create Your First App With SAP Build Apps

Explanation Screenshot

The application on
the preview app on
your phone will
automatically update.

45. Choose scan.

You can preview the

app by choosing scan
and scanning a
barcode.

The application
retrieves the value for
the scanned QR
code.

17
Create Your First App With SAP Build Apps

Explanation Screenshot

In the following steps,

you will connect to
open food facts API.

46. Choose Data.

47. Select the scroll

bar to scroll down.

48. Choose Create

Data Entity.

18
Create Your First App With SAP Build Apps

Explanation Screenshot

49. Choose REST

API direct integration.

50. In the Resource

ID field, enter
OpenFoodFacts.

51. In the Short

description field,
enter Data from
Open Food Facts
API.

19
Create Your First App With SAP Build Apps

Explanation Screenshot

52. In the Resource

URL field, enter
https://world.openfo
odfacts.org/api/v0.

53. Choose SAVE

DATA ENTITY.

54. Choose GET

RECORD (GET).

20
Create Your First App With SAP Build Apps

Explanation Screenshot

55. Clear the Relative

path field, and enter
/product/{barcode}.j
son.

56. Choose URL

Placeholder.

57. In the Label field,

enter Barcode.

21
Create Your First App With SAP Build Apps

Explanation Screenshot

58. In the Key field,

enter barcode.

59. Select the scroll

bar to scroll down.

60. Toggle On Is
optional.

22
Create Your First App With SAP Build Apps

Explanation Screenshot

61. Choose TEST.

62. Choose Barcode

binding.

63. Choose Static

text.

23
Create Your First App With SAP Build Apps

Explanation Screenshot

64. In the Value field,

enter
6416453061361.

65. Choose RUN

TEST.

66. Choose SET

SCHEMA FROM
RESPONSE.

24
Create Your First App With SAP Build Apps

Explanation Screenshot

67. Choose SAVE

DATA ENTITY.

In the following steps,

you will fetch data
from API.

68. Choose DATA.

69. Choose Scan.

25
Create Your First App With SAP Build Apps

Explanation Screenshot

70. Choose Alert.

Please press Delete.

71. Select the scroll

bar to scroll down.

26
Create Your First App With SAP Build Apps

Explanation Screenshot

72. Drag Get record

flow function.

73. Drop On Logic

Canvas

74. Drag a
connection from top
output tip of Scan QR
/ barcode.

75. Drop Get record

flow function

76. Choose Get

record flow function.

27
Create Your First App With SAP Build Apps

Explanation Screenshot

77. Choose Barcode

binding.

78. Choose Output

value of another
node.

79. Choose Scan

QR/barcode.

28
Create Your First App With SAP Build Apps

Explanation Screenshot

80. Choose QR
barcode content.

81. Choose SAVE.

82. Switch to
Variables.

29
Create Your First App With SAP Build Apps

Explanation Screenshot

83. Choose DATA

VARIABLES.

84. Choose Close.

85. Choose Add Data

Variable.

30
Create Your First App With SAP Build Apps

Explanation Screenshot

86. Choose
OpenFoodFacts.

87. Select Single

data record .

Select and delete all

the flow functions that
were automatically
created.

31
Create Your First App With SAP Build Apps

Explanation Screenshot

88. Choose SAVE.

89. Switch to VIEW.

90. Choose Scan.

32
Create Your First App With SAP Build Apps

Explanation Screenshot

91. Drag Set data

variable flow function.

92. Drop On Logic

Canvas

93. Drag a
connection from top
output tip of Get
record flow function.

94. Drop on Set data

variable flow function

95. Choose Set data

variable.

33
Create Your First App With SAP Build Apps

Explanation Screenshot

96. Choose Data

Binding.

97. Choose Formula.

98. Choose Formula.

34
Create Your First App With SAP Build Apps

Explanation Screenshot

99. In the Formula

field, enter
outputs["Get
record"].record.

100. Choose SAVE.

101. Choose SAVE.

35
Create Your First App With SAP Build Apps

Explanation Screenshot

102. Choose
Collapse logic editor.

In the following steps,

you will display data
from API.

103. Drag Title

component.

104. Drop below the

button

105. Choose
Headline.

36
Create Your First App With SAP Build Apps

Explanation Screenshot

106. In the Content

field, enter Product
Information.

107. Drag Text

component.

108. Drop below the

title component

109. Drag Text

component.

110. Drop below the

text component

37
Create Your First App With SAP Build Apps

Explanation Screenshot

111. Choose Text 2.

112. Choose Content

binding.

113. Choose
Formula.

38
Create Your First App With SAP Build Apps

Explanation Screenshot

114. Choose
Formula.

115. In the Formula

field, enter
data.OpenFoodFact
s1.product.product_
name.

116. Choose SAVE.

39
Create Your First App With SAP Build Apps

Explanation Screenshot

117. Choose SAVE.

118. Choose Text 3.

119. Choose Content

binding.

40
Create Your First App With SAP Build Apps

Explanation Screenshot

120. Choose
Formula.

121. Choose
Formula.

122. In the Formula

field, enter
data.OpenFoodFact
s1.product.nutrimen
ts.energy.

41
Create Your First App With SAP Build Apps

Explanation Screenshot

123. Choose SAVE.

124. Choose SAVE.

125. Drag Image

component.

126. Drop below the

text component

42
Create Your First App With SAP Build Apps

Explanation Screenshot

127. Choose Image

component.

128. Choose Source

binding.

129. Choose
Formula.

43
Create Your First App With SAP Build Apps

Explanation Screenshot

130. Choose
Formula.

131. In the field,

enter
data.OpenFoodFact
s1.product.image_fr
ont_url.

132. Choose SAVE.

44
Create Your First App With SAP Build Apps

Explanation Screenshot

133. Choose SAVE.

134. Choose SAVE.

45
Create Your First App With SAP Build Apps

Explanation Screenshot

The application on
the preview app on
your phone will
automatically update.

135. Choose scan.

You can test the app

by scanning a
product.

You have now

created an app with :

• User interface,
for example,
Title, Button,
Image.
• Logic, for
example, when
user chooses
Scan, the
camera opens.
• Data, for
example, the
app calls the
Open Food

46
Create Your First App With SAP Build Apps

Explanation Screenshot
Facts API.

Your app can now

scan food items and
return information
about them.

47