iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
0
Modern Web

使用Vue.js製作個人blog系列 第 4

【Day 4】功能流程

功能流程設計

上一篇是從「使用者」的角度敘說故事,藉由故事了解使用者如何進行操作,我們從這個操作找到需求點。
本篇就是從故事需求出發,不過這次是從開發者的角度去討論,從上篇的故事個別討論,討論要實作的細節


以下是昨天所整理出來的結果

  • Markdown的文字方式

    我在新增文章的頁面,輸入這篇文章的標題和文章內容,其中文章內容是用Markdown的格式輸入。按下儲存按鈕,這篇文章就會被儲存。同樣的進入修改畫面,也可以修改標題和文章內容,按下儲存就存檔,否則就不保留資料的離開。

  • 分類依據:時間

    在Blog旁邊有文章分類的link,此分類依據是按照年份,再來是月份。點擊年,會就看到該年新增的文章,點擊月份,則會顯示該年該月份的文章。

  • Blogger的後臺文章列表方式,點擊可以修改該文章。但無預覽功能。
    有個管理介面,可以選擇該年或是該年該月底下的所有文章,列表中會顯示標題、修改時間、發佈時間、修改按鈕等。點擊修改按鈕,即可進入修改畫面,進行文章的修改。


第一點,可以做出流程為:

進入文章編輯畫面 -> (畫面顯示「標題」、「內容」) -> 使用Markdown填寫內容 -> 按下存檔按鈕

這只是新增而已,還需要考慮到「取消」的情況:

進入文章編輯畫面 ->...(各種編輯).. -> 按下取消按鈕

綜合後:

進入文章編輯畫面 -> (畫面顯示「標題」、「內容」) -> 使用Markdown填寫內容 -> 按下存檔按鈕 或是取消按鈕

如果要包含後續的處理就會變成

進入文章編輯畫面 -> (畫面顯示「標題」、「內容」) -> 使用Markdown填寫內容 -> 按下存檔按鈕 -> 取得編輯者、標題、內容傳入後臺 -> 進入Insert功能(呼叫資料庫進行處理) -> 記錄作業流程與結果 -> 結果回傳 -> 顯示成功或是失敗

同樣的道理,第二點的流程:

進入首頁,旁邊有文章分類的Link,是以年份及月份作為分類依據 -> 點擊(點擊年份可以觀看該年份的資料 / 點擊月份可以看到該年份的資料) -> 顯示文章資訊

如果擴充首頁資訊的話:

進入首頁,顯示前十篇文章資訊,旁邊有文章分類的Link,是以年份及月份作為分類依據 -> 顯示有資料的年和月份 -> 點擊 -> 顯示文章資訊

加上後臺的部份則是變成:

進入首頁,顯示前十篇文章資訊,旁邊有文章分類的Link,是以年份及月份作為分類依據 -> 資料庫取得所有文章的年月 -> 顯示有資料的年和月份 -> 點擊 -> 取得ID進入後臺取得資料 -> 資料庫SELECT該文章資訊 -> 記錄作業流程與結果 -> 回傳結果 -> 顯示文章資訊或是取得失敗

修改的流程則是:

(顯示)
進入後臺管理頁面 -> 取得所有文章的年月 -> 顯示有資料的年份或是月份 -> 選擇時間 -> 顯示該時間底下的所有文章 -> 帶入時間傳至後臺 -> 資料庫SELECT該時間的文章 -> 記錄作業與結果 -> 回傳結果 -> 顯示資料(標題、修改時間、發佈時間
(修改)
點擊該篇文章的修改按鈕 -> 取得ID傳至後臺 -> 從Database取得文章資訊 -> 記錄作業流程與結果 -> 結果回傳 -> 進入文章編輯畫面 -> 畫面顯示「標題」、「內容」 -> 使用Markdown填寫內容 -> 按下存檔按鈕 -> 取得編輯者、標題、內容傳入後臺 -> 進入UPDATE功能(呼叫資料庫進行處理) -> 記錄作業流程與結果 -> 結果回傳 -> 顯示成功或是失敗

另外還有登入流程:

登入畫面 -> 填寫帳號密碼 -> 取得資料傳至後臺 -> 記錄作業與結果 -> Database資料比對 -> 記錄作業與結果 -> 回傳資料 -> 顯示登入成功或是失敗 -> 成功後進入首頁 / 失敗則繼續key

整個流程就會變成這個樣子,可以看到很多動作是昨天所沒有的。裡面提出很多細節,例如:後臺存檔的作業流程,或是使用者進入頁面中的處理作業。這樣的作法是確認細節有被思考到,因為這些都是一個個function,也就是我們要實現(開發)的功能,所以要清楚的列出我們到底要做什麼事情,而這樣的流程是否有問題。(此部份要跟客戶核對資料,不然會有很多白工)

下一篇,簡單說明什麼是「Markdown」,以及為什麼我想要用Markdown寫Blog


上一篇
【Day 3】功能準備作業:User Story
下一篇
【Day 5】使用Markdown的原因
系列文
使用Vue.js製作個人blog17

尚未有邦友留言

立即登入留言