Skip to Content
Technical Articles

Part 2: Hello Graph! Write your first SAP Graph application

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 tenant 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 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. 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 tenant 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 tenant 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 back to SAP API Business Hub (see part 1 of the tutorial) and click on Show API Key to see and save it.

Getting%20the%20API%20key

Getting the API key

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('/*', 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.js

The 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.odm.sales/CustomerQuote?$top=2

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

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 http://explore.graph.sap/

Contact us at sap.graph@sap.com


 

2 Comments
You must be Logged on to comment or reply to a post.
  • Hi,

    I had one doubt regarding this.

    This will create a client/consumer application for the graph API right? it doesn't create a graph server. Could you help with the tutorial for creating a graph server and exposing my own apis?

  • Hello Sarath,

    Yes, exactly, what we teach here is how to create a (backend) client application that uses the SAP Graph service, to access SAP-managed data (like the data in SAP S/4 HANA or SAP Sales Cloud systems for instance).

    If you have your own (backend) application with your own APIs, you have to deploy your application on an application platform like SAP's Business Technology Platform (BTP), for instance in the Cloud Foundry environment. There are already many SAP tutorials that teach how to do this.

    SAP also offers a product called SAP API Management, but that might be a more advanced solution.

    Thanks for your interest, and good luck.