1. 序章

このチュートリアルでは、JHipsterアプリケーション内に新しいAPIを作成する方法を説明します。 次に、そのAPIをフロントエンドディスプレイに統合します。

2. サンプルアプリケーション

このチュートリアルでは、簡単な書店アプリケーションを使用します。

本屋は一枚岩として建てられています。 フロントエンドにAngularを使用し、次のフィールドを持つbookという名前の単一のエンティティがあります。

  • 題名
  • 著者
  • 公開データ
  • 価格

JHipsterは、書籍の簡単な操作を提供するAPIとフロントエンドビューを自動的に生成します:表示、作成、編集、削除。

このチュートリアルでは、ユーザーが本を購入できるようにするAPI と、新しいAPIを呼び出すフロントエンドのボタンを追加します。

APIと購入のフロントエンドの側面にのみ焦点を当てます。 支払い処理は行わず、最小限の検証のみを行います。

3. 春のブートの変更

JHipsterは、新しいコントローラーを作成するためのジェネレーターを提供します。 ただし、このチュートリアルでは、APIと関連するコードを手動で作成します。

3.1. リソースクラス

最初のステップは、生成されたBookResourceクラスを更新することです。 フロントエンドコードが呼び出す新しいエンドポイントを追加します。

@GetMapping("/books/purchase/{id}")
public ResponseEntity<BookDTO> purchase(@PathVariable Long id) {
    Optional<BookDTO> bookDTO = bookService.purchase(id);
    return ResponseUtil.wrapOrNotFound(bookDTO);
}

これにより、 / books / Purchase /{id}に新しいAPIエンドポイントが作成されます。 唯一の入力は本のidであり、購入後の新しい在庫レベルを反映するBookDTOを返します。

3.2. サービスインターフェイスとクラス

ここで、 BookServiceインターフェースを更新して、新しい購入方法を含める必要があります:

Optional<BookDTO> purchase(Long id);

次に、BookServiceImplクラスに新しいメソッドを実装する必要があります。

@Override
public Optional<BookDTO> purchase(Long id) {
    Optional<BookDTO> bookDTO = findOne(id);
    if (bookDTO.isPresent()) {
        int quantity = bookDTO.get().getQuantity();
        if (quantity > 0) {
            bookDTO.get().setQuantity(quantity - 1);
            Book book = bookMapper.toEntity(bookDTO.get());
            book = bookRepository.save(book);
            return bookDTO;
        }
        else {
            throw new BadRequestAlertException("Book is not in stock", "book", "notinstock");
        }
    }
    return Optional.empty();
}

このコードで何が起こっているかを見てみましょう。 まず、本をIDで検索して、本が存在することを確認します。 そうでない場合は、空のオプションを返します。

存在する場合は、在庫レベルがゼロより大きいことを確認します。 それ以外の場合は、 BadRequestAlertExceptionをスローします。この例外は通常JHipsterのRESTレイヤーでのみ使用されますが、ここでは、有用なエラーメッセージをフロントエンドに返す方法を示すために使用しています。

それ以外の場合、在庫がゼロより大きい場合は、在庫を1つ減らしてリポジトリに保存し、更新されたDTOを返します。

3.3. セキュリティ構成

必要な最後の変更は、SecurityConfigurationクラスにあります。

.antMatchers("/api/books/purchase/**").authenticated()

これにより、新しいAPIへの呼び出しが認証されたユーザーのみに許可されるようになります。

4. フロントエンドの変更

それでは、フロントエンドの変更に焦点を当てましょう。 JHipsterは、1冊の本を表示するためのビューを作成します。ここに、新しい購入ボタンを追加します。

4.1. サービスクラス

まず、既存のbook.service.tsファイルに新しいメソッドを追加する必要があります。このファイルには、ブックオブジェクトを操作するためのメソッドが既に含まれているため、新しいAPIのロジックを追加するのに適しています。

purchase(id: number): Observable<EntityResponseType> {
    return this.http
        .get<IBook>(`${this.resourceUrl}/purchase/${id}`, { observe: 'response' })
        .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}

4.2. 成分

次に、book.component.tsのコンポーネントコードを更新する必要があります。Angular bookサービスで新しいメソッドを呼び出し、サーバーからの応答をリッスンする関数を作成します。

purchase(id: number) {
    this.bookService.purchase(id).subscribe(
        (res: HttpResponse<IBook>) => {
            this.book = res.body;
        },
        (res: HttpErrorResponse) => console.log(res.message)
    );
}

4.3. 意見

最後に、ブックビューに、コンポーネントの新しい購入メソッドを呼び出すボタンを追加できます。

<button type="button"
             class="btn btn-primary"
             (click)="purchase(book.id)">
    <span>Purchase</span>
</button>

以下の画像は、フロントエンドで更新されたビューを示しています。

新しい購入ボタンをクリックすると、新しいAPIが呼び出され、フロントエンドが新しい在庫ステータスで自動的に更新されます(または問題が発生した場合はエラーが表示されます)。

5. 結論

このチュートリアルでは、JHipsterでカスタムAPIを作成し、それらをフロントエンドに統合する方法を見てきました。

まず、APIとビジネスロジックをSpringBootに追加しました。 次に、新しいAPIを利用して結果を表示するように、フロントエンドコードを変更しました。 ほんの少しの努力で、JHipsterが自動的に生成する既存のCRUD操作に新しい機能を追加することができました。

そしていつものように、コードはGitHub利用できます。