ขั้นตอนทั่วไปในการดูการเปลี่ยนแปลงในการแสดงภาพข้อมูลจากชุมชนคือการอัปโหลดไฟล์ไปยัง 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เป็นรหัสคอมโพเนนต์ - คัดลอกเนื้อหาของการแสดงภาพไปยัง
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
หากต้องการดูวิธีใช้เครื่องมือ โปรดดู codelab ของ dscc-gen
