स्मार्ट चिप की मदद से, Google Books पर मौजूद लिंक की झलक देखना

कोडिंग का लेवल: इंटरमीडिएट
अवधि: 30 मिनट
प्रोजेक्ट का टाइप: Google Workspace ऐड-ऑन

मकसद

  • यह समझना कि ऐड-ऑन क्या करता है.
  • Apps Script का इस्तेमाल करके ऐड-ऑन बनाने का तरीका समझना. साथ ही, यह समझना कि Apps Script की सेवाएं क्या करती हैं.
  • अपना एनवायरमेंट सेट अप करना.
  • स्क्रिप्ट सेट अप करना.
  • स्क्रिप्ट चलाना.

इस Google Workspace ऐड-ऑन के बारे में जानकारी

इस सैंपल में, आपको Google Workspace का एक ऐड-ऑन बनाना है. यह ऐड-ऑन, Google Docs के किसी दस्तावेज़ में Google Books के लिंक की झलक दिखाता है. जब कोई व्यक्ति किसी दस्तावेज़ में Google Books का यूआरएल टाइप या चिपकाता है, तो ऐड-ऑन उस लिंक को पहचान लेता है और लिंक की झलक दिखाने की सुविधा चालू कर देता है. लिंक की झलक देखने के लिए, उसे स्मार्ट चिप में बदला जा सकता है. इसके बाद, लिंक पर कर्सर घुमाकर एक कार्ड देखा जा सकता है. इस कार्ड में, किताब के बारे में ज़्यादा जानकारी दिखती है.

यह ऐड-ऑन, Google Books API से कनेक्ट होने और Google Docs में दिखाने के लिए Google Books के बारे में जानकारी पाने के लिए, Apps Script की UrlFetch Service का इस्तेमाल करता है.

यह कैसे काम करता है

Google Workspace ऐड-ऑन की मेनिफ़ेस्ट फ़ाइल में, स्क्रिप्ट ऐड-ऑन को Google Docs के साथ काम करने के लिए कॉन्फ़िगर करती है. साथ ही, यह Google Books की वेबसाइट (https://books.google.com) के कुछ पैटर्न से मेल खाने वाले यूआरएल के लिए, लिंक की झलक दिखाने की सुविधा चालू करती है.

कोड फ़ाइल में, स्क्रिप्ट Google Books API से कनेक्ट होती है और किताब के बारे में जानकारी पाने के लिए यूआरएल का इस्तेमाल करती है. यह जानकारी, Volume संसाधन का एक इंस्टेंस होती है. स्क्रिप्ट इस जानकारी का इस्तेमाल करके, एक स्मार्ट चिप जनरेट करती है. इस स्मार्ट चिप में, किताब का टाइटल दिखता है. साथ ही, एक झलक दिखाने वाला कार्ड दिखता है. इस कार्ड में, किताब का सारांश, पेज की संख्या, किताब के कवर की इमेज, और रेटिंग की संख्या दिखती है.

Apps Script की सेवाएं

यह ऐड-ऑन, इन सेवाओं का इस्तेमाल करता है:

  • UrlFetch Service–यह Google Books API से कनेक्ट होकर, किताबों के बारे में जानकारी पाने के लिए इस्तेमाल की जाती है. यह जानकारी, एपीआई के Volume संसाधन के इंस्टेंस होती है.
  • कार्ड सेवा–यह ऐड-ऑन का यूज़र इंटरफ़ेस बनाती है.

ज़रूरी शर्तें

इस सैंपल का इस्तेमाल करने के लिए, आपको ये ज़रूरी शर्तें पूरी करनी होंगी:

  • एक Google खाता. Google Workspace खातों के लिए, एडमिन की मंज़ूरी की ज़रूरत पड़ सकती है.
  • इंटरनेट ऐक्सेस करने की सुविधा वाला वेब ब्राउज़र.

  • एक Google Cloud प्रोजेक्ट.

अपना एनवायरमेंट सेट अप करने का तरीका

ऐड-ऑन बनाने के लिए, यहां दिए गए सेक्शन में एनवायरमेंट सेट अप करने का तरीका बताया गया है.

Google Cloud Console में अपना Cloud प्रोजेक्ट खोलना

अगर यह पहले से खुला नहीं है, तो वह Cloud प्रोजेक्ट खोलें जिसका इस्तेमाल आपको इस सैंपल के लिए करना है:

  1. Google Cloud Console में, कोई प्रोजेक्ट चुनें पेज पर जाएं.

    कोई Cloud प्रोजेक्ट चुनें

  2. वह Google Cloud प्रोजेक्ट चुनें जिसका इस्तेमाल आपको करना है. इसके अलावा, प्रोजेक्ट बनाएं पर क्लिक करें और स्क्रीन पर दिए गए निर्देशों का पालन करें. अगर आपने कोई Google Cloud प्रोजेक्ट बनाया है, तो आपको उसके लिए बिलिंग चालू करनी पड़ सकती है.

Google Books API चालू करना

यह ऐड-ऑन, Google Books API से कनेक्ट होता है. Google API का इस्तेमाल करने से पहले, आपको उन्हें Google Cloud प्रोजेक्ट में चालू करना होगा. किसी एक Google Cloud प्रोजेक्ट में, एक या उससे ज़्यादा एपीआई चालू किए जा सकते हैं.

इस ऐड-ऑन के लिए, सहमति की स्क्रीन वाला Cloud प्रोजेक्ट ज़रूरी है. OAuth के लिए सहमति की स्क्रीन को कॉन्फ़िगर करने से यह तय होता है कि Google, उपयोगकर्ताओं को क्या दिखाता है. साथ ही, इससे आपका ऐप्लिकेशन रजिस्टर हो जाता है, ताकि उसे बाद में पब्लिश किया जा सके.

  1. Google API Console में, मेन्यू > Google Auth प्लैटफ़ॉर्म > ब्रैंडिंग पर जाएं.

    ब्रैंडिंग पर जाएं

  2. अगर आपने Google Auth प्लैटफ़ॉर्म को पहले ही कॉन्फ़िगर कर लिया है, तो ब्रैंडिंग, दर्शक, और डेटा ऐक्सेस में, OAuth के लिए सहमति की स्क्रीन की इन सेटिंग को कॉन्फ़िगर किया जा सकता है. अगर आपको Google Auth प्लैटफ़ॉर्म को अब तक कॉन्फ़िगर नहीं किया गया है वाला मैसेज दिखता है, तो शुरू करें पर क्लिक करें:
    1. ऐप्लिकेशन की जानकारी में, ऐप्लिकेशन का नाम में जाकर, ऐप्लिकेशन के लिए कोई नाम डालें.
    2. उपयोगकर्ता सहायता के लिए ईमेल में जाकर, सहायता के लिए कोई ईमेल पता चुनें. अगर उपयोगकर्ताओं को अपनी सहमति के बारे में कोई सवाल पूछना है, तो वे इस ईमेल पते पर संपर्क कर सकते हैं.
    3. आगे बढ़ें पर क्लिक करें.
    4. दर्शक में जाकर, इंटरनल को चुनें.
    5. आगे बढ़ें पर क्लिक करें.
    6. संपर्क की जानकारी में जाकर, ईमेल पता डालें. इस ईमेल पते पर, आपको अपने प्रोजेक्ट में किए गए किसी भी बदलाव के बारे में सूचना मिल सकती है.
    7. आगे बढ़ें पर क्लिक करें.
    8. पूरा करें में जाकर, Google API सेवाओं के उपयोगकर्ता के डेटा की नीति की समीक्षा करें. अगर आपको यह नीति स्वीकार है, तो मैं Google API सेवाओं के उपयोगकर्ता के डेटा की नीति से सहमत हूं को चुनें.
    9. जारी रखें पर क्लिक करें.
    10. बनाएं पर क्लिक करें.
  3. फ़िलहाल, स्कोप जोड़ने की प्रोसेस को छोड़ा जा सकता है. भविष्य में, अगर आपको अपने Google Workspace संगठन के बाहर इस्तेमाल के लिए कोई ऐप्लिकेशन बनाना है, तो आपको उपयोगकर्ता का टाइप बदलकर एक्सटर्नल करना होगा. इसके बाद, अनुमति के वे स्कोप जोड़ें जिनकी आपके ऐप्लिकेशन को ज़रूरत है. ज़्यादा जानने के लिए, OAuth के लिए सहमति की स्क्रीन को कॉन्फ़िगर करने से जुड़ा पूरा गाइड देखें.

Google Books API के लिए एपीआई पासकोड पाना

  1. Google API Console पर जाएं. पक्का करें कि बिलिंग की सुविधा वाला आपका प्रोजेक्ट खुला हो.
  2. Google API Console में, मेन्यू > एपीआई और सेवाएं > क्रेडेंशियल पर जाएं.

    क्रेडेंशियल पर जाएं

  3. क्रेडेंशियल बनाएं > एपीआई पासकोड पर क्लिक करें.

  4. अपना एपीआई पासकोड नोट कर लें, ताकि आगे के चरण में उसका इस्तेमाल किया जा सके.

स्क्रिप्ट सेट अप करना

ऐड-ऑन बनाने के लिए, यहां दिए गए सेक्शन में स्क्रिप्ट सेट अप करने का तरीका बताया गया है.

Apps Script प्रोजेक्ट बनाना

  1. Google Books के लिंक की झलक देखें Apps Script प्रोजेक्ट खोलने के लिए, यहां दिए गए बटन पर क्लिक करें.
    प्रोजेक्ट खोलें
  2. खास जानकारी पर क्लिक करें.
  3. खास जानकारी वाले पेज पर, कॉपी बनाने का आइकॉन कॉपी बनाएं पर क्लिक करें.
  4. Apps Script प्रोजेक्ट की अपनी कॉपी में, Code.gs फ़ाइल पर जाएं और YOUR_API_KEY की जगह, वह एपीआई पासकोड डालें जो आपने पिछले सेक्शन में जनरेट किया था.

भविष्य में, अगर आपको Google के कुछ एपीआई का इस्तेमाल करना है या अपना ऐप्लिकेशन पब्लिश करना है, तो आपको अपने Cloud प्रोजेक्ट को Apps Script प्रोजेक्ट से जोड़ना होगा. इस गाइड के लिए, आपको ऐसा करने की ज़रूरत नहीं है. ज़्यादा जानने के लिए, Google Cloud प्रोजेक्ट का गाइड देखें.

ऐड-ऑन की जांच करना

यहां दिए गए सेक्शन में, आपके बनाए गए ऐड-ऑन की जांच करने का तरीका बताया गया है.

टेस्ट के लिए डिप्लॉयमेंट इंस्टॉल करना

  1. अपने Apps Script प्रोजेक्ट में, एडिटर पर क्लिक करें.
  2. डिप्लॉय करें > टेस्ट के लिए डिप्लॉयमेंट पर क्लिक करें.
  3. इंस्टॉल करें > हो गया पर क्लिक करें.
  1. docs.new पर जाकर, Google Docs का कोई दस्तावेज़ बनाएं.
  2. दस्तावेज़ में यह यूआरएल चिपकाएं और यूआरएल को स्मार्ट चिप में बदलने के लिए, tab कुंजी दबाएं: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
  3. स्मार्ट चिप पर कर्सर घुमाएं. इसके बाद, कहे जाने पर, ऐड-ऑन को चलाने के लिए अनुमति दें. झलक दिखाने वाले कार्ड में, किताब के बारे में जानकारी दिखती है.

यहां दी गई इमेज में, लिंक की झलक दिखाई गई है:

Google पर सॉफ़्टवेयर इंजीनियरिंग की किताब की झलक दिखाने वाला लिंक.

कोड की समीक्षा करना

इस ऐड-ऑन के लिए Apps Script कोड की समीक्षा करने के लिए, सोर्स कोड देखें पर क्लिक करके सेक्शन को बड़ा करें:

सोर्स कोड देखें

appsscript.json

solutions/add-on/book-smartchip/appsscript.json
{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "urlFetchWhitelist": ["https://www.googleapis.com/books/v1/volumes/"],
  "addOns": {
    "common": {
      "name": "Preview Books Add-on",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/library-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "bookLinkPreview",
          "patterns": [
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books"
            },
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books/edition"
            }
          ],
          "labelText": "Book",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/book-icon.png",
          "localizedLabelText": {
            "es": "Libros"
          }
        }
      ]
    }
  }
}

Code.gs

solutions/add-on/book-smartchip/Code.js
/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

function getBook(id) {
  const apiKey = "YOUR_API_KEY"; // Replace with your API key
  const apiEndpoint = `https://www.googleapis.com/books/v1/volumes/${id}?key=${apiKey}&country=US`;
  const response = UrlFetchApp.fetch(apiEndpoint);
  return JSON.parse(response);
}

function bookLinkPreview(event) {
  if (event.docs.matchedUrl.url) {
    const segments = event.docs.matchedUrl.url.split("/");
    const volumeID = segments[segments.length - 1];

    const bookData = getBook(volumeID);
    const bookTitle = bookData.volumeInfo.title;
    const bookDescription = bookData.volumeInfo.description;
    const bookImage = bookData.volumeInfo.imageLinks.small;
    const bookAuthors = bookData.volumeInfo.authors;
    const bookPageCount = bookData.volumeInfo.pageCount;

    const previewHeader = CardService.newCardHeader()
      .setSubtitle(`By ${bookAuthors}`)
      .setTitle(bookTitle);

    const previewPages = CardService.newDecoratedText()
      .setTopLabel("Page count")
      .setText(bookPageCount);

    const previewDescription = CardService.newDecoratedText()
      .setTopLabel("About this book")
      .setText(bookDescription)
      .setWrapText(true);

    const previewImage = CardService.newImage()
      .setAltText("Image of book cover")
      .setImageUrl(bookImage);

    const buttonBook = CardService.newTextButton()
      .setText("View book")
      .setOpenLink(CardService.newOpenLink().setUrl(event.docs.matchedUrl.url));

    const cardSectionBook = CardService.newCardSection()
      .addWidget(previewImage)
      .addWidget(previewPages)
      .addWidget(CardService.newDivider())
      .addWidget(previewDescription)
      .addWidget(buttonBook);

    return CardService.newCardBuilder()
      .setHeader(previewHeader)
      .addSection(cardSectionBook)
      .build();
  }
}