Node.js インベントリと請求書請求アプリケーションの構築: ガイド

最近ビジネスを運営する場合、場所に関係なく、注文、在庫、財務データにアクセスできることが重要です。そのため、柔軟かつ対話型であり、さまざまな画面解像度に適応できるオンスクリーン レポートが不可欠です。

そうすることで、いつでもどこでも必要なときにビジネスのパフォーマンスを常に把握し、情報に基づいた意思決定を行うことができます。

ActiveReportsJS を使用すると、あらゆるブラウザーで動作し、デスクトップおよびモバイル デバイスをサポートする、高度にインタラクティブなレポート機能を備えた応答性の高い Web アプリケーションを構築できます。

この記事では、ユーザーが ActiveReportsJS を使用して注文レポートを追跡できるようにする、応答性の高い Node.js 在庫管理システムを構築する方法を説明します。次のトピックについて説明します。

• レポートタイトルのデザイン

• Node.js でのデータ アクセスの定義

• 計算フィールドの使用

• チャート コントロールの追加

• テーブルコントロールの追加

• サブテーブルの定義

• ドリルダウン機能の追加

• テーブルへのソート列の追加

• Node.js 請求書アプリケーションの作成

  
  

完成したレポートとアプリケーションを確認したい場合は、ここでリポジトリを見つけることができます。

Web ベースの販売レポートの作成

このシナリオでは、売上レポートの作成を当社と契約した ACME Inc. というクライアントがいます。リクエストには、次のようなレポートのモックアップが付属しています。

上記のようなエンタープライズレベルのレポートを作成するために、GrapeCity は ActiveReportsJS デザイナーを提供しています。この直感的なツールは、データを取得し、表、棒グラフ、円グラフなどの視覚要素を使用してレンダリングするようにレポートを構成するのに役立ちます。

ActiveReportsJS デザイナーは、レポート定義を特別な JSON 形式で保存し、 .rdlx-json拡張子の付いたファイルに保存します。

レポートタイトルのデザイン

新しいレポートを作成するには、デザイナーで、デザイナー ツールバーの[ファイル]メニューを開き、 [連続ページ レイアウト]レポート オプションを選択します。

新しいレポートが作成されたので、左側のハンバーガー ボタンをクリックすると、コントロール パネルが展開されます。ここから、コントロールをレポート キャンバスにドラッグ アンド ドロップして、レポートに含めることができます。

このレポートでは、ロゴ画像とラベルを保持するコンテナを上部に配置します。コンテナ コントロールをコントロール パネルからレポート キャンバスにドラッグ アンド ドロップします。次に、画像とテキストボックス コントロールをレポート キャンバス上のコンテナー コントロールにドラッグ アンド ドロップします。

画像を画像コントロールにリンクするには、URL やデータベースなどの外部ソースから画像を取得するか、ローカル ファイルから画像を埋め込むことができます。弊社画像はACME Inc.のロゴとなります。

テキストボックスの場合は、フォント、サイズ、色を必要に応じてカスタマイズできます。タイトル テキストについては、これをMonthly Ordersに設定します。

完了すると、タイトルは次のようになります。

Node.js でのデータ アクセスの定義

ActiveReportsJS Designerは、データソースとデータセットという2種類のエンティティを介してデータ接続を管理します。

データ ソースは、レポートに埋め込むことができる URI、JSON ファイル、または JSON ドキュメントなどの外部データ ストレージへの接続として機能します。

データ セットは、データ ソースからデータをフェッチし、レポート データ モデル内のフィールドにバインドする中間要素です。式を使用してソース データを変換する計算フィールドを定義することもできます。データ セット フィールドは、レポート コントロールで使用できるようになります。

当社の在庫請求書ソフトウェアは、HTTP サービスにある外部 API を通じてデータにアクセスし、結果を JSON 形式で返します。レポートには、そのサービスからの「ライブ」データに基づいたさまざまな注文情報が表示されます。

レポート内の顧客データへのアクセスを定義するには、まず[データ ソース]タブを選択し、[データ ソース] セクションの[追加]ボタンをクリックします。

これにより、 [新しいデータ ソース]ウィンドウが表示されます。

このウィンドウでは、データ ソースに名前を付け、データ プロバイダーを設定し、必要な追加の HTTP ヘッダーまたはパラメーターを追加します。

データ プロバイダーを追加するときに、リモート JSON を使用するか、ローカル ファイルを介して JSON をレポートに埋め込むかを選択できます。この在庫請求書アプリケーションのデータをリモート ソースからロードします。すべてを追加したら、 「保存」ボタンをクリックしてデータ ソースを保存します。

注:データ ソースは単純な接続構成です。まだリクエストは行われていません。

データ ソースを作成したので、そのソースを使用してデータを取得するデータ セットを作成する必要があります。データセットを作成するには、データソースの横に表示されるプラスボタンをクリックします。

これにより、 [新しいデータ セット]ウィンドウが表示されます。

通常、ここではUri/pathとJSON Path という2 つのプロパティを設定する必要があります。 Uri/パスは、API エンドポイントに到達したら JSON ファイルを探す場所を ActiveReportsJS に指示します。また、Json パスは、取得する JSON の部分を Node.js 請求書アプリケーションに指示するために使用されます。

Uri/パスについては、 /Customersを使用して顧客に関するデータを返します。この例では、すべてのエントリを取得する必要があるため、JSON パスとして$.*を渡します。

最後に、ActiveReportsJS がデータを取得できることを確認できるように、データ ソースを検証する必要があります。 Database Fields配列に値が入力されていることが確認できれば、データ ソースが検証されたことがわかります。

アプリケーションには別のデータ ソースが必要になります。これは、node.js 請求書アプリを通じて行われた注文のデータを取得するために使用します。 2 番目のデータ ソースは次のようになります。

さらに 2 つのデータ セットが必要になります。1 つは NWAPI データ ソースに基づいて、Uri/パスとして/Productsを使用し、もう 1 つは NWOData ソースに基づいて、 /Orders をUri/パスとして使用します。 Ordersデータセットの場合、Json パスも$.value[*]に設定します。

セットアップすると、データ パネルは次のようになります。

計算フィールドの使用

場合によっては、1 つ以上のソース フィールドを、レポートで使用する新しい計算フィールドに変換することが必要になることがあります。 ActiveReportsJSは、このニーズを満たす豊富な組み込み関数を備えた式言語を提供します。

この例では、OrderDate フィールドを「月/年」形式に変換しましょう。これを実現するには、自動的にバインドされたデータベース フィールドのリストにカスタム フィールドを追加する必要があります。

Ordersデータセットを編集し、 [計算フィールド]セクションを展開します。ここで、新しい計算フィールドを追加できます。フィールドにMonthyear という名前を付け、値を{DateTime.Parse(OrderDate).ToString("MM/yyyy")}として設定します。

NWOData ソースに基づいて、 OrderDetailsという名前の新しいデータ セットを作成します。 Uri/パスを/OrderDetailsに設定し、Json パスを$.value[*]に設定します。

OrderDetails データ セットには、品目ごとの合計値のフィールドが含まれていないことに注意してください。この値は、レポート内で複数回必要になる可能性があります。したがって、必要になるたびにこの値を計算するか、新しい計算フィールドを作成する必要があります。後者のオプションの方がはるかに効率的です。

OrderDetails データ セットのPracticalFieldsセクションを展開し、フィールドにSubtotal という名前を付け、値を {Round(100 * (UnitPrice - UnitPrice *discount) * Quantity) / 100}として設定します。

チャート コントロールの追加

いくつかのデータ ソースを設定したので、次はそれらをレポートに組み込みます。そのために、チャートを追加します。チャート コントロールをコントロール パネルからレポートにドラッグ アンド ドロップすると、チャート ウィザードが表示されます。

データ セットがOrderDetailsセットを使用するように設定されていることを確認し、 [次へ]ボタンをクリックします。

これで、データフィールドとカテゴリフィールドを設定できるようになりました。 「データ値」に新しいフィールドを追加します。名前を{Subtotal}に設定し、集計をSumに設定します。次に、「データ カテゴリ」のフィールドを {Lookup(OrderId, OrderId, Month Year, “Orders”)}に設定します。次のようになります。

[次へ] をクリックし、 [完了]をクリックします。グラフを表示する前に最後に行うことは、グラフのさまざまな要素のプロパティに最終的な変更を加えることです。

グラフの要素を変更するには、データ ウィンドウではなくプロパティ ウィンドウを表示していることを確認し、グラフの要素をクリックするだけです。

プロパティ ウィンドウが更新され、現在選択されている要素のすべてのプロパティが表示されます。次のようにグラフのプロパティを定義します。

完了すると、レポートは次のようになります。

「プレビュー」をクリックすると、ロードされたデータを含むレポートが表示されます。

テーブルコントロールの追加

グラフに加えて、ユーザーが Node.js 請求書アプリでさらに多くのデータを表示できるようにしたいと考えています。月ごとの注文量の表形式のビューを作成してみましょう。テーブル コントロールをコントロール パネルからグラフの下のレポートにドラッグ アンド ドロップします。

デフォルトでは、ActiveReportsJS テーブルは 3 つの列と 3 つの行で作成されます。上の行はヘッダー行として機能し、真ん中の行は詳細行でデータが保持され、下の行はフッター行です。

レポート作成者は、テーブルのサイズ変更、行と列の追加または削除、複数のヘッダーとフッターの定義などを行うことができます。

ここで、テーブルを選択し、プロパティ パネルに移動して、次のようにプロパティを定義します。

次に、テーブルのヘッダー行とフッター行は不要なので、削除します。これを行うには、削除する行のセルを右クリックし、 「行」オプションを選択して、 「行の削除」をクリックします。

次に、詳細行のセルを結合します。これを行うには、結合するセルを選択し、選択したセルの 1 つを右クリックし、メニューから[セル]オプションを選択して、 [セルの結合]をクリックします。

次に、新しく結合されたセルを選択し、そのテキスト ボックス名をtxtMonthに設定し、その値を{MonthName(Month(OrderDate))}/{year(OrderDate)}に設定します。

最後に、テーブルのグループ化を定義する必要があります。これを行うには、セルを選択し、ポップアップ メニューから<詳細グループ>を選択します。

グループの最初のレベルを式{ Year(OrderDate)}で設定し、2 番目のレベルを{Month(OrderDate)}として設定します。

新しいテーブルには、表形式セクションの最初のレベルのデータが表示されます。

次に、さらに多くのレベルのデータを追加していきます。現在の行の下に新しい行を作成し、ヘッダー行とフッター行を削除し、詳細行を結合して、別のテーブル コントロールを新しい大きなセルにドラッグ アンド ドロップします。

新しいテーブルのプロパティを次のように定義します。

次に、新しく結合されたセルを選択し、そのテキスト ボックス名をtxtOrderIdに設定し、その値を注文 ID: {OrderId}に設定します。これを設定したら、レポートをプレビューして結果を確認します。

tableOrdersテーブルがレポートの 2 番目のレベルにあることに注意してください。特定の月内に行われた注文の詳細が記載されています。

サブテーブルの定義

注文を月ごとに表示したので、在庫請求書アプリケーションを介して送信される各注文の注文詳細セクションを追加します。

OrderId詳細行の下に新しい詳細行を追加し、セルを結合して、その詳細行内に別のテーブルを配置します。今回は、ヘッダー行とフッター行を削除する代わりに、ヘッダー行を残して詳細行とフッター行を削除します。

次に、3 つのセルすべてを 1 つに結合する代わりに、中央と右側のセルを 1 つに結合し、左側のセルを独自のセルとして残します。

左側のセルの数式をTotal として定義します。結合されたセルの場合、プロパティ パネルを使用してセルの配置をLeftに設定し、その書式プロパティをCurrencyに設定し、結合されたセルの数式を{SUM(Subtotal)}として設定します。

エクスプローラーでtableOrderTotalテーブルを選択し、 Filtersプロパティを展開します。 [項目の追加] をクリックし、次のフィールドを含む新しいフィルター基準を追加します。

ご覧のとおり、新しい tableOrderTotals テーブルは OrderDetails データ セットに基づいています。合計値は、tableOrder 行の OrderId で注文の詳細をフィルター処理し、Subtotal フィールドの値を合計することによって取得されます。

「プレビュー」をクリックすると、更新されたテーブルが表示されます。

最後に、請求書の注文品目を表すテーブルを作成します。

tableOrders テーブルに新しい詳細行を作成し、その新しい詳細行内にtableOrderDetailsという新しいテーブルを作成します。次のようにテーブルを構成します。

完了すると、テーブルは次のようになります。

「プレビュー」をクリックすると、新しいテーブルが表示されます。

次に進む前に、テーブルの外観を改善するために少しスタイルを変更します。完成したバージョンは次のようになります。

ドリルダウン機能の追加

ここで、レポートにドリルダウン機能を追加して、ユーザーが展開するまでtableOrders テーブルとtableOrderDetailsテーブルを折りたたんだままにしておくことができるようにします。

tableOrders テーブルを選択し、 HiddenプロパティとToggle Itemsプロパティを次のように変更します。

tableOrderDetails テーブルを選択し、これも折りたたみ可能にします。

ここで、+/- 記号をクリックして、詳細レベルを展開したり折りたたんだりできます。

次に、Node.js 請求書アプリケーションのレポートにさらに詳細を追加してみましょう。

tableOrderDetailsテーブルの既存のヘッダー行の上に 4 つの新しい行を追加します。これら 4 行の上部と下部はバッファーとして機能し、中央の 2 行には表示するデータが保持されます。

追加された 2 行目と 3 行目では、各行の左端のセルをそのまま残し、各行の残りのセルを結合します。次に、次のように行を入力します。

[プレビュー] をクリックすると、請求書に追加された顧客の名前と注文日が表示されます。

ソート列をテーブルに追加する

最後にレポートに追加するのは、注文詳細の列を並べ替える機能です。

各ヘッダー セルを選択し、「ユーザー ソート」セクションの「ソート式」フィールドに次の数式を入力します。

[プレビュー] をクリックすると、列ヘッダーの横に並べ替えアイコンが表示されます。注文アイテムを数量で並べ替えます。

注文を合計価格で並べ替えます:

Node.JS 請求書アプリケーションの作成

レポートが定義されたので、在庫請求書アプリケーションを作成できます。このアプリケーションには、デスクトップとモバイル デバイスの両方で見栄えの良い、応答性の高い Web ディスプレイが必要です。 ActiveReportsJS は、この機能をデフォルトで提供します。

サンプル アプリケーションは、JavaScript ランタイム環境である Node.js を使用して、サーバー側で Web アプリを実行します。

まず、 InventoryInvoice という名前の新しいフォルダーを作成し、任意の IDE で開きます。次に、コマンドラインで次を実行します。

 npm init

これにより、アプリケーションのビルドに使用されるpackage.jsonファイルのセットアップが実行されます。ファイルが生成されたら、次の 2 つのコマンドを実行します。

 npm install express npm install @grapecity/activereports

これにより、Node.js のフレームワークである Express と、請求書の表示に使用する ActiveReports がインストールされます。

Express をインストールしたので、それを使用する必要があります。 InventoryInvoiceフォルダーに、 index.jsという名前の新しいファイルを作成します。このファイルは Express を使用して Node.js 在庫請求書アプリケーションを提供します。

Index.js ファイル内に次のコードを追加します。

 const express = require('express'); //import Express.js module const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname))); app.listen(3000, () => { console.log(`Example app listening on port 3000`) })

ここで、ここで何をしているのかを簡単に説明します。

• コードの最初の 2 行にはサーバー内の Express が含まれており、Express のメソッドとプロパティを参照するために使用する変数が提供されます。

• 3 行目はフォルダーの相対パスにつながる変数を作成し、4 行目はこのパスをアプリケーションの静的パスとして使用することを Express に指示します。

• 6 行目から 8 行目では、Express を使用してアプリケーションを起動します。ここでは、ポート 3000 で実行するように指示しており、実行が開始されると、ターミナルにメッセージを記録します。

これが非常に基本的なレベルの Express です。在庫請求書ソフトウェアを起動できるサーバーができたので、次はユーザーにサービスを提供するページを作成します。

InventoryInvoiceフォルダーに新しいファイルを作成し、 index.htmlという名前を付けます。作成したら、次のコードを挿入します。

 <html> <head> <meta charset="utf-8" /> <title>ActiveReportsJS Viewer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-ui.css" /> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" /> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script> <style> #arjs-viewer { width: 100%; height: 100vh; } </style> </head> <body onload="load()"> <div id="arjs-viewer"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#arjs-viewer'); viewer.open('MonthlyOrders.rdlx-json'); } </script> </body> </html>

ここでやるべきことがいくつかあります。まず、HTML ファイルに 4 つのファイルを含めます。 ar-js-ui.css 、 ar-js-viewer.css 、 ar-js-core.js 、およびar-js-viewer.js 。 CSS ファイルは、ActiveReportsJS のコア CSS ファイルと、ビューアのスタイルを設定するために使用される CSS ファイルです。

JS ファイルは同じです。コア JS ファイルとビューア用の JS ファイルです。

次に、HTML では、ActiveReportsJS Viewer の作成に 1 行だけを使用しています。必要なのは、ビューアを div に関連付けるために使用できる ID を持つ単一の div だけです。

3 番目に、JavaScript では、ページが読み込まれると、新しい ActiveReports.Viewer コントロールを作成し、それを div に関連付けて、レポートを開くように指示します。

最後に、ビューアが画面全体を占めるように少量の CSS を含めます。

これが完了したら、レポートをInventoryInvoiceフォルダーに移動し、次のコマンドを実行して Node.js 在庫請求書アプリを起動するだけです。

 node index.js

localhost:3000 に移動すると、作成したレポートが表示され、操作できるようになります。

ActiveReportsJS Viewer コンポーネントも応答性があります。さまざまなデバイスの幅広い画面サイズで適切にレンダリングされます。 Web ブラウザで利用可能な開発者ツールを使用して、さまざまなモバイル デバイス、画面サイズ、ページの向きをすばやくエミュレートできます。

最後のメモ

これで完了です。この記事では、GrapeCity の ActiveReportsJS デザイナーを使用して月次在庫請求書レポートを作成するための実践的なアプローチを提供しました。

情報を集計して月ごとにグループ化した売上グラフを作成する方法と、月別と注文 ID ごとに売上を統合するドリルダウン機能を備えた対話型の表形式レポートを作成する方法について説明しました。

完成した申請書とレポートを確認したい場合は、ここで見つけることができます。コーディングを楽しんでください!