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

eshrinivasan
Developer Advocate
Developer Advocate
0 Kudos

e6ac8d77aedde4e1cec14869d6057d3a33d5e9775513167946bcc0fda76177d3

IMG_0724.png

bugsanderrrors
Participant
0 Kudos

The app is not allowing me to take screenshot.🙁 I am on Andriod 13.

I will poke around with the app and try to learn some more.

0 Kudos

Can you make sure that the SAP Build Apps Preview App has permission to use the camera?




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

0 Kudos

Hi @bugsanderrrors 

I have the same problem on Android. I've seen a question mentioning that this is disabled on Android. I'm attaching the link in case it's helpful: link

Correct me if I'm wrong @Dan_Wroblewski .

Thanks and regards.

Santi.

I've heard the issue on screen recordings, but can you use the camera? That has worked for me on Android.




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

0 Kudos

Yes! The camera works perfectly. 👌

Sorry for the issue .... then just post the hashed message




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

0 Kudos

If you download the app again, you can run it on a web preview, and instead of using the camera you can simply select an image on your desktop. You will have to download the skeleton app again.




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

YogSSohanee
Participant

207fe34023af35eeb221d5d499a2ff54ffd216d11b5957e9d8a339d3a6409492

FirstAppPic.jpg

 

I also tried the camera and audio features to handle the bonus tasks and worked perfectly. Thanks for sharing these tips. 

gphadnis2000
Participant
0 Kudos

aaa116b1f4166f14a91f995f1df405c95660b53fe903811480646381eae6d5c9

 

gphadnis2000_0-1711979606265.png

 

0 Kudos

Make sure your entered your community ID - gphadnis2000 as well as the correct phrase. If you click the correct button, you will see the phrase and it will enter it properly in the string to hash. Make sure no trailing spaces.




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

0 Kudos

Hi Dan,

Despite putting my community id i m not getting the phrase and text box is empty.

Community id : gaurav.phadnis . This is the id i used to check for devtoberfest scored points also

Please help.

Thanks and Regards,

Gaurav Phadnis

 

0 Kudos

 

Got it finally.

Here is the hash 

25186fc1c0346c94249b5ca084232ad0337f6f751bac49fd23020541de17894

gphadnis2000_0-1712049003838.jpeg

 

0 Kudos

I would have liked to see a picture of your cat or something 😸

As for the hash, you must use your community ID, which the ID that shows at the top of your post or on your profile page.

Dan_Wroblewski_0-1712055320385.png

Can you try again?




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

54fcffb01fd5090ccc7944586b5dea06210d7a7120aaeb0ab775b0db9876a8d9

with community id : gphadnis2000

gphadnis2000_0-1712056601143.jpeg

 

 

Clever approach to take photo of the screen from another mobile 🙂

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

We slightly revised the process so that for Android users you can run the app in the Web Preview and upload an existing image instead of taking a new image. Then take a screenshot of the web version.

  • Check out how we managed this 😸
  • This was only possible because we previously got DJ to enable CORS from the Web Preview domain.

I'M learning a lot from this challenge.




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

r00k13d3v
Participant

Here is my (partial) submission ✌️

Hash: 2d82a66c31dd3d669f5278c5f3f7382fafe173b7e4d36ff304ac296e6b9f1a08

I've attempted to capture an image with the webcam from the Chrome preview, but it was unsuccessful. I'll continue experimenting 😅

r00k13d3v_0-1711978351864.png

 

 

 

I updated the skeleton app so that if you’re on the web it will ask you for an image in your laptop. But you’ll have to download and load the revised app.




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

Thank you @Dan_Wroblewski for the help!! I was making my life difficult by doing it through js 😅

 

r00k13d3v_1-1711987289749.png

 

MTNguyen
Participant
0 Kudos

What does it mean?

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.

Why do I have to go to Launch tab in SAP Build, but then run the app in the SAP Build Apps Preview App on your device – not on your laptop?

  • Using the app, take a picture (iOS) or upload a picture (Android). Either way, click Add My Picture. Which app should I use to take a picture actually?

The next further steps are really confusing, isn't?!

The more easy using AppGyver the more complicate using SAP Build & Co. to create a Mickey-mice-app.

0 Kudos

For this challenge we wanted people to get used to native capabilities. But if you want to run on your laptop you can, that’s ok. Just on laptop you can’t access camera so you need to select an existing image.

Or you can just do part 1.

please make sure you have the latest skeleton app we provided.

 




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

AAncos
Participant

f4766b96775820d8636559d9568234a32490899542f5b3807492c73e20662698

0 Kudos

f4766b96775820d8636559d9568234a32490899542f5b3807492c73e20662698

IMG_0342.png

Nice pic 😸




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

0 Kudos

Unfortunately, I still don't see that the hash is correct. Did you click the button with the secret phrase, and is your community ID (what appears for you in this post) entered correctly (I do see it in the screenshot correctly)




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

FranzE
Explorer

Hash: 251e03e4de499dcb01c2cd7e95569ec9d11f068847b37121874341e80aa6f435

FranzE_0-1711994321229.png

 

PieterB
Explorer
0 Kudos

fe1a9e40a6b4a1eb0499f90fda4dd982b4c353545b9c6562c0cde055cf96ad7e

PieterB_0-1711997646409.png

 

0 Kudos

Cool picture 😊

Unfortunately the hash is not correct and I can see that in the screenshot you have your name and not the community ID. Can you try again?

Your ID is what appears next to the post – PieterB




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

0 Kudos

PieterB_0-1712085663563.png

Another try: 179e443ca17d4bc4cf2a1010076fa7c23961b206a40e5db8b9302d9f82dc1dc6

 

AkhilRaj
Explorer

8e3f71e871d4d37c8c7e36a478118d8350ef073256ef106beeca536f464a55d1

 

 

GergoPerlaki
Explorer

33dd4792f122594f2e9dd6ff79275af9da58adba26eec071cb2b072bda6df7b5

GergoPerlaki_0-1712003028909.png

 

Nagarajan-K
Explorer

ef7c198edecc78ba162aaf710745dd7a3cc073774a99c8e0619326dfb67ccdae

IMG_1226.jpeg

Rekha_DR
Developer Advocate
Developer Advocate

IMG_1774.png

 f336a332c8f19b745b2e6e5bd5f69a3f3e173312b906fe25a07ed1cc4ae90423

 

TMSingh_SAP
Participant
0 Kudos

 

80c501be81478fca85aff3f5d5d392969a097be471209ff92df0d1abf5e8f33c

51427.jpg

 

0 Kudos

What is that thing? 😉

The hash unfortunately does not seem correct. Can you do it again and make sure you have your community ID and the secret phrase entered correctly. You will have to click a button somewhere to get the phrase displayed and it will be entered automatically in the hashing UI.




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

0 Kudos

@Dan_Wroblewski    the image is of heart shape pillow.  🙂

Updated as below

5aae91ab161754bcbd45e84c37a7b3a69b4b059b72d4bc083215f718ad45ef27

image_123650291 (1).JPG

0 Kudos

The hash still does not work for us. I imagine the community ID is OK since it is in your screenshot, but can you check the magic phrase?




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

brahammittal
Explorer

e6a359e9c7d760aacf2070594a38cf8b18cdfe94b93cc6fead760e123357b47f

brahammittal_0-1712047694173.png