教材網址： http://beta.hackfoldr.org/doit 作者： shuyanglin@Github mark19891107@Github

1. 臺北市政府資訊局
公民參與數位協作工具實務班
2017.05.02
hackfoldr

2. hackfoldr

3. HackFoldr
● 黑客資料夾
● 多人線上共同編輯「書籤」
● g0v 專案，1.0、2.0
● code4hk 手機版
3

4. 本來是為了黑客松使用
4http://hack.g0v.tw/g0v-hackath24n

5. 可以把很多網頁搜集起來，所以....
公民運動時可以線上共享資訊
5http://beta.hackfoldr.org/1v3anz7jfe

6. 發生災難時也可以透過廣大民眾協力
● 2014.08.01 高雄氣爆資訊
○ http://beta.hackfoldr.org/1WVWrKC-Tbry3ltgouQPpZH2Cd2HkKeZ8DjLs4PWa1z4
● 2015.06.27 八仙塵暴
○ http://beta.hackfoldr.org/627pray/
● 2016.02.06 台南大地震災情整合平台
○ http://beta.hackfoldr.org/1a5WMhNPRxTo12VidVuUKlGhN214D_RIw_gBzHP2F66c
6

7. 民眾看習慣了，政府也一起來用
● 登革熱懶人包
○ http://beta.hackfoldr.org/1rbs-NLFxGvrT8whiwNIq-u3DB0MFV_zg58so5Ak1zdM
7

8. 也可以拿來呈現歷程，做成政策履歷
● 電子競技：政策履歷
○ http://esport.pdis.tw/
8

9. 第一次用HackFoldr就上手！
9

10. 五四個步驟完成自己的HackFoldr
10
1. 打開 http://beta.hackfoldr.org
2. 幫資料夾網址命名
3. 幫資料夾命名
4. 加上資料夾內容（連結）
5. 完成！！
2
3
4
1

11. HackFoldr 進階用法
11
使用資料夾整理
加上標籤分類資訊
預設開新分頁
預設打開的資料夾
預設收合的資料夾

12. HackFoldr 進階用法
12
網址 文件標題 一些設定 標記

13. 實作練習
13
1. 選定一個議題或時事
2. 蒐集相關資訊
○ 新聞、資料、網頁、影片、圖片
3. 放進資料夾，並試著分類

14. 開放給路人編輯？如果有人來亂怎麼辦...
● EtherCalc ( 開放所有人編輯 )
● Google Spreadsheet ( 可以設定編輯權限 )
14

15. 使用 Google Spreadsheet 建立 HackFoldr
● 建立檔案
● 「File (檔案)」>「Publish to the web... (發布到網頁上)」
● 「Start publishing (開始發佈)」、「OK (確定)」
15
1
http://beta.hackfoldr.org/1tt8vt1azgEUX3EeCEW2CSWLRp_nI1OnVbmcHPgqDA2U
2

16. 可是網址好醜好難記，請還我美美的網址
● EtherCalc + Google Spreadsheet
● Google Spreadsheet id 填入 EtherCalc 的 A1 儲存格
● 完成！
● ※注意，此操作後修改 EtherCalc A1 之外儲存格，都不再影響 Foldr 內容
16
網址沒變
但編輯頁面變成 Google 試算表

17. Google 試算表沒打欄位名稱，格式會跑掉！
● Google 試算表當作編輯界面的 HackFoldr 一定要有欄位名稱
● 內容可以隨便打，但是不能沒有！！
17

18. HackFoldr 好夥伴
18

19. HackFoldr 好夥伴 HackMD
● https://hackmd.io
● md = markdown
● 用起來像這樣（ Link ）
● 語法整理（ Link ）
19

20. HackFoldr 好夥伴 EtherCalc || Google spreadsheet
● Google spreadsheet 可限制權限
● EtherCalc 開放編輯
20

21. HackFoldr 好夥伴 Youtube
● Youtube 全螢幕嵌入影片，不換頁
21

22. HackFoldr 好夥伴 Google Map
● Google My Maps 可以建立資訊地圖
● 「建立新地圖」>「建立圖層」>「分享」>「公開在網路上＋檢視」
● 「 」>「嵌入我的網站」>「取得嵌入的網址」
22

23. HackFoldr 好夥伴 Google Form
● Google 表單 可輕鬆建立問卷
● 直接複製讓別人填問卷的連結便可嵌入
23

24. HackFoldr 好夥伴 Google Drive
● Google Drive 可輕鬆分享檔案
● 利用 Google Drive 預覽檔案功能
● 上傳檔案至Google Drive >「取得共用連結」> 用瀏覽器打開共用連結
● 將連結末端的 view 改成 preview
○ https://drive.google.com/file/d/0B_Go9SasE64tR1V4QW1hR0k0VWM/view
○ https://drive.google.com/file/d/0B_Go9SasE64tR1V4QW1hR0k0VWM/preview
24

25. HackFoldr 有什麼問題？
25
● HackFoldr 沒有權限控管 > 使用 Google Spreadsheet 解決
● Google 試算表的 HackFoldr 網址很醜 > 使用 EtherCalc 解決
● 如果 EtherCalc 的 A1 被改掉....
還有其他問題嗎？
● 政府網站使用 beta.hackfoldr.org 網站？
● 後台可不可以完全藏起來？

26. Sandstorm + HackFoldr = Links Holder
26

27. Links Holder 編輯與發布分離
27
● 在 Sandstorm 編輯，發布至新網址
● 按下發布後的彈出視窗可能被瀏覽器阻擋

28. 雲端沙聚協作平台

29. Sandstorm 雲端沙聚協作平台
● 開放原始碼 (open source)
● 可在自建主機上運行 (self-hostable)
● 在這個平台上可以安裝各式各樣的應用程式 (App)
● 平台上的 App 大多為協作導向，附有線上討論視窗、相互交
流並且直接在相同脈絡裡工作。
29

30. 從募資專案起家
目標是希望提供一個開源的個人雲端平台，由於這個雲端平台具有沙盒 (sandbox)的
性質，開發團隊認為 沙+雲=沙塵暴 (Sandbox + cloud = Sandstorm)，故以此命名。而
Sandstorm 上 App 產出的工作項目，被叫作 Grains，也就是沙粒，開發團隊也依此想
出了一個相當有魄力的中文名稱和標語：「沙巨雲：聚沙成塔」。
在行政院，通過院資安處的資訊安全檢查，名稱定為：「雲端沙聚協作平台」，期望可以
讓行政團隊的同仁聚沙成塔，讓決策者可以輕鬆地畫沙聚米、運籌帷幄。
30

31. Sandstorm 介面與內容物
31
69 apps and growing!!

32. Sandstorm 使用情境
32
檔案分享文件協作 追蹤管考
昨天下午那場會議
記錄寫好了沒？
麥可，你昨天會議
時作的筆記可以借
我看一下嗎？
投影片
做完沒？
我還在等
Ben 整理...

33. 核心功能
❖ 69 個以上的應用程式可供使用
❖ 單一 (一次) 登入
❖ 統一分享機制
❖ 串聯應用程式
33

34. PDIS 使用情境
訂飲料、訂便當
34
一起規劃課程大綱
畫直播設備線路規劃
追蹤進度
文件、錄音檔、照片分享

35. 35
https://oasis.sandstorm.io/demo
Try a quick Demo
小試身手

36. 開始囉！
36

37. 37
https://doit.sandcats.io
Sandstorm for 臺北市政府資訊局 (DOIT)
打開瀏覽器，輸入 https://doit.sandcats.io1

38. 初始畫面
38
輸入您的 電子信箱 (email address)2

39. 收信、點開認證連結
39
點開這個連結3

40. 填寫帳戶資料
40
填寫個人全名、
帳號名稱、
電子信箱，
最後，按下 繼續前
往下一步
4

41. 完成囉！歡迎進入 DOIT 的 Sandstorm
41

42. 基本概念介紹
42

43. 基本概念介紹：Apps and Grains
43
Apps 是指「應用程式」，可以想成各種線上協作工具，
安裝了的 app 則會可以產生 grains，直譯是「沙粒」，
可以想成工作項目。

44. 安裝您的第一個 App:
Etherpad
44
# 文件協作

45. Etherpad (1/6): 安裝
45

46. Etherpad (2/6): 安裝
46

47. Etherpad (3/6)：建立一個新的文件
47

48. Etherpad (4/6)：修改標題
48

49. Etherpad (5/6)：修改內文
49

50. Etherpad (6/6)：查看修改記錄
50

51. 51

52. 協作觀念
52

53. 協作 (Collaboration)
協作 同一份 文件。
53

54. 安裝您的第二個 App:
Ｗekan
54
# 進度追蹤

55. 你還在用 管專案嗎？
55

56. Wekan (1/5)：安裝
56

57. Wekan (2/5)：命名
57

58. Wekan (3/5)：新增代辦事項
58

59. Wekan (4/5)：加入或指定協作同仁
59

60. Wekan (5/5)：追蹤進度
60

61. 61

62. 安裝您的第三個 App:
Collection
62
# 集合～

63. Collection (1/4)：安裝
63

64. Collection (2/4)：命名
64

65. Collection (3/4)：分享存取權限給其他同仁
65

66. Collection (4/4)：新增 grain 到 collection
66

67. 67

68. 安裝您的第四個 App:
Davros
68
# 檔案共享～

69. Davros (1/7)：安裝、建立資料夾
69

70. Davros (2/7)：上傳下載、增刪改查檔案與資料夾
70

71. Davros (3/7)：安裝用戶端
71

72. Davros (4/7)：安裝用戶端
72

73. Davros (5/7)：安裝用戶端
73

74. Davros (6/7)：安裝用戶端
74

75. Davros (7/7)：安裝用戶端
75

76. 76

77. 安裝您的第五個 App:
Rocket.chat
77
# 訊息管理 # 聊天

78. Rocket.Chat (1/3)：安裝
78

79. Rocket.Chat (2/3)：安裝
79

80. Rocket.Chat (3/3)：安裝
80

81. 81

82. 更多的App
82