INFO: This blog is part of a tutorial series for the standalone SAP Graph service on SAP BTP. Recently, SAP released a version of Graph in SAP Integration Suite with better user experience and functional enhancements (see this blog for details: https://blogs.sap.com/2023/02/22/announcing-graph-in-sap-integration-suite).
Hello!
This is the second part of our developer tutorial on SAP Graph, the API for SAP's Integrated Intelligent Suite. Please refer to part 1 of this tutorial for an introduction to SAP Graph and to the information map for an introduction to the entire tutorial series.
In part 3 of this tutorial, we will build the rudimentary basics of a classical enterprise extension web app: a list-details-navigate application. This is what it will look like:
Here, in part 2 of the SAP Graph tutorial, our goal is to establish the basic hello world programming essentials. The tutorial requires no prior knowledge – we will teach you everything you need to know to become a proficient SAP Graph developer. To test that everything works, we will re-use the SAP Graph server that was configured as an SAP API Business Hub sandbox, and that we used in part 1.
We will use Node.js and npm to build this application, and to keep it extremely simple, we will use the Express web framework. Not familiar with Node.js and Express? I recommend this article: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction. That article also explains how to easily set up a Node development environment, whether you use Windows, MacOS or Linux.
If you prefer to develop in the cloud without installing anything on your computer, SAP offers a great cloud-based development experience alternative in the form of the SAP Business Application Studio. Follow this link for more details on getting your own instance. The rest of this tutorial assumes that you installed Node.js and npm on your computer.
Select a folder (directory) where you want to develop your application. In this folder, you will create a small file called package.json, with the following content:
After saving the file, run the following command on your console:
If your node.js environment was properly set up, then this command will install a few standard library packages in a new sub-folder called node_modules.
Now, create another sub-folder, next to node_modules, called src. This is where we will develop our code.
First, we will create a boilerplate file in the src folder, called graph.js. You will re-use this file with a few small changes in all future SAP Graph tutorials and your own projects. This file will contain a class called Graph, which provides a nice wrapper for using SAP Graph. At this time, we will show how to read data, via a get() function.
Paste the following code into the file and save it. As you can see, it is very simple, and takes advantage of the node-fetch package.
Note that we hard-coded the SAP Graph server that uses SAP API Business Hub sandbox. This allows us to focus here on the data access API, without requiring you to first configure your own SAP Graph business data graph and deal with all the complex aspects of security and authentication, which will be the subject of future tutorial parts.
Since we are accessing the sandbox landscape data via SAP API Business Hub, you will need to insert your API Key (a short string) into the code above. Where do you get this key? Go and login to https://api.sap.com/settings and click on Show API Key to see and save it.
Now we are ready to write our first, simple server-side application that uses SAP Graph. Paste the following into a new file, called hellograph.js, in the src folder:
As mentioned, our code uses a popular Node.js package called express. On line 8, we define the action taken when our server-side app is called from a browser. Here, we simply take the URL that we received (req.url), and pass it through, as-is, to SAP Graph. We then show the returned data from SAP Graph as a raw result in the browser screen.
Our server-side app is ready. To run it, use your terminal console to enter:
The console will show:
Now the fun begins. The application expects a well-formed query URL to function properly. Open a browser window or tab, and enter the following query URL:
The browser will invoke your application code, which will call SAP Graph to fetch the data, and if all went well, you will see the following output on your screen
(if you get an unformatted result, you can install a JSON formatter in your browser).
Our helloGraph app is already pretty useful; we can use it to explore the ODM business graph, by trying out different OData queries. Note: to stop your app from running, simply kill it (e.g. CTRL-C on your Windows or Unix terminal console).
We will re-use this app as a skeleton in the next part of this tutorial series, where we will introduce authentication.
Hello!
This is the second part of our developer tutorial on SAP Graph, the API for SAP's Integrated Intelligent Suite. Please refer to part 1 of this tutorial for an introduction to SAP Graph and to the information map for an introduction to the entire tutorial series.
In part 3 of this tutorial, we will build the rudimentary basics of a classical enterprise extension web app: a list-details-navigate application. This is what it will look like:
Here, in part 2 of the SAP Graph tutorial, our goal is to establish the basic hello world programming essentials. The tutorial requires no prior knowledge – we will teach you everything you need to know to become a proficient SAP Graph developer. To test that everything works, we will re-use the SAP Graph server that was configured as an SAP API Business Hub sandbox, and that we used in part 1.
Using Node.js
We will use Node.js and npm to build this application, and to keep it extremely simple, we will use the Express web framework. Not familiar with Node.js and Express? I recommend this article: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction. That article also explains how to easily set up a Node development environment, whether you use Windows, MacOS or Linux.
If you prefer to develop in the cloud without installing anything on your computer, SAP offers a great cloud-based development experience alternative in the form of the SAP Business Application Studio. Follow this link for more details on getting your own instance. The rest of this tutorial assumes that you installed Node.js and npm on your computer.
Starting up: package.json
Select a folder (directory) where you want to develop your application. In this folder, you will create a small file called package.json, with the following content:
{
"name": "hello-graph",
"version": "0.0.0",
"private": true,
"dependencies": {
"express": "4.17.1",
"node-fetch": "2.6.1",
"universal-cookie": "4.0.4"
}
}After saving the file, run the following command on your console:
npm installIf your node.js environment was properly set up, then this command will install a few standard library packages in a new sub-folder called node_modules.
Now, create another sub-folder, next to node_modules, called src. This is where we will develop our code.
graph.js
First, we will create a boilerplate file in the src folder, called graph.js. You will re-use this file with a few small changes in all future SAP Graph tutorials and your own projects. This file will contain a class called Graph, which provides a nice wrapper for using SAP Graph. At this time, we will show how to read data, via a get() function.
Paste the following code into the file and save it. As you can see, it is very simple, and takes advantage of the node-fetch package.
const fetch = require("node-fetch");
class Graph {
async get(req, entity, params) {
const url = `https://sandbox.api.sap.com/sapgraph/${entity}${params ? `?${params}` : ""}`;
console.log(url) //for debugging
const options = {
method: "get",
headers:{
"Accept": "application/json",
"apiKey": "your APIkey"
}
};
const response = await fetch(url, options);
console.log(`${response.status} (${response.statusText})`) // for debugging
const json = await response.json();
return json;
}
}
module.exports = Graph;Note that we hard-coded the SAP Graph server that uses SAP API Business Hub sandbox. This allows us to focus here on the data access API, without requiring you to first configure your own SAP Graph business data graph and deal with all the complex aspects of security and authentication, which will be the subject of future tutorial parts.
Since we are accessing the sandbox landscape data via SAP API Business Hub, you will need to insert your API Key (a short string) into the code above. Where do you get this key? Go and login to https://api.sap.com/settings and click on Show API Key to see and save it.
hellograph.js
Now we are ready to write our first, simple server-side application that uses SAP Graph. Paste the following into a new file, called hellograph.js, in the src folder:
const express = require("express");
const app = express();
const Graph = require("./graph");
const port = 3004;
const graph = new Graph();
app.get('/sap*', async (req, res) => {
const response = await graph.get(req, `${req.url}`, "");
res.send(`<pre><code>${JSON.stringify(response, null, 2)}</code></pre>`);
});
app.listen(port, () => { console.log(`Explore SAP Graph at http://localhost:${port}`) });As mentioned, our code uses a popular Node.js package called express. On line 8, we define the action taken when our server-side app is called from a browser. Here, we simply take the URL that we received (req.url), and pass it through, as-is, to SAP Graph. We then show the returned data from SAP Graph as a raw result in the browser screen.
Our server-side app is ready. To run it, use your terminal console to enter:
node hellograph.jsThe console will show:
Explore SAP Graph at http://localhost:3004
Now the fun begins. The application expects a well-formed query URL to function properly. Open a browser window or tab, and enter the following query URL:
http://localhost:3004/sap.graph/SalesQuote?$top=2The browser will invoke your application code, which will call SAP Graph to fetch the data, and if all went well, you will see the following output on your screen
(if you get an unformatted result, you can install a JSON formatter in your browser).
Our helloGraph app is already pretty useful; we can use it to explore the ODM business graph, by trying out different OData queries. Note: to stop your app from running, simply kill it (e.g. CTRL-C on your Windows or Unix terminal console).
We will re-use this app as a skeleton in the next part of this tutorial series, where we will introduce authentication.
Chaim Bendelac, Chief Product Manager – SAP Graph
Visit the SAP Graph website at https://graph.sap/
Contact us at sap.graph@sap.com
- SAP Managed Tags:
2 Comments
