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

hackfoldr

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

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

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

發生災難時也可以透過廣大民眾協力
● 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

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

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

第一次用HackFoldr就上手！
9

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

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

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

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

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

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

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

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

HackFoldr 好夥伴
18

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

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

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

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

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

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

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

Sandstorm + HackFoldr = Links Holder
26

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

雲端沙聚協作平台

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

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

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

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

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

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

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

開始囉！
36

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

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

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

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

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

基本概念介紹
42

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

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

Etherpad (1/6): 安裝
45

Etherpad (2/6): 安裝
46

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

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

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

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

51

協作觀念
52

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

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

你還在用 管專案嗎？
55

Wekan (1/5)：安裝
56

Wekan (2/5)：命名
57

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

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

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

61

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

Collection (1/4)：安裝
63

Collection (2/4)：命名
64

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

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

67

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

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

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

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

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

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

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

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

76

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

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

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

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

81

更多的App
82