स्मार्ट चिप की मदद से, 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 सेवा का इस्तेमाल करता है.

स्पेस कैसे काम करता है

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 में, प्रोजेक्ट चुनें पेज पर जाएं.

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

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

Google Books API को चालू करना

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

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

  1. Google Cloud Console में, मेन्यू > एपीआई और सेवाएं > OAuth की सहमति वाली स्क्रीन पर जाएं.

    उस स्क्रीन पर जाएं जहां OAuth के लिए सहमति दी जाती है

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

  5. अपने ऐप्लिकेशन रजिस्ट्रेशन की खास जानकारी देखें. बदलाव करने के लिए, बदलाव करें पर क्लिक करें. अगर ऐप्लिकेशन रजिस्ट्रेशन ठीक लगता है, तो डैशबोर्ड पर वापस जाएं पर क्लिक करें.

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

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

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

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

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

स्क्रिप्ट सेट अप करें

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

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

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

Cloud प्रोजेक्ट का नंबर कॉपी करें

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

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

  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. इस यूआरएल को दस्तावेज़ में चिपकाएं और यूआरएल को स्मार्ट चिप में बदलने के लिए, टैब बटन दबाएं: 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();
  }
}