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 4 - Mobile device capabilities

eshrinivasan
Developer Advocate
Developer Advocate
6,524

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

2023-12-24_18-40-33.png

In Task 3 of our challenge, you added theme, styles, and layout design for a new but otherwise empty app. This week, you’ll connect the app to Foursquare APIs and enable native mobile capabilities to end up with an app for finding activities near your area. 

You’ll need to have done Task 3 first, or at least download the skeleton app. 

The challenges so far: 

________________________________________________________________________________

Mobile Device Capabilities in SAP Build Apps 

There are few readily available native device capabilities in SAP Build Apps which can be found by invoking the logic canvas from the lower drawer once you click on a control such as a Button.  

Scan QR/barcode, Take Photo and GPS Location are native device capabilities provided by SAP Build Apps. 

  • Scan QR/barcode invokes the built-in device camera to scan the QR/barcode values. The output of this flow function is Text content of the scanned QR/barcode. Permissions to access Camera must be provided on the device for this feature to work. This feature works only on mobile devices and is not currently supported on the Web. 
  • Take Photo invokes the built-in device camera to take photos and bring it into Build Apps canvas. The output of this flow function is an object representing the captured photo file in the local filesystem. The object contains the name of the file, path, size of the file in bytes, mimeType, createdAt and modifiedAt. Permissions to access Camera must be provided on the device for this feature to work. This feature works only on mobile devices and is not currently supported on the Web.  
  • GPS location capability outputs an object representing the GPS position of the device when the flow function is called. The object contains latitude, longitude, altitude, accuracy, altitudeAccuracy, direction of heading, speed and timestamp of the device. The location setting on the device/browser must be enabled for this feature to work.  

The output from these flow functions can be sent to an API to retrieve more information or for further processing. 

eshrinivasan_0-1713923072036.png

In this task, we want you to explore the GPS location (latitude, longitude) capability to find user’s location, send it to Foursquare’s Place Search API to get and display places near the user. You will add logic to the place of interest buttons (Cafes, Movies, Bars, Restaurants) to retrieve the Places Search API response by providing a search query and the latitude and longitude obtained from the GPS Location.   

 

Set Up 

Foursquare: Sign up for a foursquare account and get started with the Places API. Skip the “Apply for Movement SDK Access” step as it is not required for this task. Login to your foursquare account, create a project and generate an API key to access Places API as described here. In this task, we will use Place Search API using the Latitude/Longitude as described here

1.Sign up 

signup.png

2.Login

login.png

3. Create Project

70fa1af-create-project.png

4. Generate an API Key

6117037-api-key.gif

 

SAP Build Apps: To learn more about how to connect to REST APIs, use page, data, app variables and page parameters used in this task, you can use the references below: 

Your Task 

In Part I, we want you to hook up the app to the Foursquare Place Search API and make it so that when the user clicks one of the buttons, say Cafes, the app will show a list of cafes.  

In Part II, we want you to enhance the Details page with Photos and Address received from Get Photos API, Get Place Details API as well as add a custom logic to calculate the user’s distance from the selected place.

Part I 

The skeleton app already has 2 pages (Homepage and Details page) with a basic structure of the pages. You just need to do the following: 

  1. Create a data resource for Foursquare Place Search API. Configure 2 HTTP headers, 4 query parameters on the GET COLLECTION method to get the results from the Foursquare Places Search API. 
  • HTTP headers: Accept and Authorization 
  • Query parameters: query, ll, open_now ( true ), sort ( Distance ) 

Rest API Direct Integration 

eshrinivasan_5-1713923798831.png 

Configure REST API 

eshrinivasan_6-1713923798832.png

Note: The query and ll query parameters configured for the REST API in the data tab should be non-static, optional value as it will be coming from the Build Apps based on the selection of buttons and latitude/longitude respectively. 

  • Create a data variable to save the response from Place Search API and provide static values for ll and query to populate the list by default (without clicking on any buttons). 
  • Create page variables for latitude and longitude. 
  • Attach flow functions to the buttons (Cafes, Movies, Bars, Restaurants). On Component tap, the flow functions should
    • Pass the query and latitude/longitude in the required format to the Place Search API 
    • Get the response from the API and set it to the data variable 
  • Bind the response from the data variable to the list on the homepage and then map the list elements to fields (icon, name and address) in the response as shown in the screenshot below. The places shown would be different in your list, as the list shows places near the user’s location. 

list-page.png

  Tips: 

  • Flow functions setup for one button can be copied using Ctrl + C to another button’s logic canvas and pasted using Ctrl + V. Then redo the input/output binding to the functions. 
  • For the icons to display in the list item, combine icon prefix with a size (32, 44, 64, and 88 are available) and add icon suffix, e.g. default64.png using formulas. 
  • You can use browser developer tools network tab to see the REST API query, request headers, query parameters being passed for troubleshooting the API connection. 
  • While creating a data resource, enable and use the GET COLLECTION method when you want to retrieve a list of items (an array) and GET RECORD when you want to retrieve one item (an object) and pass a unique id. 

 2. Save the solution: Be sure to set your community id as the app variable on this app if it is not already set. Provide the name of the main object that stores the readings such as accelerometer, barometer, compass, geolocation etc. from device sensors, as the value(maintain the case sensitivity) for String to Hash input field on the Generate Hash page and generate a hash. Hint: You can explore this object in the Formula Editor of SAP Build Apps. Take a screenshot of the homepage, save it along with the hash. You might need it to submit later. 

 

Part 2

There is a Details page provided in the skeleton app. 

  1. Connect to Get Place Photos API, set the data variable for the page and map the data variable to display all the photos of the venue on the Details page in the placeholder provided for images. Align the images horizontally by making layout changes to the container enclosing the images. In addition to Accept and Authorization headers, you may need to use the URL placeholder field to pass fsq_id ( set as "is optional ") on the GET COLLECTION method to retrieve list of photos.
  2. Connect to Get Place Details API, set the data variable for the page and display the name as title and the address of the venue in the placeholders provided on the Details page. In addition to Accept and Authorization headers, you may need to use the URL placeholder field to pass fsq_id ( set as "is optional ") on the GET RECORD method to retrieve details of a specific place.
  3. Connect the Details page to the list item on the Homepage so that the Details page of the clicked item displays the photos, address etc. You will be using page parameters to pass the fsq_id and distance from Home page to Details page. 
  4. In our app, let's say now we want to implement a custom check in functionality and not use the foursquare APIs. To achieve that, we want to allow customers using the app to be able to “check in“ to the venue, only if they are closer to the venue, for eg: within 5 kms.  

Below is a sample reference function that returns true/false based on calculations to determine if the user is near to a location.  For our task, we want to display the distance, a user is from a venue, by clicking the Check distance button. Use formulas in SAP Build Apps to achieve this functionality. Display the distance in km in the placeholder text provided below the button.

 

 

function arePointsNearBy(currentLocation, venueLocation, km) { 

var ky = 40000 / 360; 

var kx = Math.cos(Math.PI * venueLocation.lat / 180.0) * ky; 

var dx = Math.abs(venueLocation.lng - currentLocation.lng) * kx; 

var dy = Math.abs(venueLocation.lat - currentLocation.lat) * ky; 

return Math.sqrt(dx * dx + dy * dy) <= km; 

} 

 

 

To implement the check-in functionality, we could use true/false to determine if we can allow the user to check in. We will not be implementing the check-in functionality as part of this task. 

Submit Answer

Post a reply with the following: 

  1. A screenshot of the Homepage with a list of Cafes near your location along with the hash generated in Part 1. 
  2. A screenshot of the Details page of a specific Café showing the distance coming from Foursquare Places Search API and the distance calculated using the calculations in the sample arePointsNearBy function. Ignore any minor differences in the distance as our custom logic uses a different formula compared to the distance coming from Foursquare APIs. 

Task 4 – Part 1 output  

list-page.png

Task 4 – Part 2 output 

eshrinivasan_9-1713923798838.png

If you have reached till here, Nice Work! You have now completed Week 4 of Developer’s challenge successfully.  

Thanks for participating and enjoy using the app to search for places of interest! Feel free to add in the comments any improvements you can think of on the app or mention the parts of the exercise you found to be tricky. 

79 REPLIES 79

stickman_0x00
Explorer
0 Kudos
2,588

stickman_0x00_0-1714245427310.pngstickman_0x00_1-1714245448022.png

fdf88fb3b3b2300adf61f4c9e93c68eda905374a3d68a51090ca608254bc1c54

0 Kudos
2,843

Sorry but as I see the hash is not correct ... can you just double check the community ID and the string you are hashing?




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

0 Kudos
2,428

stickman_0x00_0-1714311223146.png

I don't understand were I went wrong.

0 Kudos
2,377

First, nice screenshots of the app 🎉

The string to hash is the name of the object in the formula editor that contains all the values for native mobile capabilities, like latitude or gyroscope or accelerometer




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

2,281

I see, I did not use that object, i use directly "Device GPS location" to set my variables.
95dd39f48a747f22d06661979a6f640cd579341d79c8dca5ca85f83e0b750b8e

Dan_Wroblewski
Developer Advocate
Developer Advocate
2,661

Had to try it 😺

Part I

9d2e4d6c2969fa6888838133085c1e9890cdebc79a9c631eaabdbeb5058e4828

entry2.png

Tips:

  • ll query parameter in this format: <latitude>,<longitude>
  • query query parameter can be empty, and just adds a filter. If provided, can match almost any of the parameters (like category) or the name/description itself.
  • The hashing screen may not be set up properly, specifically, he binding of the stringToHash variable. Just make sure you are hashing properly.

 

Part II

entry1.png

My formula:

"You are " + FORMAT_LOCALIZED_DECIMAL(SQRT(POWER(ABS(data.FS1.geocodes.main.longitude-appVars.longitude) * COS(PI() * data.FS1.geocodes.main.latitude / 180) * 40000/360,2) + POWER(ABS(data.FS1.geocodes.main.latitude-appVars.latitude) * 40000/360,2)),"en",2) + " km away"

 

 




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

0 Kudos
1,894

The one liner formula seems interesting! Thanks for the tips Daniel.

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos
2,627

IMPORTANT NOTE: Make sure when you do the hash that the "String to Hash" input box is bound to the "stringToHash" app variable.




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

M-K
Participant
2,327

My Hash: f5f257949eb93bbc7426bb0ee821e496103694a9b01e1b8e722ab312f4aa538d

build5.1.jpg

build5.2.jpg

VinayKumawat
Product and Topic Expert
Product and Topic Expert
0 Kudos
1,938

Part 1:

Hash : 2ea183ae4e7826800a618ced5d0c77c5703811ba84c12feb776f050925380527

VinayKumawat_3-1714366452687.png

 

Part 2:

VinayKumawat_2-1714366420230.png

 

It was great learning, thanks for the month-long challenge, learnt a lot.

1,871

Screenshots look good!  Unfortunately, the hash seems incorrect. Community ID seems fine on the homepage, so must be the value that needs to go into "String to Hash" field. Also please check if the "String to Hash" field is bound to the App Variable -> stringToHash

VinayKumawat
Product and Topic Expert
Product and Topic Expert
0 Kudos
1,860

Thanks for the suggestions @eshrinivasan . I am not sure what went wrong.
The "String to Hash" field is bound to app variable, see screenshot below:

VinayKumawat_0-1714376772689.png

I am using the GPS object name from formula editor, see selected in below screenshot:

VinayKumawat_1-1714376867388.png

I tried the hashing API in data tab,
hash: 

2ea183ae4e7826800a618ced5d0c77c5703811ba84c12feb776f050925380527

see screenshot below:

VinayKumawat_0-1714380656496.png

 


 

1,677

GPS location is not the correct string. We are looking for the name of the JavaScript object that you will see in the formula editor that contains all the mobile capability data. Go into the formula editor and see the object that holds all the sensor information.




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

VinayKumawat
Product and Topic Expert
Product and Topic Expert
1,655

@Dan_Wroblewski  thanks for the clue, hoping this time it is correct:
891d85afe3c68cec7d0335af69aa33f5031902dd7c88100a2caafda797e86774

Ruthiel
Product and Topic Expert
Product and Topic Expert
1,924

Hello!

This is my hash:

5f73bc098f1a9232f5b94ce6d2e0c62b3a59951b136a5c4ac7039bbbe7092c96

 

Ruthiel_0-1714340755510.png

I find the information a little bit confusing this time.
It was hard to complete this task for me.

 

Thanks!

1,796

Thanks for the feedback. Since its the last week of the challenge, its designed to be little harder than the previous weeks and many steps to perform without step by step instructions.  I am glad that many participants were able to do the complete challenge.

narendran_nv
Explorer
1,923

Here's my hash: c20121f9f09def9ee2c23239cdb6c79746eb93fa5631198368763a294ba439a6

Screenshot from Part-1:
Citizen Developer Challenge – SAP Build Apps (Task 4-1).png


Screenshot from Part-2:

Citizen Developer Challenge – SAP Build Apps (Task 4-2).png

jawahar_bosch
Explorer
1,897

Here my Hash - 

e070dd59b916de9ecf23d9f4c03903faac9e91443a9edb09bfa91f21baec6b0f

part-1:

jawahar_bosch_1-1714365825042.png

 

 

Alpesa1990
Participant
1,809

My Submission Part 1

Alpesa1990_0-1714394787568.png

Hash: 61a3e4ce441a279d1e62cdbc7e2ab2b7478298e1e5c9bc8794b248eb5aee5c08

0 Kudos
1,800

Looks good. Thanks for participating in the challenge!

1,460

Update my submission wtih Part 2

Alpesa1990_0-1714502606980.png

Congrats for the challenge!!! It was amazing!

tobiasz_h
Active Participant
1,755

Hello,

Task1:
Hash: 24cc8a822e8ff93ec82ff3aff04eee6e07e5b61e7be6c274d7aac3722dbfa663

tobiasz_h_0-1714403709804.png

Part 2:

tobiasz_h_0-1714489533758.png

Edit 1: the second task was added.
Edit 2: thank you for the great challenge!

 

PieterB
Explorer
0 Kudos
1,735

Great challenge - Thanks for challenging me 😉

HASH

4a28b3a8d628148deb86e559b7feba5cfc3deaaa0979c9040631105206e34b8d

Part 1

PieterB_0-1714407915065.png

Part 2

PieterB_1-1714407915080.png

0 Kudos
1,676

Great app ... the hash is not quite right ... the string to hash is the name of the JavaScript object in the formula editor that contains all the fields for the mobile capabilities data (e.g., accelerometer, location).




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

1,285

Another try (had hashed the name at the left): 9276fedb6a9767c19c8868ea52b8e08d7ed0f73dad699df613fcd61cfa2ab49a

0 Kudos
990

Looks great !!!




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

Leon42
Explorer
0 Kudos
1,605

D0a2aec79b9b932a1322521d22e81d42528d798171d87abd738ee8462d47d5b2

 

Leon42_0-1714468993784.png

Leon42_3-1714469302964.png

 

 

 

eshrinivasan
Developer Advocate
Developer Advocate
0 Kudos
1,593

Excellent job with homepage and Details page calculations. However, the hash doesnt seem to be right. Could you look into the formula editor for the name of the object that we are looking for?

1,552

4525a31fbb4024c83ffe33fc73121d804138d41449741c4955135d0e1a7777f1

I hope this one is correct!

anumalasingh
Explorer
0 Kudos
1,605

Please help.. i created an account in foursquare yesterday but it's not allowing me to create any project.

anumalasingh_0-1714469276795.png

 

1,596

@anumalasingh Had similar last week using a business e-mail address and had to raise a support ticket with foursquare but they can take a day to fix. Alternatively, try using a gmail account.

0 Kudos
1,536

but i used my personal email account. not sure what is the problem.
@eshrinivasan  Do we need to complete this challenge by 30th april only? or we can extend?

1,532

Today is the official end date for Build Apps Challenge and from tomorrow a different topic challenge starts. However, you can continue to complete the challenge beyond today.

VinayKumawat
Product and Topic Expert
Product and Topic Expert
0 Kudos
1,518

@eshrinivasan please share latest leaderboard...

emiliocampo
Explorer
0 Kudos
1,242

emiliocampo_2-1714559536107.png

Hash: 1a036c4670da19ed22001afe7fa9ff123ef6a7c3c31b7e38196d97f6da4ccdd2

emiliocampo_1-1714559481880.png

 

Vaibhav_Sapra
Participant
1,106

bcb9d15e59a98b1eb0c3e09d68541e04f2664adcea09bae78ae18ac3289ddf6b

eshrinivasan
Developer Advocate
Developer Advocate
0 Kudos
1,101

hash:

c3f881f94ab3494b301b0e5a1e6e96acfb3e49e65c32507daa980d50cf012dac

SantoshC
Explorer
0 Kudos
1,006

Hi @eshrinivasan 

My Submission

Task1 :

ad19443be163bbce27855f872e914368f00568d9e630ebfb1a5a39757c1c6029

SantoshC_0-1714729601354.pngSantoshC_1-1714729642913.png

Task2:

SantoshC_2-1714729671122.pngSantoshC_3-1714729707274.png

 

sureshmusham
Product and Topic Expert
Product and Topic Expert
0 Kudos
968

9b4c51a168f8c7fa4b69dae360be18a3b5a81e677018af7a2297a252c9270caf

IMG_8045.png

IMG_8046.png