SAP Graphチュートリアルシリーズ：【パート2】はじめてのSAP Graphアプリ開発

はじめに

本ブログシリーズはSAP Graph Multi-Part Tutorial: Information Mapの日本語翻訳です。簡潔な翻訳のために、いくつかの細かいニュアンスは削ぎ落としています。最新の正しい情報は翻訳元やWhat’s New for SAP Graphをご参照ください。

ブログシリーズ一覧

• インフォメーションマップ：SAP Graphチュートリアルシリーズ（日本語翻訳版）（オリジナル英語版）

  • パート1：SAP Graphのイントロダクション（日本語翻訳版）（オリジナル英語版） 

  • パート2：はじめてのSAP Graphアプリ開発（日本語翻訳版）（オリジナル英語版） <-このブログ

  • パート3：SAP Graphにおける認証認可の実装（日本語翻訳版）（オリジナル英語版）

  • パート4：SAP Graphとプロトコル（日本語翻訳版）（オリジナル英語版）

  • パート5：SAP Graphと自前のデータの用意（日本語翻訳版）（オリジナル英語版）

  • パート6：SAP GraphでBusiness Data Graphを作成（日本語翻訳版）（オリジナル英語版）

  • パート7：SAP Graphにおけるキーマッピング(日本語翻訳版)（オリジナル英語版）

Thanks Stephanie Lewellen and Chaim Bendelac for your cool blogs and for allowing me to translate!

日本語訳

こんにちは！

このブログはSAP Graphチュートリアルシリーズの２つ目のブログです。

SAP Graphの紹介はこのチュートリアルシリーズのパート1、チュートリアルシリーズ全体の紹介はインフォメーションマップを参照してください。

このチュートリアルシリーズのパート3では、古典的かつ初歩的なエンタープライズ拡張のWebアプリである下図の様なlist-details-navigate applicationを開発します。

本ブログであるパート２では基本的なHello Worldアプリケーションを通じて要点を掴んで頂く事を目的としています。このチュートリアルでは予備知識は必要なく、SAP Graph開発者になるために必要なことは全てこのブログの中に書いてあります。ブログ中ではパート１でも利用したSAP API Business Hub sandboxとして設定されたSAP Graphサーバーを再利用します。

Node.jsの利用

今回のアプリケーションの構築にはNode.jsとnpmを使用し、シンプルにするためにWebフレームワークのExpressを利用します。Node.jsとExpressに馴染みがない場合この記事をお勧めします。この記事では、Node.jsの開発環境をWindows、MacOS、Linuxどれを使って居ても簡単にセットアップする方法についても説明しています。

お使いのコンピュータに何もインストールせずにクラウド上で開発したい場合、SAPはSAP Business Application Studioという素晴らしいクラウドベースの開発環境を提供しています。利用方法ついては、このリンクを参照してください。このチュートリアルではお使いのコンピュータにNode.jsとnpmをインストールしたことを前提に進めていきます。

package.jsonの設定

まずアプリケーション開発を行うフォルダ（ディレクトリ）を開き、package.jsonという名前のファイルを作成します。ファイルの中には以下を記述してください。

{
    "name": "hello-graph",
    "version": "0.0.0",
    "private": true,
    "dependencies": {
        "express": "4.17.1",
        "node-fetch": "2.6.1",
        "universal-cookie": "4.0.4"
    }
}

ファイルを保存後、コンソールから以下のコマンドを実行します。

npm install

node.js環境が適切にセットアップされていれば、このコマンドでnode_modulesという新しいサブフォルダにライブラリがインストールされます。

次にnode_modulesフォルダの隣にsrcというフォルダを作成します。このフォルダの中で開発を進めていきます。

graph.js

まずsrc フォルダに graph.js と言う名前のファイルを作成します。このファイルは今後すべての SAP Graph チュートリアルやあなた自身のプロジェクトで、小さな変更を加えながら再利用することになります。このファイルには SAP Graph を使用するためのラッパーを提供するGraph というクラスが含まれています。今回は、get()関数を使ってデータを読み込む方法を紹介します。

以下のコードをファイルに貼り付けて保存してください。見ての通り非常にシンプルで、node-fetch パッケージを利用しています。

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;

SAP API Business Hub sandboxを使用するSAP Graphサーバーをハードコードしていることに注意してください。こうすることでここでは独自のSAP Graphビジネスデータグラフを構成する手間を省きデータアクセスAPIに焦点を当てることが出来ます。セキュリティや認証などの複雑な側面は今後のチュートリアルで扱っていきます。

SAP API Business Hub を介してサンドボックスのデータにアクセスしているため、上記のコードに API Key (短い文字列) を挿入する必要があります。ここにログインし、Show API Key をクリックするとAPI Keyが表示され保存できるようになります。

hellograph.js

SAP Graphを利用したシンプルなサーバーサイドアプリケーションを書いていきましょう。hellograph.jsという名前のファイルをsrcフォルダ中に作成し、下記のコードを張り付けて下さい。

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}`) });

既に述べた通り、このコードでは express という人気のある Node.js パッケージを使用しています。8行目では、サーバーサイドアプリがブラウザから呼び出されたときに実行されるアクションを定義しています。ここでは、単純に受け取ったURL（req.url）をそのままSAP Graphに渡しています。そして、SAP Graphから返されたデータを生のままブラウザの画面に表示しています。

これでサーバーサイドアプリケーションの準備が出来たので実行してみましょう。以下のコマンドをコンソールから実行してください。

node hellograph.js

コンソールには以下が表示されます

Explore SAP Graph at http://localhost:3004

実行したアプリケーションは、次の例の様なフォーマットのクエリ付きURLを受け取ることが出来ます。ブラウザを開きアクセスしてみて下さい。

http://localhost:3004/sap.graph/SalesQuote?$top=2

ブラウザはアプリケーションを呼び出し、アプリケーションはSAP Graphを呼び出してデータを取得します。すべてがうまくいけば、画面に次のような出力が表示されます。

(ブラウザにJSONフォーマッターをインストールすることで画像の様に奇麗に出力できます。 chromeの場合こちらをご参照下さい。)

今回作成したhelloGraphアプリはすでにかなり便利になっています。このアプリを使用して、さまざまなODataクエリを試しながらODMビジネスグラフを探索することができます。

注：アプリの実行を停止するにはWindowsまたはUnixの場合コンソールでCTRL-Cを入力すれば良いです

このチュートリアルシリーズの次のパートでは、このアプリをスケルトンとして再利用し認証を導入します。