ربط جميع بياناتك وعرضها في Looker Studio

1. مقدمة

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

2f296fddf6af7393.png

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

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

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

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

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

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

المتطلبات

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

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

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

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

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

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

ما مدى معرفتك بأداة Looker Studio؟

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

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

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

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

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

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

b25b8d6bea6da54b.png

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

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

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

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

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

  • طريقة عمل أداة ربط خاصة بالمنتدى
  • خطوات مختلفة في سير العمل
  • عند استدعاء دوال مختلفة
  • الحالات التي تعرض فيها Looker 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()

ستطلب أداة Looker Studio تنفيذ الدالة 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() خيارات الإعداد التي سيراها المستخدمون. تستدعي أداة Looker Studio الدالة getConfig() للحصول على تفاصيل إعدادات الموصّل. استنادًا إلى الردّ الذي يقدّمه getConfig()، ستعرض أداة Looker Studio شاشة إعدادات الموصّل وتغيّر سلوكًا معيّنًا للموصّل.

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

TEXTINPUT

عنصر الإدخال

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

TEXTAREA

عنصر الإدخال

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

SELECT_SINGLE

عنصر الإدخال

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

SELECT_MULTIPLE

عنصر الإدخال

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

CHECKBOX

عنصر الإدخال

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

INFO

عرض العنصر

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

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

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

أضِف رمز 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 هذه، عند استخدام أداة الربط في Looker Studio، يمكنك توقّع ظهور شاشة إعدادات مشابهة لما يلي. سنتحدّث عن ذلك بالتفصيل لاحقًا.

7de872f17e59e92.png

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

8. تحديد getSchema()

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

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

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

راجِع مرجع 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 };
}

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

c7cd7057b202be59.png

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

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

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

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

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

getData()

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

فهم العنصر request

ترسل أداة Looker Studio العنصر 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 التي يوفّرها Looker Studio. بعد ذلك، استرجِع البيانات من واجهة برمجة التطبيقات باستخدام 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. اختبار أداة الربط في Looker Studio

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

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

3f57ea0feceb2596.png

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

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

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

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

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

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

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

d7e66726a1e64c05.png

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

ضبط الموصّل

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

ec7416d6dbeabc8f.png

تأكيد المخطط

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

4a9084bd51d2fbb8.png

إنشاء لوحة التحكم

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

1ca21e327308237c.png

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

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

4c076e07665f57aa.gif

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

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

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

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

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

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

مراجع إضافية

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

نوع المرجع

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

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

الوثائق

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

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

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

الاشتراك في Looker Studio > إعدادات المستخدم

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

طرح أسئلة

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

Stack Overflow [looker-studio]

الفيديوهات

DataVis DevTalk

أمثلة

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