SAP Builders Discussions
Join the discussion -- ask questions and discuss how you and fellow SAP Builders are using SAP Build, SAP Build Apps, SAP Build Process Automation, and SAP Build Work Zone.
cancel
Showing results for 
Search instead for 
Did you mean: 

April (Citizen) Developer Challenge – SAP Build Apps: Task 0

Dan_Wroblewski
Developer Advocate
Developer Advocate

Welcome to the SAP Build Apps Community Challenge, a set of small challenges to help you get to know SAP Build Apps a little better, whether you’re a beginner or experienced user.

The challenges so far:

If you do all the challenges – each taking the time of your lunch hour (but don’t skip eating lunch 🍜) – you will learn a lot:

  • How to set up SAP Build Apps on your trial account
  • How to import projects
  • How to manage the layout of your app
  • How to create a custom menu, and position it anywhere on the screen
  • How to play sounds in your app
  • How to determine if your app is running on the web or on a device
  • How to call APIs
  • How to filter, sort, and paginate your OData calls to SAP backends
  • How to open an external browser
  • How to embed web pages inside your app
  • How to create a full-page background
  • How to open the phone’s camera from your app (and select back or front camera)
  • How to take pictures with your phone and use them in your app
  • How to store pictures in your app
  • How to create transparency, rounded corners and other visual effects
  • … and a lot more.

IMG_5832.PNG

For every one of the challenges, you will be asked to provide:

  • A hashed GUID from the correct answer
  • (Optional) A screenshot of your app, showing modifications we’ll ask you to make.

For these challenges, we will use the hashing service introduced by @qmacro (DJ Adams) for his API challenge back in August. The service lets you take a text string, hash it to a GUID so that we can tell if you were correct but prevent others from seeing the correct answer.

GOOD NEWS: In the skeleton app we will give you, we have taken care of the connection to the service, providing an easy way for you to provide your answer.

Let’s get started.

👉Your Task

Part I – Set Up SAP Build Apps

  • Create a SAP BTP trial account on the US EAST (VA) – AWS region, if you haven’t already. For instructions on setting up an account, see Get a Free Account on SAP BTP Trial.
  • Set up SAP Build Apps on your trial account. Follow this simple 2-minute video:

At the end, make sure you can open the SAP Build lobby.

Dan_Wroblewski_2-1711946842427.png

Installing the app is simple – just search for SAP Build Apps Preview. But for more help watch this 2-minute video:

Make sure to give this app permission to use your device's camera.

REMINDER: With the trial, you will be on the US10 landscape and must log in on the preview app using Other login options.

 

Part II

Next, you will have some fun and make sure everything is connected, and get a little preview of some of the capabilities of SAP Build Apps.

If you want to review the basics of building apps with SAP Build Apps works, feel free to watch the SAP Build Apps playlist (new videos all the time).

  • Download our fun little app. You will use this app for the next 3 challenges. 

Upload the project to SAP Build Apps and open it (you can import projects in the lobby).

Dan_Wroblewski_6-1711947342672.png

  • Inside the project, go to the app variables and set the initial value for the CommunityID to your community ID. This ID enables you to hash your text answers so the GUID you submit is unique to you, and allows us to check that you got it right.

Dan_Wroblewski_14-1711948082642.png

  • Go to the Launch tab:
    • If you have an iOS device, run the app in the SAP Build Apps Preview App on your device – not on your laptop.
    • If you have an Android device, run the the app on the web preview.

20240401_050906893_iOS.png

  • Using the app, take a picture (iOS) or upload a picture (Android). Either way, click Add My Picture.
  • Take a screenshot (showing your picture and community ID).
  • Find on the app a place to tap so that a hidden message is revealed. Use the force to find it. This is the secret message you will need to hash and will automatically be saved for you once you find it.
  • Go to the Submit page by clicking the hash icon.

IMG_5793.PNG

Here, the secret phrase and your community ID were already entered (though you can always enter them manually).

IMG_5795.PNG

  • Click Hash.
  • Reply to this discussion thread and post the hash you received, followed by the screenshot. To make things simpler, we've provided a button to open this post in the app (though you can make the reply via a browser).

The post with a screenshot should look something like this:

Dan_Wroblewski_13-1711947342907.png

 

Bonus Tasks

If you're looking for more to do and learn:

  • Bonus #1: We have embedded a secret piece of music on the home page. You do not have to post anything about it – just enjoy. (Tap again to stop the music.) Open the project to see how we did this.
  • Bonus #2: Make any improvement you want to the app, for example:
    • You could add a toggle which will change whether the app opens the front or back camera (for this, check the properties for the flow function that opens the camera).
    • Notice how when you stop the music, and then restart it, the music starts from the beginning. You could instead pause the music and make it start exactly where it left off, but how? [HINT: Read about the audio flow functions.]

Share your innovation.

Feel free to look inside the app to see how we put it all together – how we made it so it will store your community ID, how you could have entered your community ID in the app instead of hard-coding it, how we created a circle with your image, how we played music, how we ran the hashing function – all without coding.




--------------
See all my blogs and connect with me on Twitter / LinkedIn
174 REPLIES 174

satishcsehitk
Explorer
0 Kudos

e1754932480ea30673b7c8184002a6c54f7bc09224731706d58cfa3d4ae5776d

Capture1.PNG

0 Kudos

Please check the hash -- the string to hash and your community ID. You community ID is what appears next to your reply – satishcsehitk




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Corrected the community ID. Should have correct hash now.Capture1.PNG

a3f4bcf0b0d3f29f881e4e0e3219c7e797217c6246ef60710bdfd0da9553a1ec

 

Dan_Wroblewski
Developer Advocate
Developer Advocate

After 1 day, here's a video showing stats about the setup challenge, and who uploaded a valid hash. The app, of course, was created with SAP Build Apps.

stats.gif




--------------
See all my blogs and connect with me on Twitter / LinkedIn

0 Kudos

Hi, I can't see my user name in that list, that means that my answer was incorrect?

0 Kudos

I think I took the screenshot just before you submitted ... but your submission is great 🙂




--------------
See all my blogs and connect with me on Twitter / LinkedIn

msmtawansy
Explorer

c676e24f1dcab7cef0dc3a4196e4c38bbdac1d41617bfb99c3b857d75c74bb6e


IMG_0821.png

“*Secret message*, always”

 

encarrero
Participant

452d318ec1013c638a050408f25c0747b059f4b5131daba5ba46a6a9c5a8cf99

0 Kudos

Do you have a screen shot?




--------------
See all my blogs and connect with me on Twitter / LinkedIn

0 Kudos

LOVE IT!!!




--------------
See all my blogs and connect with me on Twitter / LinkedIn

gsalvatti
Discoverer

e0dff4d77527c466081af2f4d130ac47e30b706e9cf76f75aca230d5f52a8434

 

0 Kudos

We'd love to see your screenshot too.

Unfortunately, the hash is not coming up as correct. Check that you have the hidden phrase and your community ID was entered properly.




--------------
See all my blogs and connect with me on Twitter / LinkedIn

0 Kudos

I believe that now it's ok. Check it, please. Thanks!

SMaaLL
Participant
0 Kudos

ae89a0a8f276792b84332be36201c417b0d7e149243bf68e83cfc8af1dd9d5f2


IMG_7272.png

0 Kudos

Thanks for participating and nice picture 😚

Unfortunately, the hash is not coming up as correct. Can you make sure your community ID was entered in the hashing page correctly as well as the special phrase. By the hash it looks like you did not find the hidden phrase (by clicking something). That is what you need to hash. 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Sorry, correct hash is 7e778659fd7f8f8c03bf6cfe8d567b9e2ecb80904d7f259ad8b0b152e8813315

Alpesa1990
Explorer
0 Kudos

Alpesa1990_0-1712082710069.png

1f794888a1c2e8dd459cbc8fb2f17e9fb507666e879872d9b8aa1fc924f5da94

 

0 Kudos

Nice pic 🖼

Unfortunately the hash does not seem correct. Can you make sure your hash has the correct phrase and your correct community ID, without any extra trailing characters/spaces?




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Sorry!

I hope this is correct.

9062522d2979e8f6de9c21b39feff43a3407f48bc37a14977a6dbbae721a18dd

René
Product and Topic Expert
Product and Topic Expert

fd67f86f45d6baa11caf21cba3340b95148119109527298f15917dde2e257426

IMG_4771.png

0 Kudos

Nice! 😸




--------------
See all my blogs and connect with me on Twitter / LinkedIn

ajmaradiaga
Developer Advocate
Developer Advocate

Hola @Dan_Wroblewski, here is my submission for Task 0:

b1b21e7b5b843ff6270408b371e24b2f74081c0d01601002a0fe57b7525eab04

 

ajmaradiaga_0-1712118284212.png

 

geek
Participant

geek_0-1712165120849.png

3b50a0cd3b867264b67b79a987f2a3baf51651e433951cb7f5619ca447c4a242

The preview can be very distorted:

geek_1-1712165398519.png

 

 

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

Yes, the WYSIWIG feature is not perfect ... but you can do some cool things and control the UI very precisely. Thanks for participating.




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Sandra_Solis
Participant

602627f944c07c4fb4dc0be5651f98356b5a7a3fa2cff8c43f71288c94f8ee36

 

Sandra_Solis_1-1712169159595.png

 

alberts
Newcomer
0 Kudos

5fcaf330b682fffcc56cc724fc2d838de47e9d7e4974dabe45db3c42a0a157ef

alberts_0-1712190606695.png

 

0 Kudos

I love the "mirror" effect!!!!

Unfortunately the hash does not seem correct. Can you make sure your hash has the correct phrase and your correct community ID, without any extra trailing characters/spaces?

I notice that the community ID in the app is not the same as your ID in this post 🤔

 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

KarpagavalliK
Advisor
Advisor
0 Kudos

70a4a13cec43740c1fe7406e61899dca92e4b5a6b980067cfaa4f460d9013815

0 Kudos

Do you have a screenshot from the app?

Unfortunately the hash does not seem correct. Can you make sure your hash has the correct phrase and your correct community ID, without any extra trailing characters/spaces?




--------------
See all my blogs and connect with me on Twitter / LinkedIn

beny_illyes_mhp
Explorer

IMG_0584.jpeg

 4a8c41e970e1f33afdc01aed663f649f4f23ce9f9c37bafd7eea992d0eec3bb2

RameshShrestha
Contributor

9348ed3cc4bf3a18b28ca5cabb961e5ee59644d73efc269b401a8374eb709190

RameshShrestha_0-1712213980495.png

 

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

Current status of challenge, Task 0:

 Dan_Wroblewski_2-1712214146771.png      Dan_Wroblewski_1-1712214094875.png

 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Ruthiel
Product and Topic Expert
Product and Topic Expert

Hello @Dan_Wroblewski !
Thanks for this challenge!

Hash: 4d11a458380bb443979545f4519056f4d1b41a35d8c8df5bfc95d521dab4dcdc

Ruthiel_0-1712225666152.png

 

0 Kudos

Nice work (and picture) 😸




--------------
See all my blogs and connect with me on Twitter / LinkedIn

brodierose
Explorer

3b057d438ea4fd83b5c5a97e076d18d5544f023a13cd98aac2cd05a1447eefc9

brodierose_0-1712233980275.png

thomasP
Explorer

Hi @Dan_Wroblewski !

Amazing challenge 👏👏👏

Hash : b6f9ecf931ccd0e70016abd1ab8747b26d6492076e45ba5472ecd31279d63ea6

thomasP_0-1712303228329.png

Thanks!

wjimenez
Discoverer

1c37fc02469f6181c37fc02469f618d64dbcc9502cfea5030cc070fd27875b9f102037238c49f08d64dbcc9502cfea5030cc070fd27875b9f102037238c49f08

wjimenez_0-1712260198416.png

 

0 Kudos

Nice pic!




--------------
See all my blogs and connect with me on Twitter / LinkedIn

LukasG
Explorer

8f1e1c0c4566d1d31e7be97e2bae04ef5edad72263e55bc6fa818fcf702eb4bb

LukasG_1-1712302205062.png