เวิร์กโฟลว์ทั่วไปในการดูการเปลี่ยนแปลงในการแสดงภาพข้อมูลจากชุมชนคือการ อัปโหลดไฟล์ไปยัง GCS แล้วรีเฟรชรายงาน Data Studio ซึ่งใช้งานได้ แต่หมายความว่าคุณอาจต้องเสียเวลาไปกับการรอให้เห็นการเปลี่ยนแปลง dscc-gen ช่วยให้เวิร์กโฟลว์เห็นการเปลี่ยนแปลงโค้ดการแสดงภาพข้อมูลได้ทันที ซึ่งช่วยลด เวลาที่ใช้ในการเขียนการแสดงภาพข้อมูลจากชุมชน
หากต้องการเริ่มต้นใช้งาน ให้ตรวจสอบว่าได้ติดตั้ง npm 5.2.0 ขึ้นไป และ gsutil แล้ว จากนั้นเรียกใช้คำสั่งต่อไปนี้
npx @google/dscc-gen viz
การกำหนดค่าครั้งแรก
dscc-gen มาพร้อมกับชุดข้อมูลในเครื่องเริ่มต้น ซึ่งอาจไม่ใช่ข้อมูลที่คุณต้องการแสดงภาพ หากต้องการอัปเดตชุดข้อมูลนี้ให้ตรงกับความต้องการ ให้ทำดังนี้
- อัปเดตการกำหนดค่าที่
src/index.json - วิ่ง
npm run update_messageซึ่งจะทำให้การแสดงภาพข้อมูลถูกนำไปใช้กับบัคเก็ตdevที่แสดงข้อความในรูปแบบที่คัดลอกได้ง่าย - สร้างรายงานใหม่ และเชื่อมต่อกับชุดข้อมูลที่เป็นตัวแทนของ ข้อมูลที่คุณต้องการแสดงภาพ
- เพิ่มการแสดงภาพข้อมูลจากชุมชนโดยใช้บัคเก็ต
devเป็นรหัสคอมโพเนนต์ - คัดลอกเนื้อหาของการแสดงภาพข้อมูลไปยัง
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 ให้แก้ไขพารามิเตอร์ในสคริปต์ update_message ใน
package.json จาก -f object เป็น -f table
Codelab
หากต้องการดูวิธีใช้เครื่องมือ ให้ดู dscc-gen codelab
