स्मार्ट चिप की मदद से लिंक की झलक देखना

इस पेज पर, Google Workspace का ऐसा ऐड-ऑन बनाने का तरीका बताया गया है जिससे Google Docs, Sheets, और Slides के उपयोगकर्ता, तीसरे पक्ष की सेवा के लिंक की झलक देख सकें.

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

उपयोगकर्ता लिंक की झलक कैसे देखते हैं

लिंक की झलक देखने के लिए, उपयोगकर्ता स्मार्ट चिप और कार्ड के साथ इंटरैक्ट करते हैं.

उपयोगकर्ता किसी कार्ड की झलक देखता है

जब उपयोगकर्ता किसी दस्तावेज़ या स्प्रेडशीट में यूआरएल टाइप या चिपकाते हैं, तो Google Docs या Google Sheets उन्हें लिंक को स्मार्ट चिप से बदलने के लिए कहता है. स्मार्ट चिप, लिंक किए गए कॉन्टेंट का आइकॉन और छोटा टाइटल या ब्यौरा दिखाता है. जब उपयोगकर्ता चिप पर कर्सर घुमाता है, तो उसे एक कार्ड इंटरफ़ेस दिखता है. इसमें फ़ाइल या लिंक के बारे में ज़्यादा जानकारी दिखती है.

इस वीडियो में दिखाया गया है कि उपयोगकर्ता किसी लिंक को स्मार्ट चिप में कैसे बदलता है और कार्ड की झलक कैसे देखता है:

उपयोगकर्ता, Slides में लिंक की झलक कैसे देखते हैं

Slides में लिंक की झलक देखने के लिए, तीसरे पक्ष के स्मार्ट चिप काम नहीं करते. जब उपयोगकर्ता किसी प्रज़ेंटेशन में यूआरएल टाइप या चिपकाते हैं, तो Slides उन्हें लिंक को चिप के बजाय लिंक किए गए टेक्स्ट के तौर पर, उसके टाइटल से बदलने के लिए कहता है. जब कोई उपयोगकर्ता लिंक के टाइटल पर कर्सर घुमाता है, तो उसे एक कार्ड इंटरफ़ेस दिखता है. इसमें लिंक की जानकारी की झलक दिखती है.

नीचे दी गई इमेज में दिखाया गया है कि Slides में लिंक की झलक कैसे दिखती है:

Slides के लिए, लिंक की झलक का उदाहरण

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

Apps Script

Node.js

के तौर पर चलाने के लिए लिखे गए हैं

Python

Java

ज़रूरी नहीं: तीसरे पक्ष की सेवा के लिए पुष्टि करने की सुविधा सेट अप करना

अगर आपका ऐड-ऑन किसी ऐसी सेवा से कनेक्ट होता है जिसके लिए अनुमति की ज़रूरत होती है, तो लिंक की झलक देखने के लिए उपयोगकर्ताओं को उस सेवा की पुष्टि करनी होगी. इसका मतलब है कि जब उपयोगकर्ता पहली बार आपकी सेवा से मिले लिंक को Docs, Sheets या Slides फ़ाइल में चिपकाते हैं, तो आपके ऐड-ऑन को अनुमति देने की प्रोसेस शुरू करनी होगी.

OAuth सेवा या कस्टम अनुमति वाला प्रॉम्प्ट सेट अप करने के लिए, अपने ऐड-ऑन को तीसरे पक्ष की सेवा से कनेक्ट करना लेख पढ़ें.

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

  1. अपने ऐड-ऑन के मेनिफ़ेस्ट में, लिंक की झलक कॉन्फ़िगर करें.
  2. अपने लिंक के लिए, स्मार्ट चिप और कार्ड इंटरफ़ेस बनाएं.

लिंक की झलक दिखाने की सुविधा कॉन्फ़िगर करना

लिंक की झलक कॉन्फ़िगर करने के लिए, अपने ऐड-ऑन के मेनिफ़ेस्ट में ये सेक्शन और फ़ील्ड डालें:

  1. addOns सेक्शन में, Docs को बड़ा करने के लिए docs फ़ील्ड, Sheets को बड़ा करने के लिए sheets फ़ील्ड, और Slides को बड़ा करने के लिए slides फ़ील्ड जोड़ें.

  2. हर फ़ील्ड में, linkPreviewTriggers ट्रिगर लागू करें, जिसमें runFunction शामिल हो. इस फ़ंक्शन को यहां दिए गए सेक्शन, स्मार्ट चिप और कार्ड बनाएं में बताया गया है.

    linkPreviewTriggers ट्रिगर में किन फ़ील्ड की जानकारी दी जा सकती है, यह जानने के लिए Apps Script मेनिफ़ेस्ट या अन्य रनटाइम के लिए डिप्लॉयमेंट संसाधन के रेफ़रंस दस्तावेज़ देखें.

  3. oauthScopes फ़ील्ड में, दायरा https://www.googleapis.com/auth/workspace.linkpreview जोड़ें, ताकि उपयोगकर्ता अपनी ओर से लिंक की झलक देखने के लिए, ऐड-ऑन को अनुमति दे सकें.

उदाहरण के लिए, यहां दिए गए मेनिफ़ेस्ट के oauthScopes और addons सेक्शन को देखें. यह सेक्शन, सहायता केस की सेवा के लिए लिंक की झलक को कॉन्फ़िगर करता है.

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview"
  ],
  "addOns": {
    "common": {
      "name": "Preview support cases",
      "logoUrl": "https://www.example.com/images/company-logo.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "logoUrl": "https://www.example.com/images/support-icon.png",
          "localizedLabelText": {
            "es": "Caso de soporte"
          }
        }
      ]
    },
    "sheets": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "logoUrl": "https://www.example.com/images/support-icon.png",
          "localizedLabelText": {
            "es": "Caso de soporte"
          }
        }
      ]
    },
    "slides": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "logoUrl": "https://www.example.com/images/support-icon.png",
          "localizedLabelText": {
            "es": "Caso de soporte"
          }
        }
      ]
    }
  }
}

उदाहरण में, Google Workspace ऐड-ऑन, किसी कंपनी की सहायता केस सेवा के लिंक की झलक दिखाता है. लिंक की झलक देखने के लिए, ऐड-ऑन तीन यूआरएल पैटर्न तय करता है. जब भी कोई लिंक, यूआरएल पैटर्न से मैच होता है, तो कॉलबैक फ़ंक्शन caseLinkPreview, Docs, Sheets या Slides में एक कार्ड और स्मार्ट चिप बनाता है और उसे दिखाता है. साथ ही, यूआरएल को लिंक के टाइटल से बदल देता है.

स्मार्ट चिप और कार्ड बनाना

किसी लिंक के लिए स्मार्ट चिप और कार्ड दिखाने के लिए, आपको linkPreviewTriggers ऑब्जेक्ट में बताए गए सभी फ़ंक्शन लागू करने होंगे.

जब कोई उपयोगकर्ता किसी ऐसे लिंक से इंटरैक्ट करता है जो किसी तय यूआरएल पैटर्न से मैच करता है, तो linkPreviewTriggers ट्रिगर होता है और उसका कॉलबैक फ़ंक्शन, इवेंट ऑब्जेक्ट EDITOR_NAME.matchedUrl.url को आर्ग्युमेंट के तौर पर पास करता है. लिंक की झलक दिखाने के लिए स्मार्ट चिप और कार्ड बनाने के लिए, इस इवेंट ऑब्जेक्ट के पेलोड का इस्तेमाल किया जाता है.

उदाहरण के लिए, अगर कोई उपयोगकर्ता Docs में लिंक https://www.example.com/cases/123456 का झलक देखता है, तो इवेंट का यह पेलोड दिखता है:

JSON 

{
  "docs": {
    "matchedUrl": {
        "url": "https://www.example.com/support/cases/123456"
    }
  }
}

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

लिंक की झलक दिखाने के लिए स्मार्ट चिप और कार्ड बनाने के लिए:

  1. अपने ऐड-ऑन के मेनिफ़ेस्ट के linkPreviewTriggers सेक्शन में बताए गए फ़ंक्शन को लागू करें:
    1. फ़ंक्शन को आर्ग्युमेंट के तौर पर, EDITOR_NAME.matchedUrl.url वाला इवेंट ऑब्जेक्ट स्वीकार करना चाहिए और एक Card ऑब्जेक्ट दिखाना चाहिए.
    2. अगर आपकी सेवा को अनुमति की ज़रूरत है, तो फ़ंक्शन को अनुमति फ़्लो को भी शुरू करना होगा.
  2. हर झलक वाले कार्ड के लिए, ऐसे सभी कॉलबैक फ़ंक्शन लागू करें जो इंटरफ़ेस के लिए विजेट इंटरैक्टिविटी देते हैं. उदाहरण के लिए, अगर आपने "लिंक देखें" वाला बटन शामिल किया है, तो ऐसी कार्रवाई बनाई जा सकती है जो लिंक को नई विंडो में खोलने के लिए, कॉलबैक फ़ंक्शन तय करती है. विजेट इंटरैक्शन के बारे में ज़्यादा जानने के लिए, ऐड-ऑन ऐक्शन देखें.

यहां दिया गया कोड, Docs के लिए कॉलबैक फ़ंक्शन caseLinkPreview बनाता है:

Apps Script

apps-script/3p-resources/3p-resources.gs
/**
* Entry point for a support case link preview.
*
* @param {!Object} event The event object.
* @return {!Card} The resulting preview link card.
*/
function caseLinkPreview(event) {

  // If the event object URL matches a specified pattern for support case links.
  if (event.docs.matchedUrl.url) {

    // Uses the event object to parse the URL and identify the case details.
    const caseDetails = parseQuery(event.docs.matchedUrl.url);

    // Builds a preview card with the case name, and description
    const caseHeader = CardService.newCardHeader()
      .setTitle(`Case ${caseDetails["name"][0]}`);
    const caseDescription = CardService.newTextParagraph()
      .setText(caseDetails["description"][0]);

    // Returns the card.
    // Uses the text from the card's header for the title of the smart chip.
    return CardService.newCardBuilder()
      .setHeader(caseHeader)
      .addSection(CardService.newCardSection().addWidget(caseDescription))
      .build();
  }
}

/**
* Extracts the URL parameters from the given URL.
*
* @param {!string} url The URL to parse.
* @return {!Map} A map with the extracted URL parameters.
*/
function parseQuery(url) {
  const query = url.split("?")[1];
  if (query) {
    return query.split("&")
    .reduce(function(o, e) {
      var temp = e.split("=");
      var key = temp[0].trim();
      var value = temp[1].trim();
      value = isNaN(value) ? value : Number(value);
      if (o[key]) {
        o[key].push(value);
      } else {
        o[key] = [value];
      }
      return o;
    }, {});
  }
  return null;
}

Node.js

node/3p-resources/index.js
/**
 * 
 * A support case link preview.
 *
 * @param {!URL} url The event object.
 * @return {!Card} The resulting preview link card.
 */
function caseLinkPreview(url) {
  // Builds a preview card with the case name, and description
  // Uses the text from the card's header for the title of the smart chip.
  // Parses the URL and identify the case details.
  const name = `Case ${url.searchParams.get("name")}`;
  return {
    action: {
      linkPreview: {
        title: name,
        previewCard: {
          header: {
            title: name
          },
          sections: [{
            widgets: [{
              textParagraph: {
                text: url.searchParams.get("description")
              }
            }]
          }]
        }
      }
    }
  };
}

Python

python/3p-resources/create_link_preview/main.py
def case_link_preview(url):
    """A support case link preview.
    Args:
      url: A matching URL.
    Returns:
      The resulting preview link card.
    """

    # Parses the URL and identify the case details.
    query_string = parse_qs(url.query)
    name = f'Case {query_string["name"][0]}'
    # Uses the text from the card's header for the title of the smart chip.
    return {
        "action": {
            "linkPreview": {
                "title": name,
                "previewCard": {
                    "header": {
                        "title": name
                    },
                    "sections": [{
                        "widgets": [{
                            "textParagraph": {
                                "text": query_string["description"][0]
                            }
                        }]
                    }],
                }
            }
        }
    }

Java

java/3p-resources/src/main/java/CreateLinkPreview.java
/**
 * A support case link preview.
 *
 * @param url A matching URL.
 * @return The resulting preview link card.
 */
JsonObject caseLinkPreview(URL url) throws UnsupportedEncodingException {
  // Parses the URL and identify the case details.
  Map<String, String> caseDetails = new HashMap<String, String>();
  for (String pair : url.getQuery().split("&")) {
      caseDetails.put(URLDecoder.decode(pair.split("=")[0], "UTF-8"), URLDecoder.decode(pair.split("=")[1], "UTF-8"));
  }

  // Builds a preview card with the case name, and description
  // Uses the text from the card's header for the title of the smart chip.
  JsonObject cardHeader = new JsonObject();
  String caseName = String.format("Case %s", caseDetails.get("name"));
  cardHeader.add("title", new JsonPrimitive(caseName));

  JsonObject textParagraph = new JsonObject();
  textParagraph.add("text", new JsonPrimitive(caseDetails.get("description")));

  JsonObject widget = new JsonObject();
  widget.add("textParagraph", textParagraph);

  JsonArray widgets = new JsonArray();
  widgets.add(widget);

  JsonObject section = new JsonObject();
  section.add("widgets", widgets);

  JsonArray sections = new JsonArray();
  sections.add(section);

  JsonObject previewCard = new JsonObject();
  previewCard.add("header", cardHeader);
  previewCard.add("sections", sections);

  JsonObject linkPreview = new JsonObject();
  linkPreview.add("title", new JsonPrimitive(caseName));
  linkPreview.add("previewCard", previewCard);

  JsonObject action = new JsonObject();
  action.add("linkPreview", linkPreview);

  JsonObject renderActions = new JsonObject();
  renderActions.add("action", action);

  return renderActions;
}

झलक दिखाने वाले कार्ड के लिए काम करने वाले कॉम्पोनेंट

Google Workspace के ऐड-ऑन, लिंक की झलक दिखाने वाले कार्ड के लिए, इन विजेट और कार्रवाइयों के साथ काम करते हैं:

Apps Script

कार्ड सेवा फ़ील्ड टाइप
TextParagraph विजेट
DecoratedText विजेट
Image विजेट
IconImage विजेट
ButtonSet विजेट
TextButton विजेट
ImageButton विजेट
Grid विजेट
Divider विजेट
OpenLink कार्रवाई
Navigation कार्रवाई
सिर्फ़ updateCard तरीका इस्तेमाल किया जा सकता है.

JSON

कार्ड (google.apps.card.v1) फ़ील्ड टाइप
TextParagraph विजेट
DecoratedText विजेट
Image विजेट
Icon विजेट
ButtonList विजेट
Button विजेट
Grid विजेट
Divider विजेट
OpenLink कार्रवाई
Navigation कार्रवाई
सिर्फ़ updateCard तरीका इस्तेमाल किया जा सकता है.

पूरा उदाहरण: सहायता केस ऐड-ऑन

इस उदाहरण में, Google Workspace का एक ऐड-ऑन दिखाया गया है. यह ऐड-ऑन, Google Docs में कंपनी के सहायता मामलों के लिंक की झलक दिखाता है.

उदाहरण में ये काम किए गए हैं:

  • सहायता मामलों के लिंक की झलक दिखाता है, जैसे कि https://www.example.com/support/cases/1234. स्मार्ट चिप में सहायता आइकॉन दिखता है. साथ ही, प्रीव्यू कार्ड में केस आईडी और जानकारी शामिल होती है.
  • अगर उपयोगकर्ता की जगह की भाषा स्पेनिश पर सेट है, तो स्मार्ट चिप अपने labelText को स्पेनिश में बदल देता है.

मेनिफ़ेस्ट

Apps Script

apps-script/3p-resources/appsscript.json
{
  "timeZone": "America/New_York",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/workspace.linkcreate"
  ],
  "addOns": {
    "common": {
      "name": "Manage support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ],
      "createActionTriggers": [
        {
          "id": "createCase",
          "labelText": "Create support case",
          "localizedLabelText": {
            "es": "Crear caso de soporte"
          },
          "runFunction": "createCaseInputCard",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

JSON 

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview"
  ],
  "addOns": {
    "common": {
      "name": "Preview support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "URL",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

कोड

Apps Script

apps-script/3p-resources/3p-resources.gs
/**
* Entry point for a support case link preview.
*
* @param {!Object} event The event object.
* @return {!Card} The resulting preview link card.
*/
function caseLinkPreview(event) {

  // If the event object URL matches a specified pattern for support case links.
  if (event.docs.matchedUrl.url) {

    // Uses the event object to parse the URL and identify the case details.
    const caseDetails = parseQuery(event.docs.matchedUrl.url);

    // Builds a preview card with the case name, and description
    const caseHeader = CardService.newCardHeader()
      .setTitle(`Case ${caseDetails["name"][0]}`);
    const caseDescription = CardService.newTextParagraph()
      .setText(caseDetails["description"][0]);

    // Returns the card.
    // Uses the text from the card's header for the title of the smart chip.
    return CardService.newCardBuilder()
      .setHeader(caseHeader)
      .addSection(CardService.newCardSection().addWidget(caseDescription))
      .build();
  }
}

/**
* Extracts the URL parameters from the given URL.
*
* @param {!string} url The URL to parse.
* @return {!Map} A map with the extracted URL parameters.
*/
function parseQuery(url) {
  const query = url.split("?")[1];
  if (query) {
    return query.split("&")
    .reduce(function(o, e) {
      var temp = e.split("=");
      var key = temp[0].trim();
      var value = temp[1].trim();
      value = isNaN(value) ? value : Number(value);
      if (o[key]) {
        o[key].push(value);
      } else {
        o[key] = [value];
      }
      return o;
    }, {});
  }
  return null;
}

Node.js

node/3p-resources/index.js
/**
 * Responds to any HTTP request related to link previews.
 *
 * @param {Object} req An HTTP request context.
 * @param {Object} res An HTTP response context.
 */
exports.createLinkPreview = (req, res) => {
  const event = req.body;
  if (event.docs.matchedUrl.url) {
    const url = event.docs.matchedUrl.url;
    const parsedUrl = new URL(url);
    // If the event object URL matches a specified pattern for preview links.
    if (parsedUrl.hostname === 'example.com') {
      if (parsedUrl.pathname.startsWith('/support/cases/')) {
        return res.json(caseLinkPreview(parsedUrl));
      }
    }
  }
};


/**
 * 
 * A support case link preview.
 *
 * @param {!URL} url The event object.
 * @return {!Card} The resulting preview link card.
 */
function caseLinkPreview(url) {
  // Builds a preview card with the case name, and description
  // Uses the text from the card's header for the title of the smart chip.
  // Parses the URL and identify the case details.
  const name = `Case ${url.searchParams.get("name")}`;
  return {
    action: {
      linkPreview: {
        title: name,
        previewCard: {
          header: {
            title: name
          },
          sections: [{
            widgets: [{
              textParagraph: {
                text: url.searchParams.get("description")
              }
            }]
          }]
        }
      }
    }
  };
}

Python

python/3p-resources/create_link_preview/main.py
from typing import Any, Mapping
from urllib.parse import urlparse, parse_qs

import flask
import functions_framework


@functions_framework.http
def create_link_preview(req: flask.Request):
    """Responds to any HTTP request related to link previews.
    Args:
      req: An HTTP request context.
    Returns:
      An HTTP response context.
    """
    event = req.get_json(silent=True)
    if event["docs"]["matchedUrl"]["url"]:
        url = event["docs"]["matchedUrl"]["url"]
        parsed_url = urlparse(url)
        # If the event object URL matches a specified pattern for preview links.
        if parsed_url.hostname == "example.com":
            if parsed_url.path.startswith("/support/cases/"):
                return case_link_preview(parsed_url)

    return {}




def case_link_preview(url):
    """A support case link preview.
    Args:
      url: A matching URL.
    Returns:
      The resulting preview link card.
    """

    # Parses the URL and identify the case details.
    query_string = parse_qs(url.query)
    name = f'Case {query_string["name"][0]}'
    # Uses the text from the card's header for the title of the smart chip.
    return {
        "action": {
            "linkPreview": {
                "title": name,
                "previewCard": {
                    "header": {
                        "title": name
                    },
                    "sections": [{
                        "widgets": [{
                            "textParagraph": {
                                "text": query_string["description"][0]
                            }
                        }]
                    }],
                }
            }
        }
    }

Java

java/3p-resources/src/main/java/CreateLinkPreview.java
import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
import com.google.gson.JsonPrimitive;

import java.io.UnsupportedEncodingException;
import java.net.URL;
import java.net.URLDecoder;
import java.util.HashMap;
import java.util.Map;

public class CreateLinkPreview implements HttpFunction {
  private static final Gson gson = new Gson();

  /**
   * Responds to any HTTP request related to link previews.
   *
   * @param request An HTTP request context.
   * @param response An HTTP response context.
   */
  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    JsonObject event = gson.fromJson(request.getReader(), JsonObject.class);
    String url = event.getAsJsonObject("docs")
        .getAsJsonObject("matchedUrl")
        .get("url")
        .getAsString();
    URL parsedURL = new URL(url);
    // If the event object URL matches a specified pattern for preview links.
    if ("example.com".equals(parsedURL.getHost())) {
      if (parsedURL.getPath().startsWith("/support/cases/")) {
        response.getWriter().write(gson.toJson(caseLinkPreview(parsedURL)));
        return;
      }
    }

    response.getWriter().write("{}");
  }


  /**
   * A support case link preview.
   *
   * @param url A matching URL.
   * @return The resulting preview link card.
   */
  JsonObject caseLinkPreview(URL url) throws UnsupportedEncodingException {
    // Parses the URL and identify the case details.
    Map<String, String> caseDetails = new HashMap<String, String>();
    for (String pair : url.getQuery().split("&")) {
        caseDetails.put(URLDecoder.decode(pair.split("=")[0], "UTF-8"), URLDecoder.decode(pair.split("=")[1], "UTF-8"));
    }

    // Builds a preview card with the case name, and description
    // Uses the text from the card's header for the title of the smart chip.
    JsonObject cardHeader = new JsonObject();
    String caseName = String.format("Case %s", caseDetails.get("name"));
    cardHeader.add("title", new JsonPrimitive(caseName));

    JsonObject textParagraph = new JsonObject();
    textParagraph.add("text", new JsonPrimitive(caseDetails.get("description")));

    JsonObject widget = new JsonObject();
    widget.add("textParagraph", textParagraph);

    JsonArray widgets = new JsonArray();
    widgets.add(widget);

    JsonObject section = new JsonObject();
    section.add("widgets", widgets);

    JsonArray sections = new JsonArray();
    sections.add(section);

    JsonObject previewCard = new JsonObject();
    previewCard.add("header", cardHeader);
    previewCard.add("sections", sections);

    JsonObject linkPreview = new JsonObject();
    linkPreview.add("title", new JsonPrimitive(caseName));
    linkPreview.add("previewCard", previewCard);

    JsonObject action = new JsonObject();
    action.add("linkPreview", linkPreview);

    JsonObject renderActions = new JsonObject();
    renderActions.add("action", action);

    return renderActions;
  }

}