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

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

मकसद

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

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

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

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

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

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

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

Apps Script की सेवाएं

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

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

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

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

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

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

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

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

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

    कोई क्लाउड प्रोजेक्ट चुनें

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

Google Books API चालू करना

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

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

  1. Google Cloud Console में, मेन्यू > Google Auth platform > ब्रैंडिंग पर जाएं.

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

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

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

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

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

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

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

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

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

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

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

क्लाउड प्रोजेक्ट का नंबर कॉपी करें

  1. Google Cloud console में, मेन्यू &gt IAM और एडमिन &gt सेटिंग पर जाएं.

    आईएएम और एडमिन सेटिंग पर जाएं

  2. प्रोजेक्ट नंबर फ़ील्ड में, वैल्यू कॉपी करें.

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

  1. अपने Apps Script प्रोजेक्ट में जाकर, प्रोजेक्ट सेटिंग का आइकॉन प्रोजेक्ट सेटिंग पर क्लिक करें.
  2. Google Cloud Platform (GCP) प्रोजेक्ट में जाकर, प्रोजेक्ट बदलें पर क्लिक करें.
  3. GCP प्रोजेक्ट नंबर में, Google Cloud प्रोजेक्ट नंबर चिपकाएं.
  4. प्रोजेक्ट सेट करें पर क्लिक करें.

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

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

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

  1. अपने Apps Script प्रोजेक्ट में, एडिटर पर क्लिक करें.
  2. YOUR_API_KEY को Google Books API के उस एपीआई पासकोड से बदलें जिसे पिछले सेक्शन में बनाया गया था.
  3. डिप्लॉय करें > टेस्ट डिप्लॉयमेंट पर क्लिक करें.
  4. इंस्टॉल करें > हो गया पर क्लिक करें.
  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
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();
  }
}