SAP4Kids - Improving People's Lives with SAP Cloud Platform

[mariusobert]

In this post, I'll show-case the technical foundation of a charitable project I had the honor of working on in the past few weeks. All of us have been impacted by the current health situation with COVID-19 to some degree. Sadly, there are many families who now struggle to find the most basic resources. Together with GENYOUth, a U.S. national child health and wellness nonprofit, SAP has developed the SAP4Kids program. SAP4Kids goal is to help ensure families have access to the food and other critical resources they need when they need them.

This story began about 5 weeks ago when my manager asked me if I'd be interested in doing some UI5 development to help this charitable project. I didn't have to think twice and responded with "Yes" as this seemed like a great opportunity to do good. On top of that, this is project goes beyond Hello-World demos that I usually do so I can gain some real-life experience with SAP Technology. We have done some great progress in the past weeks and went from a vague idea to a fully functional software component. As of today, the database is already populated with over 50,000 food offers from more than 26,000 unique sites all over the U.S.

I'm glad to announce that we also released the codebase on GitHub, to share the project with the entire SAP community and beyond. I hope you find this project and the code behind it as interesting as I do!

From a user-perspective

The Resource Locator is an interactive map that helps students and families find resources near them. The Resource Locator application is responsive, so it adapts the user interface to desktops as well as mobile devices. Users can provide access to their location so that the map can automatically show them the assistance providers near them. Each assistance provider is linked to one or multiple schedules that describe the resources they are offering a given timeframe.

The Resource Locator is populated through the Assistance Entry Form. The Assistance Entry Form provides a quick way for organizations to submit information on feeding sites and other free resources (i.e. financial, workforce, housing, and healthcare) they provide to help students and families.

The Approver App is only visible to our admins, so they can review and approve submitted offerings. Offers will only be visible on the map once they have been approved.

From a development-perspective

Used Technologies

It is probably no surprise to you that we leveraged SAP technologies wherever we could to implement this project. As this is a cloud-native application, we run everything in the Cloud Foundry environment of SAP Cloud Platform and store all our data in SAP HANA HDI containers. HANA-native calculation views allow us to query the stored data with geospatial parameters to retrieve the records that are in proximity to the user. This calculation view and all other tables and views are exposed as OData services by the Cloud Application Programming Model runtime.

The two external-facing web apps - the Resource Locator and Assistance Entry Form - are built with SAPUI5. We picked this framework as it already comes with a wide range of ready-to-use controls (such as a Google Maps control or the planning calendar control) but still offers enough freedom to design the UI according to our vision. The admin-only approver app has been built in a low-code fashion by leveraging the Fiori Elements List Report.

We used an SAP Cloud Platform Identify Authentication Service (IAS) tenant for user management, self-service sign-up, and Single-Sign-On (SSO). As this is a new project, we don't really know our users yet. We asked ourself question such as:

Which types of devices they are using / Which devices should we focus on?

Do they enjoy using the application?

How long do they stay on the website?

Do they come back after their first usage?

To get some answers to these and other questions, we leverage the SAP Web Analytics service to collect implicit feedback from our users. We also linked a Qualtrics survey in the shell bar header of the Resource Locator for the users who want to share more detailed feedback pro-actively.

 

High-level architecture diagram to show all the service and tools we used for development

Code Highlights

In this section, I would like to dive deeper into curated aspects of the application that I find especially interesting. I was a guest in iinside's live stream show a couple of days ago and talked about these highlights as well. Check out the replay, in case you want to hear and see us talk about this.

How to expose a calc view in CAP?

There are three steps necessary to expose a calc view:

1. Add the calc view definition file, here: db/src/CV_SAP4KIDS.hdbcalculationview.


2. Make CAP aware of the data structure of this existing DB entity.


3. Expose the entity in the service definition.

How to simulate a calc view with SQLite?

In our situation, it has been possible to use a local DB that returns mocks the calc view and its data structure. In contrast to the calc view, the SQLite view doesn't filter the returned records for their location. This is not a problem for us as the local mock DB contains significantly fewer data than the production DB.

1. Create a new file that contains a service definition that returns the same data structure as the calc view, here: /srv/map-sqlite.cds.


2. Declare that the newly created file should only be used in the non-production scenarios and the already existing /srv/map-hana.cds file only in production scenarios.

Which authorization checks are performed and where?

This project contains three web apps and therefore, the backend also provides three different services:

• Resource Locator
  
  
  
  • This service is publicly accessible but with read-only permissions.
  
  
  
  


• Assistance Entry Form
  
  
  
  • This service allows authenticated users to create new entities (of various types). The users also need to be able to read data to be warned if there is already an existing record to avoid duplicate data. In case the creation is not successful, they need to be able to roll back the changes, e.g. remove the data they created.All these restrictions can be implemented with an @restrict annotation in the service definition.
  
  
  
  


• Approver app
  
  
  
  • An admin can use this service to approve submitted offerings by flipping a flag. Users with the admin scope are able to update and remove any record.
  
  
  
  

How to serve many web apps from one html5 app repo/app router?

All web apps are uploaded to the HTML5 Application Repository by a single deployer module.

1. Make sure the built web apps will be placed in the resources folder of the deployer module (one subfolder per web app). This can be included in the ui5 build command.


2. The deployer module will do all the magic from here on.

It is not necessary to define routes to the HTML5 Application Repository in the Application Router. You are use paths like domain/<app id from manifest> to access the web app.

How to define different scaling parameters for different deployment environments (dev vs prod)?

The load the project has to handle in the development environment is significantly lower than in production. That's why it makes sense to deploy fewer instances of the microservice in development (and allocate less memory per instance):

1. Override the default (dev) settings from the mta.yaml in the production.mtaex (MTA extension).


2. Include this extension in the deploy command.

How to implement a splash screen with UI5?

The inspiration to add a splash screen came from Peter Muessig in this blog post where he described how to speed up the performance of UI5 apps.

1. Add the splash screen to the index.html file so it is visible as soon as the file is loaded.


2. We want to load the corresponding CSS as soon as possible (before UI5 loads its styles) which is why we moved these styles to a new file.


3. Last but not least, we remove the splash screen in the onInit hook of the controller.

What is the npm script workaround doing?

We noticed that the deployer module and the HTML5 Application Repository don't like hidden files such as the .DS_Store files, which are typical for Macs. If such a file is present, the deploy will fail ☠️. We added the script workaround to remove all these files easily.

How to use the new UI5 control rendering API?

The new version of the SAPUI5 rendering API supports DOM patching when the properties of the control change. To summarize the meaning of this in one sentence: This new API will help you to make your app more performant. There's another great blog post from Peter Muessig you can check out to learn more about this.

This project includes two custom controls that use the new rendering API: RowHeader.js and OfferingTime.js - note the line apiVersion: 2 which defines the used API.

 

These were just a couple of aspects I picked from the project. In case you are curious to learn more about it - and possibly to deploy the application to your SAP Cloud Platform account - have a look at the GitHub repo.

The SAP4Kids application is quite distinct from a typical business application. However, I'm sure the architecture we used, can be applied to any cloud-native business application project and hopefully helps you as much as it helped us and many families.

 

Credits

Thanks to everyone how was involved in the project:

dan.antonio, devashish.jasani, simer.grewal, mkosuri, michael.graf, scott.dillon, shibaji.chandra5

 

Disclaimer: I should mention that this side project has been implemented by a handful of developers and consultants next to their regular day-job. Given the urgency of the topic, we had to do some shortcuts (like skipping automation tests and CI/CD) that you shouldn't do for regular development projects.