2,749 測定値

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

に MESCIUS inc.14m2023/06/21

長すぎる; 読むには

ActiveReportsJS を使用すると、あらゆるブラウザーで動作し、デスクトップおよびモバイルデバイスをサポートする、高度にインタラクティブなレポート機能を備えた応答性の高い Web アプリケーションを構築できます。この記事では、ユーザーが ActiveReportsJS を使用して注文レポートを追跡できるようにする、応答性の高い Node.js 在庫管理システムを構築する方法を説明します。次のトピックについて説明します: データアクセスの定義、計算フィールドの使用、チャートコントロールの追加、およびドリルダウン機能の追加。

featured image - 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 在庫請求書アプリを起動するだけです。