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

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

الأهداف

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

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

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

لقطة شاشة لإضافة "محرّر العروض التقديمية" في شريط التقدّم

آلية العمل

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

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

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

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

لاستخدام هذا النموذج، تحتاج إلى المتطلبات الأساسية التالية:

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

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

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

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

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

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

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

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

Slides/progress/progress.gs
/**
 * @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.

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