クライアントの設定

次に、クライアントコンポーネントを設定しましょう。初期化したクライアントディレクトリ（/app）には、以下が含まれています。

• /srcディレクトリ内のアプリケーションソースファイル
• /publicディレクトリ内のパブリックファイル
• Nodeモジュール
• client-package.json設定ファイル
• package.jsonおよびpackage-lock.json依存関係ファイル

設定済みのコードを含むクライアントディレクトリ全体を、先ほどダウンロードしたこちらのgitリポジトリから取得できます。

IDEを使用して、このディレクトリのsrcフォルダを展開したZIPファイル内のものに置き換え、ファイルを保存してください。

Reactパッケージのインストール

Document Processorアプリケーション用に、以下の追加Reactモジュールをインストールします。

• react-hot-toast: このライブラリは、クライアントアプリケーションでステータス通知としてトーストメッセージを表示するために使用します。

• react-router-dom: このパッケージは、URLに基づいてクライアントアプリケーション内のコンテンツを動的に読み込むためのルーティングに使用します。

• axios: このクライアントライブラリは、クライアント側からサーバー側のAPIと通信するためにHTTPリクエストを行うために使用します。

• classnames: この属性は、React内の要素のclass属性の値を設定または返すために使用します。

これらのReactパッケージをインストールするには、ターミナルでプロジェクトのクライアントディレクトリ（/app）に移動し、以下のコマンドを実行します。

これにより、モジュールがインストールされ、すべての依存関係が保存されます。

以下の情報はpackage.jsonファイルにも更新されます。

Tailwind CSSのインストール

すべてのHTMLファイルとJSコンポーネントをスキャンし、プロジェクト用の静的CSSファイルを生成するビルド済みCSSクラスを実装するため、Tailwindフレームワークを使用しています。

ターミナルでプロジェクトのクライアントディレクトリ（/app）に移動し、このフレームワークをインストール・初期化するには、ターミナルで以下の2つのコマンドを実行する必要があります。

1. Tailwind CSSをインストールするには:

2. プロジェクトでtailwind.config.jsファイルを初期化するには:

これにより、クライアントディレクトリにtailwind.config.jsファイルが作成されます。ファイルを開き、以下のコードを貼り付けて保存してください。Tailwindのインストールの詳細については、こちらのページをご覧ください。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

クライアントディレクトリの設定が完了しました。

Functionとクライアントコンポーネントの動作を簡単に確認しましょう。

ユーザーがクライアントアプリケーションで処理する入力画像またはデジタルドキュメントを入力します。

index.jsファイル内の/:model APIがトリガーされ、呼び出すモデルを定義します。入力ドキュメントのタイプに基づいて、対応するモデル（pan、cheque、ocr、barcode、またはpassbook）のロジックが実行されます。

以下に記載するすべてのモデル（barcodeを除く）は、Catalyst Zia Services Node.js SDKパッケージのzia.extractOpticalCharacters()メソッドを使用して、入力ドキュメントまたは画像からデータを抽出し、JSON形式でレスポンスを返します。

• /pan: このドキュメントの場合、modelTypeはPANに設定されます。ユーザーがPANカードのスキャンコピーを入力として提供すると、レスポンスにはカード所有者の名、姓、生年月日、PANカード番号が含まれます。

• /ocr: 一般的なOCR処理の場合、modelTypeはOCRに設定されます。入力ドキュメントから抽出されたテキストと信頼度スコアがレスポンスとして送信されます。信頼度スコアは、入力ドキュメントにおけるテキスト認識と予測の精度を示すパーセンテージ値です。

• /cheque: このドキュメントの場合、modelTypeはCHEQUEに設定されます。ユーザーが小切手リーフレット（CTS-2010形式のみ）を提供すると、レスポンスには小切手番号、銀行名、支店、IFSCコード、口座番号、金額、発行日などの銀行情報が含まれます。

• /barcode: ユーザーが1Dまたは2Dバーコードを入力として提供すると、エンコードされた情報がレスポンスとして返されます。この操作には、Catalyst Zia Services Node.js SDKのzia.scanBarcode()メソッドを使用しています。サポートされているバーコード形式の詳細については、こちらのページをご参照ください。

• /passbook: ユーザーが通帳ドキュメントを入力として提供すると、レスポンスには口座番号、銀行名、支店、住所などの情報が含まれます。

6. index.jsファイル内の/aadhaar APIは、ユーザーがクライアントアプリケーションでAADHAARカードの処理を選択したときにトリガーされます。ユーザーはカードの表面と裏面の画像を別々に提供する必要があり、両方が処理されます。このモデルはドキュメントの言語を自動的に認識して処理します。このAPIは、SDKパッケージのzia.extractAadhaarCharacters()メソッドを実装しており、AADHAARカードで認識されたカード所有者の名前、住所、性別、AADHAARカード番号などのパラメータを抽出します。

クライアントコンポーネントの詳細を確認しましょう。

• クライアントのルートディレクトリには、クライアントのデフォルト設定を含むCatalyst固有のclient-package.jsonファイルがあります。

• srcフォルダには、Reactアプリをコンパイルする際にビルドフォルダに含まれるJavaScriptおよびCSSファイルを含む、アプリケーションのソースファイルが格納されています。App.jsxは、アプリケーションのフロントエンドの動作を制御します。changeイベントやshrinkイベントを処理し、先に定義したAPIを使用してデータの送受信を行います。viewsフォルダ内のファイルは、クライアントアプリケーションでレスポンスを出力としてレンダリングする役割を担っています。

• publicフォルダは、ブラウザからパブリックURLを通じて自由にアクセスできるファイルを格納するために使用します。以下のファイルが含まれています。

  1. index.html: アプリケーションのデフォルトエントリポイントです。

  2. manifest.json: start_urlが".“に設定されたWebアプリケーションの情報を含みます。これにより、ユーザーが入力するURLの短縮バージョンがすべて、アプリがホスティングされた際のベースURL Catalyst_web_app_URL/app/から始まるようになります。

• tailwind.config.js: このファイルには、プロジェクトに実装されたCSSスタイルなど、アプリケーションのクライアント側のすべてのカスタマイズが含まれています。