تحويل بياناتك الضخمة إلى إحصاءات باستخدام "جداول بيانات Google" و"العروض التقديمية من Google"

1. من تحليل البيانات الضخمة إلى العرض التقديمي للشرائح

تتوفّر العديد من الأدوات لعلماء البيانات لإجراء تحليلات البيانات الضخمة، ولكن في النهاية، على المحللين تقديم مبررات للإدارة بشأن النتائج. لا يمكن تقديم الكثير من الأرقام على الورق أو في قاعدة البيانات إلى الجهات المعنية الرئيسية. يستخدم درس الترميز العملي المتوسط المستوى هذا برمجة تطبيقات Google منصتَين من منصات المطوّرين في Google (Google Workspace وGoogle Cloud Console) لمساعدتك في إكمال هذه المرحلة النهائية تلقائيًا.

تتيح لك أدوات المطوّرين في Google Cloud إجراء تحليل عميق للبيانات. يمكنك بعد ذلك أخذ النتائج وإدراجها في جدول بيانات وإنشاء عرض تقديمي للشرائح باستخدام البيانات. ويوفّر ذلك طريقة أكثر ملاءمة لتقديم البيانات إلى الإدارة. يتناول هذا الدرس التطبيقي حول الترميز واجهة برمجة التطبيقات BigQuery في Cloud Console (كخدمة متقدّمة في "برمجة تطبيقات Google") وخدمات "برمجة تطبيقات Google" المضمّنة في جداول بيانات Google والعروض التقديمية من Google.

الحافز

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

على الرغم من أنّ تطبيق العيّنة في الدرس التطبيقي حول الترميز Slides API يتضمّن أيضًا BigQuery وSlides، إلا أنّه يختلف عن تطبيق العيّنة في الدرس التطبيقي حول الترميز هذا بعدّة طرق:

  • تطبيق Node.js مقارنةً بتطبيق "برمجة تطبيقات Google"
  • يستخدمون واجهات REST API، بينما نستخدم نحن خدمات "برمجة تطبيقات Google".
  • يستخدمون Google Drive ولكن ليس "جداول بيانات Google"، بينما يستخدم هذا التطبيق "جداول بيانات Google" ولكن ليس Drive.

في هذا الدرس التطبيقي حول الترميز، أردنا الجمع بين تقنيات متعددة في تطبيق واحد مع عرض الميزات وواجهات برمجة التطبيقات من جميع أنحاء Google Cloud بطريقة تشبه حالة استخدام واقعية. الهدف هو تشجيعك على استخدام خيالك والتفكير في استخدام كل من Cloud Console وGoogle Workspace لحل المشاكل الصعبة التي تواجه مؤسستك وعملائك.

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

  • كيفية استخدام "برمجة تطبيقات Google" مع خدمات Google المتعددة
  • كيفية استخدام Google BigQuery لتحليل البيانات الكبيرة
  • كيفية إنشاء جدول بيانات Google وإدراج البيانات فيه
  • كيفية إنشاء رسم بياني في "جداول بيانات Google"
  • كيفية نقل البيانات والرسومات البيانية من "جداول بيانات Google" إلى عرض تقديمي في "العروض التقديمية من Google"

المتطلبات

  • متصفّح ويب متصل بالإنترنت
  • حساب Google (قد تتطلّب حسابات Google Workspace موافقة المشرف)
  • معرفة أساسية بـ جداول بيانات Google
  • إمكانية قراءة ترميز A1 في "جداول بيانات Google"
  • مهارات JavaScript الأساسية
  • يُفضّل أن يكون لديك معرفة بتطوير التطبيقات باستخدام Apps Script، ولكن ليس شرطًا

2. استطلاع

كيف ستستخدم هذا الدرس التطبيقي حول الترميز/الدليل التوجيهي/التعليمي؟

قراءة المستند لأغراض إعلامية، وربما إرساله إلى الزملاء الفنيين قراءة المستند قدر الإمكان وتجربة أكبر عدد ممكن من التمارين سأكمل كل الخطوات في هذا الدرس العملي مهما حدث

ما هو تقييمك لتجربتك مع أدوات المطوّرين وواجهات برمجة التطبيقات في Google Workspace؟

مبتدئ متوسط متمكّن

كيف تقيّم تجربتك مع برمجة تطبيقات تحديدًا؟

مبتدئ متوسط متمكّن

كيف يمكنك تقييم تجربتك مع أدوات المطوّرين وواجهات برمجة التطبيقات في Cloud Console؟

مبتدئ متوسط متقدّم

3- نظرة عامة

بعد أن عرفت الهدف من هذا الدرس العملي، إليك ما ستفعله:

  1. استخدام نموذج حالي من "برمجة تطبيقات Google" وBigQuery وتفعيله
  2. من النموذج، تعرَّف على كيفية إرسال طلب بحث إلى BigQuery والحصول على النتائج.
  3. أنشئ جدول بيانات Google وأدرِج فيه النتائج من BigQuery.
  4. عدِّل الرمز لتغيير البيانات التي يتم عرضها وإدراجها في ورقة البيانات بشكل طفيف.
  5. استخدِم خدمة "جداول بيانات Google" في Apps Script لإنشاء رسم بياني لبيانات BigQuery.
  6. استخدِم خدمة "العروض التقديمية من Google" لإنشاء عرض تقديمي في "العروض التقديمية من Google".
  7. أضِف عنوانًا وعنوانًا فرعيًا إلى شريحة العنوان التلقائية.
  8. أنشئ شريحة تتضمّن جدول بيانات، ثم صدِّر خلايا بيانات "جداول بيانات Google" إلى هذه الشريحة.
  9. أنشئ شريحة أخرى وأدرِج فيها الرسم البياني لجدول البيانات.

لنبدأ ببعض المعلومات الأساسية عن "برمجة تطبيقات Google" وBigQuery و"جداول بيانات Google" و"العروض التقديمية من Google".

برمجة تطبيقات Google وBigQuery

برمجة تطبيقات Google هي منصة تطوير في Google Workspace تعمل بمستوى أعلى من واجهات Google REST API. إنّها بيئة تطوير واستضافة تطبيقات بدون خادم متاحة لجميع مستويات مهارات المطوّرين. في الأساس، "برمجة تطبيقات Google" هي بيئة وقت تشغيل JavaScript بدون خادم لأتمتة Google Workspace وتوسيعها ودمجها.

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

  • تطوير النصوص البرمجية باستخدام أداة تعديل الرموز المستندة إلى المتصفح، ولكن يمكن أيضًا التطوير محليًا عند استخدام clasp، وهي أداة نشر سطر الأوامر لـ "برمجة التطبيقات"
  • كتابة الرموز في إصدار متخصص من JavaScript مخصّص للوصول إلى Google Workspace وخدمات Google أو الخدمات الخارجية الأخرى (باستخدام خدمات URL Fetch أو JDBC في Apps Script)
  • يمكنك تجنُّب كتابة رمز التفويض لأنّ "برمجة التطبيقات" تتولّى ذلك نيابةً عنك.
  • لست بحاجة إلى استضافة تطبيقك، فهو يعمل على خوادم Google على السحابة الإلكترونية.

تتفاعل "برمجة تطبيقات Google" مع تكنولوجيات Google الأخرى بطريقتَين مختلفتَين:

  • كخدمة مدمجة
  • كخدمة متقدّمة

تحتوي الخدمة المضمّنة على طرق عالية المستوى للتفاعل مع بيانات المستخدمين وأنظمة Google الأخرى والأنظمة الخارجية. الخدمة المتقدّمة هي في الأساس برنامج تضمين بسيط حول إحدى واجهات Google Workspace API أو Google REST API. توفّر الخدمات المتقدّمة تغطية كاملة لواجهة REST API ويمكنها غالبًا تنفيذ مهام أكثر من الخدمات المضمّنة، ولكنّها تتطلّب المزيد من تعقيد الرموز البرمجية (مع أنّها تظل أسهل في الاستخدام من واجهة REST API الكاملة). يجب أيضًا تفعيل الخدمات المتقدّمة لمشروع البرنامج النصي قبل استخدامها.

ننصح المطوّرين باستخدام خدمة مضمّنة كلما أمكن ذلك لأنّها أسهل في الاستخدام وتوفّر مزايا أكثر من الخدمات المتقدّمة. ومع ذلك، لا تتضمّن بعض واجهات برمجة التطبيقات من Google خدمات مدمجة، لذا قد تكون الخدمة المتقدّمة هي الخيار الوحيد. على سبيل المثال، لا تتضمّن Google BigQuery خدمة مضمّنة، ولكن تتوفّر خدمة BigQuery. خدمة BigQuery هي إحدى خدمات Cloud Console التي تتيح لك استخدام Google BigQuery API لتنفيذ طلبات بحث في مجموعات كبيرة من البيانات (مثل عدة تيرابايت)، ولكنها لا تزال قادرة على تقديم النتائج في ثوانٍ.

الوصول إلى "جداول بيانات Google" و"العروض التقديمية من Google" من خلال "برمجة تطبيقات Google"

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

4. المهمة 1: تنفيذ BigQuery وتسجيل النتائج في "جداول بيانات Google"

مقدمة

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

  • أنشِئ مشروعًا على كلّ من برمجة تطبيقات Google وCloud Console.
  • فعِّل إمكانية الوصول إلى خدمة BigQuery المتقدّمة.
  • افتح أداة تعديل النصوص البرمجية وأدخِل رمز مصدر التطبيق.
  • انتقِل إلى عملية تفويض التطبيق (OAuth2).
  • شغِّل التطبيق الذي يرسل طلبًا إلى BigQuery.
  • راجِع جدول بيانات Google الجديد الذي تم إنشاؤه باستخدام نتائج BigQuery.

الإعداد

  1. لإنشاء مشروع في "برمجة تطبيقات Google"، انتقِل إلى script.google.com وانقر على مشروع جديد.
  2. لإعادة تسمية مشروع برمجة تطبيقات، انقر على مشروع بلا عنوان، وأدخِل عنوانًا لمشروعك، ثم انقر على إعادة التسمية.

بعد ذلك، عليك إنشاء مشروع Cloud Console للاستعلام عن البيانات في BigQuery.

  1. لإنشاء مشروع على Cloud Console، استخدِم رابط الاختصار هذا لإنشاء مشروع، وأدخِل اسمًا للمشروع، ثم انقر على إنشاء.
  1. عند اكتمال إنشاء المشروع، سيظهر إشعار على الصفحة. تأكَّد من اختيار مشروعك الجديد في قائمة المشاريع أعلى الصفحة.
  2. انقر على "القائمة" f5fbd278915eb7aa.png وانتقِل إلى واجهات برمجة التطبيقات والخدمات > شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth (رابط مباشر).
  3. انقر على داخلي > إنشاء لإنشاء تطبيق لمستخدمي Google Workspace داخل مؤسستك.
  4. في حقل اسم التطبيق، أدخِل "Big Data Codelab".
  5. أدخِل عناوين البريد الإلكتروني المخصّصة لدعم المستخدمين ومعلومات الاتصال بالمطوّر.
  6. انقر على حفظ ومتابعة > حفظ ومتابعة.
  7. انقر على "المزيد" 50fa7e30ed2d1b1c.png في شريط التنقل واختَر إعدادات المشروع (رابط مباشر).
  8. انسخ القيمة المدرَجة ضمن رقم المشروع. (سيتم استخدام حقل رقم تعريف المشروع منفصل لاحقًا في الدرس العملي).

بعد ذلك، عليك ربط مشروع برمجة تطبيقات بمشروع Cloud Console.

  1. انتقِل إلى محرِّر "برمجة تطبيقات Google" وانقر على إعدادات المشروع settings-gear.
  2. ضمن "مشروع Google Cloud Platform (GCP)"، انقر على تغيير المشروع.
  3. أدخِل رقم المشروع وانقر على ضبط المشروع.
  4. بعد ذلك، انقر على المحرّر code-editor لبدء إضافة خدمة BigQuery المتقدّمة.
  5. بجانب الخدمات، انقر على "إضافة خدمة" إضافة خدمة.
  6. في مربّع الحوار "إضافة خدمة" (Add a service)، اختَر BigQuery API وانقر على إضافة (Add).

الخطوة الأخيرة هي تفعيل BigQuery API في Cloud Console.

  1. لإجراء ذلك، انتقِل إلى Cloud Console وانقر على واجهات برمجة التطبيقات والخدمات > لوحة البيانات. (تأكَّد من أنّك لا تزال في المشروع نفسه الذي أنشأته في الخطوة 3).
  2. انقر على تفعيل واجهات برمجة التطبيقات والخدمات.
  3. ابحث عن "big query"، واختَر BigQuery API (وليس BigQuery Data Transfer API)، ثم انقر على تفعيل (Enable) لتفعيلها.

a0e07fa159de9367.png

أنت الآن مستعد لإدخال الرمز البرمجي للتطبيق وإجراء عملية التفويض وتشغيل الإصدار الأول من هذا التطبيق.

تحميل التطبيق وتشغيله

  1. في أداة تعديل النصوص البرمجية، استبدِل كتلة الرمز myFunction() التلقائية بمجموعة الرموز التالية:
// File name for data results
var QUERY_NAME = "Most common words in all of Shakespeare's works";
// Replace this value with your Google Cloud Console Project ID
var PROJECT_ID = '';
if (!PROJECT_ID) throw Error('Project ID is required in setup');

/**
 * Runs a BigQuery query; puts results into a Sheet. You must turn on
 * the BigQuery advanced service before you can run this code.
 * @see https://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see https://github.com/googleworkspace/apps-script-samples/blob/master/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet
 */
function runQuery() {
  // Replace sample with your own BigQuery query.
  var request = {
    query:
        'SELECT ' +
            'LOWER(word) AS word, ' +
            'SUM(word_count) AS count ' +
        'FROM [bigquery-public-data:samples.shakespeare] ' +
        'GROUP BY word ' +
        'ORDER BY count ' +
        'DESC LIMIT 10'
  };
  var queryResults = BigQuery.Jobs.query(request, PROJECT_ID);
  var jobId = queryResults.jobReference.jobId;

  // Wait for BigQuery job completion (with exponential backoff).
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId);
  }

  // Get all results from BigQuery.
  var rows = queryResults.rows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }

  // Return null if no data returned.
  if (!rows) {
    return Logger.log('No rows returned.');
  }

  // Create the results spreadsheet.
  var spreadsheet = SpreadsheetApp.create(QUERY_NAME);
  var sheet = spreadsheet.getActiveSheet();

  // Add headers to Sheet.
  var headers = queryResults.schema.fields.map(function(field) {
    return field.name.toUpperCase();
  });
  sheet.appendRow(headers);

  // Append the results.
  var data = new Array(rows.length);
  for (var i = 0; i < rows.length; i++) {
    var cols = rows[i].f;
    data[i] = new Array(cols.length);
    for (var j = 0; j < cols.length; j++) {
      data[i][j] = cols[j].v;
    }
  }

  // Start storing data in row 2, col 1
  var START_ROW = 2;      // skip header row
  var START_COL = 1;
  sheet.getRange(START_ROW, START_COL, rows.length, headers.length).setValues(data);

  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
}
  1. انقر على "حفظ" التصدي لفرصة هدف.
  2. بجانب Code.gs، انقر على "المزيد" 50fa7e30ed2d1b1c.png > إعادة التسمية. غيِّر العنوان من Code.gs إلى bq-sheets-slides.js.
  3. بعد ذلك، لنراجع الرمز الذي يطلب البحث في BigQuery ويكتب النتائج في "جدول بيانات Google". يمكنك الاطّلاع عليه بالقرب من أعلى runQuery():
SELECT
    LOWER(word) AS word,
    SUM(word_count) AS count
FROM [bigquery-public-data:samples.shakespeare]
GROUP BY word
ORDER BY count
DESC LIMIT 10

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

تحدّد الدالة أيضًا متغيّر PROJECT_ID يتطلّب رقم تعريف مشروع صالحًا في Cloud Console. تتوفّر عبارة if ضمن المتغيّر لمنع التطبيق من المتابعة بدون رقم تعريف المشروع.

  1. انتقِل إلى مشروعك على Cloud Console، وانقر على "المزيد" 50fa7e30ed2d1b1c.png في شريط التنقّل، ثم اختَر إعدادات المشروع.
  2. انسخ القيمة المدرَجة ضمن رقم تعريف المشروع.
  3. ارجع إلى محرِّر "برمجة تطبيقات"، وابحث عن المتغيّر PROJECT_ID في bq-sheets-slides.js، ثم أضِف القيمة.
  4. انقر على حفظ التصدي لفرصة هدف > تشغيل.
  5. انقر على مراجعة الأذونات للمتابعة.
  1. بعد بدء تنفيذ النص البرمجي، سيتم فتح سجلّ التنفيذ المضمّن وتسجيل إجراءات النص البرمجي في الوقت الفعلي.
  1. بعد أن يظهر في سجلّ التنفيذ "اكتمل التنفيذ"، انتقِل إلى Google Drive (drive.google.com) وابحث عن جدول بيانات Google باسم "الكلمات الأكثر شيوعًا في جميع أعمال شكسبير" (أو الاسم الذي خصّصته للمتغيّر QUERY_NAME، إذا عدّلته):
  2. افتح جدول البيانات للاطّلاع على الكلمات العشر الأكثر شيوعًا وإجمالي عدد مرات تكرارها مرتّبة ترتيبًا تنازليًا:

afe500ad43f8cdf8.png

ملخّص المهمة 1

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

يمكنك أيضًا العثور على الرمز الذي استخدمته في bq-sheets-slides.js في المجلد step1 الخاص بمستودع GitHub لهذا الدرس التطبيقي حول الترميز على github.com/googlecodelabs/bigquery-sheets-slides. استند الرمز إلى هذا المثال الأصلي في صفحة الخدمات المتقدّمة في BigQuery الذي نفّذ طلب بحث مختلفًا قليلاً لاسترداد الكلمات الأكثر شيوعًا التي تتضمّن 10 أحرف أو أكثر والتي استخدمها شكسبير. يمكنك أيضًا الاطّلاع على مثال في مستودع GitHub الخاص به.

إذا كنت مهتمًا بطلبات بحث أخرى يمكنك إنشاؤها باستخدام أعمال شكسبير أو جداول بيانات عامة أخرى، يمكنك الانتقال إلى كيفية طلب البحث في جداول BigQuery النموذجية ومستودع GitHub هذا.

يمكنك أيضًا تنفيذ طلبات البحث باستخدام صفحة BigQuery على Cloud Console قبل تنفيذها في برمجة تطبيقات. للعثور عليه، انقر على "القائمة" f5fbd278915eb7aa.png وانتقِل إلى واجهة مستخدم BigQuery > مساحة عمل SQL (رابط مباشر). على سبيل المثال، إليك كيف يظهر طلب البحث في واجهة BigQuery الرسومية:

BigQueryUI

5- المهمة 2: إنشاء رسم بياني في "جداول بيانات Google"

الغرض من runQuery() هو استخدام BigQuery وإرسال نتائج البيانات إلى جدول بيانات Google. بعد ذلك، علينا إنشاء رسم بياني باستخدام البيانات. لننشئ دالة جديدة باسم createColumnChart() تستدعي طريقة newChart() في "جداول بيانات Google".

  1. في أداة تعديل النصوص البرمجية لبرمجة تطبيقات، أضِف الدالة createColumnChart() إلى bq-sheets-slides.js بعد runQuery(). تحصل التعليمة البرمجية على ورقة البيانات وتطلب مخططًا عموديًا يتضمّن جميع البيانات. يبدأ نطاق البيانات في الخلية A2 لأنّ الصف الأول يحتوي على عناوين الأعمدة.
/**
 * Uses spreadsheet data to create a column chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} Visualizes the results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first) Sheet.
  var sheet = spreadsheet.getSheets()[0];
  // Data range in Sheet is from cell A2 to B11.
  var START_CELL = 'A2';  // skip header row
  var END_CELL = 'B11';
  // Place chart on Sheet starting on cell E5.
  var START_ROW = 5;      // row 5
  var START_COL = 5;      // col E
  var OFFSET = 0;

  // Create & place chart on the Sheet using above values.
  var chart = sheet.newChart()
     .setChartType(Charts.ChartType.COLUMN)
     .addRange(sheet.getRange(START_CELL + ':' + END_CELL))
     .setPosition(START_ROW, START_COL, OFFSET, OFFSET)
     .build();
  sheet.insertChart(chart);
}
  1. تتطلّب الدالة createColumnChart() مَعلمة كائن جدول بيانات، لذا علينا تعديل runQuery() لعرض كائن spreadsheet يمكننا تمريره إلى createColumnChart(). في نهاية runQuery()، أعِد كائن spreadsheet بعد تسجيل عملية إنشاء ورقة بيانات ناجحة:
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());

  // NEW: Return the spreadsheet object for later use.
  return spreadsheet;
}
  1. أنشئ دالة createBigQueryPresentation() لاستدعاء كل من runQuery() وcreateColumnChart(). يُعد الفصل المنطقي بين وظائف BigQuery ووظائف إنشاء الرسوم البيانية من أفضل الممارسات، وذلك على النحو التالي:
/**
 * Runs the query, adds data and a chart to a spreadsheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  createColumnChart(spreadsheet);
}
  1. لقد اتّخذت خطوتَين مهمتَين أعلاه: عرض عنصر جدول البيانات وإنشاء دالة الإدخال. لجعل runQuery() أكثر قابلية للاستخدام، علينا نقل سطر السجلّ من runQuery() إلى createBigQueryPresentation(). يجب أن تبدو طريقتك الآن على النحو التالي:
/**
 * Runs a BigQuery query, adds data and a chart to a spreadsheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl()); // MOVED HERE
  createColumnChart(spreadsheet);
}

بعد إجراء التغييرات المذكورة أعلاه (باستثناء PROJECT_ID)، من المفترض أن يبدو bq-sheets-slides.js على النحو التالي. يمكنك العثور على هذا الرمز أيضًا في step2 من مستودع GitHub.

// File name for data results
var QUERY_NAME = "Most common words in all of Shakespeare's works";
// Replace this value with your Google Cloud Console Project ID
var PROJECT_ID = '';
if (!PROJECT_ID) throw Error('Project ID is required in setup');

/**
 * Runs a BigQuery query; puts results into a sheet. You must turn on
 * the BigQuery advanced service before you can run this code.
 * @see https://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see https://github.com/googleworkspace/apps-script-samples/blob/master/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet
 */
function runQuery() {
  // Replace sample with your own BigQuery query.
  var request = {
    query:
        'SELECT ' +
            'LOWER(word) AS word, ' +
            'SUM(word_count) AS count ' +
        'FROM [bigquery-public-data:samples.shakespeare] ' +
        'GROUP BY word ' +
        'ORDER BY count ' +
        'DESC LIMIT 10'
  };
  var queryResults = BigQuery.Jobs.query(request, PROJECT_ID);
  var jobId = queryResults.jobReference.jobId;

  // Wait for BigQuery job completion (with exponential backoff).
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId);
  }

  // Get all results from BigQuery.
  var rows = queryResults.rows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }

  // Return null if no data returned.
  if (!rows) {
    return Logger.log('No rows returned.');
  }

  // Create the results spreadsheet.
  var spreadsheet = SpreadsheetApp.create(QUERY_NAME);
  var sheet = spreadsheet.getActiveSheet();

  // Add headers to sheet.
  var headers = queryResults.schema.fields.map(function(field) {
    return field.name.toUpperCase();
  });
  sheet.appendRow(headers);

  // Append the results.
  var data = new Array(rows.length);
  for (var i = 0; i < rows.length; i++) {
    var cols = rows[i].f;
    data[i] = new Array(cols.length);
    for (var j = 0; j < cols.length; j++) {
      data[i][j] = cols[j].v;
    }
  }

  // Start storing data in row 2, col 1
  var START_ROW = 2;      // skip header row
  var START_COL = 1;
  sheet.getRange(START_ROW, START_COL, rows.length, headers.length).setValues(data);

  // Return the spreadsheet object for later use.
  return spreadsheet;
}

/**
 * Uses spreadsheet data to create a columnar chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} Visualizes the results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first) sheet.
  var sheet = spreadsheet.getSheets()[0];
  // Data range in sheet is from cell A2 to B11.
  var START_CELL = 'A2';  // skip header row
  var END_CELL = 'B11';
  // Place chart on Sheet starting on cell E5.
  var START_ROW = 5;      // row 5
  var START_COL = 5;      // col E
  var OFFSET = 0;

  // Create & place chart on the sheet using above values.
  var chart = sheet.newChart()
     .setChartType(Charts.ChartType.COLUMN)
     .addRange(sheet.getRange(START_CELL + ':' + END_CELL))
     .setPosition(START_ROW, START_COL, OFFSET, OFFSET)
     .build();
  sheet.insertChart(chart);
}

/**
 * Runs a BigQuery query, adds data and a chart to a spreadsheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
  createColumnChart(spreadsheet);
}

في أداة تعديل النصوص البرمجية، احفظ مشروع النص البرمجي. بعد ذلك، اختَر createBigQueryPresentation من قائمة الدوال وانقر على تنفيذ. بعد اكتمال العملية، يتم إنشاء جدول بيانات آخر في Google Drive، ولكن هذه المرة يتم تضمين رسم بياني في الورقة بجانب البيانات:

ورقة بيانات تتضمّن رسمًا بيانيًا

6. المهمة 3: وضع بيانات النتائج في عرض تقديمي

يتضمّن الجزء الأخير من الدرس التطبيقي حول الترميز إنشاء عرض تقديمي في "العروض التقديمية من Google"، وإضافة العنوان والعنوان الفرعي إلى شريحة العنوان، ثم إنشاء شرائح لخلايا البيانات والمخطط.

  1. في أداة تعديل النصوص البرمجية لبرمجة تطبيقات، أضِف الدالة createSlidePresentation() إلى bq-sheets-slides.js بعد createColumnChart(). يتم تنفيذ كل العمل على العرض التقديمي في هذه الدالة. لنبدأ بإنشاء عرض تقديمي، ثم نضيف عنوانًا وعنوانًا فرعيًا إلى شريحة العنوان التلقائية.
/**
 * Create presentation with spreadsheet data and a chart
 * @param {Spreadsheet} Spreadsheet containing results data
 * @param {EmbeddedChart} Sheets chart to embed on a slide
 * @returns {Presentation} Slide deck with the results
  * @see https://developers.google.com/apps-script/reference/slides/presentation
 */
function createSlidePresentation(spreadsheet, chart) {
  // Create the presentation.
  var deck = SlidesApp.create(QUERY_NAME);

  // Populate the title slide.
  var [title, subtitle] = deck.getSlides()[0].getPageElements();
  title.asShape().getText().setText(QUERY_NAME);
  subtitle.asShape().getText().setText('using Google Cloud Console and Google Workspace APIs:\n' +
    'Google Apps Script, BigQuery, Sheets, Slides');
  1. الخطوة التالية في createSlidePresentation() هي استيراد بيانات الخلايا من "جدول بيانات Google" إلى عرض الشرائح الجديد. أضِف مقتطف الرمز هذا إلى الدالة:
  // Data range to copy is from cell A1 to B11
  var START_CELL = 'A1';  // include header row
  var END_CELL = 'B11';
  // Add the table slide and insert an empty table on it with
  // the dimensions of the data range; fails if the sheet is empty.
  var tableSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  var sheetValues = spreadsheet.getSheets()[0].getRange(
      START_CELL + ':' + END_CELL).getValues();
  var table = tableSlide.insertTable(sheetValues.length, sheetValues[0].length);

  // Populate the table with spreadsheet data.
  for (var i = 0; i < sheetValues.length; i++) {
    for (var j = 0; j < sheetValues[0].length; j++) {
      table.getCell(i, j).getText().setText(String(sheetValues[i][j]));
    }
  }
  1. الخطوة الأخيرة في createSlidePresentation() هي إضافة شريحة أخرى واستيراد الرسم البياني من جدول البيانات وعرض الكائن Presentation. أضِف مقتطف الرمز هذا إلى الدالة:
  // Add a chart slide and insert the chart on it.
  var chartSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  chartSlide.insertSheetsChart(chart);

  // Return the presentation object for later use.
  return deck;
}
  1. بعد اكتمال الدالة، ألقِ نظرةً أخرى على توقيعها. تتطلّب createSlidePresentation() مَعلمات كل من جدول البيانات وعنصر الرسم البياني. لقد عدّلنا runQuery() لعرض العنصر Spreadsheet، ولكن علينا إجراء تغيير مماثل على createColumnChart() ليعرض عنصر رسم بياني (EmbeddedChart). ارجع إلى createColumnChart() وأضِف مقتطف الرمز البرمجي التالي إلى نهاية الدالة:
  // NEW: Return the chart object for later use.
  return chart;
}
  1. بما أنّ الدالة createColumnChart() تعرض الآن عنصر رسم بياني، علينا حفظ الرسم البياني في متغيّر. بعد ذلك، نمرّر كلاً من جدول البيانات ومتغيّرات الرسم البياني إلى createSlidePresentation(). بما أنّنا نسجّل عنوان URL لجدول البيانات الذي تم إنشاؤه حديثًا، لننسخ أيضًا عنوان URL لعرض الشرائح الجديد. عدِّل createBigQueryPresentation() ليصبح على النحو التالي:
/**
 * Runs a BigQuery query, adds data and a chart to a spreadsheet,
 * and adds the data and chart to a new slide presentation.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
  var chart = createColumnChart(spreadsheet); // UPDATED
  var deck = createSlidePresentation(spreadsheet, chart); // NEW
  Logger.log('Results slide deck created: %s', deck.getUrl()); // NEW
}
  1. احفظ الملف وشغِّله createBigQueryPresentation() مرة أخرى. قبل تنفيذ ذلك، يحتاج تطبيقك إلى مجموعة أخرى من الأذونات من المستخدم لعرض عروض Google التقديمية وإدارتها. بعد مراجعة هذه الأذونات والسماح بها، سيتم تشغيل التطبيق كما كان من قبل.
  2. الآن، بالإضافة إلى جدول البيانات الذي تم إنشاؤه، من المفترض أن تحصل أيضًا على عرض تقديمي جديد في "العروض التقديمية من Google" يتضمّن 3 شرائح (العنوان وجدول البيانات ومخطط البيانات)، كما هو موضّح أدناه:

f6896f22cc3cd50d.png

59960803e62f7c69.png

5549f0ea81514360.png

7. الخاتمة

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

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

بعد إجراء التغييرات من المهمة النهائية (باستثناء PROJECT_ID)، من المفترض أن يبدو bq-sheets-slides.js الآن على النحو التالي:

/**
 * Copyright 2018 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// File name for data results
var QUERY_NAME = "Most common words in all of Shakespeare's works";
// Replace this value with your Google Cloud Console Project ID
var PROJECT_ID = '';
if (!PROJECT_ID) throw Error('Project ID is required in setup');

/**
 * Runs a BigQuery query; puts results into a spreadsheet. You must turn on
 * the BigQuery advanced service before you can run this code.
 * @see https://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see https://github.com/googleworkspace/apps-script-samples/blob/master/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet
 */
function runQuery() {
  // Replace sample with your own BigQuery query.
  var request = {
    query:
        'SELECT ' +
            'LOWER(word) AS word, ' +
            'SUM(word_count) AS count ' +
        'FROM [bigquery-public-data:samples.shakespeare] ' +
        'GROUP BY word ' +
        'ORDER BY count ' +
        'DESC LIMIT 10'
  };
  var queryResults = BigQuery.Jobs.query(request, PROJECT_ID);
  var jobId = queryResults.jobReference.jobId;

  // Wait for BigQuery job completion (with exponential backoff).
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId);
  }

  // Get all results from BigQuery.
  var rows = queryResults.rows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }

  // Return null if no data returned.
  if (!rows) {
    return Logger.log('No rows returned.');
  }

  // Create the results spreadsheet.
  var spreadsheet = SpreadsheetApp.create(QUERY_NAME);
  var sheet = spreadsheet.getActiveSheet();

  // Add headers to sheet.
  var headers = queryResults.schema.fields.map(function(field) {
    return field.name.toUpperCase();
  });
  sheet.appendRow(headers);

  // Append the results.
  var data = new Array(rows.length);
  for (var i = 0; i < rows.length; i++) {
    var cols = rows[i].f;
    data[i] = new Array(cols.length);
    for (var j = 0; j < cols.length; j++) {
      data[i][j] = cols[j].v;
    }
  }

  // Start storing data in row 2, col 1
  var START_ROW = 2;      // skip header row
  var START_COL = 1;
  sheet.getRange(START_ROW, START_COL, rows.length, headers.length).setValues(data);

  // Return the spreadsheet object for later use.
  return spreadsheet;
}

/**
 * Uses spreadsheet data to create a column chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} Visualizes the results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first) sheet.
  var sheet = spreadsheet.getSheets()[0];
  // Data range in sheet is from cell A2 to B11.
  var START_CELL = 'A2';  // skip header row
  var END_CELL = 'B11';
  // Place chart on sheet starting on cell E5.
  var START_ROW = 5;      // row 5
  var START_COL = 5;      // col E
  var OFFSET = 0;

  // Create & place chart on the sheet using above values.
  var chart = sheet.newChart()
     .setChartType(Charts.ChartType.COLUMN)
     .addRange(sheet.getRange(START_CELL + ':' + END_CELL))
     .setPosition(START_ROW, START_COL, OFFSET, OFFSET)
     .build();
  sheet.insertChart(chart);
  
  // Return the chart object for later use.
  return chart;
}

/**
 * Create presentation with spreadsheet data and a chart
 * @param {Spreadsheet} Spreadsheet containing results data
 * @param {EmbeddedChart} Sheets chart to embed on a slide
 * @returns {Presentation} Slide deck with the results
 * @see https://developers.google.com/apps-script/reference/slides/presentation
 */
function createSlidePresentation(spreadsheet, chart) {
  // Create the presentation.
  var deck = SlidesApp.create(QUERY_NAME);

  // Populate the title slide.
  var [title, subtitle] = deck.getSlides()[0].getPageElements();
  title.asShape().getText().setText(QUERY_NAME);
  subtitle.asShape().getText().setText('using Google Cloud Console and Google Workspace APIs:\n' +
    'Google Apps Script, BigQuery, Sheets, Slides');

  // Data range to copy is from cell A1 to B11
  var START_CELL = 'A1';  // include header row
  var END_CELL = 'B11';
  // Add the table slide and insert an empty table on it with
  // the dimensions of the data range; fails if the sheet is empty.
  var tableSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  var sheetValues = spreadsheet.getSheets()[0].getRange(
      START_CELL + ':' + END_CELL).getValues();
  var table = tableSlide.insertTable(sheetValues.length, sheetValues[0].length);

  // Populate the table with spreadsheet data.
  for (var i = 0; i < sheetValues.length; i++) {
    for (var j = 0; j < sheetValues[0].length; j++) {
      table.getCell(i, j).getText().setText(String(sheetValues[i][j]));
    }
  }

  // Add a chart slide and insert the chart on it.
  var chartSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  chartSlide.insertSheetsChart(chart);

  // Return the presentation object for later use.
  return deck;
}

/**
 * Runs a BigQuery query, adds data and a chart to a spreadsheet,
 * and adds the data and chart to a new slide presentation.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
  var chart = createColumnChart(spreadsheet);
  var deck = createSlidePresentation(spreadsheet, chart);
  Logger.log('Results slide deck created: %s', deck.getUrl());
}

يمكنك أيضًا العثور على عيّنة تعليمات برمجية هذه في المجلد final في مستودع GitHub.

8. مراجع إضافية

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

مراجع لهذا التطبيق

الوثائق

الفيديوهات

الأخبار والإشعارات

دروس تطبيقية أخرى حول الترميز

مبتدئ

متوسّط

9- الخطوة التالية: تحدّيات الترميز

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

  • التطبيق: هل تريد ألّا يقتصر استخدامك على JavaScript أو القيود التي تفرضها "برمجة تطبيقات Google"؟ يمكنك نقل هذا التطبيق إلى لغة البرمجة المفضّلة لديك التي تستخدم واجهات REST API لكلّ من Google BigQuery و"جداول بيانات Google" و"العروض التقديمية من Google".
  • BigQuery: جرِّب طلب بحث مختلفًا عن مجموعة بيانات شكسبير التي تهمّك. يمكن العثور على نموذج طلب بحث آخر في تطبيق نموذج BigQuery الأصلي في "برمجة تطبيقات Google".
  • BigQuery: يمكنك تجربة بعض مجموعات البيانات العامة الأخرى في BigQuery للعثور على مجموعة بيانات أكثر ملاءمةً لك.
  • BigQuery: ذكرنا سابقًا استعلامات أخرى يمكنك إنشاؤها باستخدام أعمال شكسبير أو جداول البيانات العامة الأخرى. يمكنك العثور عليها في صفحة الويب هذه ومستودع GitHub هذا.
  • جداول بيانات Google: جرِّب أنواعًا أخرى من الرسوم البيانية في معرض الرسوم البيانية.
  • "جداول بيانات Google" وBigQuery: يمكنك استخدام مجموعة بيانات كبيرة من جدول البيانات. في عام 2016، قدّم فريق BigQuery ميزة تتيح للمطوّرين استخدام "جدول بيانات Google" كمصدر للبيانات. لمزيد من المعلومات، يُرجى الانتقال إلى دمج Google BigQuery مع Google Drive.
  • الشرائح: يمكنك إضافة شرائح أخرى إلى العرض التقديمي الذي تم إنشاؤه، مثل الصور أو مواد العرض الأخرى المرتبطة بتحليل البيانات الكبيرة. في ما يلي المستندات المرجعية الخاصة بالخدمة المضمّنة في "العروض التقديمية من Google".
  • Google Workspace: يمكنك استخدام خدمات Google Workspace أو خدمات Google المضمّنة الأخرى من خلال برمجة تطبيقات. على سبيل المثال، Gmail و"تقويم Google" و"مستندات Google" وDrive و"خرائط Google" و"إحصاءات Google" وYouTube وما إلى ذلك، بالإضافة إلى الخدمات المتقدّمة الأخرى. لمزيد من المعلومات، انتقِل إلى نظرة عامة على المراجع لكل من الخدمات المضمّنة والمتقدّمة.