This is the first of the end-to-end implementation blog series for Graph that focuses on a developer writing an extension application that uses the single, unified API of Graph in SAP Integration Suite. Please refer to Part 1 of this series for an introduction to Graph and to the Information Map for an introduction to the entire series.
The initial developer parts in this series will lead you through building the rudimentary basics of a classical enterprise extension web app: a list-details-navigate application in the next part. This is what it will look like:
Here, in this part, our goal is to establish the basic hello world programming essentials. This implementation requires no prior knowledge – we will teach you everything you need to know to become a proficient Graph developer. To test that everything works, we will re-use the Graph server that was configured as an SAP Business Accelerator Hub sandbox, and that we used in Part 1.
Getting Started: Node.js and NPM
We will use node.js (v20.11.1) and npm (version 10.2.4) 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 on the Mozilla Developer Network (MDN) website. This article also explains how to easily set up a Node development environment, whether you use Windows, MacOS, or Linux.
If you prefer to develop applications in the cloud directly from your browser, SAP offers a great cloud-based development experience alternative in the form of the SAP Build. Follow this link for more details on getting your instance. The rest of this blog assumes that you installed node.js and npm on your computer.
package.json
Select a folder (directory) where you want to develop your application. In this folder, create a small file called package.json, with the following content:
{
"name": "hello-graph",
"version": "0.0.0",
"private": true,
"type": "module",
"script" : {
"start": "node src/hellograph.js"
},
"dependencies": {
"express": "4.18.1",
"node-fetch": "3.3.2",
"universal-cookie": "7.1.0"
}
}
Note: For the latest version of these libraries please refer to https://www.npmjs.com/
After saving the file, run the following command on your console:
npm install
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.
graph.js
First, we will create a boilerplate file in the src folder, called graph.js. This file will serve as a foundational template that you'll reuse, with a few small changes, across all future Graph implementation blogs and your projects. This file will contain a class called Graph, which provides a nice wrapper for using Graph. At this time, we will show how to read data, using a get() function.
Copy and paste the code below into the file, then save it. This straightforward snippet utilizes the node-fetch package for simplicity.
import fetch from "node-fetch";
export default class Graph {
async get(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-api-key>" // TODO: Enter the actual key
}
};
const response = await fetch(url, options);
console.log(`${response.status} (${response.statusText})`) // for debugging
return await response.json();
}
}
Please note that we hard-coded the Graph server that uses the SAP Business Accelerator Hub sandbox. This allows us to focus here on the data access API, without requiring you to configure a new Business Data Graph(BDG) and deal with all the complex aspects of security and authentication, which will be the subject of future blog series.
Since we are accessing the sandbox landscape data via SAP Business Accelerator Hub, you will need to insert your API Key (a short string) into the code above. Where do you get this key? Simply log in 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 Graph. Paste the following into a new file, called hellograph.js, in the src folder:
import express from 'express';
import Graph from './graph.js';
const app = express();
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 Graph at http://localhost:${port}`)
});
As previously 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 to Graph. We then show the returned data from Graph as a raw result on the browser screen.
Our server-side app is ready. To run it, use your terminal console to enter:
npm run start
The console will show:
$ Explore 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=2
The browser will invoke your application code, which will call Graph to fetch the data, and if all goes well, you will see the following output on your screen.
Note: if you get an unformatted result, you can install a JSON formatter in your browser.
Our Hello Graph app is already pretty useful; we can use it to explore the business data graph, by trying out different OData queries. Note: to stop your app from running, simply kill it (e.g. press CTRL-C on your Linux terminal or Windows console).
We will re-use this app as a skeleton in the next part of this series, where we will introduce authentication.
Shardul Sonar, Developer – Graph in SAP Integration Suite
- SAP Managed Tags:
