Copyright @ 2021 by Michal Majer
All rights reserved. Unauthorised distribution of all or part of this publication in
any form is prohibited. Photocopying, photocopying and copying on film, magnetic or any other medium results in a breach of the copyright of this publication.
The information contained in this publication is solely an expression of the author’s
personal opinions. The author has made every effort to ensure that the information
provided is reliable and accurate, but does not accept any liability for the veracity,
accuracy or factual accuracy of the information. The author assumes no responsibility for decisions made by the Reader based on information obtained in this
publication.
Typesetting and text makeup: GRAPHIC DESIGN STUDIO www.goyke.eu
First edition
TRADE MARKS
SAP, the SAP logo, ABAP, SAP Fiori, SAP HANA, SAP BTP are registered trademarks of SAP SE, Walldorf, Germany. All other names or marks appearing in this
publication may be registered trademarks or proprietary names of their respective
owners.
Table of contents
7
Introduction
7
Introduction
10
Purpose of the book
10
Book contents
11
Who is this book for?
12
About the author
17
Part I
17
Application implementation in Cloud Foundry environment
18
Introduction
18
Cloud Foundry w SAP Business Technology Platform
20
Preparation of the development environment
21
Fiori Tools
22
Optional VS Code configuration
26
Application I: Static application with UI5 Web Components
26
What is a static application?
26
Purpose of the application
27
Instructions for implementation
35
Three ways to deploy your application to Cloud Foundry.
40
Summary
Application II: HDI Container – HANA module
43
SAP HANA Schemas & HDI Cointainersservice initialisation
48
Implementation of the HANA Native module
53
Implementation of objects in the database HANA container HDI
57
Bonus: nodemon and hdi-deploy. Any change to the
project means a change to the HANA database.
57
- Summary
41
58
Application III: SAPUI5
58
UI5 application implementation
62
Application deployment to HTML5 repository
65
Implementing a router in its own space, i.e. @sap/approuter
67
Summary
68
Application IV: React.js
74
Application V: SAP CAP - description only
75
Summary of Part I
77
Part II
77
HANA REST API Hana Express React Node.js
78
Introduction
79
Multi Target application
80
Description of application
81
Implementation
150
Drop it on HANA - Developing HANA Code Push-Down
152
Example 1 - fuzzy search
158
Example 2 - statistics, KPIs
161 Front-end application initialisation in React.js and implementation
of selected Mechanisms
161
Create React App
162
Sending HTTP requests
171
Implementation of the application
173
Summary
INTRODUCTION
INTRODUCTION
Few months ago, the SAP company changed the name of its platform from “SAP
Cloud Platform” to “SAP Business Technology Platform”. The product itself started in 2012 under yet another name: “SAP HANA Cloud Platform”. New SAP
product tracking and keeping up with changes introduced by the company or new
developments are virtually impossible tasks.
To justify the constant metamorphosis of the SAP company’s products I will quote
Phil Karlton: There are only two hard things in Computer Science: cache invalidation and naming things1.
A plethora of novelties in the world of IT effectively makes it difficult to establish
solid practices that would lead to successful computer application implementations.
If you stay in the product ecosystem of SAP the basic tool for implementation of
business needs is the ABAP language.
Figure 1. Timeline of the development of the ABAP programming language. Own elaboration.
Created in 1983, ABAP developed very slowly at first. Programmers waited seventeen years to be able to use object-oriented programming methods, and major
changes did not occur until after 2012. This adds up to twenty-nine years for a programming language in a stable ecosystem that maintains backward compatibility.
Starting my career as an ABAP developer in 2013, I was able to draw handfuls on
1
Phil Karlton, Quote heard by Tim Bray in 1996 or 1997 https://twitter.com/timbray/status/817025379109990402?cn=cmVwbHk= Published on the blog http://www.tbray.org/ongoing/
When/200x/2005/12/23/UPI
7
the experience of fellow consultants who had cut their teeth on SAP implementations. Rarely has anyone considered whether a solution can be implemented. Nor,
at that time, had I heard of the need for a proof of concept to confirm that the way
we want to solve the problem is correct. I learned good practices and knew what
mistakes not to make. I was able to gain this knowledge thanks to experienced
people who were willing to pass it on to me.
However, the world is rushing forward. In the seven years that I worked as a SAP
developer, knowledge of ABAP became one of many, rather than the only skill
I needed to have (soft skills aside). The SAPUI5 framework along with the JavaScript language very quickly added to the challenges. Fiori has introduced new
oData concepts, mechanisms and interfaces. Implementing SAP HANA has led
me to expand my knowledge of advanced SQL queries and SQLScript. In addition
to these technologies, various systems (ERP, CRM, eWM), products and platforms
(SAP BTP, XSA, Data Intelligence) have appeared, and the evolution of on-premise
systems to cloud versions has begun.
Despite so much variety, the pattern of learning a new tool or technology remains
the same:
1.
2.
3.
4.
Implementation of the “Hello, world” application.
Learning about architecture.
Going through the introduction/documentation.
Experiments, verification of own theses.
After the initial identification, we are ready to build a business solution. As time
goes on, problems start to arise - it turns out that there are holes in the documentation and there is no information on how to deal with a problem that shouldn’t have
happened in the first place! How do we handle our exception? How to implement a
process specific to our company? What about tests...?
We start looking for solutions on the web, by trial and error we check all found
code fragments in various combinations, change parameters... and it works! We
create a functional monster (see Figure 2). Unfortunately, we have already exceeded the time needed for the task twice and the manager shouts that we should hurry
up. We are forced to move on to the next urgent task on the list. Oh well.
8
Figure 2. Original version. Source: https://www.reddit.com/r/ProgrammerHumor/
comments/8z6dax/creation_of _a_software/
9
PURPOSE OF THE BOOK
The purpose of this book is to provide practical knowledge to help you learn
and understand how to deliver solutions on the SAP Business Technology Platform (hereafter SAP BTP). I also want to make suggestions for good practice
in these projects.
Examples and tutorials found on the internet (including the official ones) do not
always contain explanations on how to implement or configure. Without design
experience, this information is also difficult to verify. The SAP company has provided a number of generators and libraries designed to make our work easier and
less tedious. They save us some effort, but without understanding how they work at
a later stage, they can have the opposite effect: they shorten the working time, but
increase the time needed to find and solve problems.
My motivation was to share the knowledge I had gained, to consolidate it and to
enable others to gain new competences.
BOOK CONTENTS
The book provides step-by-step instructions on how to implement different types of
applications in SAP BTP. The descriptions have been expanded to include my observations and improvements to speed up project work and make it more convenient .
The book consists of two parts:
•
Part I contains examples of publishing applications on SAP BTP in the Cloud
Foundry environment with additional explanations.
•
Part II describes sample implementations of an MTA application using the
SAP HANA database, microservices in the Node.js environment and a frontend application written in React.js. This is the seed of the HERN (HANA
Express React Node) application.
10
In the book I focus on the back-end part and the Cloud Foundry environment, so
the code concerning the presentation layer application is as simple as possible and
not suitable for use in real projects.
I hope that the knowledge contained within the pages of this book will enable you
to build products that you will be proud of.
Thank you for purchasing this book and I wish you the best of luck with your competence building and project implementation!
WHO IS THIS BOOK FOR?
For SAP programmers
If, like me, you work with SAP technologies on a daily basis, sooner or later you
will be tasked with implementing a solution using SAP BTP. The examples described in the book will allow you to understand the idea and implementation of
solutions in Cloud Foundry environment much faster.
For developers of languages other than SAP
You may be a Java, JavaScript or other programming language developer. Your
project is related to one of the SAP systems or is based on SAP BTP. As you
have already noticed, SAP has its own specific solutions that can amaze many.
The examples and descriptions presented in the book will give you a more thorough understanding of SAP mechanisms, making it easier for you to implement
the project.
For team leaders, product managers, architects
Whether you are overseeing, planning or supporting a project, this book will
give you an insight into the possibilities of building applications on the SAP BTP
platform.
11
ABOUT THE AUTHOR
Since 2013 I have been involved in the implementation and deployment of solutions in SAP systems. I started my career at BCC (later SNP Poland and now
All For One) as an intern, taking second place in a programming competition.
At time the company was the leader in SAP implementations in Poland, which
meant that I did a lot of work for various clients. Here I learned the basic tools
in SAP ERP and understood many elements of how SAP works.
My longest cooperation was with Apollogic and Volkswagen Group Polska,
where I was a consultant and a person responsible for system maintenance
respectively. The next big step in my career was getting a SAP Developer position at Palturai. At Palturai, I participated in the pioneering implementation of
a complete solution called “Business Network System”, built on XSA architecture. This is where I gained most of my knowledge regarding cloud solutions in
the SAP methodology and the implementation of the HANA Native application.
The application has twice been nominated for the SAP Innovation Awards.
Figure 3. A screenshot showing one of the Fiori applications. Polturai MyPlatform solution.
For more information on the project, see Palturai’s pitch deck 2.
2
See SAP Innovation Awards 2021 Entry Pitch Deck, Mining Hidden Gold in Business Partner
Networks with Graph Intelligence, https://www.sap.com/idea-place/sap-innovation-awards/
submission-details-2021.html?idea_id=2090 (accessed 29.07.2021).
12
I am currently working as a Senior Technical S4/HANA Expert at PwC, and
my main task is to implement solutions in an architecture consisting of multiple
cloud applications provided by SAP and beyond.
In addition, I was awarded two distinctions:
1. Award in “Build Your Own SAP Fiori App in the Cloud - 2016 Edition”
My app has been listed as one of the two hundred and twenty best apps3. A recording of the application is still available on YouTube4.
Figure 4. According to the SAP Fiori Design Guidelines , the application designed in 2016 looks
up-to-date.
3
4
See Bob Caswell, Top 220 Apps Created from the SAP Fiori Develop Challenge - Now on SCN,
https://blogs.sap.com/2016/06/02/top-220-apps-created-from-the-sap-fiori-develop-challenge-now-on-scn/ (accessed 29.07.2021).
See Michał Majer, openSAP Fiori App Example - Cash or Credit Car? [sic!], https://www.youtube.com/watch?v=oVolGBQMuEo (accessed 29.07.2021).
13
2. SAP Developer Hero 2017 - award for knowledge sharing
Figure 5. Time to get serious about sharing knowledge :)
Apart from technologies related to SAP products, I am still interested in other ways
of delivering business solutions. Thanks to this passion, I got to know the Node.js
environment along with numerous npm modules, as well as the React.js library for
building front-end. Unfortunately, SAP technologies were not suitable for implementing, for example, own SaaS, so acquiring additional knowledge was necessary
to implement my ideas.
14
The result is a popular application in Poland, https://www.kalkulatorb2b.pl/, which
makes it easier for the self-employed to do their tax calculations. I wrote the first
version using openUI5, while the second (current) version is built in React along
with UI5 Web Components.
Figure 6. UI5 Web Components allowed us to build an interesting user interface. However, the
library still has a lot of catching up to do.
My second product was to allow me to leave my full-time job and get on with running my own business. This is Gruplo SaaS application, a CRM system for schools
and sports clubs. Implementing all the mechanisms of the system was a huge challenge. Unfortunately, a coronavirus pandemic has thwarted my plans.
15
Figure 7. Application development was slowed down by the COVID-19 pandemic.
Privately, I am a husband and also a father of two wonderful girls: Lilianna
and Marcjanna. In my spare time I program, play Nintendo consoles or watch
movies and series. I admire all creators who try to release their own products.
This is very much a challenge, as I found out when writing this book.
16
PART I
APPLICATION
IMPLEMENTATION
IN CLOUD FOUNDRY
ENVIRONMENT
17
INTRODUCTION
CLOUD FOUNDRY W SAP BUSINESS
TECHNOLOGY PLATFORM
SAP has implemented Cloud Foundry (CF for short) in SAP BTP, creating a readyto-use environment delivered as a platform (Platform as a Service - PaaS for short).
The advantages of CF are illustrated using a diagram (see Figure 8) and the following words:
Cloud platforms let anyone deploy network apps or services and make them available to the world in a few minutes. When an app becomes popular, the cloud scales
it to handle more traffic, replacing build-out and migration efforts that once took
months with a few keystrokes. Cloud platforms enable you to focus exclusively on
your apps and data without worrying about underlying infrastructure5.
Figure 8. Comparison of traditional IT architecture approach to cloud infrastructure. Source:
https://docs.cloudfoundry.org/concepts/overview.html
5
Cloud Foundry Overview, https://docs.cloudfoundry.org/concepts/overview.html (accessed
29.07.2021).
18
In short, it’s a platform that takes the burden of infrastructure management and
maintenance off of us, providing an environment where we can deploy applications and services instantly. Active applications, when they require it, we can easily
scale by increasing resources or their instances. Cloud Foundry is independent of
the programming language. Just choose the right buildpack to move your existing application written in the programming language of your choice to the cloud.
Buildpack is a set of scripts and instructions that are executed in order to prepare
the source code of an application to run in the Cloud Foundry environment.
By default, the built-in instructions allow you to implement applications in the
following programming languages:
•
•
•
•
•
•
•
•
Java
Ruby
Node.js
PHP
Go
Python
.NET
R
However, that is not all. There are many scripts prepared and made available by
the community that extend our capabilities with additional technologies, such as
Django, C++, Clojure or Elixir, for example. We thus have the necessary tools to
build our own instructions, tailored to the needs of our project.
19
PREPARATION OF
THE DEVELOPMENT
ENVIRONMENT
The SAP company provides two IDEs to support work with its technologies: SAP
Web IDE and SAP Business Application Studio. These tools have built-in extensions that allow us to perform some operations through a dedicated interface.
These include designing a workflow or implementing Calculation View. SAP BAS
is based on the open source Eclipse Theia IDE solution, which draws heavily from
Visual Studio Code. While working on the book (and working on projects), I used
VS Code whenever I could. The SAP BAS extensions are compatible with VS
Code, so we are no longer forced to use a specific IDE, but can choose the environment according to our preferences. As most of the manuals available on the
Internet are based on SAP BAS, I have described all the steps using VS Code. Both
IDEs are virtually identical, so the steps I have indicated can also be reproduced in
SAP BAS without any problems.
Before you get started, make sure you have the following tools
installed:
•
•
•
•
•
•
Node.js with npm: https://nodejs.org/en/download/.
Cloud Foundry CLI (version 6): https://docs.cloudfoundry.org/cf-cli/install-gocli.html.
Cloud MTA Build Tool (MBT), compatible with CF CLI: https://sap.github.io/
cloud-mta-build-tool/.
Cloud Foundry HTML5 Applications reposiotry CLI Plugin, compatible with
CF CLI: https://github.com/SAP/cf-html5-apps-repo-cli-plugin.
UI5 Tooling: https://sap.github.io/ui5-tooling/pages/CLI/.
VS Code: https://code.visualstudio.com/.
20
Access to SAP BTP will also be required. As the process often changes, I point
to an instruction prepared by Marius Obert: https://developers.sap.com/tutorials/
hcp-create-trial-account.html. After logging into the SAP BTP cockpit, you will
need to create an SAP HANA Cloud instance https://developers.sap.com/tutorials/
hana-cloud-deploying.html.
FIORI TOOLS
All extensions are available for download from the IDE view or via https://marketplace.visualstudio.com.
For initialising UI5 applications, I recommend the Application Wizard extension
(https://marketplace.visualstudio.com/items?itemName=SAPOS.yeoman-ui) with
its templates.
Other extensions, the so-called SAP Fiori Tools, are:
•
•
•
•
SAP Fiori tools – Application Modeler,
SAP Fiori tools – Guided Development,
SAP Fiori tools – Service Modeler,
SAP Fiori tools – XML Annotation Language Server.
21
OPTIONAL VS CODE CONFIGURATION
The extensibility of VS Code has resulted in a large number of extensions that significantly affect the comfort of working with code. Below I share my own configuration
of VS Code.
•
SAP HANA Driver for SQLTools
h t t p s: // m a r k e t pl a c e .v i s u a l s t u d i o.c o m / i t e m s? i t e m N a m e = SA P O S S .
sap-hana-driver-for-sqltools
Access to SQL console of SAP HANA database is very important. We can use
SAP HANA Studio, Web IDE, DBeaver or simply a plugin to VS Code. Thanks to
this extension from the IDE we can establish a connection to the database and send
queries without having to switch between software.
22
•
Visual Studio IntelliCode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.
vscodeintellicode
Intelligent hints and autocomplete.
•
Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Code formatter. It can be configured to run automatically when a file is saved. After
installing the extension, change the settings in VS Code by setting the value „editor.
formatOnSave”: true.
•
Dracula or Panda themes
Dracula: https://marketplace.visualstudio.com/items?itemName=dracula-theme.
theme-dracula
Panda:
https://marketplace.visualstudio.com/items?itemName=tinkertrain.
theme-panda
Both themes are nice and clear.
•
Peacock
https://marketplace.visualstudio.
com/items?itemName=johnpapa.vscode-peacock
Peacock allows you to configure
the colour of the frame according to the selected workspace.
23
•
Bracket Pair Colorizer 2
ht t ps://m a rket pla ce.v is u alst ud io.c om /it e m s?it e m Na me = C o e n r a a d S.
bracket-pair-colorizer-2
The extension automatically colours parentheses and brackets.
•
Indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
The extension colours the indentations (also visible in the image above).
•
Better Comments
ht t ps://m a rket pla ce.v isu alst ud io.com /it e m s?it e m Na me =a a ron-bond.
better-comments
Better Comments gives you additional options for formatting your comments. We
can highlight warnings, reflections or tasks to do. The extension additionally allows you to define your own styles.
24
•
vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.
vscode-icons
Icons
25
APPLICATION I: STATIC
APPLICATION WITH UI5
WEB COMPONENTS
WHAT IS A STATIC APPLICATION?
A static application is an application consisting of HTML/CSS/JavaScript files and
additional resources. It only needs a WEB server to work, for example NGIX.
These can be the output files of an application built in one of the front-end building
tools, for example UI5, React.js, Vue, Angular or static HTML files generated by
content generators such as, for example, Gatsby, Next.js, Jekyll, Hugo or Nuxt.js.
PURPOSE OF THE APPLICATION
Our first example application will be a destination page, for example landing page
designed to measure interest in a new product or service. As the service does not
yet exist and we are keen to have an initial verification of interest, it will be sufficient for the website to have a link (mailto) enabling e-mail contact.
26
Simple requirement - simple implementation. For this example, I chose a
simple technology stack : pure JavaScript (Vanilla.js) along with UI5 Web
Components.
INSTRUCTIONS FOR IMPLEMENTATION
1. Create a new folder in a location of your choice.
2. Create an index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>UI5 Web Components</title>
<meta charset="UTF-8" />
</head>
<body>
<ui5-title>UI5 Web Components are here!</ui5-title>
</body>
</html>
The file contains the basic HTML metatags: html, head, title, meta, and one web
component ui5-title. The effect of the code from this file is to display the text
“UI5 Web Components are here!”, formatted as a title. The index.html file can be
opened in any browser.
The effect is not stunning (see Figure 9), but the seed of our application is now
available. The text is displayed, but is incorrectly formatted - it lacks the style
known from Fiori.
Figure 9. There are no web componenst here (yet)!
27
3. Run the application in the Cloud Foundry environment using the CF CLI command line.
3.1. Use cf login to log in to your Cloud Foundry instance.
3.2. Use the cf push applicationName -b buildpack command to deploy
the application.
We haven’t yet dealt with the lack of formatting and we’re already moving the app
to CF? It is very important to place the application in the target environment as early
as possible and to verify its performance at every significant iteration (adding a new
module, service and so on), regardless of whether we place the application in SAP BTP,
Heroku or another platform. The later you decide to move your application, the more
problems you may encounter.
We can use the CLI for Cloud Foundry directly in Visual Studio Code or in the system
terminal. In VS Code, we can open the terminal in an additional window by clicking
“View” and then “Terminal” in the top menu.
Figure 10. Opening a terminal in the VS Code window.
We can open the terminal by using one of the VS Code keyboard shortcuts. The keyboard
shortcuts in a convenient arrangement can be found at the following links:
·
for macOS: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf.
·
for Windows: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf.
Before calling the cf push command, remember to be in the project folder.
28
3.3. An example of a command call to deploy an application named landing-pageui5: cf push landing-page-ui5 -b https://github.com/cloudfoundry/
staticfile-buildpack.
After invoking the command, information about the process of placing the application in the cloud will be displayed. An abbreviated version of the login can be seen
in the illustrative figure 11.
Figure 11. The first application is available at landing-page-ui5.cfapps.eu10.hana.ondemand.com.
Information about the buildpack and the path under which the application was made available is
in bold.
29
4. Add a collection of native UI5 components to your project.
In order to use the collection of native UI5 components, they must first be added
to the project as a dependency. The npm application, which is part of the Node.js
development environment, is used to install dependencies.
4.1. Create a package.json file in the project folder using the npm init -y
command.
A default package.json file will be created as a result.
{
"name": "landing-page-ui5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
4.2. Install the @ui5/webcomponents package using the command npm install -save @ui5/webcomponents.
The command will download the source code of the @ui5/webcomponents
package from the npm repository and save it in the node_modules folder. This
folder is used to store all modules downloaded for the project. Remember not
to add the node_modules folder to the git repository. You can ensure this does
not happen by using .gitignore file.
4.3. Create the src and dist folders.
4.4. Create the index.js file in the src folder with instructions to import the Title component.
import "@ui5/webcomponents/dist/Title.js";
30
4.5. Include the main.js file in the index.html file and copy it to the dist folder.
<!DOCTYPE html>
<html lang="en">
<head>
<title>UI5 Web Components</title>
<meta charset="UTF-8" />
</head>
<body>
<ui5-title>UI5 Web Components are here!</ui5-title>
<script src="main.js"></script>
</body>
</html>
The programme code is intentionally divided into two parts: source (src) and distribution (dist). Accordingly, we perform development work on the source files in
the src folder, and the dist distribution folder will contain with optimised files that
should not be modified manually.
The Node.js environment has built-in support for importing modules into a project - both those downloaded using npm and those implemented by ourselves. Unfortunately, browsers do not have built-in support for modules (require/import).
Fortunately, there are apps that build the project. These are so-called bundlers that
combine the indicated dependencies, thus enabling the project to run correctly,
further minifying and optimising the code.
The most popular applications for this are Webpack, Parcel and Browserify. In this
example we will use webpack.
5. Install the webpack application as a dependency needed only in the development stage (--save-dev). npm install webpack webpack-cli
-save-dev.
31
6. Add the build script to the package.json file.
{
"name": "landing-page-ui5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@ui5/webcomponents": "^1.0.0-rc.14"
},
"devDependencies": {
"webpack": "^5.34.0",
"webpack-cli": "^4.6.0"
}
}
7. Run the build script with the command npm run build.
The effect of calling the script will be to generate an optimised main.js file in the
dist folder.
Figure 12. Optimised code from the main.js file
32
When you open the ./dist/index.html file in your browser, you will see the text “UI5
Web Components are here!”, already framed correctly in the 72p font (https://experience.sap.com/fiori-design-web/typography/) known from the SAP Fiori style.
Figure 13. Now they are :)
Native components work. What remained to be done is to extend the application
with the missing interface elements and the email sending action.
8. Modify the index.html file, adding CSS styles and new UI elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>UI5 Web Components</title>
<meta charset="UTF-8" />
<style>
ui5-title {
color: #fff;
margin: 10px;
}
.content {
width: 90%;
padding: 5%;
background-color: #242424;
}
.header-text {
font-size: 48px;
color: #fff;
border: none;
}
</style>
</head>
33