Google डॉक्स ऐड-ऑन। Google डॉक्स संपादक की शक्ति का विस्तार करना

दूसरे दिन, Google ने एक नया प्लेटफ़ॉर्म जारी करने की घोषणा की जो डेवलपर्स को Google डॉक्स के अंदर काम करने वाले एप्लिकेशन बनाने और Google डॉक्स संपादक की बुनियादी कार्यक्षमता का विस्तार करने की अनुमति देता है।
आइए जानें कि यह क्या है, यह कैसे काम करता है, और एक छोटा एप्लिकेशन लिखें जो हमें Google डॉक्स को छोड़े बिना दस्तावेज़ के पाठ का अनुवाद करने की अनुमति देगा।

सिद्धांत की एक बिट।

Google डॉक्स ऐड-ऑन - जावास्क्रिप्ट में लिखा गया एक एप्लिकेशन, जो Google ड्राइव में मौजूदा और काम कर रहा है (अब केवल Google डॉक्स के लिए), दस्तावेज़ के दाईं ओर अपना UI ('साइडबार' या शीर्ष पर एक मोडल विंडो) होने से Google डॉक्स संपादक की कार्यक्षमता का विस्तार होता है । Google डॉक्स ऐड-ऑन, Google Apps स्क्रिप्ट के विकास का अगला चरण है। संक्षेप में, यह Google Apps स्क्रिप्ट परियोजना है, जिसमें Google डॉक्स के अन्य उपयोगकर्ताओं द्वारा इसे वितरित और स्थापित करने की क्षमता है।

कई प्रकार के Google Apps स्क्रिप्ट प्रोजेक्ट हैं, मुख्य हैं Google ड्राइव में एक अलग प्रोजेक्ट फ़ाइल (Google ड्राइव में आप इसे एक अलग फ़ाइल, 'स्टैंडअलोन स्क्रिप्ट' के रूप में देखते हैं) या एक कंटेनर दस्तावेज़ ( 'कंटेनर-बाउंड स्क्रिप्ट' ) के साथ एक परियोजना है। आप इसे दस्तावेज़ कंटेनर, मेनू 'टूल्स' -> 'स्क्रिप्ट एडिटर' खोलकर देख सकते हैं। Google डॉक्स ऐड-ऑन सिर्फ दूसरा विकल्प है, इसे बनाने के लिए, आपको एक कंटेनर दस्तावेज़ की आवश्यकता होती है जिसका उपयोग आप अपने आवेदन का परीक्षण और डीबग करने के लिए करेंगे।

विस्तार

Chrome वेब स्टोर के माध्यम से Google डॉक्स ऐड-ऑन द्वारा वितरित (हालांकि वे एक ब्राउज़र एक्सटेंशन नहीं हैं)। Chrome वेब स्टोर में अपना ऐड जोड़ने से पहले, आपको Google द्वारा समीक्षा से गुजरना होगा। Google डॉक्स के उपयोगकर्ताओं के लिए, सभी ऐड-ऑन एक नए मेनू आइटम - 'ऐड-ऑन' -> 'ऐड-ऑन' के माध्यम से इंस्टॉलेशन के लिए उपलब्ध हैं।

विकास का वातावरण

Google Apps स्क्रिप्ट प्रोजेक्ट्स के लिए, Google Google डिस्क में एकीकृत विकास वातावरण प्रदान करता है, जिसमें चलाने, डिबग करने और कोड पूरा करने की क्षमता है। क्या एक अलग विकास वातावरण का उपयोग करना और कोड को Google ड्राइव में नहीं, बल्कि CVS में स्टोर करना संभव है? यह कई डेवलपर्स को एक ही समय में प्रोजेक्ट पर काम करने और वर्जनिंग का समर्थन करने की अनुमति देगा। 'स्टैंडअलोन' परियोजनाओं के लिए 'कंटेनर-सीमा' के लिए ऐसा अवसर है - दुर्भाग्य से अभी तक नहीं। इसलिए, Google डॉक्स ऐड-ऑन के विकास के लिए आपको एक एकीकृत विकास वातावरण का उपयोग करना होगा। यहां एक उदाहरण पायथन स्क्रिप्ट है जो आपको फ़ाइल सिस्टम में एक "स्टैंडअलोन" प्रोजेक्ट को "पंप आउट" करने और परिवर्तन के बाद Google ड्राइव में अपडेट करने की अनुमति देता है।

अंदर क्या है

Google Apps स्क्रिप्ट कैसे काम करती है, इसके बारे में थोड़ा और। प्रोजेक्ट फाइलों में एप्लिकेशन का "सर्वर" (.gs) और "क्लाइंट" (.html) भाग होते हैं। "सर्वर" भाग जावास्क्रिप्ट फ़ंक्शंस का एक सेट है जो उस दस्तावेज़ के एपीआई सहित तृतीय-पक्ष सेवाओं , विभिन्न Google API (ड्राइव, GMail, कैलेंडर) तक पहुंच सकता है जिसमें यह ऐड-ऑन स्थापित है।
इसके अलावा '.gs' फ़ाइलों में पूर्वनिर्धारित फ़ंक्शन होते हैं जिन्हें उपयोगकर्ता द्वारा ऐड-ऑन सेट / ओपन करने पर कहा जाता है, जो आपको मानक Google डॉक्स संपादक के अंदर अपने एप्लिकेशन का UI बनाने की अनुमति देता है। बदले में, "क्लाइंट भाग" एक मानक HTML फ़ाइल है, जिसमें किसी भी "सर्वर" फ़ाइल से किसी भी फ़ंक्शन को कॉल करने की क्षमता है। और यह भी, निश्चित रूप से, तृतीय-पक्ष सीएसएस / जावास्क्रिप्ट फ़ाइलों को जोड़ने की क्षमता के साथ।

उदाहरण

हम एक आवेदन लिखेंगे जो चयनित पाठ को अंग्रेजी से रूसी में दस्तावेज़ में अनुवाद करेगा। Google डिस्क में एक नया Google डॉक्स दस्तावेज़ बनाएं, मेनू खोलें - 'टूल्स' -> 'स्क्रिप्ट एडिटर'। जो डायलॉग दिखाई देता है, उसमें 'Create script for -> Document' चुनें। उसके बाद, आप बहुत एकीकृत विकास वातावरण देखेंगे। परियोजना में, डिफ़ॉल्ट रूप से, फ़ाइल 'Code.gs' Google से एक उदाहरण एप्लिकेशन युक्त बनाई जाती है। हमें अभी इसकी आवश्यकता नहीं है, इसलिए मैं तुरंत इसकी सामग्री को साफ़ करने का सुझाव देता हूं, और फ़ाइल का नाम बदलकर 'Server.gs' कर देता हूं। 'अनटाइटल्ड प्रोजेक्ट' से प्रोजेक्ट का नाम बदलना तुरंत बेहतर होगा, 'ट्रांसलेट उदाहरण' में कहें।

इसलिए, 'Server.gs' में हम उन फंक्शन्स को परिभाषित करते हैं जो हमारे ऐड-ऑन का UI बनाएंगे। ऐसा करने के लिए, बस 'onOpen' फ़ंक्शन को घोषित करें।

function onOpen() { DocumentApp.getUi().createAddonMenu() .addItem('Translate', 'openSidebar') .addToUi(); } function openSidebar( ) {} 

अब, जब आप उस दस्तावेज़ को खोलते हैं जिसमें यह ऐड-ऑन स्थापित है, तो विशेष 'ऐड-ऑन' मेनू में 'अनुवाद' आइटम दिखाई देगा। इस मेनू आइटम पर क्लिक करने से 'ओपनसाइडबार' फ़ंक्शन को कॉल किया जाएगा, जो अभी तक कुछ भी नहीं करता है। इसे जांचने के लिए, विकास के माहौल में, "ऑनऑन" फ़ंक्शन चुनें और 'रन' पर क्लिक करें।


अब आपके दस्तावेज़ में मेनू आइटम 'Add-ons' -> 'अनुवाद उदाहरण' (आपकी परियोजना का नाम) -> 'अनुवाद'

आइए हमारे ऐड-ऑन के लिए यूआई विकसित करना शुरू करें। चूंकि UI ऐड-ऑन एक html पेज है, इसलिए यह HTML मार्कअप, सीएसएस और जावास्क्रिप्ट कोड को अलग-अलग फाइलों में तुरंत अलग करने के लिए समझ में आता है। ऐसा करने के लिए, हम 'Sidebar.html', 'Styles.html', 'Scripts.html' और 'Content.html' फ़ाइलें बनाएँगे। 'साइडबार.html' एक टेम्प्लेट फाइल होगी जिसमें बाकी फाइलें शामिल हैं।



सभी ऐड-ऑन के UI को एक विशिष्ट स्टाइल गाइड का पालन करना चाहिए, इसलिए Google पूर्वनिर्धारित शैलियों के साथ एक विशेष सीएसएस फ़ाइल प्रदान करता है, जिस लिंक को आप उदाहरण में देखते हैं।

'Content.html' और 'Styles.html' खोलें और मार्कअप बनाएँ

 <div class="content"> <p>Select text and click 'Translate'</p> <button class="action btn-block">Translate</button> <p class="result"></p> </div> 

और शैलियों

 <style> .content { padding: 20px; margin : 20px; } .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; } </style> 

और 'Server.gs' में हम 'openSidebar' फंक्शन की बॉडी को जोड़ते हैं।

 function onOpen() { DocumentApp.getUi().createAddonMenu() .addItem('Translate', 'openSidebar') .addToUi(); } function openSidebar( ) { var html = HtmlService.createTemplateFromFile('Sidebar') .evaluate() .setSandboxMode(HtmlService.SandboxMode.NATIVE) .setTitle('Translate example') .setWidth(300); DocumentApp.getUi().showSidebar(html); } 

अब, दस्तावेज़ में "अनुवाद" मेनू आइटम पर क्लिक करके, बाईं ओर, 'साइडबार' खुलेगा।

यह पाठ को अनुवाद करने के लिए तर्क जोड़ना है। ऐसा करने के लिए, हम '.gs' फ़ाइलों में हमारे लिए उपलब्ध विभिन्न Google सेवाओं के एपीआई का उपयोग करेंगे और हमें दस्तावेज़ में चयनित पाठ को खोजने और चयनित भाषा में अनुवाद करने की अनुमति देंगे।
'Server.gs'

 function translate(pollingCounter) { var text = getSelectedText(getSingleSeletetedElement()); if (text) { return LanguageApp.translate(text, 'en', 'ru'); } } function getSelectedText(rangeElement) { if (!rangeElement) { return; } var element = rangeElement.getElement(); var from = rangeElement.getStartOffset(); var to = rangeElement.getEndOffsetInclusive() + 1; if (element.getType() === DocumentApp.ElementType.TEXT || element.getType() === DocumentApp.ElementType.PARAGRAPH) { var text = element.getText(); return text.substring(from, to); } } function getSingleSeletetedElement() { var selection = DocumentApp.getActiveDocument().getSelection(); if (selection) { var elements = selection.getSelectedElements(); if (elements.length === 1) { return elements[0]; } } } 

'ट्रांसलेट' फंक्शन डॉक्यूमेंट में चयनित तत्व को खोजता है, और अगर यह टेक्स्ट या टेक्स्ट ब्लॉक है, तो यह टेक्स्ट के चुने हुए हिस्से को प्राप्त करता है और इसे अंग्रेजी से रूसी में अनुवाद करता है। अब हमें अपने UI से किसी तरह इस फ़ंक्शन को कॉल करने की आवश्यकता है। इसके लिए, 'साइडबार' में चल रहे जावास्क्रिप्ट कोड की वैश्विक ऑब्जेक्ट 'google.script.run' तक पहुंच है, जिससे आप किसी भी '.gs' फ़ाइल से किसी भी फ़ंक्शन को कॉल कर सकते हैं।
'Scripts.html'

  $(function() { $('.action').click(function() { google.script.run.withSuccessHandler(function(text) { if (text) { $('.result').text('Result: ' + text); } else { $('.result').text('Please, select text to translate'); } }).translate(); }); }); 

हो गया, अब हमारा ऐड-ऑन 'ट्रांसलेट' कुंजी दबाकर चयनित टेक्स्ट का अनुवाद कर सकता है।

आप सीधे 2 सुधार कर सकते हैं। सबसे पहले, जब आप 'साइडबार' खोलते हैं, जबकि इसके लिए आवश्यक सभी फाइलें लोड हो जाती हैं, तो कुछ प्रकार के लोडिंग संकेतक को जोड़ना अच्छा होगा। 'Loading.html' फ़ाइल बनाएँ, हमारे 'साइडबार.html' में इसके लिए एक लिंक जोड़ें, और मुख्य सामग्री को तब तक छिपाएँ जब तक कि सभी संसाधन पूरी तरह से लोड न हो जाएँ। एक बार जब सब कुछ तैयार हो जाता है, तो हम संकेतक छिपाते हैं और अपना UI दिखाते हैं।
'Loading.html'

 <div class="app-loading" style="text-align:center"> <br><br><br><br><br><br> Loading... </div> 

Content.html

 <div class="content" style="display:none"> <p>Select text and click 'Translate'</p> <button class="action btn-block">Translate</button> <p class="result"></p> </div> 

Sidebar.html

 <!-- styles --> <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"> <?!= HtmlService.createHtmlOutputFromFile('Styles').getContent(); ?> <!-- layout --> <?!= HtmlService.createHtmlOutputFromFile('Loading').getContent(); ?> <?!= HtmlService.createHtmlOutputFromFile('Content').getContent(); ?> <!--3rd party scripts --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- application scripts --> <?!= HtmlService.createHtmlOutputFromFile('Scripts').getContent(); ?> 

और आखिरकार Scripts.html में

  $(function() { $('.app-loading').hide(); $('.content').show(); $('.action').click(function() { google.script.run.withSuccessHandler(function(text) { if (text) { $('.result').text('Result: ' + text); } else { $('.result').text('Please, select text to translate'); } }).translate(); }); }); 

और दूसरी बात, 'ट्रांसलेट' बटन पर क्लिक किए बिना दस्तावेज़ से चयनित पाठ का अनुवाद स्वचालित रूप से प्राप्त करना अच्छा होगा। इस समस्या को हल करने के लिए, आपको यह पता लगाने की आवश्यकता है कि Google डॉक्स एड-ऑन में वर्तमान में मौजूद सीमाओं में से किसी एक को कैसे प्राप्त किया जा सकता है - कोई भी घटना मॉडल नहीं है जो दस्तावेज़ में उपयोगकर्ता कार्यों के लिए Google स्क्रिप्ट ऐड-ऑन की अनुमति देगा। हमें यूआई से लंबे समय तक पोलिंग - निरंतर अनुरोधों का उपयोग करते हुए ऐड-ऑन अन्तरक्रियाशीलता का अनुकरण करना होगा, जो हमारे 'Server.gs' को टेक्स्ट को हाइलाइट करने और अनुवाद करने के लिए दस्तावेज़ की जांच करने के लिए मजबूर करेगा। ऐसा करने के लिए, हम 'Script.html' एक फ़ंक्शन में लिखते हैं जो एक निश्चित अंतराल के साथ 2 प्रक्रियाएं शुरू करेगा। पहली प्रक्रिया 'अनुवाद' फ़ंक्शन को कॉल करेगी और अनुवाद परिणाम को सहेजेगी। दूसरी प्रक्रिया अनुवाद परिणाम की जांच करेगी और UI को अपडेट करेगी।
'Scripts.html'

  var LongPollingManager = (function() { var process = function(options) { var pollingTimeout = 1500, notificationTimeout = 1500, pollingCounter = 0, pollingStopped = false, pollingResult, pollingProcess, notificationProcess; var start = function() { pollingStopped = false; pollingProcess = setInterval(function() { if (pollingStopped) { return; } pollingCounter++; google.script.run.withSuccessHandler(function(response) { if (pollingStopped) { return; } if (!pollingResult || response.pollingCounter > pollingResult.pollingCounter) { pollingResult = response; } })[options.method](pollingCounter); }, pollingTimeout); setTimeout(function() { notificationProcess = setInterval(function() { if (pollingStopped) { return; } options.notification(getLastResult()); }, notificationTimeout); }, notificationTimeout/2); }; var getLastResult = function() { return pollingResult; }; var stop = function() { pollingResult = null; pollingStopped = true; clearInterval(pollingProcess); clearInterval(notificationProcess); }; return { start: start, stop : stop, isActive: function() { return !pollingStopped; }, getLastResult : getLastResult };; }; return { process: process }; })(); var showResult = function(result) { if (result && result.text) { $('.result').text('Result: ' + result.text); } else { $('.result').text(''); } }; $(function() { $('.loading').hide(); $('.content').show(); $('.action').click(function() { google.script.run.withSuccessHandler(function(text) { if (text) { $('.result').text('Result: ' + text); } else { $('.result').text('Please, select text to translate'); } }).translate(); }); LongPollingManager.process({ method: 'translate', notification: showResult }).start(); }); 

'Server.gs'

 function translate(pollingCounter) { var result = { pollingCounter : pollingCounter }; var text = getSelectedText(getSingleSeletetedElement()); if (text) { result.text = LanguageApp.translate(text, 'en', 'ru'); } return result; } 

हो गया, अब हमारा ऐड-ऑन स्वचालित रूप से चयनित टेक्स्ट का अनुवाद करता है।
Google ड्राइव पर दस्तावेज़ + परियोजना कोड
गिथब कोड

निष्कर्ष

तो, Google डॉक्स ऐड-ऑन एक नया प्लेटफ़ॉर्म है जो आपको उन अनुप्रयोगों को बनाने की अनुमति देता है जो मूल Google डॉक्स संपादक की क्षमताओं का विस्तार करते हैं।
मेरी राय में पेशेवरों और विपक्ष:

• + Google डॉक्स उपयोगकर्ताओं का एक विशाल दर्शक।
• पूरी तरह से जावास्क्रिप्ट में अनुप्रयोग विकास।
• + कई Google API और किसी भी तृतीय-पक्ष सेवा (HTTP अनुरोध) तक पहुंच।
• - Google डॉक्स के अंदर परियोजना का विकास, स्थानीय रूप से विकास का संचालन करने का कोई तरीका नहीं है, कई डेवलपर्स के बीच काम को विभाजित करना मुश्किल है।
• - दस्तावेज़ के साथ इंटरैक्टिव बातचीत का अभाव (दस्तावेज़ में किसी भी उपयोगकर्ता कार्यों के बारे में अलर्ट प्राप्त करने का कोई तरीका नहीं है।

पुनश्च

मुझे लगता है कि एमएस ऑफिस और Google ड्राइव के बीच प्रतिस्पर्धा में, Google ने सादगी, सुविधा और डेवलपर समुदाय पर दांव लगाने का फैसला किया। मैं एमएस वर्ड बनाम गुडल डॉक्स का उदाहरण बताऊंगा। MS Word में उपयोगकर्ता के लिए बहुत बड़ी संख्या में कार्य उपलब्ध हैं (और परिणामस्वरूप, एक अतिभारित और जटिल UI) और एक खुला एपीआई नहीं है। Google डॉक्स - इसके विपरीत, उपकरण का न्यूनतम आवश्यक सेट और एक ओपन एपीआई है। अब आप Google डॉक्स ऐड-ऑन गैलरी में किसी भी फ़ंक्शन की आवश्यकता पा सकते हैं या इसे स्वयं लिख सकते हैं। और उपयोगकर्ता अपने दस्तावेज़ में केवल उन कार्यों को जोड़ सकता है जिनकी उसे आवश्यकता है।