【卸売業者と小売業者間の取引DX】BtoB展示会見積もりサイト構築

【卸売業者と小売業者間の取引DX】BtoB見積もりサイト構築

WEBで商品を展示してBtoBの顧客向けに見積書を発行できるWEBプラットフォームの構築をしました。
将来的には３Dオンラインシステムへアップデートする予定です。
プレイヤーは、バイヤー、サプライヤー、展示会主催者、システムオーナーになります。
このシステムはフェーズごとに開発実装されていき、今回はフェーズ２を納品しました。
フェーズ１の開発はこちら

■クライアントの課題

クライアントの印刷会社様は多くの顧客（サプライヤー）に商品カタログを提供している創業50年以上の歴史を持つ会社です。既存のサプライヤーを核にBtoBのオンライン展示会システムの構築プロジェクトを開始しました。

現在の業務フロー

現在の業務はバイヤーが電話やFAXでカタログの商品の見積もりをサプライヤーに依頼します。
サプライヤーは見積書をFAXで送るのが主流です。
顧客には２次卸販売をするケースもありカタログから自作の商品提案書を作るケースもあるそうです。
さらに見積書から注文をするという流れです。

業務改善DX

現在は顧客（サプライヤー）に商品カタログを提供しているので商品画像や商品情報などのデータベースの管理をしています。
業務改善のDXとして以下のことが要件となります。

・データベースを利用してWEBカタログにする
・WEBページで季節ごとのキャンペーンごとに商品を展示する
・バイヤーを一元管理する
・見積や提案や注文の自動化
・展示会を複数開催できる
・ウェビナー開催
・サプライヤー、展示会主催者、クライアントの管理画面での制御

最後に最も重要な要件として既存の顧客はWEBサイトの扱いに慣れていなく、さらに顧客の顧客であるバイヤーも同様です。簡単に操作できるUIUXが成功要因になります。

■プロジェクトの進行

課題のヒヤリングと新業務フロー

クライアントから現在の課題のヒヤリングと業務フロー作成のサポートしました。
すでにフェーズ１の開発である程度の骨格はできておりました。
今回はフェーズ２とフェーズ３の設計となりました。
フェーズ２でこのプラットフォームの営業を開始しフェーズ３の納品後にサービス開始となります。
業務フローと機能一覧のたたきを提示して機能一覧はクライアントに作成してもらいました。
次に業務フロー、機能一覧をもとにレビューを実施しました。

画面設計書とUIデザイン

クライアントはUIデザインが得意なためフロントのデザインはクライアントで実施していただき、バックエンド（管理画面）のデザインは弊社で担当しました。画面定義書作成は弊社でテンプレとを提示してクライアントと弊社で分担して実施しました。この時点で再度、業務フローの見直し機能の見直しも並行しながら実施しました。
弊社はベトナムオフショアで開発しますので、業務フローの理解からベトナムの担当者も参加します。画面設計書は一部ベトナムで行います。この時点でエンジニアからの質問も受け付けながら定義漏れを極力なくしていきます。
ここまでの上流の設計で最終的名なシステム品質が決まってきます。

技術観点

本件は最低限の性能要件からスタートしますが、AWSサーバレスで設計することによってサービス及びシステムの拡張が柔軟かつコスト最適で行われることを考えて設計しました。またフロントエンド開発ではチーム開発に向いている開発言語を選択して将来的にはクライアント側でもシステム運用ができるよう設計しています。

フロントエンド開発

Vue.Js、Typescriptで開発しました。Vue3でtypescriptとの相性が良くなりました。
アプリ開発フレームワーク「Vue.js」とは？役割やメリット、運用のポイントを解説
【入門】TypeScriptの導入方法や書き方を初心者向けに解説

バックエンド（管理画面）開発

Laravel（PHP)で開発。
ONETECHはLaravelでの管理画面開発は多数の実績があります。

AWSアーキテクチャ（マイクロサービス）

Elastic Load Balance
EC2：商品情報更新バッチ
ECS Fargate、ECR商品画像などの画像関連
User database  Aurora：業務データベース
User database  DynamoDB：大量アクセス時の対策
GraphQL AppSync：チャット機能
Cloudfront：展示会ページの高速表示
Amazon ElastiCache for Redis：既存ユーザー情報を共有処理キャッシュ
API Gateway：セキュリティー、分散処理設定
Lambda ：リクエストのオンデマンド処理
WAF:WEBトラフィックのフィルタリング（セキュリティ）
SQS、SNS、SES：メールやノーティフィケーション機能
S3(Simple storage service)：画像ファイル保存
CICD：ソースコード管理
Monitoring CloudWatch：システム全体の監視

UIデザイン

ページマップと外部設計を確認しながらクライアントが作成しました。
adobeXDで製作し要件定義との整合性を確認しました。
この時点でも業務フローやページマップなども修正が行われました。
CMSのデザインは既存のCMSテンプレートを利用しました。

製造・テスト

弊社のハウスルールに従ってコード規約やレビューなどを徹底しました。
node.jsでコーディングしています。
テストは仕様書に従ってテスト仕様書を作成します。
テストは単体テスト、結合テストはテスターが担当します。
受け入れテストはクライアントが実施します。

環境構築

お客様のAWSアカウントにIAMロールを付与していただき弊社のエンジニアが環境を構築しました。
開発環境、ステージング環境、本番環境で運用する予定です。
本番稼働後の保守運用も弊社で担当します。

■サイト開発期間

開発期間
2022年8月から2022年12月
開発規模
10人月

■対応範囲

企画サポート
要件定義
基本設計・詳細設計
コーディング
テスト

■類似実績

開発及び保守運営をしているサイトの性能向上させた実績です。WEB UIコンポーネントで取得したデータを、APIGateway、Lambda、dynamoDBで即時に集計します。今回の更新で６０００人が同時アクセスするためにシステムのパフォーマンスを改善しました。

AWSサーバレスでオンライン教育ライブ配信中にリアルタイムチャットができるシステムを開発しました。配信中に視聴者は主催者へ質問などをリアルタイムで交換できます。アーキテクチャはAWSサーバレス構成でLambdaやApp Syncなどで構築しました。

ONETECHは、Webサイトを始めさまざまなシステム開発、アプリ開発、ソフトウェア開発をベトナム オフショアで開発しています。

2015年から上場企業からスタートアップ企業までお客様80社以上の250以上のプロジェクトに関わってきた豊富な開発実績があります。