April (Citizen) Developer Challenge – SAP Build Apps: Task 4 - Mobile device capabilities

[eshrinivasan]

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

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: 

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

________________________________________________________________________________

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. 

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 

2.Login

3. Create Project

4. Generate an API Key

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: 

• https://community.sap.com/t5/technology-blogs-by-sap/how-to-use-rest-apis-in-sap-build-apps/ba-p/135... 
• https://developers.sap.com/tutorials/appgyver-connect-publicapi.html 
• https://learning.sap.com/learning-journeys/develop-apps-with-sap-build-apps-using-drag-and-drop-simp... 

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 

 

Configure REST API 

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. 

  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  

Task 4 – Part 2 output 

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. 

[YogSSohanee]

Hello, 

I am referring my message with this note.

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. 

Here it is mentioned that query and ll(longitude and lattitude) will be coming from build apps. I understand about the query since we will be clicking on the 4 buttons and that will act as a query, but for ll, is there a piece of logic I am missing or is it not specified here, that from where we will get it dynamically? Please suggest. Thanks.

[eshrinivasan]

Good question, the format required for ll is specified in the foursquare api documentation. It has to be constructed using formulas using the values obtained from GPS location flow function. 

[YogSSohanee]

Thanks  eshrinivasan!

[SMaaLL]

Hello ,

Hash is 1bf733c105e6335674df67f36ef0055532f50fb5d6d1c0bf17d8366166dd630f

I have problem with Icon display in the list item. I've got a 403 error and don't know how to fix it 😥

[eshrinivasan]

The size is missing between the icon prefix and icon suffix.

[SMaaLL]

Thanks @eshrinivasan , ScreenShot of the my Part 1

[ajmaradiaga]

Part 1:

Hash - cb88e0f97807fe5e7d72e6b738215b85b652e9c5aaaec6380e71f6a92dbe576f

Part 2:

[ajmaradiaga]

Apologies for not including the details page before.... I've been struggling formatting the reply to include two images. Now it includes part 1 and 2 🙂

[Jonathan_Fr]

Task 1 : 

af2ca8080378cc8aeb30659effa1a806258690b66264cef0c352302359392f30

[Rekha_DR]

Part 1 Results: 

a8298fcd12163b85448bca8a8265e8b2456e15a12f226bba1cc18cfdb4f6b9a6 

[eshrinivasan]

The homepage list icon is a "Croissant" or some sea food?

[YogSSohanee]

Hello,

I have an issue calling the test API call from the BUILD apps. When i try to do the GET Collection call, I could see the data being returned in the Network tab of the browser, but in the BUILD apps preview it was giving this error. Can anyone suggest how to resolve this? 

I provided the required Header and Query parameters. Following is the URL i am using.

[Jonathan_Fr]

Hello, 

tips for find the solution : 
>> The GET_COLLECTION wait an array, analyse the json result, and you can see you have not an array. So to resolve this problem, you need to address the correct path in the response to get an array directly.  😉 

[Dan_Wroblewski]

@Jonathan_Fr thanks.

@YogSSohanee If the API does not return a list, SAP Build Apps does not automatically know which list inside the response is the one you want so you have to tell it, in the response key path field (just a JavaScript notation from the root of the response).

[YogSSohanee]

Great... thanks both of you for your quick responses. I will check this out. 👍

[beny_illyes_mhp]

I couldn't wrap my head around this part, until I found this link : https://www.youtube.com/watch?v=hNkIDQMfYsI

 @Jonathan_Fr & @Dan_Wroblewski explained it pretty well, but this video linked up everything. Maybe it helps 😁

[geek]

Must be missing something basic here, created an account with foursquare yesterday buttons are greyed out:

UPDATE: Personal e-mail works.

[nex]

f9f0589a14f65073eff138d8c27cac3a7580153db54ac2b245d35d3fd9a965e6

EDIT: updated with Part 2

[RameshShrestha]

Hi @eshrinivasan ,

Hash:

7d594987ae0ad529bc58307313dcf02bcaa93b4e75421c7da8349f6fc486a29f

Task1:

MoviesCafesDetail Page

One Request : Why the build app is not allowed to take screenshot. I am using Android Phone. Hope it is allowed in future.

[beny_illyes_mhp]

0798a81544bd60221943b2c4183dd08945f88fee4d381466703bded8a9f2a8d5

Will update my response after I complete part II (still have to figure out how to fetch all the photos from the API 😅)

[YogSSohanee]

Part 1 : 

Hash - c79825a95ae8ecf0946c4d0892af3565cae3ae916806fcbc79ae7fd5e3462508.

Part 2 :(Updated)

wow.. that took some digging through the settings :-D. Really helpful though to get a deep understanding of the Build apps terminologies. 

[beny_illyes_mhp]

Hello guys,

I would have 2 questions regarding part 2 of the challenge : 

1. Regarding the Get Places Photos API - I get some preview photos from a sample location after I set the Data Variables and bind the photos to the image part (by using Formula), but, when I try to preview the app, the photos are not loading for any location. Any idea where could I look for possible errors in my implementation? I couldn't find anything wrong (from what I can tell).
2. I tried implementing the function for the Check Distance, by using a JS Flow Function box and then passing on the result from it to a "distance_calculated" Page Variable. It didn't return anything and I also saw in the Chrome Debugger that it returns an error. Not sure what I did wrong, maybe you could help me out with some hints on what to look for.

[YogSSohanee]

Hi  beny_illyes_mhp,

Is there any error on network call while calling the photos api in the web preview? Sometimes i observed that the location data doesnt get passed correctly to the API and then it doesnt return the photos data. If this happens, then you just need to close the browser and open again, so that it will again ask you for the location access permission popup.

Another way to check during the app execution is to put a JS after the data variable assignment in the logic canvas, and in the JS, capture the data variable as a input parameter and then in the JS put a console log to check if the data variable is being populated with correct data or not. The reason for putting console log in the JS is that sometimes it doesnt load the input parameter variables correctly in the JS if the context of those variables are not specified somewhere in the JS. 

For the 2nd point, can you show the error that you are getting with "distance_calculated" Page Variable?

[beny_illyes_mhp]

It's very strange, in the sense that, whenever I click on one of the places loaded, the Get Photos API call is not getting triggered (nothing shows up in the Network tab of the DevTools; for the Get Details, there is a call and the details of that particular location are loaded). However, when I'm editing it in the UI Canvas, photos of a sample location are loaded.

Regarding point 2 : I also tried adding the formula @Dan_Wroblewski used, but now, when I click the button, nothing is happening.

[YogSSohanee]

Hi ,

Couple of things to check:

1) Whether the page parameters are getting passed correctly from home page and make sure they have the same name as you have defined them in the details page. 

2) On the details page, where you setting your data variable with the Get Record Collection in the logic canvas of the data variable, try to put a JS after the "Get Record Collection" and observe if the API call is happening correctly or not. Also while the data variable gets called, the fsq_id gets passed, so pay attention if the fsq_id is getting passed correctly or not. This is where the page parameters will play an important role.

[Dan_Wroblewski]

Couple of holes I fell into:

• I used the id field instead of the correct fsq_id field.
• My photo API was working but the images were not displayed, and only after I specified an exact width did they appear.
• If you do not see any network activity, then make sure you have a flow function actually making the call -- this is very curious you do not have an API call. If you have to add one manually, do so.
• I copied by get record collection and set data variable flow functions from data pane to page logic pane, but hen the output for the set data variable is no longer valid, and I forgot for a while to reset this to the output for the current page's get record collection.
• Also, briefly, for some reason I cannot explain, my data variable had the places API fields when I went to bind data items in repeat.

Just take it step by step in order to debug, for example:

1. Does the data resource Test work?
2. Is the data variable running flow function and returning data?
3. Is the UI component bound properly?
4. ...

[beny_illyes_mhp]

Thank you @YogSSohanee & @Dan_Wroblewski for the help. As it turns out, I didn't maintain the fsq_id for the Photos API (for the Details API it was maintained) 🙈

Regarding part 2 : I manage to return the correct distance (I see that from an Alert in the Logic Canvas), however, the description is not getting updated with the updated page variable. I guess I'll have to do a Javascript to update that particular text

[geek]

Halfway there:

c3b709a933a9a4b43d55a03a305ad9dd13c5e97b01f4286ca47a8a0c7124686e

[geek]

So comforting to see this:

Solved: Can a page parameter be a number? - SAP Community

[geek]

Worth noting that needed to call the GPS function on both screens.

[Vaibhav_Sapra]

Hello Team,

Here is my sumission for part 1

Hash: 3e51094ff247d6c9f584d70ca5886434a135a3b252a184ea3e12d3429be53493

Screenshot:

[Dan_Wroblewski]

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

[Vaibhav_Sapra]

Hey Dan,

Here is screenshot of my Hash Screen, i am still getting the same hash

3e51094ff247d6c9f584d70ca5886434a135a3b252a184ea3e12d3429be53493

Also, i am facing some issue while trying to create formula for web-url of the image, getting a 404 on the network

@eshrinivasan @Dan_Wroblewski 

[YogSSohanee]

Hi Vaibhav_Sapra

For the string to hash variable, you might want to look into the actual system variable you are using in the formula for getting all the sensor data. The one you have maintained in the string to hash field is not correct.

And for the URL, the size for the photo seems to be missing in the formula. Please refer to this Assemble_photo_URL . Hope this will be useful.

[Vaibhav_Sapra]

Thanks a lot for your inputs @YogSSohanee .

Here is my updated Hash: 17d8962a1151562cf14e6b6c6acb775846f68a2c8741e1ffb737d4568e20b730

[Dan_Wroblewski]

Still not quite right ... can you show the hash page again?

P.S.: The app looks nice 😺

[Vaibhav_Sapra]

Hello All,

Here is the Check Distance Functionality with a javascript function for now.

And here is my Hash Page, hope it is correct now

Hash : bcb9d15e59a98b1eb0c3e09d68541e04f2664adcea09bae78ae18ac3289ddf6b

[eshrinivasan]

Hi Vaibhav, still the hash seems incorrect. Remember it is an object name and it has to be exactly as shown in the formula editor.

[stickman_0x00]

fdf88fb3b3b2300adf61f4c9e93c68eda905374a3d68a51090ca608254bc1c54