إنشاء عروض مرئية مخصّصة في Looker Studio

1. مقدمة

تتيح لك أداة Looker Studio إنشاء لوحات بيانات تفاعلية مباشرة تتضمّن عروضًا مرئية رائعة للبيانات، وذلك مجانًا. يمكنك استرداد بياناتك من مجموعة متنوعة من المصادر وإنشاء عدد غير محدود من التقارير في Looker Studio، مع إمكانات التعديل والمشاركة الكاملة. لقطة الشاشة التالية هي مثال على تقرير Looker Studio:

( انقر هنا لعرض نموذج التقرير هذا في Looker Studio)

توفّر أداة Looker Studio عدة أنواع مضمّنة من الرسوم البيانية، بما في ذلك الرسوم البيانية الخطية والشريطية والدائرية والرسوم البيانية للنقاط المبعثرة. تتيح لك العروض المرئية من إنشاء المنتدى إنشاء واستخدام عروض مرئية مخصّصة بلغة JavaScript في Looker Studio. يمكنك أيضًا مشاركة العروض المرئية من المنتدى مع الآخرين ليتمكّنوا من استخدامها مع بياناتهم.

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

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

كيف يعمل العرض المرئي لبيانات المنتدى في Looker Studio
كيفية إنشاء عرض مرئي لبيانات المنتدى باستخدام مكتبة ds-component المساعدة (dscc)
كيفية استخدام العرض المرئي لبيانات المنتدى في تقرير Looker Studio

المتطلبات

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

إمكانية الوصول إلى الإنترنت ومتصفّح ويب
حساب Google
يجب أن يكون لديك إذن الوصول إلى حزمة تخزين في Google Cloud Platform.
معرفة JavaScript

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

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

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

أريد معرفة المزيد عن Looker Studio.

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

أحاول دمج Looker Studio مع منصة أخرى.

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

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

تصفُّح سريع فقط

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

كيف تقيّم تجربتك مع Looker Studio؟

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

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

أستخدمه من حين لآخر.

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

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

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

المطوِّر

مصمّم / أخصائي تجربة المستخدم:

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

عالِم بيانات أو مهندس بيانات:

خبير في التسويق ووسائل التواصل الاجتماعي وتحليلات الأداء الرقمي

غير ذلك

ما هي مكتبات العرض المرئي JavaScript التي تهمّك؟

D3.js

أدوات الرسم البياني من Google

Chart.js

Leaflet

Highcharts

Plot.ly

غير ذلك

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

3- نظرة عامة على العروض المرئية لبيانات المنتدى

تتيح لك تصورات المنتدى في Looker Studio إنشاء تصورات JavaScript مخصّصة واستخدامها في لوحات البيانات.

في هذا الدرس التطبيقي حول الترميز، ستنشئ عرضًا مرئيًا لبيانات المنتدى على شكل جدول يتيح استخدام سمة واحدة ومقياس واحد وتنسيق عناوين الجدول.

4. سير عمل تطوير العرض المرئي لبيانات المنتدى

لإنشاء العرض المرئي لبيانات المنتدى، تحتاج إلى الملفات التالية في حزمة تخزين على Google Cloud Platform، والتي ستنشئها في خطوة لاحقة:

اسم الملف	نوع الملف	الغرض
manifest.json*	JSON	البيانات الوصفية حول التمثيل المرئي ومواقع جميع موارد التمثيل المرئي
viz-codelab.json	JSON	خيارات إعداد البيانات والأسلوب في "لوحة الخصائص"
viz-codelab.js	JavaScript	رمز JavaScript لعرض التمثيل المرئي
viz-codelab.css (اختياري)	CSS	أنماط CSS للعرض المرئي

*البيان هو الملف الوحيد الذي يتضمّن اسمًا مطلوبًا. يمكن تسمية الملفات الأخرى بشكل مختلف، طالما تم تحديد اسمها أو موقعها الجغرافي في ملف البيان.

5- كتابة عرض مرئي لعبارة "Hello, world!‎"

في هذا القسم، ستضيف الرمز المطلوب لعرض تصور بسيط لعبارة Hello, world!.

كتابة مصدر JavaScript الخاص بالتصوّر

الخطوة 1: نزِّل ملف dscc.min.js من صفحة مكتبة عناصر Looker Studio المتاحة للجميع (dscc) وانسَخه إلى دليل العمل.

الخطوة 2: انسخ الرمز التالي في محرّر نصوص واحفظه باسم viz-codelab-src.js في دليل العمل المحلي.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

إعداد ملف حزمة JavaScript

الخطوة 3: ادمج كل JavaScript المطلوب في ملف واحد عن طريق نسخ محتوى مكتبة أداة المساعدة في العرض المرئي (dscc.min.js) وملف viz-codelab-src.js في ملف جديد باسم viz-codelab.js. يمكن تنفيذ الأوامر التالية لدمج الملفات. كرِّر هذه الخطوة في كل مرة تعدّل فيها رمز التصور المصدر.

نص الربط في نظام التشغيل Linux/Mac

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

نص برمجي لدمج ملفات Windows

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. كتابة CSS للعرض المرئي

يحدّد ملف CSS نمط التصور وهو اختياري. انسخ CSS التالي واحفظه باسم viz-codelab.css.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. كتابة إعدادات JSON

يحدّد إعداد التصوّر سمات البيانات والأسلوب التي يتيحها ويتطلّبها التصوّر. يتطلّب هذا التصوّر في هذا الدرس العملي حول الترميز بعدًا واحدًا ومقياسًا واحدًا، ويتضمّن عنصر نمط واحدًا لاختيار لون التعبئة. مزيد من المعلومات عن السمات والمقاييس

انسخ الرمز التالي واحفظه باسم viz-codelab.json.لمعرفة المزيد عن الخصائص التي يمكنك ضبطها، راجِع مرجع إعدادات العرض المرئي الخاص بالمنتدى.

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. إنشاء مشروع ومجموعة تخزين على السحابة الإلكترونية

الخطوة 1: إنشاء مشروع على Google Cloud Platform (GCP) أو استخدام مشروع حالي

الخطوة 2: إنشاء حزمة في Google Cloud Platform فئة التخزين المقترَحة هي "إقليمية". يمكنك الانتقال إلى أسعار Cloud Storage لمعرفة تفاصيل حول المستويات المجانية. ملاحظة: من غير المرجّح أن تتكبّد أي تكاليف مقابل مساحة تخزين العرض المرئي لفئة التخزين الإقليمي.

الخطوة 3: سجِّل اسم الحزمة أو مسارها، بدءًا من القسم الذي يلي الحِزم/. يُشار إلى المسار باسم "معرّف المكوّن" في Looker Studio، ويُستخدَم لتحديد عنصر مرئي ونشره.

9- كتابة ملف manifest.json

يوفّر ملف البيان معلومات حول موقع العرض المرئي وموارده. يجب أن يكون اسمه "manifest.json"، ويجب أن يكون موجودًا في الحزمة أو المسار الذي تم إنشاؤه في الخطوة السابقة، وهو المسار نفسه المستخدَم لمعرّف المكوّن.

انسخ الرمز التالي في محرر نصوص واحفظه باسم manifest.json.

لمزيد من المعلومات حول ملف البيان، يُرجى الاطّلاع على مستندات مرجع ملف البيان.

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. تحميل ملفات التمثيل المرئي إلى Google Cloud Storage

حمِّل الملفات manifest.json وviz-codelab.js وviz-codelab.json وviz-codelab.css إلى حزمة Google Cloud Storage باستخدام واجهة الويب أو أداة سطر الأوامر gsutil. كرِّر هذه العملية في كل مرة تعدّل فيها التمثيل المرئي.

أوامر التحميل في gsutil

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. اختبار "العرض المرئي من إعدادات المنتدى" في Looker Studio

إنشاء تقرير وإضافة بيانات

الخطوة 1: انسخ عنوان URL لمجموعة البيانات النموذجية الخاصة بـ "الرسومات البيانية من إعدادات المنتدى". يمكنك بدلاً من ذلك استخدام أي مصدر بيانات تفضّله وتخطّي الخطوات التالية.

الخطوة 2: تسجيل الدخول إلى Looker Studio في أعلى يمين الصفحة، انقر على + إنشاء، ثم اختَر تقرير.

الخطوة 3: ستظهر لك أداة "محرّر التقارير"، مع فتح لوحة إضافة بيانات إلى التقرير.

الخطوة 4: في علامة التبويب الربط بالبيانات، اختَر أداة الربط جداول بيانات Google من Google.

الخطوة 5: انقر على عنوان URL وألصِق عنوان URL لجدول بيانات Google من الخطوة 1.

الخطوة 6: في أسفل يسار الصفحة، انقر على إضافة.

الخطوة 7: إذا طُلب منك تأكيد أنت على وشك إضافة بيانات إلى هذا التقرير، انقر على إضافة إلى التقرير. يتم إنشاء تقرير بدون عنوان وإضافة جدول تلقائي إلى التقرير مع بيانات نموذجية. يمكنك اختياريًا اختيار الجدول التلقائي وحذفه لكي يتبقى لديك تقرير فارغ.

إضافة العرض المرئي لبيانات المنتدى إلى التقرير

الخطوة 1: في شريط الأدوات، انقر على "الرسومات المرئية والمكوّنات من إعداد المنتدى" .

الخطوة 2: انقر على + استكشاف المزيد لفتح "معرض المنتدى".

الخطوة 3: انقر على إنشاء تمثيلك المرئي.

الخطوة 4: ضمن اختبار وإضافة العرض المرئي لبيانات المنتدى، أدخِل مسار ملف البيان وانقر على إرسال. مسار ملف البيان هو اسم حزمة Google Cloud Storage ومسارها اللذان يشيران إلى موقع ملف بيان التمثيل المرئي، مع إضافة البادئة gs://.، على سبيل المثال: gs://community-viz-docs/viz-codelab. إذا أدخلت مسار ملف بيان صالحًا، من المفترض أن يتم عرض بطاقة تمثيل مرئي.

الخطوة 5: انقر على بطاقة التمثيل المرئي لإضافتها إلى تقريرك.

الخطوة 6: إذا طُلب منك ذلك، امنح موافقتك للسماح بعرض التمثيل المرئي.

الخطوة 7: يمكنك اختياريًا تعديل السمة والمقياس المحدّدين للجدول. إذا كنت تستخدم مجموعة عيّنات البيانات المقدَّمة، اضبط السمة على البلد والمقياس على عدد السكان. لن يكون لهذا أي تأثير على التمثيل المرئي حتى وقت لاحق في الدرس العملي.

تعرض لوحة الخصائص على الجانب الأيسر العناصر التي تم ضبطها في viz-codelab.json.

ضمن لوحة الإعداد، يتيح التمثيل البصري استخدام سمة واحدة ومقياس واحد.

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

12. عرض البيانات كجدول

في هذا القسم، ستعدّل التصور لعرض مجموعة البيانات النموذجية الخاصة بـ "تصورات المنتدى" كجدول.

تتوفّر البيانات المطلوب عرضها في العنصر tables، ويتم تنظيمها استنادًا إلى عملية التحويل التي يحدّدها التصوّر. في هذا الدرس التطبيقي حول الترميز، طلب التمثيل المرئي تنسيق الجدول (tableTransform) الذي يتضمّن العنصر headers والعنصر rows الذي يحتوي على جميع البيانات التي نحتاج إليها لعرض جدول.

الخطوة 1: استبدِل محتوى viz-codelab-src.js بالرمز البرمجي أدناه.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

الخطوة 2: أعدّ ملف حزمة JavaScript، ثم حمِّل ملفات التمثيل المرئي واكتب فوقها في Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير Looker Studio لإعادة تحميل واختبار العرض المرئي لبيانات المنتدى. يعرض الجدول الآن البيانات (أي جدول بيانات Google) ويعرض أعمدة العناوين استنادًا إلى السمة والمقياس المحدّدين. غيِّر حجم التمثيل المرئي للاطّلاع على جميع الصفوف.

13. تطبيق تغييرات الأنماط بشكل ديناميكي

في هذا القسم، ستعدّل التمثيل المرئي لتنسيق عنوان الجدول استنادًا إلى لون التعبئة الذي تم اختياره في لوحة النمط.

تتوفّر حالة جميع عناصر النمط في الكائن style، حيث يتم تحديد مفتاح كل عنصر استنادًا إلى إعدادات نمط التمثيل المرئي (viz-codelab.json). في هذا القسم، ستحصل على لون التعبئة المحدّد وتستخدمه لتعديل لون خلفية عنوان الجدول.

الخطوة 1: استبدِل الرمز في ملف viz-codelab-src.js بالرمز أدناه.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

الخطوة 2: أعدّ ملف حزمة JavaScript، ثم حمِّل ملفات التمثيل المرئي واكتب فوقها في Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير Looker Studio لإعادة تحميل واختبار العرض المرئي لبيانات المنتدى.

الخطوة 4: ضمن لوحة النمط، استخدِم عنصر التحكّم في النمط لون خلفية العنوان لتغيير لون خلفية عنوان الجدول.

تهانينا! لقد أنشأت الآن العرض المرئي لبيانات المنتدى في Looker Studio. بهذا نكون قد وصلنا إلى نهاية هذا الدرس التطبيقي حول الترميز. لنطّلع الآن على الخطوات التالية التي يمكنك اتّخاذها.

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

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

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

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

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

مراجع إضافية

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

نوع المرجع	ميزات المستخدم	ميزات المطوّرين
الوثائق	مركز المساعدة	مستندات المطوّرين
الأخبار والتحديثات	الاشتراك في Looker Studio > إعدادات المستخدم	القائمة البريدية للمطوّرين
طرح أسئلة	منتدى المستخدمين	Stack Overflow [looker-studio] منتدى مطوّري Looker Studio
أمثلة	معرض التقارير	مستودع البرامج المفتوحة المصدر

إنشاء عروض مرئية مخصّصة في Looker Studio تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

1. مقدمة

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

المتطلبات

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

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

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

كيف تقيّم تجربتك مع Looker Studio؟

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

ما هي مكتبات العرض المرئي JavaScript التي تهمّك؟

3- نظرة عامة على العروض المرئية لبيانات المنتدى

4. سير عمل تطوير العرض المرئي لبيانات المنتدى

5- كتابة عرض مرئي لعبارة "Hello, world!‎"

كتابة مصدر JavaScript الخاص بالتصوّر

viz-codelab-src.js

إعداد ملف حزمة JavaScript

نص الربط في نظام التشغيل Linux/Mac

نص برمجي لدمج ملفات Windows

6. كتابة CSS للعرض المرئي

viz-codelab.css

7. كتابة إعدادات JSON

viz-codelab.json

8. إنشاء مشروع ومجموعة تخزين على السحابة الإلكترونية

9- كتابة ملف manifest.json

manifest.json

10. تحميل ملفات التمثيل المرئي إلى Google Cloud Storage

أوامر التحميل في gsutil

11. اختبار "العرض المرئي من إعدادات المنتدى" في Looker Studio

إنشاء تقرير وإضافة بيانات

إضافة العرض المرئي لبيانات المنتدى إلى التقرير

12. عرض البيانات كجدول

viz-codelab-src.js

13. تطبيق تغييرات الأنماط بشكل ديناميكي

viz-codelab-src.js

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

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

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

مراجع إضافية

إنشاء عروض مرئية مخصّصة في Looker Studio