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

تنشئ حزمة البدء السريع هذه إضافة "محرّر العروض التقديمية من Google". تترجم النص المحدد في العرض التقديمي.

الأهداف

• ابدأ إعداد النص البرمجي.
• شغِّل النص البرمجي.

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

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

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

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

1. أنشئ عرضًا تقديميًا في "العروض التقديمية من Google" على slides.new.
2. انقر على الإضافات > برمجة التطبيقات.
3. انقر على مشروع بلا عنوان.
4. أعِد تسمية مشروع "برمجة التطبيقات" إلى ترجمة العروض التقديمية وانقر على إعادة تسمية.
5. بجانب الملف Code.gs، انقر على رمز المزيد more_vert. > إعادة تسمية. أدخِل اسمًا للملف translate.
6. انقر على رمز إضافة ملف add. > HTML. أدخِل اسمًا للملف sidebar.

7. استبدل محتويات كل ملف بالرمز المقابل التالي، ثم انقر على "حفظ" .

   translate.gs

   slides/translate/translate.gs

   عرض على GitHub

   /**
    * @OnlyCurrentDoc Limits the script to only accessing the current presentation.
    */
   
   /**
    * Create a open translate menu item.
    * @param {Event} event The open event.
    */
   function onOpen(event) {
     SlidesApp.getUi().createAddonMenu()
         .addItem('Open Translate', 'showSidebar')
         .addToUi();
   }
   
   /**
    * Open the Add-on upon install.
    * @param {Event} event The install event.
    */
   function onInstall(event) {
     onOpen(event);
   }
   
   /**
    * Opens a sidebar in the document containing the add-on's user interface.
    */
   function showSidebar() {
     const ui = HtmlService
         .createHtmlOutputFromFile('sidebar')
         .setTitle('Translate');
     SlidesApp.getUi().showSidebar(ui);
   }
   
   /**
    * Recursively gets child text elements a list of elements.
    * @param {PageElement[]} elements The elements to get text from.
    * @return {Text[]} An array of text elements.
    */
   function getElementTexts(elements) {
     let texts = [];
     elements.forEach((element)=> {
       switch (element.getPageElementType()) {
         case SlidesApp.PageElementType.GROUP:
           element.asGroup().getChildren().forEach((child)=> {
             texts = texts.concat(getElementTexts(child));
           });
           break;
         case SlidesApp.PageElementType.TABLE:
           const table = element.asTable();
           for (let y = 0; y < table.getNumColumns(); ++y) {
             for (let x = 0; x < table.getNumRows(); ++x) {
               texts.push(table.getCell(x, y).getText());
             }
           }
           break;
         case SlidesApp.PageElementType.SHAPE:
           texts.push(element.asShape().getText());
           break;
       }
     });
     return texts;
   }
   
   /**
    * Translates selected slide elements to the target language using Apps Script's Language service.
    *
    * @param {string} targetLanguage The two-letter short form for the target language. (ISO 639-1)
    * @return {number} The number of elements translated.
    */
   function translateSelectedElements(targetLanguage) {
     // Get selected elements.
     const selection = SlidesApp.getActivePresentation().getSelection();
     const selectionType = selection.getSelectionType();
     let texts = [];
     switch (selectionType) {
       case SlidesApp.SelectionType.PAGE:
         selection.getPageRange().getPages().forEach((page)=> {
           texts = texts.concat(getElementTexts(page.getPageElements()));
         });
         break;
       case SlidesApp.SelectionType.PAGE_ELEMENT:
         const pageElements = selection.getPageElementRange().getPageElements();
         texts = texts.concat(getElementTexts(pageElements));
         break;
       case SlidesApp.SelectionType.TABLE_CELL:
         selection.getTableCellRange().getTableCells().forEach((cell)=> {
           texts.push(cell.getText());
         });
         break;
       case SlidesApp.SelectionType.TEXT:
         selection.getPageElementRange().getPageElements().forEach((element) =>{
           texts.push(element.asShape().getText());
         });
         break;
     }
   
     // Translate all elements in-place.
     texts.forEach((text)=> {
       text.setText(LanguageApp.translate(text.asRenderedString(), '', targetLanguage));
     });
   
     return texts.length;
   }

   sidebar.html

   slides/translate/sidebar.html

   عرض على GitHub

   <html>
   <head>
     <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
     <style>
       .logo { vertical-align: middle; }
       ul { list-style-type: none; padding: 0; }
       h4 { margin: 0; }
     </style>
   </head>
   <body>
   <form class="sidebar branding-below">
     <h4>Translate selected slides into:</h4>
     <ul id="languages"></ul>
     <div class="block" id="button-bar">
       <button class="blue" id="run-translation">Translate</button>
     </div>
     <h5 class="error" id="error"></h5>
   </form>
   <div class="sidebar bottom">
     <img alt="Add-on logo" class="logo"
          src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">
     <span class="gray branding-text">Translate sample by Google</span>
   </div>
   
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script>
     $(function() {
       // Add an input radio button for every language.
       const languages = {
         ar: 'Arabic',
         zh: 'Chinese',
         en: 'English',
         fr: 'French',
         de: 'German',
         hi: 'Hindi',
         ja: 'Japanese',
         pt: 'Portuguese',
         es: 'Spanish'
       };
       const languageList = Object.keys(languages).map((id)=> {
         return $('<li>').html([
           $('<input>')
                   .attr('type', 'radio')
                   .attr('name', 'dest')
                   .attr('id', 'radio-dest-' + id)
                   .attr('value', id),
           $('<label>')
                   .attr('for', 'radio-dest-' + id)
                   .html(languages[id])
         ]);
       });
   
       $('#run-translation').click(runTranslation);
       $('#languages').html(languageList);
     });
   
     /**
      * Runs a server-side function to translate the text on all slides.
      */
     function runTranslation() {
       this.disabled = true;
       $('#error').text('');
       google.script.run
               .withSuccessHandler((numTranslatedElements, element) =>{
                 element.disabled = false;
                 if (numTranslatedElements === 0) {
                   $('#error').empty()
                           .append('Did you select elements to translate?')
                           .append('<br/>')
                           .append('Please select slides or individual elements.');
                 }
                 return false;
               })
               .withFailureHandler((msg, element)=> {
                 element.disabled = false;
                 $('#error').text('Something went wrong. Please check the add-on logs.');
                 return false;
               })
               .withUserObject(this)
               .translateSelectedElements($('input[name=dest]:checked').val());
     }
   </script>
   </body>
   </html>

تشغيل النص البرمجي

1. في العرض التقديمي، أعِد تحميل الصفحة.
2. انقر على الإضافات > ترجمة العروض التقديمية > بدء. قد يستغرق الأمر عدة ثوانٍ لكي يظهر عنصر قائمة الإضافات.
3. اسمح للإضافة بالموافقة عندما يُطلب منك ذلك.
4. انقر مرة أخرى على الإضافات >. ترجمة العروض التقديمية > بدء.
5. أضِف نصًا إلى العرض التقديمي واختَره.
6. في الإضافة، انقر على ترجمة لاستبدال النص المحدد.

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

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