Trello workflow


團隊開發的網頁遊戲《末日少女》已經上市快兩個月了，成績比當初想像中還好，相較於 Gu Morning，這次《末日少女》的開發學到很多寶貴的經驗，稍微鬆口氣之餘，也有許多需要檢討改善的地方，而《末日少女》Mobile 版其實也已經開發好一陣子了，最近這個專案
只剩下我一個人交到我手上負責，趁這個機會導入一些新的開發方式，也 PO 上來分享心得。

這篇文章會講什麼？

  1. HtpChat - 開發團隊的 Log 整合中心。
  2. Trello - 團隊的專案管理小白板。
  3. Git flow - 最佳程式開發流程。
  4. Jenkins - CI(持續整合)建構工具。

HipChat


HipChat 是一款跨平台團隊溝通工具，為了節省開會浪費的時間，通常會使用 Lync 或 Skype 這類通訊軟體，而 HipChat 除了該有的聊天功能，歷史查詢，附件上傳，@mentions 通知之外，最棒的是它可以整合許多服務，例如 GitHub，Heroku，JIRA 等，將所有開發上分散的訊息統一管理，方便團隊隨時瞭解狀況，而接下來這篇文章會講到如何整合 Trello，GitHub 和 Jenkins。

Trello


不同於一般市面上複雜的專案管理軟體，Trello 是一個簡單易用的 Scrum board，之前 Development Tools 這篇文章有稍微介紹，而我目前就是使用它來管理新專案，試用兩個月下來，感覺還不錯。

Trello 主要由 Board，List 和 Card 組成，如上圖所示，目前我將開發板分成五個 List：
  • Backlog - 所有企劃開出來的功能會集中在這個 Backlog List，並按照預計完成日期排序。
  • To Do - Backlog 中的功能如果已經準備好企劃文件和美術檔案，那卡片就會移到 To Do 待命。
  • Doing - 正在實作中的功能會從 To Do 移至 Doing，建議每個人只留一張卡片在這。
  • Done (vX.X.X) - 下一版要完成的功能，在 Doing 完成的卡片會移到 Done，待產品發佈後會從 Done 改為 Live。
  • Live (vX.X.X) - 已經上線的功能 List，可以隨時使用封存，讓開發板保持乾淨。
vX.X.X 為版號。
每張 Card 還可以根據屬性標上自訂 Label，例如 feature，bug 等。

Zapier

由於 HipChat 沒有直接整合 Trello，所以需要透過第三方服務來支援，Zapier。

Zapier 使用上跟 IFTTT 一樣，當某個服務被觸發時，另一個服務就執行某個動作，而這邊我們要使用的就是 Trello 和 HipChat，當 Trello 的 New Activity 被 trigger 的時候，HipChat 就 Create Message。

連結 Trello 和 HipChat 帳號：

選擇 Trello Board：

設定 HipChat 的通知格式：

也可以直接套用其他人分享的設定。

Git flow

Git flow 是一套 Git 流程管理工具，它會幫你在現有的 Git 開發環境上，建立五條 branch：
  • master - 最穩定的產品版本。
  • develop - 正在開發的版本，所有開發人員基本上都會在這條主線上。
  • feature - 開發新功能都需要使用這條支線，會從 develop 分支出來，完成後自動 merge 回 develop。
  • release - 準備發佈的新版本，從 develop 分支出來，完成後自動建立 tag 並 merge 回 master 和 develop。
  • hotfix - release 之後發現有緊急 bug 必須修復時會使用，從 master 分支出來，完成後 merge 回 master 和 develop。
這篇 git-flow cheatsheet 用圖解的方式解釋 git flow，會比較容易懂。

安裝

  • OSX：$ brew install git-flow
  • Linux：$ apt-get install git-flow

使用

初始化：$ git flow init
初始過程中會問你一些分支命名，建議直接使用預設。

New Feature

開始開發新功能：$ git flow feature start <FEATURE_NAME>
結束新功能開發：$ git flow feature finish <FEATURE_NAME>
將程式 push 到 remote 端：$ git flow feature publish <FEATURE_NAME>
Pull remote 端的程式：$ git flow feature pull <FEATURE_NAME>

New Release

準備 release：$ git flow release start <VERSION>
完成 release：$ git flow release finish <VERSION>
VERSION 為版號。

New Hotfix

修復緊急 bug：$ git flow hotfix start <VERSION>
修復結束：$ git flow hotfix finish <VERSION>
如果想從 SVN 跳槽到 Git 的話，可以使用這個指令將整個 Repository 搬過來：
$ git svn clone <SVN_REPOSITORY>
如果不習慣用命令列操作的話，推薦使用 SourceTree 這套軟體，裡面已經直接內建 git flow。

接著要整合 GitHub 和 HipChat，只需要幾個步驟就可以完成：
  1. 前往 HipChat > Group admin > API > 建立一組新的 token。
  2. 前往 GitHub > 你的 Repository > Settings > Service Hooks > HipChat > 將 auth token 跟 room ID 填上，Active 記得打勾，這樣就完成了，之後 GitHub 有任何動態都會在 HipChat 上通知。
github01

Jenkins


最後要介紹的是持續整合工具 Jenkins，為了減少每次發佈版本浪費的時間，Jenkins 可以自動化這些鎖碎的步驟，而我目前專案的每日建置會處理的事項如下：
  1. 定時輪詢 Git 是否有最新的版本。
  2. 若是有最新版本則拉下來更新。
  3. 編譯程式檢查是否有錯誤。
  4. 封裝檔案 (.ipa & .apk)。
  5. 通知 HipChat。
  6. 將檔案 Email 給指定成員。

安裝

前往官方網站下載對應版本。

設定

安裝完畢之後，預設直接使用瀏覽器開啟 http://localhost:8080，接下來需要安裝一些 Plugins：
前往 Manage Jenkins > Manage Plugins > Available > 右上角 Filter 搜尋可安裝的外掛。
  • Git Plugin - 如果你是使用 Git 的話當然就必裝囉。
  • HipChat Plugin - 整合 HipChat，安裝完之後 > Manage Jenkins > Configure System > Global HipChat Notifier Settings > 新增一組 HipCht API token，然後填上 Room 跟 Jenkins URL 就完成了。
  • Email-ext plugin - 建置成功可以發送自訂格式的 Email。
安裝完外掛之後接下來點選 New Job 開啟一個新建置：
填寫 Job name，這裡我們選 Free-Style project。

創建好一個 Job 後會進入 Configure 頁面。
首先先設定 HipChat 的一些參數 (如果有安裝 plugin 的話)。

設定 Git，填上本機 Repository 位置，選擇 master branch (產品主線)，Remote 端 Repository 如果是用 GitHub 的話選擇 githubweb 然後填上 URL。

接下來設定排程，選擇 Poll SCM (輪詢)，並依照指定的日期時間格式設定，以 H/5 6,7,8,9,20,21,22,23 * * * 為例，無論何月何日星期幾，每天 6-9 點，20-23點，每隔 5 分鐘輪詢一次。

然後就是建置的部分，內容會依專案而異，以我的 AIR Mobile 專案為例，使用 Shell 指令，mxmlc 先編譯除錯程式，然後 adt 分別產出 .ipa 和 .apk 檔案。

最後設定建置成功後需要作哪些事：
  • Archive the artifacts - 封存指定檔案，注意檔案的路徑會是在 $WORKSPACE 底下。
  • HipChat Notification - 發送通知給 HipChat。
  • E-mail Notification - 發送信件給指定成員，如果需要自訂格式也可以使用前面介紹的 plugin。

結語

上面講完了 HipChat，Trello，Git flow 和 Jenkins 四樣看似無關的服務，但結合起來運用會讓專案開發上的效率更佳提升，雖然前期的準備需要花點時間，但對專案是很值得的投資，Try it! :-)

參考資料

留言

張貼留言

這個網誌中的熱門文章

全遠端工作

圖片
每周分享第 21 期 全遠端工作 原文標題：All Remote 原文網址：https://about.gitlab.com/company/culture/all-remote/ 原文作者：GitLab GitLab 是一間實行 全遠端 （All Remote）的公司， 團隊成員 遍布全球 50 多個國家。 這裡 有介紹一些 GitLab 的工作原理。 遠端宣言 全遠端工作提倡： 從世界各地招聘和工作，而不是從都市地帶 彈性工時，勝過固定工時 寫下和記錄知識，勝過口頭傳授 寫下流程，勝過在職培訓 公開分享資訊，勝過僅知原則（need-to-know access，僅給予完成一件任務所需要知道的事項即可） 開放所有文件供任何人編輯，勝過自上而下的文件控制 非同步通訊，勝過同步通訊 工作的成果，勝過投入的工時 正式的溝通管道，勝過非正式的溝通管道 正式溝通 vs 非正式溝通（ 來源 ） 為什麼需要遠端？ 遠端不是一個需要克服的挑戰。這是一個明顯的商業優勢。 — Victor, Product Manager, GitLab 從節省辦公空間的成本到員工的日常生活更加彈性，全遠端工作為組織及其員工提供了許多好處。但我們也體認到，並非所有人都適合成為一家全遠端的公司。 以下是一些優點和缺點。 優點 對於員工 日常生活更加彈性（小孩、父母、朋友、雜務、運動、快遞） 不會浪費時間、精力和金錢在通勤上（捷運和公車、油價、維修保養、收費站等） 減少接觸同事的病菌 減少被打斷的狀態，提高 生產力 能夠在不請假的情況下遊歷各地（家庭、娛樂等） 自由移動 有些人發現遠端更容易與難搞的同事溝通 減少入職可能會有的社交壓力 在家吃飯（有時）更好、更便宜 某些國家的稅收可能更便宜 不用煩惱今天穿什麼 從家庭時間到旅行計劃，有很多關於遠端工作是如何影響全球 GitLab 團隊成員生活的 例子和...
閱讀完整內容

影響我一生的十大遊戲（一）

圖片
每周分享第 19 期 影響我一生的十大遊戲（一） 自 1989 年的平成元年算起，持續了約 30 年的「平成時代」已於今年 4 月畫下句點，5 月起由新年號「令和」正式接班。 日本遊戲媒體 週刊ファミ通 日前 公布 由讀者票選的「平成最佳遊戲」前三名經典作品。 來源： ファミ通.com 拿下第一名的是 1995 年在 SFC（俗稱： 超任 ）平台發售的《 超時空之鑰 》。本作受到 30 歲以上玩家（包括我）一致壓倒性支持，高票獲選。 來源： ヤフオク 《超時空之鑰》是由 SQUARE （當時尚未合併 SQUARE ENIX ）負責製作發行，《 七龍珠 》作者 鳥山明 、《 勇者鬥惡龍 》之父 堀井雄二 ，以及《 太空戰士 》之父 坂口博信 聯手打造的夢幻級 RPG。無論是劇情、美術、系統或音樂，放到今天來看仍是經典的不朽名作。 創新的時空旅行與多重結局成為不少玩家一生難忘的回憶（來源： ヤフオク ） 作為一路走過昭和、平成、令和時代的三朝元老級玩家，見證了這 30 年間五花八門的遊戲作品問世。最近看了 YouTube 頻道 攻壳 Gamker 的《 十大影響我的遊戲 》影片之後，也想來寫一系列「影響我一生的十大遊戲」文章。 第十位：熱血行進曲（FC） ...
閱讀完整內容

無限環境（ㄧ）Netlify Deploy Previews

圖片
大綱 什麼是「無限環境」？ 什麼是 Netlify Deploy Previews？ 快速入門指南 步驟一、建立 React 網站 步驟二、建立 GitHub repository 步驟三、註冊＆配置 Netlify ⭐️ 最終步驟、玩轉 Deploy Previews ⭐️ 總結 附錄 參考資料 什麼是「無限環境」？ 大家常用的 GitHub flow 其實有一個常常被忽略的重點 —— 合併前部署。 我自己在前端開發的 Code Review 上，常常碰到下列兩個問題： PR 合併、部署到 staging 或 production 環境之後，才發現程式碼有問題 為了避免第一個問題發生，就必須先 checkout PR 到 local 環境，然後經過一系列繁瑣的步驟跑起來，最後才能開始驗收和測試 為了解決上述問題，就需要引入無限環境的概念。 所謂的無限環境，就是自動將目前 PR 中的最新 commit，部署到一個臨時環境中，並返回該環境的 URL 網址。[1] 如果能實現這個條件，將為開發團隊帶來兩點好處： Reviewer 有任何懷疑時，便可以直接在預覽環境中驗證，而非憑空猜疑。 Reviewer 也可以放心大膽的驗證自己的懷疑，不需要在 local 開發環境耗時費力地切換。 接下來我會寫三篇「無限環境」系列的文章，介紹一些可以達成這個目的的工具。 這是第一篇文章，介紹如何透過 Netlify 的 Deploy Previews 服務，建立靜態網頁的無限環境。 什麼是 Netlify Deploy Previews？ Netlify 是一個類似 Heroku 的 All-in-one PaaS ，提供各種現代 web 專案會用到的自動化服務，例如：靜態網站部署、CDN、持續交付和一鍵配置 HTTPS 等。 其中 Deploy Previews 這項服務，可以將 GitHub repository 中的每個 pull request 部署到 唯一 的 URL，與 staging 和 production 環境的完全不同。你和你的團隊可以在合併到主分支、並且部署到正式環境之前，提前看到更改的外觀以及驗收功能是否正確。 快速入門指南 這篇文章會以時下最流行的 Create React App 為例，示範如何實現 React ...
閱讀完整內容