إنشاء عروض مرئية للمنتدى في "مركز البيانات" باستخدام dscc-gen

1. مقدمة

يتيح لك مركز البيانات من Google إنشاء لوحات بيانات ديناميكية وتفاعلية تتضمّن عروضًا مرئية جميلة للبيانات، وذلك بدون أي تكلفة. العروض المرئية من المنتدى هي ميزة في "مركز البيانات" تتيح لك إنشاء عروض مرئية مخصّصة باستخدام JavaScript تتكامل مع تقارير "مركز البيانات".

أهداف الدورة التعليمية

في هذا الدرس التطبيقي، ستتعرّف على ما يلي:

طريقة عمل "تصميم مرئي للمنتدى" في "مركز البيانات من Google"
كيفية إنشاء "تصور بيانات في المنتدى" باستخدام أداة النماذج المستندة إلى سطر الأوامر
كيفية استخدام مكتبات تصور JavaScript لإنشاء "تصورات من إنشاء المنتدى"
كيفية دمج "العناصر المرئية من المنتدى" في لوحة بيانات "مركز البيانات"

المتطلبات

لإكمال هذا الدرس التطبيقي حول الترميز، ستحتاج إلى:

إمكانية الوصول إلى الإنترنت ومتصفّح ويب ونافذة طرفية ومحرّر النصوص المفضّل لديك
حساب Google
الوصول إلى حزمة Google Cloud Storage
معرفة Javascript وNode.js وسطر الأوامر

يفترض هذا الدرس التطبيقي حول الترميز ما يلي:

لقد أنشأتَ من قبل "مخططًا بيانيًا من إعداد المنتدى" (يجب إضافة رابط إلى الدرس التطبيقي الأول)
لديك معرفة بخدمة Google Cloud Storage

للبدء، أنشئ نسخة من هذا التقرير من خلال النقر على في أعلى يسار الصفحة. أبقِها مفتوحة في علامة تبويب أخرى أثناء تنفيذ الخطوات في الدرس العملي.

2. استطلاع سريع

لماذا اخترت هذا الدرس التطبيقي حول الترميز؟

أنا مهتم بتصوير البيانات بشكل عام.

أريد معرفة المزيد عن "مركز البيانات"

أريد إنشاء "مرئيات المنتدى" الخاصة بي.

أحاول دمج "مركز البيانات" مع منصة أخرى.

أنا مهتمّ بحلول Google Cloud.

كيف تخطّط لاستخدام هذا الدرس العملي/البرنامج التعليمي؟

قراءة المحتوى وإكمال التمارين

قراءة المحتوى بشكل سريع فقط

ما هو تقييمك لتجربتك مع "مركز البيانات"؟

لم أسمع بها من قبل

أعرفها ولكنّي لا أستخدمها

أستخدمها بانتظام.

أنا مستخدم متمرّس.

ما هو الوصف الأنسب لخلفيتك؟

مطوّر

محلّل أعمال / بيانات

عالم بيانات / مهندس بيانات

محلّل مالي

خبير في التسويق / وسائل التواصل الاجتماعي / الإحصاءات الرقمية

محلّل أعمال

مصمّم

غير ذلك

انتقِل إلى الصفحة التالية لإرسال معلومات الاستطلاع.

3- تطوير "العرض المرئي لبيانات المنتدى" باستخدام dscc-gen

dscc-gen

‫dscc-gen هي أداة سطر أوامر توفّر نماذج وسير عمل محدّدة مسبقًا لـ "عناصر التمثيل المرئي من إنشاء المنتدى" و"موصّلات البيانات من إنشاء المنتدى". يوفّر نموذج "الرسومات البيانية من إعداد المنتدى" رسمًا بيانيًا جاهزًا للاستخدام وسير عمل يتيح لك الاطّلاع فورًا على التغييرات في رمز الرسم البياني، بالإضافة إلى نصوص برمجية للتحقّق من صحة الرسومات البيانية وإنشائها ونشرها.

الإعداد

تستخدم dscc-gen أداة gsutil في نصوص البرامج الخاصة بالنشر، وnpm وwebpack لإنشاء رمز JavaScript الخاص بـ "الرسومات البيانية من إنشاء المنتدى".

تثبيت npm على الكمبيوتر
اتّبِع دليل البدء السريع في gsutil وأعِدّ حزمة Google Cloud Storage
انتقِل إلى دليل محلي تريد تحديد موقع مشروعك فيه

4. بدء مشروع جديد خاص بميزة "الرسومات البيانية من إعداد المنتدى" في "حملات التسوّق الذكية" من الجيل التالي

افتح وحدة طرفية ونفِّذ الأمر التالي:

npx @google/dscc-gen viz

سيطلب منك dscc-gen إدخال اسم مشروع وموقع تخزين في GCS "للتطوير" وموقع تخزين "للإنتاج". أدخِل الموقع الجغرافي كمعرّف موارد منتظم (URI) باستخدام البروتوكول gs، مثل gs://my-gs-project/example-dev. يمكن أن يكون "الموقع الجغرافي" إما حزمة Cloud Storage أو مجلدًا داخل تلك الحزمة. يجب أن يكون موقعا التخزين مختلفَين. ستتأكّد الأداة من إمكانية وصولك إلى القيم التي تُدخلها. إذا لم تكن المواقع الجغرافية متوفّرة، سيتم إنشاؤها لك.

بعد أن ينشئ dscc-gen رسمًا بيانيًا جديدًا من "الرسومات البيانية من إنشاء المجتمع"، يعرض تعليمات حول كيفية البدء. ستبدو الوحدة الطرفية على النحو التالي (المدخلات بخط مائل غليظ):

$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...

Created new community viz: barchart

cd barchart and npm run start to begin working on your viz!

ستعدّل الملفات في src/، وتحديدًا index.js وindex.json وindex.css، لكتابة التمثيل المرئي.

تتيح لك الملفات في dist/ معاينة التمثيل المرئي محليًا في المتصفّح. يُستخدَم webpack.config.js لتشغيل التمثيل البصري محليًا. تقدّم README.md نظرة عامة على ملفات النماذج والأوامر.

5- معاينة التمثيل البصري محليًا

اتّبِع التعليمات المقترَحة ونفِّذ الأوامر التالية في الوحدة الطرفية:

cd <folder name>

npm run start

سيفتح المتصفّح صفحة ويب على النحو التالي:

يمكنك الاطّلاع على مزيد من المعلومات في الخطوة التالية.

6. [معلومات] طريقة عمل سير عمل dscc-gen

يتضمّن نموذج العرض المرئي dscc-gen عرضًا مرئيًا صالحًا وتعليمات حول كيفية استخدام النموذج. في ما يلي الوظيفة الرئيسية:

تعديل الرسالة المحلية: يتم تضمين رسالة نموذجية في النموذج، ولكن من المحتمل ألا تعكس حالة الاستخدام التي تريد توفيرها. عليك تنزيل بيانات نموذجية تعكس التمثيل المرئي الذي تريد إنشاؤه.

سير عمل التطوير المحلي: باستخدام البيانات من تعديل البيانات المحلية، يمكنك كتابة الرمز واختباره محليًا.

إنشاء عملية العرض ونشرها: أنشئ الرمز البرمجي وحمِّله إلى حِزم Google Cloud Storage.

تحميل التمثيل المرئي في "مركز البيانات": أضِف التمثيل المرئي إلى تقرير "مركز البيانات".

7. تحديد إعداد

ملف الإعداد هو العقد بينك (مطوّر التمثيل المرئي) ومحرّر التقارير الذي يستخدم التمثيل المرئي. يحدّد هذا الملف الخيارات المتاحة بعد تحميل التمثيل المرئي في "مركز البيانات".

بالنسبة إلى هذا التمثيل المرئي للرسم البياني الشريطي، سيتضمّن الإعداد سمة واحدة ومقياسًا واحدًا، بالإضافة إلى عنصر نمط يسمح لمحرِّر التقرير بتغيير نمط الرسم البياني الشريطي.

استبدِل محتوى src/index.json بما يلي. تأكَّد من تضمين جميع الأقواس. إذا كنت تعيد كتابته، احرص على الانتباه إلى الفرق بين الأقواس المربّعة والمعقوفة وبنية التداخل.

index.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "dimension",
          "label": "Dimensions",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "metric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }        
      ]
    }
  ],
  "style": [
    {
      "id": "barStyling",
      "label": "Bar Styles",
      "elements": [
        {
          "id": "barColor",
          "label": "Bar Color",
          "type": "FILL_COLOR",
          "defaultValue": {
            "color": "#1E555C"
          }
        }
      ]
    }
  ]  
}

8. تنزيل الرسالة المعدَّلة

لتعديل البيانات المخزّنة محليًا، نفِّذ الأمر التالي:

npm run update_message

يجب أن تبدو الوحدة الطرفية على النحو التالي:

barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object

Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev

ينشر هذا الأمر تصورًا في "مركز البيانات" يطبع البيانات التي تم تلقّيها في تصور محلي. وتطبع النصوص البرمجية موقع نشر التصور (المميّز أعلاه). ستستخدم هذا الموقع الجغرافي لتحميل التمثيل المرئي في "مركز البيانات".

لتحميل العرض المرئي، افتح التقرير الذي نسخته سابقًا.

الانتقال إلى "تعديل التقرير"
انقر على "الرسومات البيانية والمكوّنات من إنشاء المنتدى" في شريط الأدوات

انقر على "استكشاف المزيد"

انقر على "إنشاء تصورك الخاص"
أدخِل مسار ملف البيان (الموقع الجغرافي gs://... الذي تمّت طباعته في نافذة الأوامر) وانقر على "إرسال".

انقر على البطاقة المعروضة لإضافتها إلى تقريرك

يجب أن يعرض التمثيل المرئي بيانات JSON على النحو التالي:

انسخ الرسالة بأكملها من خلال النقر بزر الماوس الأيمن واختيار "الكل"، ثم استبدِل محتوى src/localMessage.js بالمحتوى الذي نسخته. احفظ الملف.

لن يظهر بعد ذلك التمثيل المرئي الذي يتم تشغيله محليًا في المتصفّح، وإذا نظرت في وحدة التحكّم، سيظهر لك خطأ.

9- اكتب رمز JavaScript لرسم بياني شريطي

أولاً، شغِّل الأمر التالي لإضافة d3.js كعنصر تابع.

npm install d3

بعد ذلك، استبدِل src/index.js بالرمز التالي. تظهر التغييرات من الخطوة الأخيرة بخط غليظ.

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;

const drawViz = (message) => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]));

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

إذا كان الخادم المحلي لا يزال قيد التشغيل، تحقَّق من المتصفّح. يجب أن تعرض صفحة الويب الخاصة بالتطوير المحلي الآن رسمًا بيانيًا شريطيًا، مثل الرسم البياني أدناه.

10. بيان التحديث (اختياري)

يحتوي بيان التمثيل البصري على بيانات وصفية حول التمثيل البصري، بالإضافة إلى موقع JavaScript والضبط وCSS الخاص بالتمثيل البصري. عدِّل القيم في ملف البيان، وسيتم استخدامها لتزويد المستخدم النهائي بمعلومات حول التصور.

عدِّل ملف src/manifest.json لوصف التمثيل المرئي. في ما يلي نموذج لملف البيان.

src/manifest.json

{
  "name": "Bar Chart",
  "organization": "[My name]",
  "description": "Bar chart",
  "logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
  "organizationUrl": "https://github.com/googledatastudio/",
  "supportUrl": "http://github.com/googledatastudio/community-visualizations",
  "privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
  "termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
  "packageUrl": "",
  "devMode": "DEVMODE_BOOL",
  "components": [
    {
      "id": "Bar chart",
      "name": "Bar chart",
      "description": "My first Community Visualization",
      "iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
      "resource": {
        "js": "YOUR_GCS_BUCKET/index.js",
        "config": "YOUR_GCS_BUCKET/index.json",
        "css": "YOUR_GCS_BUCKET/index.css"
      }
    }
  ]
}

11. نشر التمثيل البصري

في src/index.js، غيِّر قيمة الثابت LOCAL إلى "false". من المفترض أن يتوقّف العرض المرئي في المتصفّح عن العمل. يظهر سطر الرمز الذي تم تغييره بخط غليظ. يضبط هذا القيمة المنطقية ما إذا كان يجب أن يستخدم الرمز ملف بيانات "محليًا" أو البيانات الواردة من مركز البيانات.

src/index.js (abridged)

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;

const drawViz = (message) => {...}

بعد ذلك، شغِّل الأمر التالي في الوحدة الطرفية:

npm run build:dev
npm run push:dev

تجمع حزمة الأمر build:dev عناصر JavaScript التابعة في ناتج غير مصغّر، وتستبدل القيم في ملف البيان لإيقاف التخزين المؤقت والإشارة إلى حزمة "dev" التي سبق أن أعددتها.

يحمّل الأمر push:dev موارد التصور إلى حزمة "dev" التي أعددتها في الخطوة 1، ويطبع موقع الحزمة في وحدة التحكّم.

أعِد تحميل تقرير "مركز البيانات". من المفترض أن يظهر لك رسم بياني شريطي. جرِّب تغيير خيارات البيانات والنمط في لوحة السمات. سيؤدي تغيير البيانات إلى تغيير الأشرطة. ومع ذلك، لن يعمل بعد أداة اختيار نمط لون الشريط.

12. استخدام اختيارات الألوان في "محرِّر التقارير" في الرسم البياني الشريطي

لتعديل الرمز برمجيًا على جهازك، عليك أولاً تعديل المتغير الثابت LOCAL في src/index.js إلى true. بعد ذلك، أضِف دالة جديدة باسم styleVal()، وعدِّل الرمز في drawViz(). من المفترض أن يبدو ملف src/index.js على النحو التالي:

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;

// parse the style value
const styleVal = (message, styleId) => {
  if (typeof message.style[styleId].defaultValue === "object") {
    return message.style[styleId].value.color !== undefined
      ? message.style[styleId].value.color
      : message.style[styleId].defaultValue.color;
  }
  return message.style[styleId].value !== undefined
    ? message.style[styleId].value
    : message.style[styleId].defaultValue;
};

const drawViz = message => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // get the user-selected bar color
  let barColor = styleVal(message, "barColor");

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]))
    .attr("fill", barColor);

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .attr("fill", barColor)
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

احفظ الملف src/index.js، ثم ارجع إلى جلسة المتصفّح المحلية. يمكنك الاطّلاع على التطبيق وهو يعمل على جهازك، ثم تغيير قيمة الثابت LOCAL إلى false.

حمِّل الملفات المعدَّلة إلى Google Cloud Storage من خلال تنفيذ ما يلي:

npm run build:dev
npm run push:dev

أعِد تحميل تقرير "مركز البيانات". من المفترض أن تتمكّن الآن من تغيير لون الأشرطة.

13. عمليات نشر الإنتاج

عمليات نشر الإنتاج

بعد الانتهاء من عملية التصوّر، تأكَّد من أنّ الثابت LOCAL في src/index.js مضبوط على false، ثم نفِّذ العملية.

npm run build:prod
npm run push:prod

سيؤدي ذلك إلى نشر ملفاتك في موقع حزمة GCS "prod". بالإضافة إلى ذلك، سيتم تفعيل التخزين المؤقت، وسيتم تصغير حزمة JavaScript بشكل مناسب.

كما كان الحال من قبل، سيتم عرض موقع عملية النشر في وحدة التحكّم. استخدِم "مسار ملف البيان" هذا لتحميل التمثيل المرئي "prod" في تقرير مركز البيانات.

تهانينا! لقد أنشأت للتو أول "مخطط مرئي للمنتدى" باستخدام أداة dscc-gen.

14. الخطوات التالية

توسيع نطاق التصوّر

إضافة تفاعلات إلى التمثيل البصري
مزيد من المعلومات حول عناصر الأنماط المتاحة وإضافة نمط إضافي إلى التمثيل المرئي

إنجاز المزيد باستخدام "الرسومات البيانية من إعداد المجتمع"

راجِع مراجع مكتبة أدوات المساعدة في DSCC وملف البيان وملف الإعداد.
إرسال التمثيل المرئي إلى معرض العروض المرئية لبيانات المنتدى
أنشئ موصّل بيانات من إنشاء المنتدى لأداة "مركز البيانات".

مراجع إضافية

في ما يلي مراجع مختلفة يمكنك الوصول إليها لمساعدتك في التعرّف أكثر على المواد التي تم تناولها في هذا الدرس التطبيقي حول الترميز.

نوع المرجع	ميزات المستخدم	ميزات المطوّرين
الوثائق	مركز المساعدة	مستندات المطوّرين
الأخبار والتحديثات	الاشتراك في مركز البيانات > إعدادات المستخدم	القائمة البريدية للمطوّرين
طرح أسئلة	منتدى المستخدمين	‫Stack Overflow [google-data-studio]منتدى مطوّري "مركز البيانات"
الفيديوهات	"مركز البيانات" على YouTube	قريبًا!
أمثلة	معرض التقارير	مستودع البرامج المفتوحة المصدر