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

[Dan_Wroblewski]

The challenge is now over. See our wrap-up blog.

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:

• Task 0: Set Up SAP Build Apps (this post)
• Task 1: OData 
• Task 2: Formulas
• Task 3: Theming, Styling and Layout Design
• Task 4: Mobile device capabilities

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.

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.

• Install the SAP Build Apps preview app on your mobile phone/device.
  • iOS App
  • Android App

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).

• 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.

• 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.

• 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.

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

• 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:

 

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.

[anumalasingh]

Thanks for letting me know. Now i am using correct community ID.

Hash - 79bb19ec424c0fb9fbc0fcb0aeb1d99fbde436f2f85f5a91b68d5dd4fa0c42ac

[RAHUL1221]

62bbf13a7cd29823621b81188cd244ac63fc60b17bd02d33f2f96d6938045678

[astridvdt]

7c4e3b9db28118adb387e7f1d36a798ba1f54e8ed3544bc67db0499ae11424c5

 

[Jonathan_Fr]

199cf94ffc6848c8a24a839c4e35f253d6a973a91714754aa3299ca20a5d3e6b

[Dan_Wroblewski]

Scrooge McDuck!!!???

[rubin_luke3]

f61e0b296fd3813f3f3707eb9d280dfde6500b8318c6747cb1ecf35e8f9cc368

[Dan_Wroblewski]

Nice screenshot!

Unfortunately, the hash is not correct. I can see that you did not enter you community ID to do the hash. Your community ID is what is shown at the top left of your post: robin_luke3

[rubin_luke3]

Hi @Dan_Wroblewski , Thank you for pointing the error. I have now the new hash id generated.

121966044dcb5e22220681576e4364cb479db26d9ddc0ee2d6cf188a7042cf61

Regards,

[Dan_Wroblewski]

hmmm ... it still doesn't hash correctly for me. Sure you have the correct community ID and phrase?

[rubin_luke3]

Hi @Dan_Wroblewski ,

Apologies. I have entered my community id rubin_luke3 as in the screenshot. also the the string to hash is 

this-is-the-year-of-the-api

Am I doing something really wrong?

and the hash generated is 121966044dcb5e22220681576e4364cb479db26d9ddc0ee2d6cf188a7042cf61

[Dan_Wroblewski]

Sorry I was not clear. All looks good except that phrase was the phrase DJ used in his contest. In our instructions, we wanted you to find a secret phrase in the app by tapping on something ... this will automatically enter the phrase in the correct place.

[rubin_luke3]

Hi @Dan_Wroblewski 

Sorry for that...

Corrected now.

5f90183e558a2e8a38fa94c231f336c1a1389ef4caf2bcbc6ce2583e513b6ba9

[nex]

d1d21d78156ece8b806cfa5360c09df2eefc4a9ec4fa0d7f7fa5fe9e2d461d2e

 

[Ansar]

1bbef91bab4c0cc322186cd0017a43cf89049e7669df620faccaf28b5b4aeec7

[Dan_Wroblewski]

Nice picture! Just what we like to see 🙂

Unfortunately, the hash is not correct. I can see that you did not enter you community ID to do the hash. Your community ID is what is shown at the top left of your post: Ansar

[vincenzopar]

7bf6ee3d3f32b3c033b7cf3b54b064ef63c28adc5f6999b5f594b8b079581a9f

[Dan_Wroblewski]

Nice pic 😸 and thanks for entering. But the hash is not correct probably because you entered not your community ID, which appears on the top left of each of your posts: vincenzopar

Please just correct the hash

[vincenzopar]

Thanks for letting me know. 

New Hash: ec4daf24611f624dd48e5784e1c78ab08467a18531dd424fd3d036716875c19b

[Dan_Wroblewski]

Check out the leaderboard for the challenge and see your status: https://community.sap.com/t5/sap-builders-discussions/leaderboard-for-april-s-sap-build-apps-challen...

[Curious-h]

0f90a3ff8ae212e61185e17748154ce9db3e1d30d6551235723c0c6f37c1701d

[Dan_Wroblewski]

Thanks for entering 😸

Do you have a screenshot? And unfortunately, it looks like the hash is not correct. Check that you have your actual community ID and that you found the secret phrase.

[edemey]

9390eb30961dcc098520600655eb7b94c37e2374d84908f686074dddfced2f13

[SubaR]

Hi Team,

This is a great start of the challenge! Nice music!🎶

Trying changing to front camera for a selfie, its was a easy change

dce6fb1755e833084fd3a8f83f9456f0088158bc551d51c84917aec1cc4b294e

[Dan_Wroblewski]

Nice work 😸Looks like your a natural in front of the camera 📸

[ayushpattnaik]

checking my community ID

[ayushpattnaik]

hash : 4fbe3c6ceb258b49ce96ae6af4a1814cf53262bc83815f90add11b30d5d619d0

[jose-becerra]

Hi everyone!

9bfe03484b9d563a771bd874f0ede142a1cc93946e340963f36e7ed6b5a3e09f

[Dan_Wroblewski]

FUTURAMA!!!!

Nice job

[Dan_Wroblewski]

Make sure to join the SAP Builders group to be updated on all things SAP Build!!!

1. Go to https://community.sap.com/t5/sap-builders/gh-p/builders
2. Sign in
3. Click Join Group

[Vaibhav_Sapra]

First thing first, thanks a lot @Dan_Wroblewski for bringing this up! Was looking something similar to dig deep into the capabilities of BUILD

For some reason, camera doesn't open on my iPhone 13 running on iOS version 17.4.1.

Enhanced the app logic to capture the error output of the Take Photo function to see blank error as this

Here is the Hash though:  165970781bc86ec1f22afc4294c67ba457f6a60dbb3724a764acab59be5a8cac

[Dan_Wroblewski]

Strange, since I also have an iPhone 13, updated to the latest iOS. Can you make sure that you have enabled the camera for the preview app?

Also, the hash is not showing as correct for us. Can you make sure the secret phrase is entered correctly when you hash, and maybe provide us with a screenshot of the hashing page just before you hash?

[Vaibhav_Sapra]

Hello @Dan_Wroblewski , 

Here is the Hash : 165970781bc86ec1f22afc4294c67ba457f6a60dbb3724a764acab59be5a8cac

And the screenshot:

[Vaibhav_Sapra]

Yeah, camera access was missing to the Build Preview App. How silly of me :). Thanks for your support!

[nilkumar]

75fb5ae4f87791514f477c065739ebc176562fa70bc8e889da4f9f2c4feac44a

[kubilayelkenci]

0f6b4fd5c0cee82e9b78d6e7415e9c0239c01580a1e238b7374d7f3bb369a2bd

[eshrinivasan]

Hi, unfortunately the hash doesn't look right. Could you please recheck the instructions and try again?

[kubilayelkenci]

Updated hash: 5c3104629b15fbfa25d7af7331c03c78676d612b0342e6ca8223b0764f5f1a65

[eshrinivasan]

The hash still seems not right. Do you have screenshots of the app? May be the community id is not entered correctly? 

[kubilayelkenci]

78df61c4aad67c988cd1c8c79d3918105fb1399e430c059cd324c814d88a90ec

[Dan_Wroblewski]

Maybe there was a bug in the original app. In the String to Hash field you must put in the string to hash, as in the instructions ... find something to tap that reveals the hidden phrase (that is related to May 4, by the way)