1. 背景

1.1. ドメイン

フラワーショップ「フレール・メモワール」は店舗売りとは切り離してWEBショップ事業を立ち上げた。WEBで注文を受け付けて、指定された日付に指定場所に花束を届けるという形態。

当初は受注も少なく手作業で管理出来ていたが、受注が増えるにつれシステム化の必要性が出てきた。「新鮮な花を大切な記念日に」を売り文句にしていることもあって、廃棄される在庫が多く、受注の増加にともなって利益が伸びていないため。

— 花束問題V1.2 事業と問題の概要

1.2. 組織図

1.3. ビジネスモデル

2. 要件

要件定義にはリレーションシップ駆動要件分析(RDRA)を使用する。

RDRAとは短時間で要件を把握することを目的とした軽量の手法。 RDRAでは、決められたアイコンを使い、アイコンとアイコン、アイコンと図を関連づけ、アイコンで表現されたモデル要素と関連のつながりから要件を説明する。

rdra
rdra2

また、要件定義は開発と並行して都度反映され運用にも影響を与える。

life cycle.drawio

2.1. システム価値

2.1.1. システムコンテキスト

Diagram

2.1.2. 要求モデル

得意先
Diagram
スタッフ
Diagram

2.2. システム外部環境

2.2.1. ビジネスコンテキスト

Diagram

2.2.2. ビジネスユースケース

ユーザー管理
Diagram
受注管理
Diagram
在庫管理
Diagram
取引先管理
Diagram

2.2.3. 業務フロー

受注管理
商品の注文
Diagram
注文の変更
Diagram
注文の取消
Diagram
商品の出荷
Diagram
商品の返品
Diagram
在庫管理
単品の発注
Diagram
単品の入荷
Diagram

2.2.4. 利用シーン

ユーザー管理
ユーザー認証
Diagram
ユーザー登録
Diagram
受注管理
商品の登録
Diagram
取引先管理
取引先の登録
Diagram

2.2.5. バリエーション・条件

役割

管理

一般

ユーザー区分

得意先

スタッフ

登録区分

有効

無効

取引先区分

得意先

仕入先

2.3. システム境界

2.3.1. ユースケース複合図

ユーザー管理
ユーザー認証
Diagram
ユーザー登録
Diagram
Diagram
受注管理
商品の登録
Diagram
Diagram
商品の注文
Diagram
Diagram
注文の変更
Diagram
Diagram
注文の取消
Diagram
Diagram
商品の出荷
Diagram
Diagram
商品の返品
Diagram
在庫管理
単品の発注
Diagram
単品の入荷
Diagram
Diagram
取引先管理
取引先の登録
Diagram
Diagram

2.4. システム

2.4.1. 情報モデル

Diagram

2.4.2. 状態モデル

ユーザー管理
ユーザー認証
Diagram
ユーザー登録
Diagram
受注管理
商品の登録
Diagram
商品の注文
Diagram
注文の変更
Diagram
注文の取消
Diagram
商品の出荷
Diagram
商品の返品
Diagram
在庫管理
単品の発注
Diagram
単品の入荷
Diagram
取引先管理
取引先の登録
Diagram
Diagram

3. 開発

3.1. 仕様

3.1.1. コンテキストマップ

Diagram

3.1.2. ユースケース

service method call hierarchy

認証
Diagram
ユーザー
Diagram
商品
Diagram
販売
Diagram
注文
Diagram
受注
Diagram
発注
Diagram
出庫
Diagram
出荷
Diagram
入荷
入庫
Diagram
検収
Diagram
返品
Diagram
得意先
Diagram
仕入先
Diagram

3.2. 設計

3.2.1. アプリケーションアーキテクチャ

architecture

3.2.2. ドメインモデル

business rule relation
認証
Diagram

3.2.3. データモデル

認証スキーマ
relationships.real.large
注文スキーマ
relationships.real.large
在庫スキーマ
relationships.real.large

4. 運用

4.1. 開発

4.2. テスト

4.3. ビルド

4.4. デプロイ

5. 構築

ソフトウェア

バージョン

備考

Java

17

Node.js

16.3.0

5.1. アプリケーションコンポーネント

5.1.1. プロダクション・開発環境

Diagram

5.2. コンポーネントセットアップ

5.2.1. 開発関連

開発ツール
npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/register
npm install --save-dev npm-run-all watch foreman cpx rimraf marked@1.2.2
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server
touch Procfile.dev

5.2.2. ドキュメント関連

Asciidoctor
npm install --save-dev asciidoctor asciidoctor-kroki

5.2.3. フロントエンド関連

Cypress
npm install cypress
npmx cypress open
npm install --save-dev cypress-cucumber-preprocessor
npm install --save-dev cucumber-html-reporter
React
npm install --save-dev jest
npm install react react-dom
npm install --save-dev babel-loader @babel/preset-react
npm install --save-dev @testing-library/react @testing-library/jest-dom
npm install --save-dev sass-loader sass style-loader css-loader
npm install --save-dev identity-obj-proxy
npm install react-router-dom
npm install --save-dev typescript ts-loader
npm install --save @types/react @types/react-dom @types/react-router-dom
npm install --save-dev @types/jest@27.4.1 ts-jest@27.1.4
npx tsc --init
npm install -save @reduxjs/toolkit react-redux
npm install -save axios @types/axios
npm install --save-dev react-hook-form
npm install cross-env

6. 配置

6.1. システムアーキテクチャ

Diagram

6.2. CIセットアップ

git update-index --chmod=+x gradlew

6.3. Herokuセットアップ

heroku create ape2022-take15

7. 参照