ربط جميع بياناتك وعرضها بشكل مرئي في "مركز البيانات"

1. مقدمة

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

2f296fddf6af7393.png

( انقر هنا لعرض نموذج التقرير هذا في "مركز البيانات")

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

يمكنك استخدام "أدوات ربط المنتديات" في حالات استخدام مختلفة:

  • تعرض بيانات من منصة تجارية (مثل وسائل التواصل الاجتماعي أو التسويق أو التحليلات أو غير ذلك)
  • أنت تصوّر بيانات المؤسسة المحلية (مثل بيانات المبيعات من قاعدة بيانات MySQL محلية).
  • توفير طريقة لعملائك لتصوُّر بياناتهم من خدمتك
  • أنت بصدد إنشاء منصة إعداد تقارير بضغطة زر
  • تعرض بياناتك الخاصة من مصدر على الويب (مثل إنشاء لوحة بيانات Google Fit)

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

  • طريقة عمل موصّل بيانات من إنشاء المنتدى في مركز البيانات
  • كيفية استخدام "برمجة تطبيقات Google" لإنشاء موصّل بيانات من إنشاء المنتدى
  • كيفية استخدام موصّلات البيانات من إنشاء المنتدى في "مركز البيانات"

المتطلبات

  • إمكانية الوصول إلى الإنترنت ومتصفّح ويب
  • حساب Google
  • معرفة أساسية بلغة JavaScript وواجهات برمجة تطبيقات الويب

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

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

أنا مهتم بتصوير البيانات بشكل عام. أريد معرفة المزيد عن "مركز البيانات" أريد إنشاء موصّل خاص بالمنتدى. أحاول دمج "مركز البيانات" مع منصة أخرى. أنا مهتمّ بحلول Google Cloud.

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

التصفّح السريع فقط القراءة وإكمال التمارين

ما هو تقييمك لمدى معرفتك بـ "مركز البيانات"؟

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

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

مطوِّر محلّل أعمال / محلّل مالي / محلّل بيانات عالم بيانات / مهندس بيانات خبير في التسويق / وسائل التواصل الاجتماعي / الإحصاءات الرقمية مصمّم غير ذلك

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

3- نظرة عامة على موصّلات البيانات من إنشاء المنتدى

تتيح موصّلات البيانات من إنشاء المنتدى في Data Studio إمكانية الربط مباشرةً من Data Studio بأي مصدر بيانات يمكن الوصول إليه على الإنترنت. يمكنك الربط بمنصات تجارية أو مجموعات بيانات متاحة للجميع أو بياناتك الخاصة المحلية. يمكن لأدوات ربط البيانات من إنشاء المستخدمين استرداد البيانات من خلال واجهات برمجة تطبيقات الويب وواجهات برمجة تطبيقات JDBC والملفات المسطّحة (CSV وJSON وXML) وخدمات Apps Script.

b25b8d6bea6da54b.png

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

4. سير عمل موصّل البيانات من إنشاء المنتدى

في أداة ربط أساسية من "أدوات ربط Community"، عليك تحديد أربع دوال:

  • getAuthType()
  • getConfig()
  • getSchema()
  • getData()

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

  • طريقة عمل أداة ربط المنتدى
  • خطوات مختلفة في سير العمل
  • عند استدعاء دوال مختلفة
  • الحالات التي تعرض فيها Data Studio واجهات مستخدم مختلفة
  • إجراءات المستخدم المتوقّعة في الخطوات المختلفة

يمكنك استئناف تجربة الترميز بعد مشاهدة الفيديو.

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

cc6688bf38749e5.png

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

5- إعداد مشروعك في "برمجة تطبيقات Google"

الخطوة 1: انتقِل إلى برمجة تطبيقات Google.

الخطوة 2: أنشئ مشروعًا جديدًا في "برمجة تطبيقات Google" من خلال النقر على + مشروع جديد في أعلى يمين الصفحة.

fb12d7318d0946cf.png

سيظهر لك مشروع أساسي يتضمّن دالة myFunction فارغة في الملف Code.gs.

b245ce5eb3dd2ee2.png

الخطوة 3: احذف الدالة myFunction.

الخطوة 4: أضِف اسمًا للمشروع:

  1. انقر على Untitled project في أعلى يمين الصفحة
  2. أدخِل عنوانًا للمشروع.

7172aebc181c91d4.png

ابدأ كتابة رمز الموصل في الملف Code.gs.

6. تحديد getAuthType()

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

بالنسبة إلى موصّل تنزيل npm الذي تنشئه، لا تحتاج إلى المصادقة باستخدام أي خدمة تابعة لجهة خارجية لأنّ واجهة برمجة التطبيقات التي تستخدمها لا تتطلّب أي مصادقة. انسخ الرمز التالي وأضِفه إلى ملف Code.gs:

Code.gs

var cc = DataStudioApp.createCommunityConnector();

function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

في هذا المثال، تشير إلى أنّ الموصل لا يتطلّب أي مصادقة تابعة لجهة خارجية (AuthTypes.NONE). للاطّلاع على جميع طرق المصادقة المتوافقة، يمكنك الرجوع إلى AuthType().

7. تحديد getConfig()

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

في شاشة الإعدادات، يمكنك تقديم معلومات أو الحصول على بيانات أدخلها المستخدم باستخدام عناصر النموذج التالية:

TEXTINPUT

عنصر الإدخال

مربّع نص بسطر واحد

TEXTAREA

عنصر الإدخال

مربّع نص متعدد الأسطر

SELECT_SINGLE

عنصر الإدخال

قائمة منسدلة تتضمّن خيارات اختيار واحد

SELECT_MULTIPLE

عنصر الإدخال

قائمة منسدلة لخيارات التحديد المتعدد

CHECKBOX

عنصر الإدخال

مربّع اختيار واحد يمكن استخدامه لتسجيل القيم المنطقية.

INFO

عنصر العرض

مربّع نص ثابت يمكن استخدامه لتقديم تعليمات أو معلومات للمستخدم.

استخدِم العنصر INFO لتقديم تعليمات للمستخدمين، والعنصر TEXTINPUT للحصول على اسم حزمة الإدخال من المستخدم. في الردّ getConfig()، ستجمّع عناصر النموذج هذه ضمن المفتاح configParams.

بما أنّ واجهة برمجة التطبيقات التي تربط بها تتطلّب التاريخ كمعلَمة، اضبط dateRangeRequired على true في استجابة getConfig(). يطلب ذلك من "مركز البيانات" توفير نطاقات زمنية مع جميع طلبات البيانات. إذا كان مصدر البيانات لا يتطلّب التاريخ كمعلَمة، يمكنك إغفال ذلك.

أضِف رمز getConfig() التالي إلى ملف Code.gs، أسفل الرمز الحالي الخاص بـ getAuthType():

Code.gs

function getConfig(request) {
  var config = cc.getConfig();
  
  config.newInfo()
    .setId('instructions')
    .setText('Enter npm package names to fetch their download count.');
  
  config.newTextInput()
    .setId('package')
    .setName('Enter a single package name')
    .setHelpText('e.g. googleapis or lighthouse')
    .setPlaceholder('googleapis');
  
  config.setDateRangeRequired(true);
  
  return config.build();
}

استنادًا إلى configParams هذه، عندما تستخدم أداة الربط في "مركز البيانات"، يمكنك توقّع ظهور شاشة إعدادات مشابهة لما يلي، ولكن سنتحدّث عن ذلك لاحقًا.

7de872f17e59e92.png

لِننتقل إلى الدالة التالية، وهي getSchema().

8. تحديد getSchema()

تستدعي خدمة Data Studio الدالة getSchema() للحصول على المخطط المرتبط بالإعداد الذي اختاره المستخدم للموصّل. استنادًا إلى الردّ المقدَّم من getSchema()، ستعرض أداة "مركز البيانات" شاشة الحقول للمستخدم مع إدراج جميع الحقول في أداة الربط.

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

  • اسم الحقل
  • نوع البيانات للحقل
  • المعلومات الدلالية

راجِع مرجع getSchema() و Field لاحقًا لمعرفة المزيد.

استنادًا إلى طريقة استرجاع الموصل، قد يكون المخطط ثابتًا أو يتم حسابه بشكل ديناميكي عند استدعاء getSchema(). سيتم توفير مَعلمات الضبط من getConfig() التي يحدّدها المستخدم في وسيطة request للدالة getSchema().

في هذا الدرس التطبيقي حول الترميز، لن تحتاج إلى الوصول إلى الوسيطة request. ستتعرّف على المزيد من المعلومات عن الوسيط request عند كتابة رمز لوظيفة getData() في القسم التالي.

بالنسبة إلى الموصل، يكون المخطط ثابتًا ويتضمّن الحقول الثلاثة التالية:

packageName

اسم حزمة npm التي يقدّمها المستخدم

downloads

عدد مرات تنزيل حزمة npm

day

تاريخ احتساب عدد عمليات التنزيل

في ما يلي رمز getSchema() للموصل. تجرّد الدالة المساعدة getFields() عملية إنشاء الحقول لأنّ كلتا الدالتين getSchema() وgetData() تحتاجان إلى هذه الوظيفة. أضِف الرمز التالي إلى ملف Code.gs:

Code.gs

function getFields(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;
  
  fields.newDimension()
    .setId('packageName')
    .setType(types.TEXT);
  
  fields.newMetric()
    .setId('downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);
  
  fields.newDimension()
    .setId('day')
    .setType(types.YEAR_MONTH_DAY);
  
  return fields;
}

function getSchema(request) {
  var fields = getFields(request).build();
  return { schema: fields };
}

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

c7cd7057b202be59.png

لننتقل الآن إلى الدالة الأخيرة، وهي getData().

9- تعريف getData() : الجزء 1

يستدعي مركز البيانات الدالة getData() كلما احتاج إلى استرجاع البيانات. استنادًا إلى الردّ الذي تقدّمه getData()، سيعرض "مركز البيانات" الرسومات البيانية ويعدّلها في لوحة البيانات. قد يتم استدعاء getData() أثناء الأحداث التالية:

  • يضيف المستخدم مخططًا إلى لوحة البيانات
  • يعدّل المستخدم رسمًا بيانيًا
  • اطّلاع المستخدم على لوحة البيانات
  • يعدّل المستخدم فلترًا أو عنصر تحكّم في البيانات مرتبطًا
  • يحتاج "مركز البيانات" إلى عيّنة من البيانات

ليس عليك نسخ أي رمز من هذه الصفحة لأنّك ستنسخ الرمز المكتمل

getData()

الرمز في خطوة لاحقة.

فهم العنصر request

يرسل "مركز البيانات" العنصر request مع كل طلب getData(). راجِع بنية العنصر request أدناه. سيساعدك ذلك في كتابة الرمز البرمجي للدالة getData().

بنية العنصر request

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}
  • سيحتوي الكائن configParams على قيم الإعدادات للمعلمات المحدّدة في getConfig() والتي يضبطها المستخدم.
  • سيحتوي الكائن scriptParams على معلومات ذات صلة بتنفيذ الموصل، ولن تحتاج إلى استخدامه في هذا الدرس العملي.
  • سيتضمّن dateRange النطاق الزمني المطلوب إذا تم طلبه في ردّ getConfig().
  • سيحتوي fields على قائمة بأسماء الحقول التي يتم طلب البيانات لها.

بالنسبة إلى الموصل، قد يبدو مثال request من الدالة getData() على النحو التالي:

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    startDate: '2017-07-16',
    endDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

بالنسبة إلى طلب getData() في request أعلاه، يتم طلب حقلَين فقط على الرغم من أنّ مخطط الموصّل يتضمّن حقولاً إضافية. ستحتوي الصفحة التالية على مثال للردّ على طلب getData() هذا وبنية الردّ العامة getData().

10. تعريف الدالة getData() : الجزء 2

في getData()الردّ، عليك تقديم كلّ من المخطّط والبيانات للحقول المطلوبة. عليك تقسيم الرمز إلى ثلاثة أقسام:

  • إنشاء مخطط للحقول المطلوبة
  • استرجاع البيانات وتحليلها من واجهة برمجة التطبيقات
  • تحويل البيانات التي تم تحليلها وتصفيتها للحصول على الحقول المطلوبة

ليس عليك نسخ أي رمز من هذه الصفحة لأنّك ستنسخ الرمز المكتمل

getData()

الرمز في الصفحة التالية.

هذا هو بنية getData() للموصل.

function getData(request) {

  // TODO: Create schema for requested fields.
  
  // TODO: Fetch and parse data from API.
  
  // TODO: Transform parsed data and filter for requested fields.

  return {
    schema: <filtered schema>,
    rows: <transformed and filtered data>
  };
}

إنشاء مخطط للحقول المطلوبة

// Create schema for requested fields
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

استرجاع البيانات وتحليلها من واجهة برمجة التطبيقات

سيكون عنوان URL الخاص بـ npm API بالتنسيق التالي:

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

أنشئ عنوان URL لواجهة برمجة التطبيقات باستخدام request.dateRange.startDate وrequest.dateRange.endDate وrequest.configParams.package التي يوفّرها "مركز البيانات". بعد ذلك، استرجِع البيانات من واجهة برمجة التطبيقات باستخدام UrlFetchApp(فئة Apps Script: reference). بعد ذلك، حلِّل الرد الذي تم جلبه.

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;

تحويل البيانات التي تم تحليلها وتصفيتها للحقول المطلوبة

سيكون الردّ من واجهة برمجة التطبيقات npm بالتنسيق التالي:

{
  downloads: [
    {
    day: '2014-02-27',
    downloads: 1904088
    },
    ..
    {
    day: '2014-03-04',
    downloads: 7904294
    }
  ],
  start: '2014-02-25',
  end: '2014-03-04',
  package: 'somepackage'
}

حوِّل الردّ من واجهة برمجة التطبيقات npm وقدِّم الردّ getData() بالتنسيق التالي. إذا كان هذا التنسيق غير واضح، يمكنك الاطّلاع على مثال الردّ في الفقرة التالية.

{
  schema: [
    {
      object(Field)
    }
  ],
  rows: [
    {
      values: [string]
    }
  ]
}

في الردّ، اعرض المخطط للحقول المطلوبة فقط باستخدام السمة schema. سيتم عرض البيانات باستخدام السمة rows كقائمة من الصفوف. لكل صف، يجب أن يتطابق تسلسل الحقول في values مع تسلسل الحقول في schema. استنادًا إلى مثال request السابق، سيكون الردّ على getData() على النحو التالي:

{
  schema: requestedFields.build(),
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

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

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

11. تعريف getData() : الجزء 3

سيبدو رمز getData() المدمج على النحو التالي. أضِف الرمز التالي إلى ملف Code.gs:

Code.gs

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

function getData(request) {
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;
  var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);

  return {
    schema: requestedFields.build(),
    rows: rows
  };
}

لقد انتهيت من ملف Code.gs. بعد ذلك، عدِّل ملف البيان.

12. تعديل البيان

في أداة تعديل النصوص البرمجية في برمجة تطبيقات، انقر على إعدادات المشروع > عرض ملف البيان "appsscript.json" في أداة التعديل.

90a68a58bbbb63c4.png

سيؤدي ذلك إلى إنشاء appsscript.json ملف بيان جديد.

1081c738d5d577a6.png

استبدِل ملف appscript.json بما يلي:

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",

  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
    "company": "Codelab user",
    "companyUrl": "https://developers.google.com/looker-studio/",
    "addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}

احفظ مشروع "برمجة تطبيقات Google".

5701ece1c89415c.png

تهانينا! لقد أنشأت أول أداة ربط خاصة بالمنتدى وأصبحت جاهزة للتجربة.

13. اختبار أداة الربط في "مركز البيانات"

استخدام عملية النشر

الخطوة 1: في بيئة تطوير برمجة تطبيقات، انقر على تفعيل > عمليات النشر التجريبية لفتح مربّع الحوار "عمليات النشر التجريبية".

3f57ea0feceb2596.png

سيتم إدراج عملية النشر التلقائية، النشر الرئيسي.

الخطوة 2: انقر على نسخ لنسخ معرّف نشر العنوان.

الخطوة 3: لتحميل أداة الربط في "مركز البيانات"، استبدِل العنصر النائب <HEAD_DEPLOYMENT_ID> في الرابط التالي بمعرّف Head Deployment ID الخاص بأداة الربط، ثمّ اتّبِع الرابط في المتصفّح:

https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>

تفويض الموصّل

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

بعد التحميل، سيظهر لك طلب تفويض الموصل.

d7e66726a1e64c05.png

انقر على "تفويض" وقدِّم التفويض المطلوب للموصّل.

ضبط الموصّل

بعد اكتمال عملية التفويض، ستظهر شاشة الإعداد. اكتب lighthouse في مساحة إدخال النص وانقر على "ربط" (Connect) في أعلى يسار الصفحة.

ec7416d6dbeabc8f.png

تأكيد المخطط

ستظهر لك شاشة الحقول. انقر على إنشاء تقرير في أعلى يسار الصفحة.

4a9084bd51d2fbb8.png

إنشاء لوحة البيانات

ستنتقل إلى بيئة لوحة بيانات "مركز البيانات". انقر على إضافة إلى التقرير.

1ca21e327308237c.png

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

الآن، أضِف "رسمًا بيانيًا للسلسلة الزمنية". في القائمة، انقر على إدراج > سلسلة زمنية. ثم ضَع السلسلة الزمنية في لوحة العرض. من المفترض أن يظهر لك رسم بياني للسلسلة الزمنية لعدد عمليات تنزيل حزمة npm المحدّدة. أضِف عنصر تحكّم في فلتر التاريخ واعرض لوحة البيانات كما هو موضّح أدناه.

4c076e07665f57aa.gif

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

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

تحسين الموصل الذي أنشأته

أدخِل تحسينات على الموصل الذي أنشأته للتو:

  • في Data Studio، إذا لم تقدّم اسم حزمة في شاشة الإعدادات الخاصة بالموصل، ستظهر لك رسالة خطأ عند رسم الرسم البياني للسلسلة الزمنية. جرِّب إضافة عملية التحقّق من صحة الإدخال أو خيار تلقائي إلى إعدادات الموصل.
  • جرِّب إضافة إمكانية طلب البحث عن أسماء حِزم متعددة في الوقت نفسه في إعدادات الموصل. ملاحظة: تتيح واجهة برمجة التطبيقات الخاصة بعدد عمليات تنزيل حِزم npm إدخال أسماء حِزم متعددة مفصولة بفواصل.
  • يمكنك العثور على حلول لكلتا المشكلتين في رمز npm connector.

إنجاز المزيد من المهام باستخدام "الموصِّلات التابعة للمنتدى"

مراجع إضافية

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

نوع المرجع

ميزات المستخدم

ميزات المطوّرين

الوثائق

مركز المساعدة

مستندات المطوّرين

الأخبار والتحديثات

الاشتراك في مركز البيانات > إعدادات المستخدم

القائمة البريدية للمطوّرين

طرح أسئلة

منتدى المستخدمين

Stack Overflow [looker-studio]

الفيديوهات

DataVis DevTalk

أمثلة

مستودع البرامج المفتوحة المصدر