/
RPC サービスによる Angular プロジェクトの作成方法

RPC サービスによる Angular プロジェクトの作成方法

Owned by Haruhide Yasukawa (Unlicensed)
Last updated: Dec 25, 2020
2 min read

前提条件

  • OpenLegacy IDE 4.5.x （JDK およびすべての Maven 依存関係を含むフルインストール）

  • インターネット接続

  • RPC SDK および API プロジェクト

エクササイズリソース

端末/コンソールウィンドウで、少なくとも Node.js バージョン 8.x 以上（本稼働用）およびバージョン 10.x（開発用）およびバージョン 5.x 以上を実行中、node -v および npm -v を実行中であることを検証します。それより古いバージョンはエラーが出ます。

当社の Angular ソリューションは、 Node.js バージョン 8～10 を利用しています。

ステップ 1 – API プロジェクトをカスタマイズして Angular を変更

  1. API プロジェクト上で外部としての内部を有効化し、以下に従って Angular のバックエンド機能をサポートします。

API プロジェクトで、プロジェクトを右クリック → OpenLegacy メニュー → [外部サービスとしての内部を有効化] を選択します。

  1. API プロジェクトpom.xmlに移動し、以下の依存関係を検索します。

  <dependency>             <groupId>org.openlegacy</groupId>             <artifactId>openlegacy-security-user-session</artifactId>             <version>${openlegacy.version}</version>         </dependency>

以下の依存関係と置き換えます。

<dependency>        <groupId>org.openlegacy</groupId>        <artifactId>openlegacy-security-user-jdbc</artifactId>        <version>${openlegacy.version}</version> </dependency>

API の pom.xml に openlegacy-security-client-jdbc もあることを確認します。

         <dependency>             <groupId>org.openlegacy</groupId>             <artifactId>openlegacy-security-client-jdbc</artifactId>             <version>${openlegacy.version}</version>         </dependency>

  1. API プロジェクト → application.yml ファイル内では、パスワードフローで oauth2 クライアントを構成し、Angular アプリケーションの資格証明であるセキュリティユーザー JDBC を構成する必要があります。

# OpenLegacy # ol:   # OpenLegacy Common Properties (OLCommonProperties) #   common:     cache:       enabled: true   license:     key:   security:     db:       init-schema: true       clients:         - client-id: client_id           client-secret: '{noop}client_secret'           scope: read,write,trust,ol_admin           authorized-grant-types: client_credentials,password #need to be added       users: #JDBC users       - username: user #the user name you want.         password: '{noop}1234'  #the password you want.

注意! 外部として内部を有効化中は、openlegacy-security-user-session 依存関係が API の pom.xml に追加されます。

2. Angular プロジェクトの作成:

  1. IDE からの Angular プロジェクトの作成: ファイル → 新規作成 → OpenLegacy Web/モバイルプロジェクトを選択し、命名します。

  2. Angular プロジェクトで、オブジェクトを右クリック → OpenLegacy メニュー → サービスからコンポーネントの生成を選択します。すべての API に存在するすべてのサービスとともにウィンドウが開きます。生成する必要があるエンティティを選択し、[追加/すべて追加] ボタンをクリックします。

  3. 以前に作成した API を実行します。

  4. 端末を開き、すべての依存関係をインストールし（Angular プロジェクトを右クリック → ローカル端末に表示）、以下を入力します。

npm install

  1. 以下のコマンドでアプリケーションを構築して実行します。

npm run build-w

  1. www.js を右クリック、または以下を入力して端末からノードサーバーを実行します。

node server/bin/www.js

ステップ 3. Angular アプリケーションを開く

  1. localhost:8888 へ移動すると、ログインページが表示されます。

  1. ユーザー名とステップ 1 からのパスワードでログインします。

これで左のメニューのダッシュボード上にサービスを表示でき、サービス名をクリックしてテストできます。

 

Related content