إظهار أشرطة التقدم في عرض تقديمي من Google

مستوى البرمجة: متوسط
المدة: 15 دقيقة
نوع المشروع: إضافة للمحرّر

الأهداف

• فهم وظيفة الحلّ
• فهم وظيفة خدمات "برمجة تطبيقات Google" ضمن الحلّ
• إعداد النص البرمجي
• تشغيل النص البرمجي

لمحة عن هذا الحلّ

استخدِم هذا الحلّ لإضافة شريط تقدّم إلى أسفل الشرائح في عرضك التقديمي.

آلية العمل

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

خدمات "برمجة تطبيقات Google"

يستخدِم هذا الحلّ الخدمة التالية:

• خدمة "العروض التقديمية من Google": تحصل على شرائح العرض التقديمي وتضيف شكلاً مستطيلاً إلى كل شريحة.

المتطلبات الأساسية

لاستخدام هذا النموذج، يجب استيفاء المتطلبات الأساسية التالية:

• حساب Google (قد تتطلب حسابات Google Workspace موافقة المشرف).
• متصفّح ويب يمكنه الوصول إلى الإنترنت

إعداد النص البرمجي

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

3. امنح الإذن للنصّ البرمجي عندما يُطلب منك ذلك. إذا ظهرت الرسالة التحذيرية لم يتمّ التحقّق منه في شاشة طلب الموافقة على OAuth، يمكنك المتابعة من خلال النقر على الوضع المتقدّم > الانتقال إلى {اسم المشروع} (غير آمن).

4. انقر مرة أخرى على الإضافات > شريط التقدّم > عرض شريط التقدّم.

5. لإزالة شريط التقدّم، انقر على الإضافات > شريط التقدّم > إخفاء شريط التقدّم.

مراجعة الرمز البرمجي

لمراجعة رمز "برمجة تطبيقات Google" لهذا الحلّ، انقر على عرض رمز المصدر:

عرض رمز المصدر

slides/progress/progress.gs

عرض على GitHub

/**
 * @OnlyCurrentDoc Adds progress bars to a presentation.
 */
const BAR_ID = "PROGRESS_BAR_ID";
const BAR_HEIGHT = 10; // px

/**
 * Runs when the add-on is installed.
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen();
}

/**
 * Trigger for opening a presentation.
 * @param {object} e The onOpen event.
 */
function onOpen(e) {
  SlidesApp.getUi()
    .createAddonMenu()
    .addItem("Show progress bar", "createBars")
    .addItem("Hide progress bar", "deleteBars")
    .addToUi();
}

/**
 * Create a rectangle on every slide with different bar widths.
 */
function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = i / (slides.length - 1);
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(
        SlidesApp.ShapeType.RECTANGLE,
        x,
        y,
        barWidth,
        BAR_HEIGHT,
      );
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

/**
 * Deletes all progress bar rectangles.
 */
function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (
        el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID
      ) {
        el.remove();
      }
    }
  }
}

المساهمون

تحتفظ Google بهذا النموذج بمساعدة خبراء التطوير في Google.

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

• توسيع نطاق "العروض التقديمية من Google" باستخدام "برمجة تطبيقات Google"
• مرجع خدمة "العروض التقديمية من Google"