eds v1.0.2

EDS (Egroup-Document-System)

Egroup-Document-System 以下簡稱 EDS，是一個將專案的 sitemap、userstory、functional map、flowchart 在開發協調上會遇到的事情自動化連接在一起的文件系統。

目的是讓網站開發人員前後端、設計人員、以及PM可以很好的協同合作並且自動把專案相關文件全部串連，從 userstory 開始定義一路到後台以及前台的程式文件串接。 讓需求、流程、程式碼等文件在變動時可以有效降低時間成本。

現階段的版本需要懂一些些的 javascript 即可，如果你還不會也不會有太大影響，因為完全可以跟著範例做操作。

DEMO

Outline

1. Get Started
2. Sitemap
3. Draw io
4. Link functional map
5. Link flowchart
6. Support multiple versions
7. Support i18next

Get Started

• 安裝node js
• clone或下載這個repositiry
• 到根目錄啟動

npm install

npm start

會在 localhost 7080 port 開啟dev server

Sitemap

利用js檔案編輯專案的sitemap

[{
  id: "home",
  text: {
    name: "home"
  },
}];

檔案位置 src/document version/drawio/sitemap.js

[{
  id: "home",
  text: {
    name: "home"
  },
},{
  id: "page1",
  parent: 'home',
  text: {
    name: "page1"
  },
}];

利用 parent 屬性建立連結

此時若你有 src/drawio/functional map/page1.html 點擊連結便會導過去

Draw io

編輯工具：draw.io(桌機板下載)

說明 User Story、Sitemap、Functional map 與 Flowchart 文件，進一步瞭解各個文件在開發流程中扮演的角色。

• 1. User Story 使用者情境: 簡單的情境敘述，以客戶或使用者的觀點撰寫下有價值的應用情境與流程。
  • 服務核心 - 示意圖
  • 服務核心 - 範例
  • 情境行為 - 示意圖
  • 情境行為 - 範例

• 2. Sitemap 網站地圖: 概觀系統整體頁面架構，會涉及到哪些頁面內容與其階層關係。
  • Sitemap 內容架構圖

• 3. Functional map 頁面功能圖: 把 User Story 列出的使用者需求變成功能規格，並以sitemap為基礎，將功能放在適合的頁面上。
  • 功能圖 - 示意圖
  • 功能圖 - 範例

• 4. Flowchart 功能流程圖: 探討使用者怎麼操作功能，內容包含UI、操作、判斷式...等，整理歸納功能的邏輯。
  • 流程圖 - 示意圖
  • 流程圖 - 元件說明

Link functional map

利用js檔案編輯functional map裡面功能的連結

const flowchart_example = {
  link: 'example.html',
  name: 'flowchart example(you can customer display name here)',
};

module.exports = {
  home: {
    flowchart_example,
  },
};

檔案位置 src/document version/drawio/functionalmap/index.js

const flowchart_example = {
  link: 'example.html',
  name: 'flowchart example(you can customer display name here)',
};

// Simply add another flowchart and system will auto link to the file which is called login.html at flowchart folder.
// You can copy example.html and rename to login. Try it !

const flowchart_login = {
  link: 'example.html',
  name: 'login',
};

module.exports = {
  home: {
    flowchart_example,
    flowchart_login,
  },
};

利用 draw io 新增一個功能並且連結到 flowchart

系統會自動找到你所畫的draw io檔案(這裡為home.html)，並且替代 "(flowchart_login)" 的字串成為連結

Link flowchart

利用js檔案編輯flowchart裡面api的連結

module.exports.javaDoc = "YOUR_JAVADOC_PATH";

const API_foo = {
  controller: 'Foo',
  name: 'bar'
};

module.exports.apis = {
  example: {
    API_foo,
  },
};

檔案位置 src/document version/drawio/flowchart/index.js

// You can change javadoc path here
module.exports.javaDoc = "YOUR_JAVADOC_PATH";

// Here you can add API and system will auto link to your javadoc.
const API_foo = {
  controller: 'Foo',
  name: 'bar'
};

const API_login = {
  controller: 'Member',
  name: 'login'
};

module.exports.apis = {
  example: {
    API_foo,
    API_login,
  },
};

利用 draw io 新增一個 login api 並且連結到 javadoc

系統會自動找到你所畫的draw io檔案(這裡為example.html)並且替代 "(API_login)" 的字串成為javadoc的連結 此連結可以是外部連結或是在dist目錄裡面放javadoc文檔

Support multiple versions

文件的版本可以隨時新增，只需要在src目錄下新增不同版本，複製v1.0的資料夾更改成你想要的版本，無須多做其他設定。

Support i18next

文件支持多語言版本

p(data-edstarget="i18n" data-i18n='index.articleHeader.content')

使用pug以及EDS語法糖

在你想翻譯的文字上使用data-edstarget="i18n"以及data-i18n=''後面路徑即為i18next的設定用法

module.exports = {
  translation: {
    common: {
      header: {
        home: '首頁',
        overview: '總覽',
        versions: '選擇版本',
        lang: '選擇語言'
      }
    },
    index: {
      articleHeader: {
        title: '歡迎 !',
        content: '如果第一次使用請至<a href="document.html">說明</a>查看使用方法',
      },
      sidebar: {
        userstory: {
          title: '使用者情境',
        },
        sitemap: {
          title: '網站地圖',
        },
        overview: {
          title: '總覽',
        }
      }
    },
    document: {
      sidebar: {
        overview: {
          title: '總覽',
          items: {
            introduce: '介紹'
          }
        }
      }
    }
  }
};

檔案位置 src/document version/i18next/zh.js