[活動筆記] 令人失望的敏捷劇本殺

前情提要

活動連結
好久沒參加敏捷活動了, 一些”敏捷”活動的反思有機會再聊聊,
另一個原因是好奇如何結合劇本殺,所以蠻期待.

一些記錄

  • 收費部份採取現場收費,所以 KKTIX 連結

  • 時間被砍掉半小時,原本的設計是 1.5 小時.被砍到剩 1 小時.

  • 主持人自已都說沒有很 involve 在整場活動中,畢竟是有收費的活動,這樣的發言不是很洽當

    導演在活動過程中,除了拍照外就是在跟某大師聊天,
    實際上「導演」(場控) 有餘裕的話,我覺得並沒有不行,
    但更重要整場的引導.
    整場活動下來,包含結尾的自清,我覺得沒有作得很好

  • 某大師也是都在聊天,不過最後 End 提點的東西還是不錯的,可惜無法有更多的互動(因為要趕高鐵)

  • 破冰的效果不佳(工程師這群人的破冰難度的確是比一般人高)

  • 有些玩過(推測)的人,並沒有將引導新參與者,當然這樣不爆雷也是有好處

  • 其實只要透過問問題,可以在不爆雷的情況下讓人思考(也是引導的一種方式)

  • 說話和不說話的人太多了,問好問題的人太少了).

  • 劇本殺與角色設定薄弱,不過這本來就只是用劇本殺的”皮”在帶敏捷活動

  • 不是很是推薦你玩太多次,不過聽說有人玩 15 次,可能遇到很棒的導演

  • 玩之前很期待,玩之後覺得不符期待

End 作得不是很好,不如直接來個 Retro ,
如果沒有在活動中觸動參與者的內心,結尾很容易變成教條式的宣導,
然後還要賽認証機構的工商與贊助場地的招募,7~10點真正有價值的活動可能只有 1.5 小時
當然如果有人因此去考証或換工作或許對他們就是有價值的,只是對我來說就不符期待了

(以下可能含雷,請考慮是否繼續)
(以下可能含雷,請考慮是否繼續)
(以下可能含雷,請考慮是否繼續)

流程

  1. 入場到開場 : 小 delay 但是台灣人遲 30 分鐘內不算 ?

  2. 玩家 : 部份玩家應該是有玩過的, 但是沒有什麼引導新手進入遊戲的效果

  3. 選角 : 自由選角,因為可以掃 QR Code 看內容, 所以其實可以知道其它角色的人設, 但我個人是盲選

  4. 破冰 : 有結合後面劇本殺的內容這點不錯,但是效果我覺得沒有很好

  5. 分組 :

    • (我猜測)本來應該是遊戲的一環,但因為砍掉 30 min 所以改用事先分
    • 印象中職位有:PM、福委、設計、前端、後端、DevOps、測試(有嗎?)
    • 除了 PM、福委有其目的性以外,其它的職能分配在遊戲中意義不大

  6. 目的說明 : 呃…只是把投影片唸過一遍, 其實沒能幫助玩家更進入角色與遊戲

  7. Yes, & : 有特別說明這件事, 但不知道其用意

    • 我猜為了避免遊戲中出現 Yes Man 或 No Man)
    • 實際上進行遊戲中沒有人遵循

  8. 熱身 : 時間明顯控制不當,後面基本上都講一半就會強制打斷(也許透過資深玩家分小組進行可以縮短時間)

  9. 開始遊戲 :

    • 一開始的混亂是一定的
    • 然後來會有人跳出來領導(不見得是 PM)
    • 大部份的人只會看
    • 並沒有因角色的利益衝突演化出有趣的劇情/對話

  10. 結尾

    • 由主持人作 Ending 不如讓台下發表他們的覺察
    • 遊戲的目標其實沒有什麼難度(因為都可以靠幻想補足)
    • 前端、後端、DevOps、設計的職位設計沒什麼用(不確定別場會如何應用?)

檢討

社群的活動品質逐年下滑早有所聞,但那我就作個個人記錄吧
這活動是我覺得有點可惜, 希望下次能更好.
如果是我會怎麼作?

  • 我會在公司或朋友圈先試行
  • 我會專注在劇情的發展過程(或是提醒演員「你在演戲」)
  • 我不用那個破冰方式讓遊戲內容細節化
  • 我會作問卷回收回饋
  • 掌控時間
  • 儘量確保參與者有進入狀況

至於我個人

  • 不要看到標題就急著報名
  • 事前也可許可以 Google 一下
  • 想像一下自已是導演的話應該怎麼辦
  • 多參與不同的對話
  • 確保時間、場地以及內容的完整性

中國社群的心得

參考

(fin)

[實作筆記] 簡單工廠與工廠方法

前情提要

最近被要求介紹一下 Factory Method 這個 Design Pattern，
以前看大話設計模式的時候，這個 Pattern 總會跟 Simple Factory 一起講.
有了一些工作經驗後，現在回頭來重新看這兩個模式.

問題

我們為什麼需這個模式 ? 我們面臨什麼樣子的問題 ?
參考以下程式:

1
2
3
4
5
6
7
public class Email:INotification
{
    void Send(string message)
    {
        ////Send Mail
    }
}

先說明一下這個程式，
在整個系統中依據不同情況中，會發送不同的通知，
比如說:電子郵件(Email)、語音電話(Voice Call)或通訊軟體(Slack)等…

所以我們實際使用的場景可能如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class ProcessNotifyCustomerService()
{
    var notify = new Email();
    notify.from = "[email protected]";
    notify.to = "[email protected]";

    notify.Send(msg);
    //// ....
}

public class ProcessNotifyDevOps()
{
    var notify = new Email();
    notify.from = "[email protected]";
    notify.to = "[email protected]";

    notify.Send(msg);
    //// ....
}

public class ProcessNotifyManager()
{
    var notify = new VoiceCall();
    notify.server = "voiceCall.server";
    notify.port = "9527";

    notify.Send(msg);
    //// ....
}

//// more ...

以上面的例子來說明一下簡單工廠想解決的問題:
當我們在整個系統中使用不同的 Notification 時,
我們建立整個物件的細節都在 Client 端之中,
這是非常擾人的, 特別當你要建立個複雜的物件,
你肯定不會希望每次都要重來一遍.
第一個想法就是把細節封裝起來,如下:

1
2
3
4
5
6
7
8
9
public class EmailFactory()
{
    public static Email Create(){
        Email notify = new Email();
        notify.from = "[email protected]";
        notify.to = "[email protected]";
        return Email;
    }
}

再進一步, 當我們有相同的行為時也可以封裝到簡單工廠之中,
在我們的例子中, 我們可以把 Email 與 VoiceCall 放在同一個工廠裡面
在這裡我們命名為 NotifyFactory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class NotifyFactory()
{
    public static INotification Create(string type){

        INotification notify;
        switch (type) {
           case "DevOpsEmail":
              notify = new Email();
              notify.from = "[email protected]";
              notify.to = "[email protected]";
              return notify;

           case "CustomerServiceEmail":
              notify = new Email();
              notify.from = "[email protected]";
              notify.to = "[email protected]";
              return notify;

           case "VoiceCall":
              notify = new VoiceCall();
              notify.server = "voiceCall.server";
              notify.port = "9527";
              return notify;

           default:
              throw new UnsupportedOperationException("不支援該操作");
       }
    }
}

簡單工廠的好處在於，
當你想改變某一個功能時你只需要修改一個點，
而且你在改動的過程入無需再次涉入建構的細節

比如說:發信通知改為播打語音電話

只需要修改Client，無需處理建構細節

而另一個好處是，如果在建立物件的細節有所調整的話，
可以只要在一處就完成所有修正.

比如說: Email Notify 更換為客服的信箱

只需要改一個地方，就完成所有的修正

工廠方法

當我們需要加入(擴展)新的商業邏輯，會修改到不止一個地方
舉例來說:
我要加入一種新的通知叫飛鴿傳書(PigeonNotify)好了，
除了修改 Client 端使用工廠建立新的 notify 外，
也要在簡單工廠裡面修改。

1
2
3
4
5
6
7
8
9
public class EmailFactory()
{
    public static Email Create(){
        Email notify = new Email();
        notify.from = "[email protected]";
        notify.to = "[email protected]";
        return Email;
    }
}

再進一步, 當我們有相同的行為時也可以封裝到簡單工廠之中,
在我們的例子中, 我們可以把 Email 與 VoiceCall 放在同一個工廠裡面
在這裡我們命名為 NotifyFactory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class NotifyFactory()
{
    public static INotification Create(string type){

        INotification notify;
        switch (type) {
           //// 中間省略
           case "Pigeon":
                return new PigeonNotify();
           default:
              throw new UnsupportedOperationException("不支援該操作");
       }
    }
}

面對功能的擴展，也需要修改工廠的邏輯

簡單工廠中的 Switch 會與參數耦合，
每次加入一個新的 Notify 都會異動，
這違反開放封閉原則.
改用工廠方法, 我們只需要新增一個新的工廠方法,
並在 Client 呼叫使用工廠, 不再傳遞任何參數.

Client 相依於工廠介面上，需要呼叫指定工廠取得物件

TDD to Simple Factory

目的，透過 TDD 建立出不同的通知(Notification)類別，
再透過 TDD 趨動簡單工廠，再透過重構改變為工廠方法。

  1. 利用測試作為 Client 寫出測試案例

  2. 測試案例先簡單使用 new 通過測試

    • 因為是概念性的測試，所以會缺乏實作細節，實務上可能會不只有 new

    到這一步只是一般建立物件，
    下一步開始是趨動成為簡單工廠，
    但實際上你是可以跳過簡單工廠，直接 TDD 出工廠方法的

  3. 再寫一個測試案例，來製造(Notify)功能的重複(Email、SNS)

  4. 功能重複讓我們可以抽出介面

  5. 建立簡單工廠使用邏輯分支回傳不同的(Notify)功能實作

  6. 在簡單工廠的邏輯分支使用不同工廠方法實作

    • 因為封裝了實作細節，方法簽章應該不需要任何參數，回傳值應該為 void

    下一步開始趨動成為工廠方法

  7. 讓 Client 端直接呼叫不同的工廠

    • 簡單工廠類別就會變成多餘無用的類別

  8. 因為有相同的方法簽章，所以可以抽出工廠介面

  9. 讓 Client 端相依工廠介面

可以參考以下我的 commit 順序:

參考

(fin)

[實作筆記] 怎麼建立一個網站？(五) - Hexo 的 404 頁面

What

什麼是 404 頁面呢 ?
其實這是一個 HTTP 狀態碼，代表「網頁不存在」,
與另外一種常見錯誤代碼(500/503)，代表的意義並不相同,
500/503 通常是指服務整個掛了,
而 404 是指所要的資源(頁面、檔案、圖片)並不存在.

以下提供一些常見的狀態碼與代表意義

  • 200 OK
  • 403 Forbidden
  • 500 Internal Server Error
  • 503 Service Unavailable

Why

為什麼我們需要一個 404 頁面呢 ?
我直接引述

當使用者不小心進入你某些不存在或者有錯誤的頁面，就會跳出這個 404 頁面，(中略…)
而這個頁面最大的用途在於增加使用者體驗，例如畫面上會有 Logo or 返回首頁按鈕，確保使用者不會因為看到這個頁面立刻關閉。
(中略…)
搜尋引擎也會依照你是否有這個當作一個加分評比 (中略…)

How

首先執行 hexo new page 404 , 這是 Hexo 用來建立新頁面的語法,
上述的語法執行後, 會產生一個 404.md 檔, 如果你不喜歡這個檔名你也可以換掉,
ex: hexo new page page_not_found

產生的頁面如下:

1
2
3
4
5
6

---
title: page_not_found
date: 2021-04-06 10:36:15
---

這個時候我們需要調整一個重要屬性 permalink: /404.html,
這樣當 Github Page 找不到頁面時,
才會出現我們設定的 404 頁面.

另外我們可以設定 layout:true 的布林值來決定是否套用原本的樣式(預設為 true),
這個主要也是為了讓使用者”感覺”他仍然在同一個網站之中,
而減低跳轉率.

下面可以使用 markdown 語法編輯

參考

(fin)

[生活筆記] 將來銀行與純網銀一些有的沒的

Next Bank

前情提要

將來銀行是台灣三大純網銀(Line、樂天)中,
官股成份最重的一間, 也因此備受各界期待.
2019 起成立籌備處, 大舉徵才…預計 2021 取得營業執照…
2020 年 12 月樂天取得營業執照,
2021 年 2 月LINE BANK取得營業執照

一些爭議

取得執照

2019 金管會審核三家純網銀皆取得執照後，
中時的報導，「國家隊吊車尾上榜 「將來」銀行真有將來？」
經濟日報的平衡報導 「純網銀審查幕後 將來銀行不是最後一名 」
是不是有點欲蓋彌彰 ? 相關報導只剩 PTT 的留存

人事

總經理劉奕成，號稱金融界跳跳虎(求出處，意指常轉換工作)
2018 LINE拚純網銀陣前換將，劉奕成確認離職，陳立人暫代,
2019 加入將來銀行籌備處，同年被爆高層團隊領高薪,
2021 年 3 月離職. 22日臉書首次公開貼文,
內文包含目前狀況

  • 資訊系統不穩定
  • 只有一半不到的人有金融背景
  • 資訊人員不會寫程式

性騷擾的事件

將來銀行爆性騷案處理不當 女經理患憂鬱症被離職【瞎事多1】

一些人看法

金管會主委黃天牧

將來銀行想要將來 有 3 點需讓金管會滿意

  • 營運制度的改善情況
  • 人事安排
  • ??

臉書一些回應

雷神講堂

將來銀行的徵才資訊中, 針對「資安維運中心工程師 SOC Engineer」的工作內容,
起薪僅25K至65K，且須配合輪夜班……

C 君

突然懂了什麼 #領7000萬的靠背2萬5不懂開發

R 君

不懂 Domain Knowhow 的話 JD 不要亂寫，
寫一堆又給不起。

更多…

我的看法

首先我覺得將來銀行的受到的鎂光燈好像比 Line 與樂天還多,
當然也可能是我的同溫層太厚的關係.
另外在將來銀行的官網或臉書上, 我找不到正式的公關回應.
所以不太確定新聞提到的將來銀行的回應是出自何處?
總之目前還有點渾濁, 我覺得要讓子彈再飛一會兒.

相比而言 Line 與樂天的新聞就少很多,
一路看下來我覺得比較像是一場只發生在將來銀行的媒體/行銷戰,
就我而言將來銀行的 Logo 或是營銷手段是迎合年輕人的,
但是我不了解的是，一個美美的官網或臉書你只用來介紹 Logo 的設計理念跟找網紅拍小短片 ?
撰寫本篇 Blog 時的臉書最後一篇文章是在跟風鮭魚時事哏,
而不對一些傳媒的新聞作出回應 ? (可能是我看漏，有人可以提供給我的話十分感謝)
有種「行銷成功卻公關完敗」的感覺.

想說說開發相關的問題, 但覺得人事可能也是一個大問題,
先說基層吧，將銀明顯是需要即戰力的，
但就我的面試經驗而言, 技術主管連使用什麼技術作為基本的架構將銀都無法決定,
在招募上是說你會什麼都可以, 但是你總得要團隊作戰,
你的團隊要用什麼戰鬥方式會影響你的戰術, 怎麼可以不確定呢 ?
招募進來的人員不會寫程式, 那招募者是不是有問題呢 ?
開發的產品有問題, 但總之金管會至少是有個產品可以被審核,
如果以劉奕成所言, 相比其它兩家, 將銀少了 10~15 月籌備時間,
那可以等待一段時間後再作評論, 只是以市場的角度來說算是失了先機;
開發人員一半非金融背景, 這是也是當初籌備招募的亮,
如果沒有好好整合, 甚至在團隊分派系才是糟糕的
現在有點以成敗論英雄.
再來,將銀在短短的 2 年招募了 300 人, 雖說不能確定是否有達到這計劃的人數,
即使只有一半 150 人也是碰到了鄧巴數,
這肯定會有相當的衝突.
有人的地方就有江湖, 這裡還是讓子彈繼續飛吧.

「敏捷」不 ? 我反而覺得是個假議題, 特別是在籌備了這麼久後的現在,

金融背景的人，會認為系統必須內部確認 100% 沒有問題，
再請金管會來審查，但是部分資訊部門的人卻認為，
就算有一些 Bug，也沒什麼關係，事後再來修改就好了。 — <<數位時代>>

上述這段話是來自數位時代的新聞, 也是敏捷圈最多引用一段話,
但這些自稱敏捷的人會露出一種「笑他的迂」的態度,覺得金融背景不懂敏捷 ?
這個態度讓我覺得十分荒謬.
我僅以下四點作為回應:

  • 個人與互動重於流程與工具
  • 可用的軟體重於詳盡的文件
  • 與客戶合作重於合約協商 
  • 回應變化重於遵循計劃

 

其實將銀在招募的過程說過因為沒包伏, 所以可以建立更敏捷的文化.
但如果新聞內容為真, 與其說金融背景的人不懂敏捷,
不如說這些當初號稱敏捷進入將銀的人, 並沒有成功的建立真正的敏捷文化.
將內部 100% 確認轉化成有明確事項的 PBI ，迭代執行檢驗，
隨這一年

金管會的回應中規中矩, 就不予置評了.

參考

(fin)

[A 社筆記] Sudo 與環境變數

前情提要

使用 Azure 的 pipeline 對專案進行 CI/CD，
在某一段執行語法中，因權限不足無法建立必要的資料夾，
而導致部署失敗。
有兩個思路，一個是讓現有的使用者擁有建立資料夾的權限，
另一個想法比較單純，使用 sudo 提供足夠的權限給 CI/CD 的執行者。

問題

但是 sudo 引發了另一個問題，
設定在 pipeline 的環境變數消失了，
原因是當我們在使用 sudo 的時候，會影響到環境變數。
這個時候需要參考 /etc/sudoers 的設定

env_reset

  • env_check # 當變數含有不安全字元 % 或 / 會被移除
  • env_keep # 當 env_reset 為 enable 時要保留的一系列環境變數。
  • env_delete # 當 env_reset 為 enable 時要移除的一系列環境變數。
1
2
3
4
5
6
7
8
9
env_reset   If set, sudo will reset the environment to only contain
            the LOGNAME, SHELL, USER, USERNAME and the SUDO_*
            variables.  Any variables in the caller’s environment
            that match the `env_keep` and `env_check` lists are then
            added.  The default contents of the `env_keep` and
            `env_check` lists are displayed when sudo is run by root
            with the -V option.  If the secure_path option is set,
            its value will be used for the PATH environment
            variable.  This flag is on by default.

解決方法

最簡單的方法加上-E, 將 User 的環境變數先載入

1
2
3
4
The -E (preserve environment) option indicates to the security policy 
that the user wishes to preserve their existing environment variables. 
The security policy may return an error if the -E option is specified 
and the user does not have permission to preserve the environment.

參考

(fin)

[生活筆記] 我對單元測試的想法

問題

你對所謂 “單元” 測試的想法爲何。

想法

單元測試是一種有效的方法、手段、工具 etc…
目的是為了「品質」，從兩個角度來說:

  1. 對客戶來說: 功能符合需求
  2. *對開發者來說: 好擴充易修改

額外的好處:

  • 快速揪錯、快速回饋 : 如果團隊有執行 UT 或是 TDD 的習慣，在開發過程中就可以發現部份的錯誤
  • Test Case 就是文件、就是 Use Case
  • TDD 要從 UT 開始寫，讓開發者優先考慮與其互動的 Service 或 Module 會怎麼使用這個方法
  • UT 是重構的基礎，有了 UT 作保護網，可以大膽重構
  • *重構才能往 Design Pattern 的方向走

Mindset

如上圖，
但是我現在卡在 Design 的部份，
我可以讓測試趨動「開發」，
但是沒有辦法產生良好的設計。

所以接觸了 DDD (一知半解的狀態)，
然後想到以前學過的 Design Pattern ，但是實務上並沒有套用得很靈活，
很多時候為了 DP 而 DP, 而重構我可以作到小幅度的重構, 精簡程式碼
但是如果要重構成另一個 Pattern 時就又有點卡住了，所以我想我可能沒有掌握住軟體 Design 的技巧

反思與小結

最近參加了 Implementing Domain-driven Design 的讀書會，
像是導師所說，學習了單元測試與 TDD 後，
試著應用在實務上還是有所困難的，
所以我刻意建立了一些專案用來學習。

Test First 或 TDD 不應該省略設計的部份，
Domain-driven Design 常被縮寫成 DDD，
TDD 則為 Test-Driven Development。
而當華語文人士整天說著 ATDD、BDD、DDD 與 TDD 時，
有注意到這個 D(Design) 不是 D(Development) 嗎 ?

進一步來說，TDD 的要求開發之前先寫測試，意味著要先寫測試案例，
這個步驟會讓你思考「你要怎麼呼叫你的代碼」，也就是說「你要如何設計的代碼」，

接下來，我會用一個購物車的開發作為案例，
試著用這個過程找到自已的盲點。
購物車 Sample

購物車的畫面如上，我會使用 C# 的 ASP.NET Core 進行開發，
雖然我會延用 ASP.NET 所提供的 MVC 框架，但我也會試著使用 DDD 的概念去設計，
我會設計一系列的 Domain Model 並且使用 Domain Service 作為隔離，
MVC 的 Controller 我會視為 DDD 的 Application Service，
這裡會出現 View Model，不同於 Domain Model，View Model 由 UI 所需要的資料決定。
更多的細節會記錄在後續的筆記當中。

DDD

(fin)

[實作筆記] SonarCloud Move analysis to Java 11 更新 Github Action

前情提要

長期使用的 SonarCloud 的 Github Action 突然執行失敗了.
原因是 SonarCloud 在 2021 年的 2 月 1 號開始，不再支援使用舊的 Java 版本(1.8.0_282),
至少要更新至 Java 11.
錯誤的訊息如下:

1
2
3
4
5
6
7
8
9
10
11
INFO: ------------------------------------------------------------------------

The version of Java (1.8.0_282) you have used to run this analysis is deprecated and we stopped accepting it. Please update to at least Java 11.
Temporarily you can set the property 'sonar.scanner.force-deprecated-java-version-grace-period' to 'true' to continue using Java 1.8.0_282
This will only work until Mon Feb 15 09:00:00 UTC 2021, afterwards all scans will fail.
You can find more information here: https://sonarcloud.io/documentation/upcoming/

ERROR:
The SonarScanner did not complete successfully
08:24:36.417  Post-processing failed. Exit code: 1
Error: Process completed with exit code 1.

調整方法

移除掉原本的 SonarScanner

1
2
3
4
5
- name: SonarScanner Begin
  run: dotnet sonarscanner begin /k:"Marsen.NetCore.Dojo" /o:"marsen-github" /d:"sonar.host.url=https://sonarcloud.io" /d:"sonar.login="$SONAR_LOGIN
## 中略
- name: SonarScanner End
  run: dotnet sonarscanner end /d:"sonar.login="$SONAR_LOGIN

在整個方案的根目錄加上一個檔案sonar-project.properties,

1
2
3
4
5
6
sonar.organization=<replace with your SonarCloud organization key>
sonar.projectKey=<replace with the key generated when setting up the project on SonarCloud>

# relative paths to source directories. More details and properties are described
# in https://sonarcloud.io/documentation/project-administration/narrowing-the-focus/
sonar.sources=.

sonar.organization 要如何取得呢 ?
登入 SonarCloud, 右上角頭像 > My Organizations 即可查詢到 Organization Key 值。
Organization Key

上方 My Projects > Administration > Update Key
即可查詢到 Project Key 值
Project Key

最後在 Github Action Workflow 加上這段，Github Action 就復活啦

1
2
3
4
- uses: sonarsource/sonarcloud-github-action@master
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

參考

(fin)

[活動筆記] Role Expectations Matrix 角色期望矩陣

前情提要

自從開始接觸 Scrum 後, Fun Retrospectives 一直是我常常來作為參考的工具網站.
在工作上也會實際的運用, 在這裡特別記錄.
當然相同的方法在不同團隊使用, 我想會產生不同的效果,
所以也許未會有重複的活動也不一定.

角色期望矩陣

在 Fun Retrospectives 的分類之中, 是屬於 Team Building 的類型,
目的在於揭露團隊成員對不同角色的期望.
這個可以協助團隊同步對不同角色與自我角色的認知, 並且避免隱藏與未知的衝突.

進行的方式,

  1. 建立一列(橫軸)寫下所有(團隊中)的角色
  2. 建立一行(直軸)寫下所有(團隊中)的角色
  3. 承上, 畫出一個矩陣
  4. 詢問所有團隊成員, 請他們對所有角色的期望, 並且逐列(橫向貼)到白板之上
  5. 逐行討論所有角色的便利貼, 讓角色理解團隊的期待

A 社記錄

我額外作了一件事,
就是確定團隊成員中的角色, 主要原因是 A 社的 PO 功能是職責是有殘缺的.
討論過程

討論的結果如下:

Dev

  • 依需求/Spec/DoD 實作
  • 溝通
  • 拆分任務
  • 自我測試/驗收
  • 重構
    • 架構不符需求時
    • 效能
      • 時間
      • 空間
      • 開發效能
  • 研究

QA

  • 測試
  • 測試計劃
    • 環境建立
    • 寫測試案例
    • 風險評估
    • 優先序
  • 自動化測試

PO

  • 需求
  • 設定優先序
  • 設定 Sprint Goal/Product Goal
  • 溝通
  • 評估需求可行性

這裡有一個討論的觀點, 我覺得值得拿出來討論,
在探索的過程中, 有可能有以下幾種狀況

  • 實際上有解法,有找到:這是最理想,也是最普遍的方案
  • 實際上沒有解法,証實沒有:確定不可行,其實對產品也是一個重要的資訊,可以節省成本提早作出變化
  • 實際上有解法,沒有找到:這是最糟的情況
  • 實際上沒有解法,確說有解決方法:不是大好就是大壞,容我下面解釋

我原本認為, 如果實際上沒有解法, 卻研究出了解法, 可能是在溝通的過程中可能出現的了認知落差?
更嚴重一點, 也許是出現虛偽狡詐的情況. 但是團隊討論時, 出現了一種新的觀點,
現在作不到, 不表示未來作不到, 市場也許正好缺乏這個的解決方案.

反思一下,這不正是許多新創在募資時常用的方式,
當然不乏惡血、Juicero 或是 Nikola 這一類招謠撞騙的例子,
但是我們可以發現投資人其實是會為夢想買單的.
而要實現理論上可行, 但現實尚未成功或商品化的功能,往往是很燒錢的事.
新創產業正式將夢想與資金作結合, 而敏捷開發能加速我們探索未知.

有關於 PO 的探索, 會跑在 Dev 之前, 其中有一個很重要的目的是要提高 Dev 的勝率
排除「實際上沒有解法」或是「沒有市場價值的方案」是 PO 在探索重點方向.

討論結果

參考

(fin)

[實作筆記] Storybook CI 使用 Github Actions

前情提要

在前一篇文章中，
我們使用 TypeScript 開發 React Components ，
並使用 Storybook 作為測試的工具。

這篇會介紹如何與 chromatic 作結合，讓 CI/CD 運行時(本文將使用 Github Actions 作為 CI Server)，
自動部署到 chromatic，同時提供自動化測試與人工審核的功能。

環境設置

使用 Github 登入 Chromatic,
雖然 Chromatic 也有提供 Bitbucket 與 GitLab 的登入方式,
但並不確定這些 CI Server 包含 Jenkins、TravisCI 或是 CircleCI 實際上怎麼結合 Storybook,
以下都以 Github 作介紹,

本機環境

安裝 chromatic

1
yarn add -D chromatic

發佈 Storybook 到 Chromatic 上

1
yarn chromatic --project-token=<project-token>

發佈完成你可以得到一個網址 https://www.chromatic.com/builds?appId=random
你可以分享網址給同事，對 UI 進行審查.
讓 Pull Request 時，自動執行的設定

雲端設定

新增專案後,可以取得 Token

新增 Project
取得 Token

在專案中設定 yaml 檔(Github Actions)
加上 .github/workflows/chromatic.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# .github/workflows/chromatic.yml
# name of our action
name: "Chromatic Deployment"
# the event that will trigger the action
on:
  # Trigger the workflow on push or pull request,
  # but only for the main branch
  push:
    branches:
      - main
# what the action will do
jobs:
  test:
    # the operating system it will run on
    runs-on: ubuntu-latest
    # the list of steps that the action will go through
    steps:
      - uses: actions/checkout@v2
      - run: cd src/marsen.react && yarn && yarn build && yarn build-storybook
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
          storybookBuildDir: storybook-static

特殊設定，子專案

如何你和我一樣, 專案是由多個子專案組成,
那麼預設的 yaml 設定可能就不適合你.
可以參考這個 issue,
其中要特別感謝 yigityuce 的 solution,
我特別 fork 到我的 Github 帳號底下 Repo
設定調整如下:

1
2
3
4
5
6
7
8
9
# 上略
steps:
  - uses: actions/checkout@v2
  - run: cd src/marsen.react && yarn && yarn build && yarn build-storybook
  - uses: marsen/chromatic-cli@v1
    with:
      workingDir: ./src/marsen.react
      projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
# 下略

驗收

如下圖, 左方會顯示舊版的 UI 畫面, 右方會顯示新版的 UI 畫面,
如果開啟 Diff 功能(右上角的眼鏡圖示),
即可以進行差異比對, 有差異的地方將以亮綠色顯示,
如果認同這次的變更, 選擇右上角的 Accept 反之, 選擇 Deny.
驗收

參考

(fin)

[實作筆記] React 與 Storybook 開發

前情提要

不論是 App 或是 Web, 與使用者第一線互動的就是 UI 了。
另一面在需求設計上, 我們總會想像一個畫面，
想像著使用者如何使用我們的產品，
也就是說 UI 是理想與真實的邊界。

Designer 完成了設計, Engineer 將之實作出來,
主流的開發方式會透過 Component 來節省時間。

為什麼我們需要 Storybook ?

但是真的能節省時間嗎 ?

開發人員彼此之間會不會重複造輪子? 他們又要怎麼溝通?
修改到底層元件會不會影響到上層元件? 會不會改 A 壞 B?
複雜的 Component, 特殊的情境如何測試 ?

Storybook 恰恰能解決這些問題,

  • 作為開發人員的指南和文件
  • 獨立於應用程式建立 Component
  • 測試特殊情境

對我來說，最重要的事，我可以用類似 TDD 的方式開發,
在 Storybook 的官方文件提到這個方法為 CDD.
在 TDD 中我們把一個個 Use Case 寫成 Test Case,
我們可以挪用這個觀念,
在 Storybook 中把每一個 Component 的各種狀態(State),
當作 Use Case, 然後透過 Mock State 讓 Component 呈現該有的樣貌。

心得

大前端的時代，僅僅只看 Web 的話，
我認為這個時代前端的重心就在兩個主要的技術之上，
Component 與 State Management。
而實作你可以有以下的選擇,
僅介紹我聽過的主流 Library,
Component 與 State Management 沒有絕對的搭配關係。

Component State Management
React Flux
Angular Redux
Vue Akita

改編 Storybook 教程

為什麼要改編 Storybook 教程(React Version) ?

這個教程會以一個簡單的 Todo List,
從創建應用程式、簡單的 Component 到複雜,
與狀態管理器介接, 測試到部署。

但是他缺了一味，TypeScript,
所以我自已用 TypeScript 進行了改寫並稍作一下記錄。

環境

開始

設定初始化的環境

設定 React Storybook

開啟命令提示視窗，執行以下命令以創建 React App

1
2
3
4
# Create our application:
npx create-react-app taskbox

cd taskbox

安裝 Storybook

1
2
3
4
npm i storybook

# Add Storybook:
npx -p @storybook/cli sb init

啟動開發環境的 Storybook，

1
2
# Start the component explorer on port 6006:
yarn storybook

測試與執行

1
2
3
4
5
# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Run the frontend app proper on port 3000:
yarn start

npm Storybook

下載 CSS,存檔至 src/index.css

安裝 degit

1
npm i degit

加入 Add assets (字型與 Icon)

1
2
npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon

Git Commit

1
2
> git add .
> git commit -m "first commit"

簡單的 component

在 src/components/ 資料夾建立 component Task.js

1
2
3
4
5
6
7
8
9
10
11
// src/components/Task.js

import React from 'react';

export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
    <div className="list-item">
      <input type="text" value={title} readOnly={true} />
    </div>
  );
}

建立 Task.stories.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// src/components/Task.stories.js

import React from 'react';
import Task from './Task';

export default {
  component: Task,
  title: 'Task',
};

const Template = args => <Task {...args} />;

export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
    updatedAt: new Date(2018, 0, 1, 9, 0),
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_PINNED',
  },
};

export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_ARCHIVED',
  },
};

隨時你都可以執行 yarn storybook 試跑來看看 storybook
調整 Storybook 的 config 檔 (.storybook/main.js)

1
2
3
4
5
6
7
8
9
10
// .storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

(.storybook/preview.js) 這設定為了 log UI 上的某些操作產生的事件，
在之後我們會看到 完成(onArchiveTask)或置頂(onPinTask) 兩個事件

1
2
3
4
5
6
7
8
// .storybook/preview.js

import '../src/index.css';

// Configures Storybook to log the actions(onArchiveTask and onPinTask) in the UI.
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

調整 Task.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// src/components/Task.js

import React from 'react';

export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
    <div className={`list-item ${state}`}>
      <label className="checkbox">
        <input
          type="checkbox"
          defaultChecked={state === 'TASK_ARCHIVED'}
          disabled={true}
          name="checked"
        />
        <span className="checkbox-custom" onClick={() => onArchiveTask(id)} />
      </label>
      <div className="title">
        <input type="text" value={title} readOnly={true} placeholder="Input title" />
      </div>

      <div className="actions" onClick={event => event.stopPropagation()}>
        {state !== 'TASK_ARCHIVED' && (
          // eslint-disable-next-line jsx-a11y/anchor-is-valid
          <a onClick={() => onPinTask(id)}>
            <span className={`icon-star`} />
          </a>
        )}
      </div>
    </div>
  );
}

加入測試用的外掛(add on)

1
yarn add -D @storybook/addon-storyshots react-test-renderer

執行測試

1
> yarn test

測試結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
yarn run v1.22.0
$ react-scripts test
(node:52888) DeprecationWarning: \`storyFn\` is deprecated and will be removed in Storybook 7.0.

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storyfn
 PASS  src/components/storybook.test.js (14.703 s)
  Storyshots
    Task
      √ Default (13 ms)
      √ Pinned (2 ms)
      √ Archived (1 ms)

 › 3 snapshots written.
Snapshot Summary
 › 3 snapshots written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   3 written, 3 total
Time:        16.716 s
Ran all test suites related to changed files.

簡單的 component 改用 typescript

首先，Task.js 調整副檔名為 Task.tsx，
Task.stories.js 為 Task.stories.tsx.
測試檔案 storybook.test.js 也一併修改 storybook.test.ts

並修改 .storybook/main.js

1
2
3
4
module.exports = {
  stories: ['../src/components/**/*.stories.tsx'],
  /// 略…
};

建立 tsconfig.json 檔

1
> tsc --init

用 TypeScript 改寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// src/components/Task.tsx
import React from 'react';

export enum TaskState{
  Inbox = 'TASK_INBOX',
  Pinned = 'TASK_PINNED',
  Archived = 'TASK_ARCHIVED'
}

export interface TaskArgs {
  item:TaskItem,
  onArchiveTask: (id:string) => void,
  onPinTask: (id:string) => void
}

export class TaskItem{
  id: string = ''
  title: string = ''
  state: TaskState = TaskState.Inbox
  updatedAt?: Date
}

export default function Task(args:TaskArgs) {
  return (
    <div className={`list-item ${args.item.state}`}>
      <label className="checkbox">
        <input
          type="checkbox"
          defaultChecked={args.item.state === TaskState.Archived}
          disabled={true}
          name="checked"
        />
        <span className="checkbox-custom" onClick={()=>args.onArchiveTask(args.item.id)} />
      </label>
      <div className="title">
        <input type="text" value={args.item.title} readOnly={true} placeholder="Input title" />
      </div>

      <div className="actions" onClick={event => event.stopPropagation()}>
        {args.item.state !== TaskState.Archived && (
          // eslint-disable-next-line jsx-a11y/anchor-is-valid
          <a onClick={()=>args.onPinTask(args.item.id)}>
            <span className={`icon-star`} />
          </a>
        )}
      </div>
    </div>
  );
}

改寫 Task.store.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// src/components/Task.stories.tsx

import React from 'react';
import Task, { TaskItem, TaskArgs, TaskState } from './Task';
import { Story } from '@storybook/react/types-6-0';

export default {
  component: Task,
  title: 'Task',
};

const Template:Story<TaskArgs> = args => <Task {...args} />;

var defaultItem:TaskItem = {
  id:'1',
  title:'Test Task',
  state:TaskState.Inbox,
  updatedAt: new Date(2018, 0, 1, 9, 0),
};

export const Default = Template.bind({});
Default.args = { item: defaultItem, };

export const Pinned = Template.bind({});
var pinnedItem = Copy(defaultItem);
pinnedItem.state=TaskState.Pinned
Pinned.args = { item: pinnedItem };

export const Archived = Template.bind({});
var archivedItem = Copy(defaultItem);
archivedItem.state=TaskState.Archived;
Archived.args = {item: archivedItem};

function Copy(obj:any) {
  return Object.assign({},obj);
}

組合成複雜的 component (TypeScript 版本)

與教程最主要的不同之處在於使用了 TypeScript 的語法撰寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 // src/components/TaskList.tsx
import React from 'react';
import Task, { TaskItem, TaskState } from './Task';
import { connect } from 'react-redux';
//import { archiveTask, pinTask } from '../lib/redux';

export interface TaskListProps {
  loading?:boolean;
  tasks: TaskItem[];
  onArchiveTask: (id:string)=>void;
  onPinTask: (id:string)=>void;
}

export function PureTaskList(props:TaskListProps) {
  const events = {
    onArchiveTask:props.onArchiveTask,
    onPinTask:props.onPinTask,
   };

  const LoadingRow = (
    <div className="loading-item">
      <span className="glow-checkbox" />
      <span className="glow-text">
        <span>Loading</span> <span>cool</span> <span>state</span>
      </span>
    </div>
  );

  if (props.loading) {
    return (
      <div className="list-items">
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
      </div>
    );
  }

  if (props.tasks === undefined || props.tasks.length === 0) {
    return (
        <div className="list-items">
            <div className="wrapper-message">
                <span className="icon-check" />
                <div className="title-message">You have no tasks</div>
                <div className="subtitle-message">Sit back and relax</div>
            </div>
        </div>
    );
  }

  const tasksInOrder = [
    ...props.tasks.filter(t => t.state === TaskState.Pinned), //< ==== 固定頂部
    ...props.tasks.filter(t => t.state !== TaskState.Pinned),
  ];


  return (
    <div className="list-items">
      {tasksInOrder.map(item => (
        <Task key={item.id} item={item} {...events}/>
      ))}
    </div>
  );
}

export default connect(
  (props:TaskListProps) => ({
    tasks: props.tasks.filter(t => t.state === TaskState.Inbox || t.state === TaskState.Pinned ),
  })
)(PureTaskList);

TaskList.stories.tsx 設置，也是使用 TypeScript 撰寫。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// src/components/TaskList.stories.tsx

import React from 'react';
import { TaskList, TaskListArgs } from './TaskList';
import { TaskItem, TaskState } from './Task';
import { Story } from '@storybook/react/types-6-0';

export default {
  component: TaskList,
  title: 'TaskList',
  decorators: [(story: () => React.ReactNode) => <div style={{ padding: '3rem' }}>{story()}</div>],
  excludeStories: /.*Data$/,
};

const Template:Story<TaskListArgs> = args => <TaskList {...args} />

var defaultItem:TaskItem = {
  id:'1',
  title:'Test Task',
  state:TaskState.Inbox,
  updatedAt: new Date(2018, 0, 1, 9, 0)
};

export const Default = Template.bind({});
Default.args = {
  tasks: [
    { ...defaultItem, id: '1', title: 'Task 1' },
    { ...defaultItem, id: '2', title: 'Task 2' },
    { ...defaultItem, id: '3', title: 'Task 3' },
    { ...defaultItem, id: '4', title: 'Task 4' },
    { ...defaultItem, id: '5', title: 'Task 5' },
    { ...defaultItem, id: '6', title: 'Task 6' },
  ],
};

export const WithPinnedTasks = Template.bind({});
WithPinnedTasks.args = {
  tasks: [
    ...Default.args.tasks!.slice(0,5),
    { id: '6', title: 'Task 6 (pinned)', state: TaskState.Pinned },
  ],
};

export const Loading = Template.bind({});
Loading.args = {
  tasks: [],
  loading: true,
};

export const Empty = Template.bind({});
Empty.args = {
  ...Loading.args,
  loading: false,
};

介接 Store 資料

建立 Redux

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// src/lib/redux.ts

// A simple redux store/actions/reducer implementation.
// A true app would be more complex and separated into different files.
import { createStore } from 'redux';
import { TaskItem, TaskState } from '../components/Task';

export const archiveTask = (id: string) => {
  console.log("archive task:"+id);
  return ({ type: TaskState.Archived, id })
};

export const pinTask = (id: string) => {
  console.log("pin task:"+id);
  return ({ type: TaskState.Pinned, id })
};

// The reducer describes how the contents of the store change for each action
export const reducer = (state: any, action: { id:string; type: TaskState; }) => {
  switch (action.type) {
    case TaskState.Archived:
    case TaskState.Pinned:
      return taskStateReducer(action.type)(state, action);
    default:
      return state;
  }
};

// The initial state of our store when the app loads.
// Usually you would fetch this from a server
const defaultTasks:Array<TaskItem> = [
  { id: '1', title: 'Something', state: TaskState.Inbox },
  { id: '2', title: 'Something more', state: TaskState.Inbox },
  { id: '3', title: 'Something else', state: TaskState.Inbox },
  { id: '4', title: 'Something again', state: TaskState.Inbox },
];


// We export the constructed redux store
export default createStore(reducer, { tasks: defaultTasks });

// All our reducers simply change the state of a single task.
function taskStateReducer(taskState: TaskState) {
  return (state: { tasks: TaskItem[]; }, action: { id: string; }) => {
    return {
      ...state,
      tasks: state.tasks.map(task =>
        task.id === action.id ? { ...task, state: taskState } : task
      ),
    };
  };
}

修改 TaskList.tsx 視作一個 container 與 redux 作介接:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src/components/TaskList.tsx
import React from 'react';
import Task, { TaskItem, TaskState } from './Task';
import { connect } from 'react-redux';
import { archiveTask, pinTask } from '../lib/redux';

// 中略...

export default connect(
  (props:TaskListArgs) => ({
    tasks: props.tasks.filter(t => t.state === TaskState.Inbox || t.state === TaskState.Pinned ),
  }),
  dispatch => ({
    onArchiveTask: (id: string) => dispatch(archiveTask(id)),
    onPinTask: (id: string) => dispatch(pinTask(id)),
}))(TaskList);

加上 Page InboxScreen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//src/components/InboxScreen.js

import React from 'react';
import { connect } from 'react-redux';
import TaskList from './TaskList';

export class InboxScreenArgs {
  error:string | undefined
}

export function InboxScreen(args:InboxScreenArgs) {
  if (args.error) {
    return (
      <div className="page lists-show">
        <div className="wrapper-message">
          <span className="icon-face-sad" />
          <div className="title-message">Oh no!</div>
          <div className="subtitle-message">Something went wrong</div>
        </div>
      </div>
    );
  }

  return (
    <div className="page lists-show">
      <nav>
        <h1 className="title-page">
          <span className="title-wrapper">TaskBox</span>
        </h1>
      </nav>
      <TaskList />
    </div>
  );
}

export default connect((props:InboxScreenArgs) => (props))(PureInboxScreen);

一樣也加上 Story ,InboxScreen.stories.tsx
讓我們可以透過 Storybook 作人工 E2E 測試

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//src/components/InboxScreen.stories.tsx

import React from 'react';
import { Provider } from 'react-redux';
import { InboxScreenArgs, InboxScreen } from './InboxScreen';
import { Story } from '@storybook/react/types-6-0';
import store from '../lib/redux'

export default {
  component: InboxScreen,
  decorators: [(story: () => React.ReactNode) => <Provider store={store}>{story()}</Provider>],
  title: 'InboxScreen',
};

const Template:Story<InboxScreenArgs> = args => <PureInboxScreen {...args} />;

export const Default = Template.bind({});

export const Error = Template.bind({});
Error.args = {
  error: 'Something',
};

完整代碼可以參考此處。

參考

(fin)