使用 dscc-gen 快速編寫視覺化內容

如要查看社群視覺呈現異動，一般的工作流程是將檔案上傳至 GCS，然後重新整理 Looker Studio 報表。這種做法雖然有效，但這表示您可以花許多時間等待變更結果。dscc-gen 可讓工作流程立即查看視覺化程式碼變更，減少編寫社群視覺呈現所需的時間。

如要開始操作，請確認已安裝 npm 5.2.0 以上版本和 gsutil，接著執行：

npx @google/dscc-gen viz

注意： 如果您想使用 yarn，請將 --yarn 做為引數傳遞。

首次設定

dscc-gen 隨附預設的本機資料集，可能不代表您要以視覺化方式呈現的資料。如要更新這個資料集以符合您的需求，請按照下列步驟操作：

1. 請前往 src/index.json 更新設定。
2. 執行 npm run update_message。這樣做會將視覺化內容部署至 dev 值區，以方便複製的格式顯示訊息。
3. 建立新報表，並連結至代表您要視覺化呈現資料的資料集。
4. 使用 dev 值區做為元件 ID 新增社群視覺呈現。
5. 將視覺化圖表的內容複製到 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 值區。

注意： 建構及部署 viz 之前，請務必將 src/index.js 中的 const LOCAL= 變更為 false。

update_message 指令預設為 objectFormat。如要使用 tableFormat，請將 package.json 中 update_message 指令碼的參數從 -f object 編輯為 -f table。

程式碼研究室

如要瞭解如何使用這項工具，請參閱 dscc-gen 程式碼研究室。