Google Workspace ऐड-ऑन की मदद से, ईमेल को ज़्यादा कार्रवाई करने लायक बनाएं

1. खास जानकारी

इस कोडलैब में, Google Apps Script का इस्तेमाल करके, Gmail के लिए Google Workspace ऐड-ऑन लिखें. इससे उपयोगकर्ता, ईमेल से रसीद का डेटा सीधे Gmail में स्प्रेडशीट में जोड़ सकते हैं. जब उपयोगकर्ता को ईमेल पर रसीद मिलती है, तो वह ऐड-ऑन खोलता है. इस ऐड-ऑन को ईमेल से, खर्चों की ज़रूरी जानकारी अपने-आप मिलती है. उपयोगकर्ता, खर्च की जानकारी में बदलाव कर सकता है. इसके बाद, अपने खर्च को Google Sheets की स्प्रेडशीट में लॉग करने के लिए, इसे सबमिट कर सकता है.

आप इन चीज़ों के बारे में जानेंगे

  • Google Apps Script का इस्तेमाल करके, Gmail के लिए Google Workspace ऐड-ऑन बनाना
  • Google Apps Script की मदद से किसी ईमेल को पार्स करना
  • Google Apps Script के ज़रिए Google Sheets के साथ इंटरैक्ट करना
  • Google Apps Script की प्रॉपर्टी सेवा का इस्तेमाल करके, उपयोगकर्ता के मानों को सेव करें

आपको इनकी ज़रूरत होगी

  • इंटरनेट और वेब ब्राउज़र का ऐक्सेस
  • Google खाता
  • Gmail में कुछ मैसेज (आम तौर पर, ईमेल से मिलने वाली रसीदें)

2. सैंपल कोड पाएं

इस कोडलैब पर काम करते समय, कोड के सही वर्शन का रेफ़रंस देने से मदद मिल सकती है. GitHub रिपॉज़िटरी में सैंपल कोड होता है, जिसे रेफ़रंस के तौर पर इस्तेमाल किया जा सकता है.

सैंपल कोड पाने के लिए, कमांड लाइन से इसे चलाएं:

git clone https://github.com/googleworkspace/gmail-add-on-codelab.git

3. बुनियादी ऐड-ऑन बनाएं

सबसे पहले, ऐड-ऑन के आसान वर्शन का कोड लिखें. इसमें आपको ईमेल के साथ खर्च की जानकारी देने वाला फ़ॉर्म भी दिखेगा.

सबसे पहले, एक नया Apps Script प्रोजेक्ट बनाएं और उसकी मेनिफ़ेस्ट फ़ाइल खोलें.

  1. script.google.com पर जाएं. यहां से, आप अपने Apps Script प्रोजेक्ट बनाने, मैनेज करने, और उनकी निगरानी करने का विकल्प चुन सकते हैं.
  2. नया प्रोजेक्ट बनाने के लिए, सबसे ऊपर बाईं ओर, नया प्रोजेक्ट पर क्लिक करें. नया प्रोजेक्ट, Code.gs नाम की डिफ़ॉल्ट फ़ाइल के साथ खुलता है. फ़िलहाल Code.gs को अकेला छोड़ दें, आप बाद में इसके साथ काम करेंगे.
  3. बिना टाइटल वाले प्रोजेक्ट पर क्लिक करें. इसके बाद, अपने प्रोजेक्ट का नाम Expense It! रखें और नाम बदलें पर क्लिक करें.
  4. बाईं ओर, प्रोजेक्ट सेटिंग प्रोजेक्ट की सेटिंग पर क्लिक करें.
  5. "appscript.json" दिखाएं मेनिफ़ेस्ट फ़ाइल को Editor में " चेकबॉक्स पर सेट करें.
  6. एडिटर संपादक पर क्लिक करें.
  7. मेनिफ़ेस्ट फ़ाइल खोलने के लिए, बाईं ओर, appscript.json पर क्लिक करें.

appscript.json में, ऐड-ऑन से जुड़ा मेटाडेटा डालें, जैसे कि इसका नाम और इसके लिए ज़रूरी अनुमतियां. appsscript.json की सामग्री को इन कॉन्फ़िगरेशन सेटिंग से बदलें:

{
  "timeZone": "GMT",
  "oauthScopes": [
    "https://www.googleapis.com/auth/gmail.addons.execute"
  ],
  "gmail": {
    "name": "Expense It!",
    "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/receipt_black_24dp.png",
    "contextualTriggers": [{
      "unconditional": {
      },
      "onTriggerFunction": "getContextualAddOn"
    }],
    "primaryColor": "#41f470",
    "secondaryColor": "#94f441"
  }
}

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

getContextualAddOn फ़ंक्शन बनाने के लिए, यह तरीका अपनाएं:

  1. बाईं ओर, पॉइंटर को Code.gs पर रखें, फिर मेन्यू अधिक मेनू > पर क्लिक करें नाम बदलें.
  2. GetContextualAddOn लिखें और Enter बटन दबाएं. Apps Script, .gs को आपके फ़ाइल नाम के साथ अपने-आप जोड़ देती है. इसलिए, आपको फ़ाइल एक्सटेंशन टाइप करने की ज़रूरत नहीं होती. अगर आप GetContextualAddOn.gs टाइप करते हैं, तो Apps Script आपकी फ़ाइल को GetContextualAddOn.gs.gs नाम देगा.
  3. GetContextualAddOn.gs में, डिफ़ॉल्ट कोड को getContextualAddOn फ़ंक्शन से बदलें:
/**
 * Returns the contextual add-on data that should be rendered for
 * the current e-mail thread. This function satisfies the requirements of
 * an 'onTriggerFunction' and is specified in the add-on's manifest.
 *
 * @param {Object} event Event containing the message ID and other context.
 * @returns {Card[]}
 */
function getContextualAddOn(event) {
  var card = CardService.newCardBuilder();
  card.setHeader(CardService.newCardHeader().setTitle('Log Your Expense'));

  var section = CardService.newCardSection();
  section.addWidget(CardService.newTextInput()
    .setFieldName('Date')
    .setTitle('Date'));
  section.addWidget(CardService.newTextInput()
    .setFieldName('Amount')
    .setTitle('Amount'));
  section.addWidget(CardService.newTextInput()
    .setFieldName('Description')
    .setTitle('Description'));
  section.addWidget(CardService.newTextInput()
    .setFieldName('Spreadsheet URL')
    .setTitle('Spreadsheet URL'));

  card.addSection(section);

  return [card.build()];
}

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

Expense It को लागू करने से पहले! ऐड-ऑन के तौर पर इस्तेमाल करने के लिए, आपको Google Cloud Platform (GCP) प्रोजेक्ट की ज़रूरत होगी, जिसका इस्तेमाल Apps Script प्रोजेक्ट, अनुमतियों, बेहतर सेवाओं, और दूसरी जानकारी को मैनेज करने के लिए करता है. ज़्यादा जानने के लिए, Google Cloud Platform प्रोजेक्ट पर जाएं.

ऐड-ऑन को डिप्लॉय करने और चलाने के लिए, यह तरीका अपनाएं:

  1. अपना GCP प्रोजेक्ट खोलें और इसका प्रोजेक्ट नंबर कॉपी करें.
  2. बाईं ओर, अपने Apps Script प्रोजेक्ट में, प्रोजेक्ट सेटिंग प्रोजेक्ट की सेटिंग पर क्लिक करें.
  3. "Google Cloud Platform (GCP) प्रोजेक्ट" में जाकर, प्रोजेक्ट बदलें पर क्लिक करें.
  4. अपने GCP प्रोजेक्ट का प्रोजेक्ट नंबर डालें. इसके बाद, प्रोजेक्ट सेट करें पर क्लिक करें.
  5. डिप्लॉय करें > डिप्लॉयमेंट की जांच करें पर क्लिक करें.
  6. पक्का करें कि Google Workspace ऐड-ऑन डिप्लॉयमेंट टाइप हो. अगर ज़रूरी हो, तो डायलॉग बॉक्स में सबसे ऊपर, 'डिप्लॉयमेंट टाइप चालू करें' डिप्लॉयमेंट टाइप चालू करें पर क्लिक करें और डिप्लॉयमेंट के टाइप के तौर पर Google Workspace ऐड-ऑन को चुनें.
  7. ऐप्लिकेशन: Gmail के बगल में, इंस्टॉल करें पर क्लिक करें.
  8. हो गया पर क्लिक करें.

अब आपको Gmail के इनबॉक्स में ऐड-ऑन दिखेगा.

  1. अपने कंप्यूटर पर, Gmail खोलें.
  2. दाईं ओर मौजूद साइड पैनल में, एक्सपेंस इट! खर्च करें! रसीद का आइकॉन ऐड-ऑन दिखेगा. ऐसा हो सकता है कि इसे ढूंढने के लिए, आपको ज़्यादा ऐड-ऑन ज़्यादा ऐड-ऑन पर क्लिक करना पड़े.
  3. एक ईमेल खोलें, खर्च की रसीद रखें.
  4. ऐड-ऑन खोलने के लिए, दाएं साइड पैनल में, 'खर्च करें!' पर क्लिक करें खर्च करें! रसीद का आइकॉन.
  5. खर्च करें! ऐक्सेस की अनुमति दें पर क्लिक करके, अपने Google खाते को ऐक्सेस करें और निर्देशों का पालन करें.

ऐड-ऑन, खुले हुए Gmail मैसेज के साथ एक आसान फ़ॉर्म दिखाता है. फ़िलहाल, यह कुछ और नहीं करता है. हालांकि, अगले सेक्शन में इसकी सुविधाओं के बारे में बताया जाएगा.

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

4. ईमेल मैसेज ऐक्सेस करना

ईमेल का कॉन्टेंट फ़ेच करने वाला कोड जोड़ें. साथ ही, कोड को बेहतर तरीके से व्यवस्थित करने के लिए कोड में बदलाव करें.

Files के बगल में मौजूद, एक फ़ाइल जोड़ें जोड़ें पर क्लिक करें > Script और Cards नाम की एक फ़ाइल बनाएं. Helpers नाम की दूसरी स्क्रिप्ट फ़ाइल बनाएं. Cards.gs कार्ड बनाता है. साथ ही, ईमेल के कॉन्टेंट के आधार पर फ़ॉर्म में फ़ील्ड भरने के लिए, Helpers.gs के फ़ंक्शन का इस्तेमाल करता है.

Cards.gs में मौजूद डिफ़ॉल्ट कोड को इस कोड से बदलें:

var FIELDNAMES = ['Date', 'Amount', 'Description', 'Spreadsheet URL'];

/**
 * Creates the main card users see with form inputs to log expenses.
 * Form can be prefilled with values.
 *
 * @param {String[]} opt_prefills Default values for each input field.
 * @param {String} opt_status Optional status displayed at top of card.
 * @returns {Card}
 */
function createExpensesCard(opt_prefills, opt_status) {
  var card = CardService.newCardBuilder();
  card.setHeader(CardService.newCardHeader().setTitle('Log Your Expense'));
  
  if (opt_status) {
    if (opt_status.indexOf('Error: ') == 0) {
      opt_status = '<font color=\'#FF0000\'>' + opt_status + '</font>';
    } else {
      opt_status = '<font color=\'#228B22\'>' + opt_status + '</font>';
    }
    var statusSection = CardService.newCardSection();
    statusSection.addWidget(CardService.newTextParagraph()
      .setText('<b>' + opt_status + '</b>'));
    card.addSection(statusSection);
  }
  
  var formSection = createFormSection(CardService.newCardSection(),
                                      FIELDNAMES, opt_prefills);
  card.addSection(formSection);
  
  return card;
}

/**
 * Creates form section to be displayed on card.
 *
 * @param {CardSection} section The card section to which form items are added.
 * @param {String[]} inputNames Names of titles for each input field.
 * @param {String[]} opt_prefills Default values for each input field.
 * @returns {CardSection}
 */
function createFormSection(section, inputNames, opt_prefills) {
  for (var i = 0; i < inputNames.length; i++) {
    var widget = CardService.newTextInput()
      .setFieldName(inputNames[i])
      .setTitle(inputNames[i]);
    if (opt_prefills && opt_prefills[i]) {
      widget.setValue(opt_prefills[i]);
    }
    section.addWidget(widget);
  }
  return section;
}

createExpensesCard फ़ंक्शन, वैकल्पिक आर्ग्युमेंट के तौर पर फ़ॉर्म को पहले से भरने के लिए, वैल्यू का कलेक्शन लेता है. फ़ंक्शन एक वैकल्पिक स्थिति मैसेज दिखा सकता है, जो स्थिति "गड़बड़ी:" से शुरू होने पर लाल रंग का होता है और फिर हरे रंग का होता है. फ़ॉर्म में हर फ़ील्ड को मैन्युअल तरीके से जोड़ने के बजाय, createFormSection नाम का एक हेल्पर फ़ंक्शन, टेक्स्ट इनपुट विजेट बनाने की प्रोसेस से गुज़रता है और हर डिफ़ॉल्ट वैल्यू को setValue पर सेट करता है. इसके बाद, विजेट को कार्ड पर उनसे जुड़े सेक्शन में जोड़ देता है.

अब, Helpers.gs में डिफ़ॉल्ट कोड को इस कोड से बदलें:

/**
 * Finds largest dollar amount from email body.
 * Returns null if no dollar amount is found.
 *
 * @param {Message} message An email message.
 * @returns {String}
 */
function getLargestAmount(message) {
  return 'TODO';
}

/**
 * Determines date the email was received.
 *
 * @param {Message} message An email message.
 * @returns {String}
 */
function getReceivedDate(message) {
  return 'TODO';
}

/**
 * Determines expense description by joining sender name and message subject.
 *
 * @param {Message} message An email message.
 * @returns {String}
 */
function getExpenseDescription(message) {
  return 'TODO';
}

/**
 * Determines most recent spreadsheet URL.
 * Returns null if no URL was previously submitted.
 *
 * @returns {String}
 */
function getSheetUrl() {
  return 'TODO';
}

फ़ॉर्म में पहले से भरी गई वैल्यू का पता लगाने के लिए, Helpers.gs में मौजूद फ़ंक्शन को getContextualAddon कॉल करता है. फ़िलहाल, ये फ़ंक्शन सिर्फ़ "TODO" स्ट्रिंग दिखाएंगे क्योंकि बाद के चरण में प्रीफ़िल लॉजिक को लागू किया जाएगा.

इसके बाद, कोड को GetContextualAddon.gs में अपडेट करें, ताकि यह Cards.gs और Helpers.gs के कोड का इस्तेमाल कर सके. GetContextualAddon.gs में मौजूद कोड को इस कोड से बदलें:

/**
 * Copyright 2017 Google Inc.
 *
 * 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
 *
 *   https://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.
 */

/**
 * Returns the contextual add-on data that should be rendered for
 * the current e-mail thread. This function satisfies the requirements of
 * an 'onTriggerFunction' and is specified in the add-on's manifest.
 *
 * @param {Object} event Event containing the message ID and other context.
 * @returns {Card[]}
 */
function getContextualAddOn(event) {
  var message = getCurrentMessage(event);
  var prefills = [getReceivedDate(message),
                  getLargestAmount(message),
                  getExpenseDescription(message),
                  getSheetUrl()];
  var card = createExpensesCard(prefills);

  return [card.build()];
}

/**
 * Retrieves the current message given an action event object.
 * @param {Event} event Action event object
 * @return {Message}
 */
function getCurrentMessage(event) {
  var accessToken = event.messageMetadata.accessToken;
  var messageId = event.messageMetadata.messageId;
  GmailApp.setCurrentMessageAccessToken(accessToken);
  return GmailApp.getMessageById(messageId);
}

नए getCurrentMessage फ़ंक्शन पर ध्यान दें, जो उपयोगकर्ता के अभी खुले हुए मैसेज को पढ़ने के लिए Gmail से दिए गए इवेंट का इस्तेमाल करता है. यह फ़ंक्शन काम करे, इसके लिए स्क्रिप्ट मेनिफ़ेस्ट में एक और दायरा जोड़ें. यह सुविधा, Gmail के मैसेज का रीड ओनली ऐक्सेस देती है.

appscript.json में, oauthScopes को अपडेट करें, ताकि यह https://www.googleapis.com/auth/gmail.addons.current.message.readonly स्कोप के लिए भी अनुरोध कर सके.

"oauthScopes": [
  "https://www.googleapis.com/auth/gmail.addons.execute",
   "https://www.googleapis.com/auth/gmail.addons.current.message.readonly"
],

Gmail में, अपना ऐड-ऑन चलाएं और Expense It के लिए ऐक्सेस को अनुमति दें! पर क्लिक करें. फ़ॉर्म फ़ील्ड अब "TODO" से पहले से भरे हुए हैं.

5. Google Sheets के साथ इंटरैक्ट करना

यह खर्च! ऐड-ऑन में एक फ़ॉर्म होता है, जिसमें उपयोगकर्ता अपने खर्च की जानकारी डाल सकते हैं. हालांकि, अब उन्हें कोई अन्य जानकारी नहीं दी गई है. चलिए, एक बटन जोड़ें, जो फ़ॉर्म डेटा को Google शीट पर भेजता है.

बटन जोड़ने के लिए, हम ButtonSet क्लास का इस्तेमाल करेंगे. Google Sheets के साथ इंटरफ़ेस करने के लिए, हम Google Sheets सेवा का इस्तेमाल करेंगे.

"सबमिट करें" लेबल वाला बटन वापस पाने के लिए, createFormSection में बदलाव करें फ़ॉर्म सेक्शन में भरें. यह तरीका अपनाएं:

  1. "सबमिट करें" बटन का लेबल जोड़ने के लिए, CardService.newTextButton() का इस्तेमाल करके टेक्स्ट बटन बनाएं CardService.TextButton.setText() का इस्तेमाल करके.
  2. बटन को इस तरह से डिज़ाइन करें कि जब उस पर क्लिक किया जाए, तो यहां दी गई submitForm कार्रवाई CardService.TextButton.setOnClickAction() के ज़रिए कॉल की जाए:
/**
 * Logs form inputs into a spreadsheet given by URL from form.
 * Then displays edit card.
 *
 * @param {Event} e An event object containing form inputs and parameters.
 * @returns {Card}
 */
function submitForm(e) {
  var res = e['formInput'];
  try {
    FIELDNAMES.forEach(function(fieldName) {
      if (! res[fieldName]) {
        throw 'incomplete form';
      }
    });
    var sheet = SpreadsheetApp
      .openByUrl((res['Spreadsheet URL']))
      .getActiveSheet();
    sheet.appendRow(objToArray(res, FIELDNAMES.slice(0, FIELDNAMES.length - 1)));
    return createExpensesCard(null, 'Logged expense successfully!').build();
  }
  catch (err) {
    if (err == 'Exception: Invalid argument: url') {
      err = 'Invalid URL';
      res['Spreadsheet URL'] = null;
    }
    return createExpensesCard(objToArray(res, FIELDNAMES), 'Error: ' + err).build();
  }
}

/**
 * Returns an array corresponding to the given object and desired ordering of keys.
 *
 * @param {Object} obj Object whose values will be returned as an array.
 * @param {String[]} keys An array of key names in the desired order.
 * @returns {Object[]}
 */
function objToArray(obj, keys) {
  return keys.map(function(key) {
    return obj[key];
  });
}
  1. CardService.newButtonSet() का इस्तेमाल करके, बटन सेट विजेट बनाएं और CardService.ButtonSet.addButton() की मदद से दिए गए बटन सेट में टेक्स्ट बटन जोड़ें.
  2. CardService.CardSection.addWidget() का इस्तेमाल करके, कार्ड के फ़ॉर्म सेक्शन में बटन सेट विजेट जोड़ें.

कोड की कुछ लाइनों में ही, हम स्प्रेडशीट के यूआरएल से उसे खोलकर उस शीट में डेटा की एक पंक्ति जोड़ सकते हैं. ध्यान दें कि e इवेंट के हिस्से के तौर पर, फ़ॉर्म इनपुट फ़ंक्शन में पास किए जाते हैं. साथ ही, हम यह जांच करते हैं कि उपयोगकर्ता ने सभी फ़ील्ड दिए हैं या नहीं. यह मानते हुए कि कोई गड़बड़ी नहीं होती, हम फ़ायदेमंद स्थिति वाला एक खाली खर्च कार्ड बनाते हैं. अगर हमें कोई गड़बड़ी मिलती है, तो हम गड़बड़ी के मैसेज के साथ मूल रूप से भरा हुआ कार्ड भी लौटा देते हैं. objToArray हेल्पर फ़ंक्शन, फ़ॉर्म के जवाबों को अरे में बदलना आसान बनाता है. इसके बाद, उसे स्प्रेडशीट में जोड़ा जा सकता है.

आखिर में, appsscript.json में oauthScopes सेक्शन को अपडेट करें और https://www.googleapis.com/auth/spreadsheets स्कोप के लिए अनुरोध करें. अनुमति मिलने पर यह स्कोप, ऐड-ऑन को उपयोगकर्ता की Google Sheets को पढ़ने और उसमें बदलाव करने की अनुमति देता है.

"oauthScopes": [
  "https://www.googleapis.com/auth/gmail.addons.execute",
  "https://www.googleapis.com/auth/gmail.addons.current.message.readonly",
  "https://www.googleapis.com/auth/spreadsheets"
],

अगर आपने पहले से कोई नई स्प्रेडशीट नहीं बनाई है, तो https://docs.google.com/spreadsheets/ पर जाकर एक नई स्प्रेडशीट बनाएं.

अब ऐड-ऑन को फिर से चलाएं और फ़ॉर्म सबमिट करने की कोशिश करें. पक्का करें कि आपने स्प्रेडशीट यूआरएल फ़ॉर्म फ़ील्ड में अपने डेस्टिनेशन यूआरएल का पूरा यूआरएल डाला है.

6. प्रॉपर्टी सेवा की मदद से वैल्यू सेव करें

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

प्रॉपर्टी सेवा की मदद से, हम की-वैल्यू पेयर को स्टोर कर सकते हैं. हमारे मामले में, एक सही कुंजी "SPREADSheets_URL" होगी जबकि इसका मान URL होगा. इस तरह की वैल्यू को सेव करने के लिए, आपको Cards.gs में submitForm में इस तरह से बदलाव करना होगा कि शीट में नई लाइन जोड़ने पर स्प्रेडशीट का यूआरएल, प्रॉपर्टी के तौर पर सेव हो जाए.

ध्यान दें कि प्रॉपर्टी के तीन स्कोप में से कोई एक स्कोप हो सकता है: स्क्रिप्ट, उपयोगकर्ता या दस्तावेज़. दस्तावेज़ का दायरा, Gmail ऐड-ऑन पर लागू नहीं होता. हालांकि, किसी खास Google दस्तावेज़ या शीट के लिए खास जानकारी सेव करते समय, यह अलग तरह के ऐड-ऑन के लिए काम का होता है. हमारे ऐड-ऑन के लिए, हम चाहते हैं कि कोई व्यक्ति, फ़ॉर्म पर अपनी सबसे हाल की स्प्रेडशीट को डिफ़ॉल्ट विकल्प के रूप में देखे. हालांकि, किसी और की स्प्रेडशीट को इस फ़ॉर्म में डिफ़ॉल्ट विकल्प के तौर पर देखना चाहिए. इस वजह से, हम script के स्कोप के बजाय उपयोगकर्ता के दायरे को चुनते हैं.

स्प्रेडशीट का यूआरएल सेव करने के लिए, PropertiesService.getUserProperties().setProperty() का इस्तेमाल करें. Cards.gs में submitForm के लिए, यह जोड़ें:

PropertiesService.getUserProperties().setProperty('SPREADSHEET_URL', 
    res['Spreadsheet URL']);

इसके बाद, सेव की गई प्रॉपर्टी पर वापस जाने के लिए Helpers.gs के getSheetUrl फ़ंक्शन में बदलाव करें, ताकि उपयोगकर्ता जब भी ऐड-ऑन का इस्तेमाल करे, तो उसे सबसे हाल का यूआरएल दिखे. प्रॉपर्टी की वैल्यू जानने के लिए, PropertiesService.getUserProperties().getProperty() का इस्तेमाल करें.

/**
 * Determines most recent spreadsheet URL.
 * Returns null if no URL was previously submitted.
 *
 * @returns {String}
 */
function getSheetUrl() {
  return PropertiesService.getUserProperties().getProperty('SPREADSHEET_URL');
}

आखिर में, प्रॉपर्टी सेवा को ऐक्सेस करने के लिए, स्क्रिप्ट को अनुमति देनी होगी. अपने ऐड-ऑन को प्रॉपर्टी की जानकारी पढ़ने और उसमें बदलाव करने की अनुमति देने के लिए, मेनिफ़ेस्ट में पहले की तरह https://www.googleapis.com/auth/script.storage स्कोप जोड़ें.

7. Gmail मैसेज को पार्स करें

उपयोगकर्ताओं के तो आइए, ईमेल में दिए गए खर्च के बारे में ज़रूरी जानकारी पहले से ही भर दें. हमने Helpers.gs में इस भूमिका को निभाने वाले फ़ंक्शन पहले ही बना लिए हैं, लेकिन अब तक हमने सिर्फ़ "TODO" को लौटाया है और खर्च की तारीख, रकम, और ब्यौरे के लिए.

उदाहरण के लिए, हम ईमेल मिलने की तारीख का पता लगा सकते हैं और उसे खर्च की तारीख के लिए डिफ़ॉल्ट वैल्यू के तौर पर इस्तेमाल कर सकते हैं.

/**
 * Determines date the email was received.
 *
 * @param {Message} message - The message currently open.
 * @returns {String}
 */
function getReceivedDate(message) {
  return message.getDate().toLocaleDateString();
}

बाकी के दो फ़ंक्शन लागू करें:

  1. getExpenseDescription को भेजने वाले का नाम और मैसेज का विषय, दोनों जोड़ना पड़ सकता है. हालांकि, मैसेज के मुख्य हिस्से को पार्स करने और ज़्यादा सटीक जानकारी देने के ज़्यादा बेहतर तरीके मौजूद हैं.
  2. getLargestAmount के लिए, पैसे से जुड़े खास चिह्नों को देखें. रसीदों में अक्सर एक से ज़्यादा वैल्यू मौजूद होती हैं. जैसे, टैक्स और अन्य शुल्क. इस बारे में सोचें कि सही रकम की पहचान कैसे की जा सकती है. इसमें रेगुलर एक्सप्रेशन का इस्तेमाल भी किया जा सकता है.

अगर आपको ज़्यादा प्रेरणा चाहिए, तो GmailMessage से जुड़े दस्तावेज़ देखें या कोडलैब की शुरुआत में डाउनलोड किया गया समाधान कोड देखें. Helpers.gs में सभी फ़ंक्शन के लिए अपने हिसाब से इंप्लिमेंटेशन बनाने के बाद, अपने ऐड-ऑन का इस्तेमाल करें! रसीदें खोलें और उन्हें किसी स्प्रेडशीट में लॉग करना शुरू करें!

8. कार्ड से जुड़ी कार्रवाइयों की मदद से फ़ॉर्म को मिटाएं

अगर Expense It का इस्तेमाल करें, तो क्या होगा! खुले हुए ईमेल में किसी खर्च की गलत पहचान करता है और फ़ॉर्म में गलत जानकारी पहले से भर देता है? उपयोगकर्ता फ़ॉर्म को साफ़ कर देता है. CardAction क्लास से हमें ऐसा फ़ंक्शन तय करने की सुविधा मिलती है जिसे कार्रवाई पर क्लिक करने पर कॉल किया जाता है. इसकी मदद से, उपयोगकर्ता जल्दी से फ़ॉर्म आसानी से खाली कर सकते हैं.

createExpensesCard में इस तरह बदलाव करें कि जो कार्ड दिखाता है उसमें "फ़ॉर्म मिटाएं" लेबल वाली कार्ड कार्रवाई हो और क्लिक करने पर नीचे दिए clearForm फ़ंक्शन को कॉल करेगा, जिसे आप Cards.gs में पेस्ट कर सकते हैं. आपको opt_status में, "स्थिति" नाम वाले पैरामीटर के तौर पर पास करना होगा करना है, ताकि यह पक्का किया जा सके कि फ़ॉर्म मिटाए जाने के बाद, स्टेटस का मैसेज बना रहे. ध्यान रखें कि कार्रवाइयों के लिए वैकल्पिक पैरामीटर, Object के टाइप होने चाहिए.<string, string>. इसलिए, अगर opt_status उपलब्ध नहीं है, तो आपको {'Status' : ''} को पास करना चाहिए.

/**
 * Recreates the main card without prefilled data.
 *
 * @param {Event} e An event object containing form inputs and parameters.
 * @returns {Card}
 */
function clearForm(e) {
  return createExpensesCard(null, e['parameters']['Status']).build();
}

9. स्प्रेडशीट बनाएं

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

var newSheetSection = CardService.newCardSection();
var sheetName = CardService.newTextInput()
  .setFieldName('Sheet Name')
  .setTitle('Sheet Name');
var createExpensesSheet = CardService.newAction()
  .setFunctionName('createExpensesSheet');
var newSheetButton = CardService.newTextButton()
  .setText('New Sheet')
  .setOnClickAction(createExpensesSheet);
newSheetSection.addWidget(sheetName);
newSheetSection.addWidget(CardService.newButtonSet().addButton(newSheetButton));
card.addSection(newSheetSection);

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

10. बधाई हो!

आपने Gmail ऐड-ऑन को डिज़ाइन और लागू किया है. यह ऐड-ऑन, ईमेल से भेजा गया खर्च दिखाता है. इसकी मदद से, उपयोगकर्ता कुछ ही सेकंड में स्प्रेडशीट में खर्च की जानकारी डाल सकते हैं. आपने Google Apps Script का इस्तेमाल, एक से ज़्यादा Google API के साथ इंटरफ़ेस करने के लिए किया है. साथ ही, ऐड-ऑन को एक से ज़्यादा बार एक्ज़ीक्यूट करने के दौरान, इस डेटा को सेव रखा है.

संभावित सुधार

Expense It को बेहतर बनाने के लिए अपनी कल्पनाओं को उड़ान दें! हालांकि, यहां पहले से ज़्यादा उपयोगी प्रॉडक्ट बनाने के कुछ आइडिया दिए गए हैं:

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

ज़्यादा जानें