Google Workspace Eklentileriyle e-postaları daha işlem yapılabilir hale getirin

1. Genel Bakış

Bu codelab'de, kullanıcıların bir e-postadaki makbuz verilerini doğrudan Gmail'den bir elektronik tabloya eklemesine olanak tanıyan bir Gmail Google Workspace eklentisi yazmak için Google Apps Komut Dosyası'nı kullanacaksınız. Kullanıcı e-postayla bir makbuz aldığında e-postadaki ilgili gider bilgilerini otomatik olarak alan eklentiyi açar. Kullanıcı, gider bilgilerini düzenleyebilir ve ardından giderini Google E-Tablolar e-tablosuna kaydetmek için gönderebilir.

Neler öğreneceksiniz?

Google Apps Komut Dosyası'nı kullanarak Gmail için Google Workspace eklentisi oluşturma
Google Apps Komut Dosyası ile e-postayı ayrıştırma
Google Apps Komut Dosyası aracılığıyla Google E-Tablolar ile etkileşimde bulunma
Google Apps Komut Dosyası'nın Properties hizmetini kullanarak kullanıcı değerlerini depolama

İhtiyacınız olanlar

İnternet erişimi ve web tarayıcısı
Google Hesabı
Gmail'deki bazı iletiler (tercihen e-posta makbuzları)

2. Örnek kodu alın

Bu codelab'i tamamlarken yazacağınız kodun çalışan bir sürümüne başvurmanız faydalı olabilir. GitHub deposunda referans olarak kullanabileceğiniz örnek kodlar bulunur.

Örnek kodu almak için komut satırında şu komutu çalıştırın:

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

3. Temel bir eklenti oluşturma

Eklentinin, e-postanın yanında bir gider formu gösteren basit bir sürümünün kodunu yazarak başlayın.

Öncelikle yeni bir Apps Komut Dosyası projesi oluşturun ve manifest dosyasını açın.

script.google.com adresine gidin. Buradan Apps Komut Dosyası projelerinizi oluşturabilir, yönetebilir ve izleyebilirsiniz.
Yeni bir proje oluşturmak için sol üstte Yeni Proje'yi tıklayın. Yeni proje, Code.gs adlı varsayılan bir dosyayla açılır. Code.gs öğesini şimdilik olduğu gibi bırakın. Daha sonra bu öğeyle çalışacaksınız.
Adsız proje'yi tıklayın, projenizi Expense It! olarak adlandırın ve Yeniden adlandır'ı tıklayın.
Sol tarafta Proje Ayarları 'nı tıklayın.
"appscript.json" manifest dosyasını düzenleyicide göster" onay kutusunu işaretleyin.
Düzenleyen 'i tıklayın.
Manifest dosyasını açmak için solda appscript.json simgesini tıklayın.

appscript.json içinde, eklentiyle ilişkili meta verileri (ör. adı ve gerektirdiği izinler) belirtin. appsscript.json dosyasının içeriğini şu yapılandırma ayarlarıyla değiştirin:

{
  "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"
  }
}

Manifestin contextualTriggers adlı bölümüne özellikle dikkat edin. Manifestin bu bölümü, eklenti ilk etkinleştirildiğinde çağrılacak kullanıcı tanımlı işlevi tanımlar. Bu durumda, açık e-postayla ilgili ayrıntıları alan ve kullanıcıya gösterilecek bir dizi kart döndüren getContextualAddOn işlevi çağrılır.

getContextualAddOn işlevini oluşturmak için aşağıdaki adımları uygulayın:

Sol tarafta, imleci Code.gs simgesinin üzerine getirin, ardından Menü > Yeniden adlandır'ı tıklayın.
GetContextualAddOn yazıp Enter tuşuna basın. Apps Komut Dosyası, dosya adınıza otomatik olarak .gs eklediğinden dosya uzantısı yazmanız gerekmez. GetContextualAddOn.gs yazarsanız Apps Komut Dosyası, dosyanızı GetContextualAddOn.gs.gs olarak adlandırır.
GetContextualAddOn.gs içinde varsayılan kodu getContextualAddOn işleviyle değiştirin:

/**
 * 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()];
}

Her Google Workspace eklentisinin kullanıcı arayüzü, bir veya daha fazla bölüme ayrılmış kartlardan oluşur. Bu bölümlerin her birinde, kullanıcıdan bilgi alıp bilgi gösterebilen widget'lar bulunur. getContextualAddOn işlevi, e-postada bulunan bir harcama hakkında ayrıntılar içeren tek bir kart oluşturur. Kartta, alakalı veriler için metin girişi alanları içeren bir bölüm bulunur. İşlev, eklentinin kartlarından oluşan bir dizi döndürür. Bu durumda, döndürülen dizi yalnızca bir kart içerir.

Expense It! eklentisini dağıtmadan önce, Apps Komut Dosyası projelerinin yetkilendirmeleri, gelişmiş hizmetleri ve diğer ayrıntıları yönetmek için kullandığı bir Google Cloud Platform (GCP) projeniz olması gerekir. Daha fazla bilgi edinmek için Google Cloud Platform projeleri sayfasını ziyaret edin.

Eklentinizi dağıtmak ve çalıştırmak için aşağıdaki adımları uygulayın:

GCP projenizi açın ve proje numarasını kopyalayın.
Apps Komut Dosyası projenizde, sol tarafta Proje Ayarları 'nı tıklayın.
"Google Cloud Platform (GCP) Projesi" bölümünde Projeyi değiştir'i tıklayın.
GCP projenizin proje numarasını girin ve Projeyi ayarla'yı tıklayın.
Dağıt > Test dağıtımları'nı tıklayın.
Dağıtım türünün Google Workspace eklentisi olduğundan emin olun. Gerekirse iletişim kutusunun üst kısmında Dağıtım türlerini etkinleştir'i tıklayın ve dağıtım türü olarak Google Workspace eklentisi'ni seçin.
Uygulamalar: Gmail'in yanındaki Yükle'yi tıklayın.
Bitti'yi tıklayın.

Eklentiyi artık Gmail gelen kutunuzda görebilirsiniz.

Bilgisayarınızda Gmail'i açın.
Sağ yan panelde Expense It! eklentisi görünür. Eklentiyi bulmak için Diğer Eklentiler'i tıklamanız gerekebilir.
Bir e-postayı (tercihen harcamaların yer aldığı bir makbuzu) açın.
Eklentiyi açmak için sağ taraftaki panelde Expense It!'i tıklayın. .
Erişimi Yetkilendir'i tıklayarak ve istemleri uygulayarak Expense It! uygulamasına Google Hesabınıza erişim izni verin.

Eklenti, açık bir Gmail iletisinin yanında basit bir form gösteriyor. Şu an için başka bir işlevi olmasa da bir sonraki bölümde bu işlevi geliştireceksiniz.

Bu laboratuvarda ilerlerken eklentinizdeki güncellemeleri görmek için kodunuzu kaydetmeniz ve Gmail'i yenilemeniz yeterlidir. Ek dağıtım gerekmez.

4. E-posta iletilerine erişme

E-posta içeriğini getiren kodu ekleyin ve kodu biraz daha düzenli hale getirmek için modülerleştirin.

Dosyalar'ın yanındaki Ekle > Komut Dosyası'nı tıklayın ve Cards adlı bir dosya oluşturun. Helpers adlı ikinci bir komut dosyası oluşturun. Cards.gs, kartı oluşturur ve e-postanın içeriğine göre formdaki alanları doldurmak için Helpers.gs işlevlerini kullanır.

Cards.gs içindeki varsayılan kodu şu kodla değiştirin:

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 işlevi, formu önceden doldurmak için isteğe bağlı bir bağımsız değişken olarak bir değer dizisi alır. İşlev, isteğe bağlı bir durum mesajı gösterebilir. Bu mesaj, durum "Hata:" ile başlıyorsa kırmızı, aksi takdirde yeşil renkte olur. Her alanı forma manuel olarak eklemek yerine, createFormSection adlı yardımcı işlev, metin girişi widget'ları oluşturma sürecinde döngü oluşturur, her varsayılan değeri setValue ile ayarlar ve ardından widget'ları karttaki ilgili bölümlere ekler.

Şimdi Helpers.gs içindeki varsayılan kodu aşağıdaki kodla değiştirin:

/**
 * 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 içindeki işlevler, formdaki önceden doldurulmuş değerleri belirlemek için getContextualAddon tarafından çağrılır. Şimdilik bu işlevler yalnızca "TODO" dizesini döndürecek. Önceden doldurma mantığını daha sonraki bir adımda uygulayacaksınız.

Ardından, GetContextualAddon.gs içindeki kodu Cards.gs ve Helpers.gs içindeki koddan yararlanacak şekilde güncelleyin. GetContextualAddon.gs içindeki kodu şu kodla değiştirin:

/**
 * 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);
}

Gmail tarafından sağlanan etkinliği kullanarak kullanıcının şu anda açık olan iletisini okuyan yeni getCurrentMessage işlevine dikkat edin. Bu işlevin çalışması için komut dosyası manifestine, Gmail iletilerine salt okunur erişime izin veren ek bir kapsam ekleyin.

appscript.json içinde, oauthScopes öğesini https://www.googleapis.com/auth/gmail.addons.current.message.readonly kapsamını da isteyecek şekilde güncelleyin.

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

Gmail'de eklentinizi çalıştırın ve Expense It! uygulamasının e-posta iletilerini görüntülemesine izin verin. Form alanları artık "YAPILACAKLAR" ile önceden dolduruluyor.

5. Google E-Tablolar ile etkileşim kurma

Expense It! eklentisinde, kullanıcının bir harcama hakkında ayrıntı girmesi için bir form bulunur ancak bu ayrıntılar herhangi bir yere gönderilmez. Form verilerini bir Google E-Tablosu'na gönderen bir düğme ekleyelim.

Düğme eklemek için ButtonSet sınıfını kullanacağız. Google E-Tablolar ile arayüz oluşturmak için Google E-Tablolar hizmetini kullanacağız.

Kartın form bölümünün bir parçası olarak "Gönder" etiketli bir düğme döndürmek için createFormSection öğesini değiştirin. Aşağıdaki adımları uygulayın:

CardService.newTextButton() kullanarak bir metin düğmesi oluşturun ve CardService.TextButton.setText() kullanarak düğmeyi "Gönder" olarak etiketleyin.
Düğmeyi, tıklandığında aşağıdaki submitForm işlemin CardService.TextButton.setOnClickAction() aracılığıyla çağrılacağı şekilde tasarlayın:

/**
 * 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];
  });
}

CardService.newButtonSet() kullanarak bir düğme grubu widget'ı oluşturun ve CardService.ButtonSet.addButton() ile metin düğmenizi düğme grubuna ekleyin.
CardService.CardSection.addWidget() kullanarak düğme grubu widget'ını kartın form bölümüne ekleyin.

Yalnızca birkaç satır kodla, URL'sini kullanarak bir e-tablo açabilir ve bu tabloya bir veri satırı ekleyebiliriz. Form girişlerinin, etkinlik e kapsamında işleve iletildiğini ve kullanıcının tüm alanları doldurup doldurmadığını kontrol ettiğimizi unutmayın. Hata oluşmadığını varsayarsak olumlu bir duruma sahip boş bir gider kartı oluştururuz. Hata tespit ettiğimizde, hata mesajıyla birlikte orijinal olarak doldurulmuş kartı iade ederiz. objToArray yardımcı işlevi, form yanıtlarını diziye dönüştürmeyi kolaylaştırır. Bu dizi daha sonra e-tabloya eklenebilir.

Son olarak, appsscript.json bölümünü appsscript.json içinde tekrar güncelleyin ve kapsamı https://www.googleapis.com/auth/spreadsheets isteyin.oauthScopes Bu kapsam yetkilendirildiğinde eklenti, kullanıcının Google E-Tablolarını okuyup değiştirebilir.

"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"
],

Henüz yeni bir e-tablo oluşturmadıysanız https://docs.google.com/spreadsheets/ adresinden oluşturun.

Şimdi eklentiyi tekrar çalıştırın ve formu göndermeyi deneyin. Hedef URL'nizin tam URL'sini E-tablo URL'si form alanına girdiğinizden emin olun.

6. Properties hizmetiyle değerleri depolama

Kullanıcılar genellikle aynı e-tabloya birçok gider kaydettiğinden, kartta varsayılan değer olarak en son e-tablo URL'sini sunmak uygun olacaktır. En son e-tablonun URL'sini bilmek için bu bilgiyi, eklenti her kullanıldığında saklamamız gerekir.

Properties hizmeti, anahtar/değer çiftlerini depolamamıza olanak tanır. Bizim durumumuzda makul bir anahtar "SPREADSHEET_URL" olurken değer, URL'nin kendisi olur. Böyle bir değeri depolamak için Cards.gs içinde submitForm değerini, e-tablonun URL'si sayfaya yeni bir satır eklenirken özellik olarak depolanacak şekilde değiştirmeniz gerekir.

Özelliklerin üç kapsamdan birine (komut dosyası, kullanıcı veya doküman) sahip olabileceğini unutmayın. Belge kapsamı, belirli bir Google Dokümanı veya E-Tablosu'na özgü bilgileri depolarken ayrı bir eklenti türü için geçerli olsa da Gmail eklentileri için geçerli değildir. Eklentimizde, kullanıcının formda varsayılan seçenek olarak kendi (başkasına ait olmayan) en son e-tablosunu görmesi istenen davranıştır. Bu nedenle, komut dosyası kapsamı yerine kullanıcı kapsamını seçeriz.

E-tablo URL'sini depolamak için PropertiesService.getUserProperties().setProperty() kullanın. Cards.gs içindeki submitForm alanına aşağıdakileri ekleyin:

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

Ardından, kullanıcı eklentiyi her kullandığında en son URL'yi görecek şekilde depolanan mülkü döndürmek için Helpers.gs içindeki getSheetUrl işlevini değiştirin. Özelliğin değerini almak için PropertiesService.getUserProperties().getProperty() kullanın.

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

Son olarak, komut dosyasının Mülk hizmetine erişebilmesi için yetkilendirilmesi de gerekir. Eklentinizin mülk bilgilerini okuyup yazmasına izin vermek için kapsamı https://www.googleapis.com/auth/script.storage daha önce olduğu gibi manifeste ekleyin.

7. Gmail iletisini ayrıştırma

Kullanıcıların gerçekten zaman kazanması için formu, e-postadaki harcama ile ilgili bilgilerle önceden dolduralım. Helpers.gs içinde bu rolü oynayan işlevler oluşturduk ancak şu ana kadar yalnızca giderin tarihi, tutarı ve açıklaması için "YAPILACAKLAR" değerini döndürdük.

Örneğin, e-postanın alındığı tarihi alıp harcama tarihi için varsayılan değer olarak kullanabiliriz.

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

Kalan iki işlevi uygulayın:

getExpenseDescription, e-posta mesajını ayrıştırmak ve daha da doğru bir açıklama sunmak için daha gelişmiş yöntemler olsa da hem gönderenin adının hem de ileti konusunun birleştirilmesini gerektirebilir.
getLargestAmount için parayla ilişkili belirli sembolleri aramayı deneyin. Makbuzlarda genellikle vergiler ve diğer ücretler gibi birden fazla değer listelenir. Doğru tutarı nasıl belirleyebileceğinizi düşünün. Normal ifadeler de işe yarayabilir.

İlham almak için GmailMessage ile ilgili referans belgelerini inceleyin veya codelab'in başında indirdiğiniz çözüm koduna göz atın. Helpers.gs içindeki tüm işlevler için kendi uygulamalarınızı geliştirdikten sonra eklentinizi deneyin. Makbuzları açın ve e-tabloya kaydetmeye başlayın.

8. Kart işlemleriyle formu temizleme

Expense It!, açık bir e-postadaki harcamayı yanlış tanımlarsa ve formu yanlış bilgilerle önceden doldurursa ne olur? Kullanıcı formu temizler. CardAction sınıfı, işlem tıklandığında çağrılan bir işlevi belirtmemize olanak tanır. Kullanıcıya formu hızlıca temizleme olanağı sunmak için bu işlevi kullanalım.

createExpensesCard öğesini, döndürdüğü kartta "Formu temizle" etiketli bir kart işlemi olacak ve tıklandığında aşağıdaki clearForm işlevini çağıracak şekilde değiştirin. Bu işlevi Cards.gs içine yapıştırabilirsiniz. Form temizlendiğinde durum mesajının kalmasını sağlamak için opt_status değerini işleme "Durum" adlı bir parametre olarak iletmeniz gerekir. İşlemler için isteğe bağlı parametrelerin Object.<string, string> türünde olması gerektiğini unutmayın. Bu nedenle, opt_status kullanılamıyorsa {'Status' : ''} değerini iletmeniz gerekir.

/**
 * 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. E-tablo oluştur

Google Apps Komut Dosyası'nı mevcut bir e-tabloyu düzenlemek için kullanmanın yanı sıra programatik olarak tamamen yeni bir e-tablo da oluşturabilirsiniz. Eklentimizde, kullanıcının giderler için bir e-tablo oluşturmasına izin verelim. Başlamak için createExpensesCard tarafından döndürülen karta aşağıdaki kart bölümünü ekleyin.

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);

Artık kullanıcı "Yeni Sayfa" düğmesini tıkladığında eklenti, her zaman görünür olacak şekilde dondurulmuş bir üstbilgi satırıyla biçimlendirilmiş yeni bir e-tablo oluşturuyor. Kullanıcı, formda yeni e-tablonun başlığını belirtir. Formun boş olması ihtimaline karşı varsayılan bir değer eklemek iyi bir seçenek olabilir. createExpensesSheet uygulamanızda, URL alanını yeni e-tablonun URL'siyle önceden doldurmanın yanı sıra uygun bir durum mesajı ekleyerek mevcut karta neredeyse aynı olan bir kart döndürün.

10. Tebrikler!

E-postalardaki harcamaları bulan ve kullanıcıların bu harcamaları saniyeler içinde bir e-tabloya kaydetmesine yardımcı olan bir Gmail Eklentisini başarıyla tasarlayıp uyguladınız. Birden fazla Google API'siyle arayüz oluşturmak ve eklentinin birden fazla çalıştırılması arasında verileri kalıcı hale getirmek için Google Apps Komut Dosyası'nı kullanmış olmanız gerekir.

Olası İyileştirmeler

Expense It! uygulamasını geliştirirken hayal gücünüzden yararlanın. Ancak daha da kullanışlı bir ürün oluşturmak için aşağıdaki fikirlerden de yararlanabilirsiniz:

Kullanıcı bir gider kaydettiğinde e-tablonun bağlantısı
Gider kaydını düzenleme/geri alma özelliği ekleme
Kullanıcıların ödeme yapmasına ve para istemesine olanak tanımak için harici API'leri entegre edin.