البدء السريع: إضافة شريط التقدم في "العروض التقديمية من Google"

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

القيام بالإعداد

  1. أنشِئ عرضًا تقديميًا جديدًا في Google.
  2. من داخل العرض التقديمي الجديد، اختَر عنصر القائمة الأدوات &gt؛ محرِّر النص البرمجي. إذا ظهرت لك شاشة ترحيب، انقر على مشروع فارغ.
  3. احذف أي رمز في محرِّر النص البرمجي وأعِد تسمية Code.gs إلى progress.gs.

    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();
          }
        }
      }
    }
  1. اختَر عنصر القائمة File > Save all (حفظ الكل). أدخِل اسمًا للنص البرمجي الجديد، ثم انقر على حسنًا. ويتم عرض اسم النص البرمجي للمستخدمين النهائيين في عدة أماكن، بما في ذلك مربّع حوار التفويض.

التجربة الآن

  1. يمكنك العودة إلى العرض التقديمي وإعادة تحميل الصفحة.
  2. بعد بضع ثوانٍ، ستظهر قائمة فرعية باسم ProgressBar ضمن قائمة الإضافات. انقر على الإضافات > ProprogressBar > إظهار شريط التقدم.
  3. يشير مربع الحوار إلى أن النص البرمجي يتطلب تفويضًا. انقر على متابعة. يطلب مربع حوار ثانٍ الحصول على تفويض لخدمات Google معينة. انقر على سماح.
  4. سيظهر لك شريط التقدّم. لإزالة شريط التقدم، انقر على الإضافات > ProgressBar > إخفاء شريط التقدم.

نشر

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

مزيد من المعلومات

لمواصلة التعرّف على كيفية توسيع نطاق "العروض التقديمية من Google" باستخدام "برمجة تطبيقات Google"، يمكنك الاطّلاع على المراجع التالية: