$30 off During Our Annual Pro Sale. View Details »

受発注管理システム Kleinのフロントエンド - CADDi

受発注管理システム Kleinのフロントエンド - CADDi

[email protected]

March 01, 2022
Tweet

Other Decks in Technology

Transcript

  1. 受発注管理システム
    Kleinのフロントエンド

    View Slide

  2. 目次

    自己紹介

    Kleinの概要

    画面デモ

    Kleinのソフトウェアアーキテクチャ

    まとめ


    View Slide

  3. 先山 賢一 (@ksakiyama134)

    キャディのフロントエンドエンジニア

    2021年7月に入社

    React / GraphQL / OAuth2.0 / OpenID Connect

    自己紹介


    View Slide

  4. Kleinの概要

    View Slide

  5. 一言で言うと

    キャディ社内の受発注管理システムです!

    キャディ社員がオペレーションのために利用します。


    Kleinとは?


    View Slide

  6. 先程のスライドのこのプロダクトです


    View Slide

  7. キャディの受発注を話す前に以下を説明します。

    ● どんなビジネスをやってるんだっけ?

    ● 「サプライチェーン」ってどういう意味?

    おさらい


    View Slide

  8. キャディのビジネス


    View Slide

  9. キャディのビジネス

    加工会社さんのことを 

    サプライパートナー(SP) 

    と呼んでいます。


    View Slide

  10. “サプライチェーン”って聞いたことありますか?

    https://www.ntt.com/bizon/glossary/j-s/supply-chain.html


    View Slide

  11. サプライチェーンとは、製品の原材料・部品の調達から販売に至るまでの一連の流れを指す用語です。

    サプライチェーンの概念で特徴的な点として、自社だけでなく、他社(協力会社など)をまたいでモノの流れを捉えることが挙げられま
    す。たとえば自社がメーカーである場合、部品メーカーや材料メーカーなどから製品の製造に利用する部品および原材料を仕入れ
    て製造します。また販売においては、配送業者や卸業者、そして小売業者が関係するでしょう。このように、サプライチェーンでは自
    社の業務だけでなく、モノが製造されて販売されるまでのフロー全体を捉えます。

    このサプライチェーンを管理し、製品の開発や製造、販売を最適化する手法をサプライチェーンマネジメントと呼び、SCM(Supply
    Chain Management)と呼ばれるシステムを導入している企業も少なくありません。SCMを利用する目的として、部品/材料メーカーや
    卸売業者、販売店などを含めて在庫情報を共有し、在庫の適正化を図ることなどが挙げられます。

    “サプライチェーン”って聞いたことありますか?

    https://www.ntt.com/bizon/glossary/j-s/supply-chain.html


    View Slide

  12. キャディのサプライチェーン

    SP
    A会社さん
    SP
    B会社さん
    キャディ
    拠点
    キャディ
    拠点
    顧客
    例:キャディが顧客から受注した製品の流れ
    キャディ
    受注
    発注
    発注 製品送付 製品送付 製品送付
    納品

    View Slide

  13. Kleinはキャディの受発注を支える


    View Slide

  14. プロダクト名の由来

    https://caddi.tech/archives/2211

    View Slide

  15. デモ
    〜ほぼ全部見せます〜

    View Slide

  16. Kleinのソフトウェアアーキテクチャ

    View Slide

  17. ソフトウェアアーキテクチャ

    Web
    (Nginx)
    BFF
    (Node.js)
    Backend
    (Rust)
    UserAgent
    CloudFlare
    CDN
    コンテンツ配信
    GraphQL gRPC

    View Slide

  18. フロントエンド

    ● Client-Side Rendering

    ● TypeScript / React / Ant-Design / styled-components / Apollo Client / AG Grid

    ● 大量データの一括編集などの要件に対応するための工夫(デモにて説明)

    BFF

    ● TypeScript / Nest.js / Apollo Server / Express

    ● コードファーストでGraphQLスキーマを生成

    リポジトリ

    ● フロントエンドとBFFはMonorepoで管理

    ● lernaでビルド→turborepoを実験的に導入中

    アーキテクチャの特徴


    View Slide

  19. まとめ

    View Slide

  20. Kleinはキャディの受発注を支える

    BtoB要件に答えるための様々な工夫を実装

    ● 大量データ数でもデータ登録やレンダリングが快適

    ● 業務フローを一律に決めにくい点(不確実性)にも対応できるシ
    ステム

    まとめ


    View Slide