コンテンツにスキップ

Dressca⚓︎

概要⚓︎

Dressca は、 Spring Framework / Spring Boot を用いて構築されたバックエンドアプリケーションと、 Vue.js ベースのフロントエンドアプリケーションから構成される Web アプリケーションです。 クライアントサイドで HTML をレンダリングすることで、快適で高品質なユーザー体験を実現しています。 バックエンドとフロントエンドは、 OpenAPI により公開された API 仕様を介して連携しています。 サンプルアプリケーションでは、 EC サイト利用者向けアプリケーション（以下、 Consumer）と管理者向けアプリケーション（以下、 Admin）の 2 種類のアプリケーションを実装しています。

アプリケーション起動の準備⚓︎

  1. 以下を参照し、開発環境を構築してください

  2. 以下のリンクから、サンプルアプリケーションをダウンロードしてください。

  3. ダウンロードした zip ファイルのプロパティを開き、ファイルへのアクセスを許可 ( ブロックを解除 ) してから、任意のフォルダーに展開してください。 以降の手順では、「dressca」フォルダーに展開したものとして解説します。

    展開先のフォルダーについて

    展開先のフォルダーは、浅い階層にすることを推奨します。

  4. VS Code で「ファイルでワークスペースを開く」から、「dressca\dressca-frontend\dressca-frontend.code-workspace」を開き、必要な拡張機能をインストールします。 「拡張機能」メニューから 「拡張機能のフィルター」>「推奨」>「ワークスペース推奨事項」にある拡張機能を全てインストールします。

    「このフォルダー内のファイルの作成者を信頼しますか？」ダイアログが表示される場合

    フォルダーを開いた際のダイアログ

    フォルダーを開いた際に、図のダイアログが表示される場合、 「親フォルダー 'dressca' 内の全てのファイルの作成者を信頼します」のチェックボックスにチェックを入れ、「はい、作成者を信頼します」を押下してください。

    拡張機能のインストールが失敗する場合

    拡張機能のインストール時にエラーが発生する場合には、 VS Code の再起動やローカルキャッシュのクリアを試してください。

  5. フロントエンドのアプリケーションを実行するためのモジュールを取得します。 VS Code のターミナルで、「dressca\dressca-frontend」にいることを確認し、以下のコマンドを実行します。

    フロントエンドアプリケーションの実行に必要なパッケージのインストール
    1
    npm ci

    npm ci が失敗した場合

    npm ci の途中でエラーや脆弱性情報以外の警告が出た場合、インストールに失敗している可能性があります。 その場合は、「dressca\dressca-frontend\node_modules」、 「dressca\dressca-frontend\consumer\node_modules」、 「dressca\dressca-frontend\admin\node_modules」ディレクトリをそれぞれ削除し、再度 npm ci を実行してください。

  6. VS Code で「dressca\dressca-backend」フォルダーを開き、必要な拡張機能をインストールします。 「拡張機能」メニューから 「拡張機能のフィルター」>「推奨」>「ワークスペース推奨事項」にある拡張機能を全てインストールします。 インストール後、拡張機能の初期化処理が実行されます。 初期化処理の状態を VS Code のステータスバーで確認し、完了後次の手順に進んでください。

    拡張機能の初期化処理の状態 拡張機能の初期化処理の状態

  7. VS Code のアクティビティーバーにある「 Gradle 」をクリックし、サイドバーの「 GRADLE PROJECTS 」タブから以下のタスクを実行します。

    dressca-backend > Tasks > build > build

  8. アプリケーション起動の準備は完了です。Consumer アプリケーションの起動、Admin アプリケーションの起動 を参照し、アプリケーションを起動してください。

Consumer アプリケーションの起動⚓︎

フロントエンドアプリケーションの実行手順⚓︎

  1. フロントエンドのアプリケーションを実行します。 VS Code のターミナルで、「dressca\dressca-frontend」にいることを確認し、以下のコマンドを実行してください。 アプリケーションの実行方法は、 API 呼び出し時にバックエンドアプリケーションへ実際にアクセスする「開発モード」と、 API 呼び出し時にモックを利用する「モックモード」の 2 種類があります。 「開発モード」で実行する場合には、後述の手順を参照してバックエンドアプリケーションを先に起動させておく必要があります。

    開発モードでのフロントエンドアプリケーションの実行
    1
2
    # 開発モードでの実行
npm run dev:consumer
    モックモードでのフロントエンドアプリケーションの実行
    1
2
    # モックモードでの実行
npm run mock:consumer

  2. ブラウザーを開き、以下のアドレスにアクセスします。

    http://localhost:5173

    Dressca トップページ

  3. サンプルアプリケーションに実装された機能を確認できます。Consumer アプリケーションの機能 を参照してください。

バックエンドアプリケーションの実行手順⚓︎

  1. VS Code のアクティビティーバーにある「 Gradle 」をクリックし、サイドバーの「 GRADLE PROJECTS 」タブから以下のタスクを実行します。

    web-consumer > Tasks > application > bootRunDev

    bootRunDev タスクのパーセンテージについて

    bootRunDevタスクの実行例

    bootRunDev タスクはサーバーとして待機するループ処理を行うため、図のようにパーセンテージが 100% になりません。 以降の手順で API にアクセスできれば、正常に起動できています。

  2. 以下のアドレスで、サンプルアプリケーションの API にアクセスできます。

    http://localhost:8080

    フロントエンドアプリケーションや API クライアントツールを利用してアクセスしてください。 サンプルアプリケーションが提供する API の仕様については、以下のアドレスから参照できます。

    http://localhost:8080/swagger-ui.html

Consumer アプリケーションの機能⚓︎

Consumer アプリケーションに実装された機能の確認手順を示します。

カタログアイテムを注文する⚓︎

カタログアイテム注文の画面遷移図 カタログアイテム注文の画面遷移図

  1. 上記の Consumer アプリケーションの起動 に従って、 Consumer アプリケーションを実行します。

  2. 任意のアイテムについて、「買い物かごに入れる」ボタンを押下します。買い物かご画面に遷移し、選択したアイテムが買い物かごに入っていることを確認してください。

  3. 「レジへ進む」ボタンを押下すると、ログイン画面へ遷移します。ログインフォームにそれぞれ [メールアドレス形式の文字列] と [任意の 1 文字以上の文字列] を入力し、「ログイン」ボタンを押下してください。

  4. 注文確認画面へ遷移します。「注文を確定する」ボタンを押下し、注文完了画面へ遷移することを確認してください。

Admin アプリケーションの起動⚓︎

フロントエンドアプリケーションの実行手順⚓︎

  1. フロントエンドのアプリケーションを実行します。 VS Code のターミナルで、「dressca\dressca-frontend」にいることを確認し、以下のコマンドを実行してください。 アプリケーションの実行方法は、 API 呼び出し時にバックエンドアプリケーションへ実際にアクセスする「開発モード」と、 API 呼び出し時にモックを利用する「モックモード」の 2 種類があります。 「開発モード」で実行する場合には、後述の手順を参照してバックエンドアプリケーションを先に起動させておく必要があります。

    開発モードでのフロントエンドアプリケーションの実行
    1
2
    # 開発モードでの実行
npm run dev:admin
    モックモードでのフロントエンドアプリケーションの実行
    1
2
    # モックモードでの実行
npm run mock:admin

  2. ブラウザーを開き、以下のアドレスにアクセスします。

    http://localhost:6173

    Dressca Admin ログイン画面

  3. ログイン画面が表示されたら、ログインフォームにそれぞれ [メールアドレス形式の文字列] と [任意の 1 文字以上の文字列] を入力し、「ログイン」ボタンを押下してください。

  4. ホーム画面へ遷移し、メニューが表示されることを確認してください。

    Dressca Admin ホーム画面

  5. サンプルアプリケーションに実装された機能を確認できます。Admin アプリケーションの機能 を参照してください。

バックエンドアプリケーションの実行手順⚓︎

  1. VS Code のアクティビティーバーにある「 Gradle 」をクリックし、サイドバーの「 GRADLE PROJECTS 」タブから以下のタスクを実行します。

    web-admin > Tasks > application > bootRunDev

  2. 以下のアドレスで、サンプルアプリケーションの API にアクセスできます。

    http://localhost:8081

    フロントエンドアプリケーションや API クライアントツールを利用してアクセスしてください。 サンプルアプリケーションが提供する API の仕様については、以下のアドレスから参照できます。

    http://localhost:8081/swagger-ui.html

Admin アプリケーションの機能⚓︎

Admin アプリケーションに実装された機能の確認手順を示します。

カタログアイテムを編集する⚓︎

カタログアイテム編集の画面遷移図 カタログアイテム編集の画面遷移図

  1. 上記の Admin アプリケーションの起動 に従って Admin アプリケーションを実行し、ログインしてホーム画面へ遷移します。

  2. 「カタログアイテム管理」ボタンを押下し、カタログアイテム一覧画面へ遷移します。

  3. 「アイテム ID」が 1 のアイテムの行の「編集」ボタンを押下し、カタログアイテム編集画面へ遷移します。

  4. 「変更後」フォームに任意のアイテムの情報を入力してください。このとき、入力できるアイテムの情報にはバリデーションが実装されています。エラーメッセージが表示されたら、エラーメッセージに従って入力内容を修正してください。入力が完了したら、「更新」ボタンを押下します。

  5. 確認モーダルが表示されます。「はい」を押下して実行します。

  6. 更新に成功したら、通知モーダルが表示されます。「はい」を押下します。

  7. 「変更前」のアイテムの情報が、先ほど入力した情報で更新されていることを確認してください。

  8. ヘッダーメニューの「カタログアイテム管理」ボタンを押下し、カタログアイテム一覧画面へ遷移します。「アイテム ID」が 1 のアイテムの情報が、先ほど入力した情報で更新されていることを確認してください。