如要查看社群視覺呈現異動,一般的工作流程是將檔案上傳至 GCS,然後重新整理 Looker Studio 報表。這種做法雖然有效,但這表示您可以花許多時間等待變更結果。dscc-gen 可讓工作流程立即查看視覺化程式碼變更,減少編寫社群視覺呈現所需的時間。
如要開始操作,請確認已安裝 npm 5.2.0 以上版本和 gsutil,接著執行:
npx @google/dscc-gen viz
首次設定
dscc-gen
隨附預設的本機資料集,可能不代表您要以視覺化方式呈現的資料。如要更新這個資料集以符合您的需求,請按照下列步驟操作:
- 請前往
src/index.json
更新設定。 - 執行
npm run update_message
。這樣做會將視覺化內容部署至dev
值區,以方便複製的格式顯示訊息。 - 建立新報表,並連結至代表您要視覺化呈現資料的資料集。
- 使用
dev
值區做為元件 ID 新增社群視覺呈現。 - 將視覺化圖表的內容複製到
scripts/data/localData.js
。您在本機開發時,會使用這些資料。
字集
下列指令碼適用於使用 dscc-gen
建立的視覺化專案。
指令 | 動作 |
---|---|
npm run start
|
啟動本機伺服器,並預覽視覺化資料 |
npm run update_message |
使用 objectFormat 更新訊息 |
npm run build:dev
|
在停用快取的情況下,從 ./src 建構檔案到 ./build 。 |
npm run push:dev |
將 build 中的檔案複製到 dev 值區。 |
npm run build:prod
|
在已啟用快取功能的情況下,從 ./src 建構檔案到 ./build 。 |
npm run push:prod
|
將檔案從 build 複製到 prod 值區。 |
update_message
指令預設為 objectFormat。如要使用 tableFormat,請將 package.json
中 update_message
指令碼的參數從 -f object
編輯為 -f table
。
程式碼研究室
如要瞭解如何使用這項工具,請參閱 dscc-gen 程式碼研究室。