Skip to Content
Technical Articles
Author's profile photo Daniel Wroblewski

A Social Media Mashup with Visual Cloud Functions (Part I)

Last month, Sergio Geurrero started our Build Bros series of SAP Build example apps with an app that uploads files and integrates with AWS.

Read part II
https://blogs.sap.com/2023/01/11/a-social-media-mashup-with-visual-cloud-functions-part-ii/

You want to create this yourself?
https://developers.sap.com/mission.sap-build-apps-social-media.html

Or do you want to simply import and run?
See the “Sources” section below

Now it’s my turn. Here’s an example of using the new SAP Build Apps backend feature (aka, Visual Cloud Functions) to create a social media mashup with your SAP business data. Using the Northwind OData service, I’ll let users rate products and then have a chat around a specific product.

  • On the products page, users will see a list of products with average ratings and number of ratings. They can click a product to go to its page.
  • On a specific product’s page, users can see the latest comments for that product, can rate the product, and can add a comment.

Notice that the comments are sorted (showing latest first) and paginated on demand, so that just 3 are shown but if the user wants to see earlier ones they can click More and additional items are retrieved.

 

What’s interesting here

A few things I think are cool here:

  • Social Media mashup – We have both business data in the app (from external API), and social data (from internal to the app).
  • Visual Cloud Functions – The app uses the new Visual Cloud Functions, and there is a use case for a server-side function which massages and aggregates the data before bringing it to the front end.
  • Paging – I implemented a mechanism to show only the latest comments, but the user can click More and then the next messages are retrieved.
  • Mashup components – A lesser discussed feature of SAP Build Apps is the ability to create your own components. Here, I mashed up the Large Image List Item component with the Star Rating component, and created my own properties within the composite component.

How I built the backend

In this blog, I’ll describe the backend. In the next blog, I’ll describe the front-end.

In the lobby, I clicked Create → Build an Application → Application Backend, and created a project called Product Rating

In the Entities tab, I created 2 entities.

The 2 entities are:

  • Rating for tracking every time someone rated a product.
  • Comment for tracking every comment added to a product.

Then in the Functions tab, I created a new function:

I wanted to have the output something like the following JSON, showing for every product the average ratings and the number of ratings:

[{"productID":"4","avg":4,"count":1},
{"productID":"1","avg":2.888888888888889,"count":9},
{"productID":"2","avg":2,"count":1}]

So I needed to first get the data from the ratings entity. I clicked + and selected Retrieve records.

And then selected the Rating entity.

This brings all the records, but now I have to create function to turn all those records into what I need. So on the right, we can define the output by clicking Output Value.

I called my output value Ratings and then I clicked Set Formula to get the formula editor.

This was the formula I used:

GROUP(outputs["Rating / Records listed"].records, item.productId, {productID: key, avg: AVERAGE(PLUCK(items,"rating")), count: COUNT(items) } )

The formula does the following:

  1. Groups all the records by product ID.
  2. For each group/product ID, I create an object with the following fields:
    • product ID
    • the average of the ratings from all of the groups records
    • the count of the group’s records.

Deployment

Deployment is pretty easy, and there aren’t a lot of choices. Just go to the Deployments tab, and if all goes well, click Review and Deploy. It will take a minute or so, and you will see a blue dot and Progressing, and when all is done it turns green and says Healthy.

If you make changes that could cause problems for the front-end, it will warn you, but you will still be able to deploy. Certain changes, like changing the data type of an already deployed field, are forbidden.

Once you’ve deployed the entities, you can go back to the Entities tab and add data to them. For this project I didn’t need to add any data. If you need to, click Browse Data → New Record.

 

Sources

I have provided the source projects:

  1. Import the backend project (discussed here) into your SAP Build lobby. You must open it and then deploy the backend.
  2. Import the frontend project (discussed in my next blog). You must open it, go to the Data tab, and create data resources to the 2 entities and the cloud function.
    • In the Data tab, click Add Integration, select Cloud Functions, select Social Media Mashup – Backend, click Install Integration, select each of the 2 entities and 1 function and click Enable Entity/Cloud Function, and click Save

You can import these into the community edition or SAP AppGyver on BTP. These sources do not use a destination but use a standard OData data resource for Northwind, so you can run this right away without a destination.

 

Epilogue

I am always looking for use cases for the using the server-side functions. Here, though it would be possible to do this on the front-end, it makes more sense and is easier to do this on the backend, before downloading a lot of data to the front-end.

My next blog will deal with the front-end part of the app, which includes: mashup of components, custom components, paging, filtering and sorting, calling server-side functions and entities, and more.

Let me know if you have any questions so far.

Happy Building!!


See all my blogs (Daniel Wroblewski) and connect with me on Twitter / LinkedIn

 

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      #BuildBro  this looks great. I am glad to see how easy you make it look... Creating Entities is such a fundamental task for any application and the more dev is going to LCNC, you are showing something that seems very simple to achieve for anyone who has little or pro knowledge in the SAP BTP.  Much of the data world does not make sense by only showing the database side but you have also added the Visual Functions which completes the backend scenario on how to expose data, how to create a calculated field (and showing a function).

      One of my questions as a developer (just for curiosity) would be how long does it take to create an entity and how long does it normally take during deployment of something like this?  anyways, I look forward to seeing the next blog talking about the front end part of this social media mashup application. Thank you again for sharing with the #SAPCommunity

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski
      Blog Post Author

      I haven't tested it with dozens of entities and fields (when deploying or importing the data is not part of the process), but when I deployed here it took a good minute, which seemed a little long, but not sure. In terms of VCF and the database, I am sure development is just at the beginning, and will add even better performance, import of data, access of the database from external sources, deployment to different landscapes (dev/QA/prod) and more.

      I think you'll like the front-end, where I'll talk about accessing the VCF, filtering, sorting and paging, composite UI components and more 😀

       

      Author's profile photo Chandra Bhushan Singh
      Chandra Bhushan Singh

      Thanks for the great blog. Have you heard anything by when can our customers can preview the applications built using SAP build apps using the preview app functionality?

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski
      Blog Post Author

      You know there is no way I would make any predictions about release of features 😀

      I am also looking forward to that feature, and I'm sure development is working hard and hoping to release soon. Sorry I cannot be more precise.