Ułatwianie obsługi poczty e-mail dzięki dodatkom do Google Workspace

1. Omówienie

W ramach tego ćwiczenia w programie wykorzystasz Google Apps Script, aby napisać dodatek do Google Workspace do Gmaila, który umożliwia użytkownikom dodawanie danych rachunków z e-maili do arkusza kalkulacyjnego bezpośrednio w Gmailu. Gdy użytkownik otrzyma e-maila z potwierdzeniem, otwiera dodatek, który automatycznie otrzymuje z e-maila odpowiednie informacje o wydatkach. Użytkownik może edytować informacje o wydatkach, a następnie przesłać je w celu zarejestrowania swoich wydatków w arkuszu kalkulacyjnym Arkuszy Google.

Czego się nauczysz

  • Tworzenie dodatku do Google Workspace do Gmaila za pomocą Google Apps Script
  • Analizowanie e-maila przy użyciu Google Apps Script
  • Interakcja z Arkuszami Google przy użyciu Google Apps Script
  • Przechowuj wartości użytkowników za pomocą usługi Właściwości w Google Apps Script

Czego potrzebujesz

  • Dostęp do internetu i przeglądarki
  • konto Google,
  • Niektóre wiadomości (najlepiej z potwierdzeniami e-maili) w Gmailu

2. Pobieranie przykładowego kodu

Podczas wykonywania tych ćwiczeń warto odwoływać się do działającej wersji pisanego kodu. Repozytorium GitHub zawiera przykładowy kod, którego możesz użyć jako odniesienia.

Aby pobrać przykładowy kod, w wierszu poleceń uruchom polecenie:

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

3. Tworzenie podstawowego dodatku

Zacznij od napisania kodu prostej wersji dodatku, która wyświetla formularz wydatków przy e-mailu.

Najpierw utwórz nowy projekt Apps Script i otwórz jego plik manifestu.

  1. Wejdź na script.google.com. Możesz na niej tworzyć i monitorować projekty Apps Script oraz nimi zarządzać.
  2. Aby utworzyć nowy projekt, w lewym górnym rogu kliknij Nowy projekt. Nowy projekt zostanie otwarty z plikiem domyślnym o nazwie Code.gs. Zostaw urządzenie Code.gs w spokoju. Zajmiesz się nim później.
  3. Kliknij Untitled project (Projekt bez tytułu), nadaj projektowi nazwę Expense It! (Wydaj) i kliknij Zmień nazwę.
  4. Po lewej stronie kliknij Ustawienia projektu Ustawienia projektu.
  5. Zaznacz pole wyboru Pokaż plik „appscript.json” plik manifestu w edytorze”.
  6. Kliknij Edytor Edytujący.
  7. Aby otworzyć plik manifestu, po lewej stronie kliknij appscript.json.

W polu appscript.json określ metadane powiązane z dodatkiem, np. jego nazwę i wymagane uprawnienia. Zastąp zawartość pola appsscript.json tymi ustawieniami konfiguracji:

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

Zwróć szczególną uwagę na część pliku manifestu o nazwie contextualTriggers. Ta część pliku manifestu wskazuje zdefiniowaną przez użytkownika funkcję, która ma zostać wywołana po pierwszej aktywacji dodatku. W takim przypadku wywołuje metodę getContextualAddOn, która pobiera szczegółowe informacje o otwartym e-mailu i zwraca zestaw kart do wyświetlenia użytkownikowi.

Aby utworzyć funkcję getContextualAddOn, wykonaj te czynności:

  1. Po lewej stronie najedź kursorem na Code.gs, a następnie kliknij Menu Menu Więcej > Zmień nazwę.
  2. Wpisz GetContextualAddOn i naciśnij klawisz Enter. Apps Script automatycznie dołącza .gs do nazwy pliku, więc nie musisz wpisywać rozszerzenia pliku. Jeśli wpiszesz GetContextualAddOn.gs, Apps Script nada plikowi nazwę GetContextualAddOn.gs.gs.
  3. W GetContextualAddOn.gs zastąp kod domyślny funkcją 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()];
}

Interfejs każdego dodatku do Google Workspace składa się z kart podzielonych na jedną lub więcej sekcji. Każda z nich zawiera widżety, które mogą wyświetlać i uzyskiwać informacje o użytkowniku. Funkcja getContextualAddOn tworzy jedną kartę ze szczegółowymi informacjami o wydatkach znalezionych w e-mailu. Na karcie znajduje się jedna sekcja, w której znajdują się pola do wprowadzania istotnych danych. Funkcja zwraca tablicę kart dodatku. W tym przypadku zwrócona tablica zawiera tylko jedną kartę.

Zanim wdrożysz Expense It! dodatek wymaga projektu Google Cloud Platform (GCP), którego projekty Apps Script używają do zarządzania uwierzytelnianiem, usługami zaawansowanymi i innymi informacjami. Więcej informacji znajdziesz na stronie Projekty Google Cloud Platform.

Aby wdrożyć i uruchomić dodatek, wykonaj te czynności:

  1. Otwórz projekt GCP i skopiuj jego numer.
  2. W projekcie Apps Script po lewej stronie kliknij Ustawienia projektu Ustawienia projektu.
  3. W sekcji „Projekt Google Cloud Platform (GCP)” kliknij Zmień projekt.
  4. Wpisz numer projektu GCP, a następnie kliknij Ustaw projekt.
  5. Kliknij Wdróż > Testuj wdrożenia.
  6. Upewnij się, że typem wdrożenia jest Dodatek do Google Workspace. W razie potrzeby u góry okna kliknij Włącz typy wdrożeń Włącz typy wdrożeń i jako typ wdrożenia wybierz Dodatek do Google Workspace.
  7. Obok Aplikacje: Gmail kliknij Zainstaluj.
  8. Kliknij Gotowe.

Teraz zobaczysz dodatek w swojej skrzynce odbiorczej w Gmailu.

  1. Otwórz Gmaila na komputerze.
  2. W panelu bocznym po prawej stronie wyświetla się karta Expense It! Pojawi się dodatek Spłać... ikona rachunku. Aby go znaleźć, konieczne może być kliknięcie Więcej dodatków Więcej dodatków.
  3. Otwórz e-maila, najlepiej rachunek z wydatkami.
  4. Aby otworzyć dodatek, w prawym panelu bocznym kliknij Wydawaj! Spłać... ikona rachunku.
  5. Daj z siebie wszystko! aby uzyskać dostęp do swojego konta Google, kliknij Autoryzuj dostęp i postępuj zgodnie z wyświetlanymi instrukcjami.

Dodatek wyświetla prosty formularz obok otwartej wiadomości w Gmailu. Nie zawiera ona jeszcze żadnych innych funkcji, ale funkcje jej funkcji rozszerzy się w następnej sekcji.

Aby w miarę przechodzenia z tego modułu widzieć aktualizacje dodatku, wystarczy zapisać kod i odświeżyć Gmaila. Nie są potrzebne żadne dodatkowe wdrożenia.

4. Uzyskiwanie dostępu do e-maili

Dodaj kod, który pobiera treść e-maila i tworzy go modułowo, aby ułatwić sobie pracę.

Obok opcji Pliki kliknij Dodaj Dodaj plik > Skrypt i utwórz plik o nazwie Cards. Utwórz drugi plik skryptu o nazwie Helpers. Cards.gs tworzy kartę i używa funkcji z Helpers.gs do wypełniania pól w formularzu na podstawie treści e-maila.

Zastąp kod domyślny w Cards.gs tym kodem:

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

Funkcja createExpensesCard przyjmuje tablicę wartości, aby wstępnie wypełnić formularz jako opcjonalny argument. Funkcja może wyświetlić opcjonalny komunikat o stanie, który ma kolor czerwony, jeśli stan zaczyna się od „Błąd:”, lub jest zielony. Zamiast ręcznie dodawać każde pole do formularza, funkcja pomocnicza o nazwie createFormSection analizuje proces tworzenia widżetów do wprowadzania tekstu, ustawia każdą wartość domyślną z wartością setValue, a następnie dodaje widżety do odpowiednich sekcji na karcie.

Teraz zastąp domyślny kod w pliku Helpers.gs tym kodem:

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

Funkcja Helpers.gs jest wywoływana przez getContextualAddon w celu określenia wstępnie wypełnionych wartości w formularzu. Na razie te funkcje będą zwracać tylko ciąg „TODO” bo w kolejnym kroku wdrożysz logikę wstępnego uzupełniania.

Następnie zaktualizuj kod w tabeli GetContextualAddon.gs, tak aby korzystał z kodu z elementów Cards.gs i Helpers.gs. Zastąp kod w polu GetContextualAddon.gs tym kodem:

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

Zwróć uwagę na nową funkcję getCurrentMessage, która wykorzystuje zdarzenie dostarczone przez Gmaila do odczytania aktualnie otwartej wiadomości użytkownika. Aby ta funkcja działała, dodaj do pliku manifestu skryptu dodatkowy zakres, który zezwala na dostęp tylko do odczytu do wiadomości Gmaila.

W narzędziu appscript.json zaktualizuj zasadę oauthScopes, tak aby żądała także zakresu 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"
],

W Gmailu uruchom dodatek i autoryzuj dostęp do Expense It! aby wyświetlić e-maile. Pola formularza są teraz wstępnie wypełnione wartością „TODO”.

5. Korzystanie z Arkuszy Google

The Expense It! dodatek zawiera formularz, w którym użytkownik może podać szczegóły dotyczące wydatków, ale nie ma ich nigdzie indziej. Dodajmy przycisk, który wysyła dane formularza do Arkuszy Google.

Aby dodać przycisk, użyjemy klasy ButtonSet. Do interfejsu Arkuszy Google używamy usługi Arkusze Google.

Zmień createFormSection, aby zwracał przycisk „Prześlij”. jako część formularza na karcie. Wykonaj te czynności:

  1. Utwórz przycisk tekstowy za pomocą elementu CardService.newTextButton() i oznacz go etykietą „Prześlij”. za pomocą: CardService.TextButton.setText().
  2. Zaprojektuj przycisk w taki sposób, aby po jego kliknięciu w CardService.TextButton.setOnClickAction() wywoływane było to działanie submitForm:
/**
 * 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. Utwórz widżet zestawu przycisków za pomocą narzędzia CardService.newButtonSet() i dodaj przycisk tekstowy do zestawu przycisków z atrybutem CardService.ButtonSet.addButton().
  2. Dodaj widżet zestawu przycisków do sekcji formularza na karcie, korzystając z pola CardService.CardSection.addWidget().

Za pomocą kilku wierszy kodu możemy otworzyć arkusz kalkulacyjny według jego adresu URL i dołączyć do niego wiersz danych. Pamiętaj, że dane wejściowe w formularzu są przekazywane do funkcji w ramach zdarzenia e i sprawdzamy, czy użytkownik podał wszystkie pola. Zakładając, że nie wystąpią błędy, tworzymy pustą kartę wydatków ze statusem korzystnym. Jeśli wykryjemy błąd, zwracamy oryginalnie wypełnioną kartę wraz z komunikatem o błędzie. Funkcja pomocnicza objToArray ułatwia konwertowanie odpowiedzi na pytania z formularza w tablicę, którą można później dołączyć do arkusza kalkulacyjnego.

Na koniec zaktualizuj sekcję oauthScopes w aplikacji appsscript.json jeszcze raz i poproś o zakres https://www.googleapis.com/auth/spreadsheets. Po autoryzowaniu tego zakresu dodatek może odczytywać i modyfikować Arkusze Google użytkownika.

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

Jeśli nie masz jeszcze utworzonego nowego arkusza kalkulacyjnego, utwórz go na stronie https://docs.google.com/spreadsheets/.

Teraz ponownie uruchom dodatek i spróbuj przesłać formularz. Pamiętaj, by w formularzu URL arkusza kalkulacyjnego wpisać pełny URL docelowego adresu URL.

6. Przechowuj wartości za pomocą usługi Właściwości

Użytkownicy często zapisują wiele wydatków w tym samym arkuszu kalkulacyjnym, dlatego wygodniej jest podać najnowszy adres URL arkusza kalkulacyjnego jako wartość domyślną na karcie. Aby poznać najnowszy adres URL arkusza kalkulacyjnego, musimy zapisywać tę informację przy każdym użyciu dodatku.

Usługa Właściwości umożliwia przechowywanie par klucz-wartość. W naszym przypadku rozsądnym kluczem byłby „SPREADSHEET_URL”. a wartością będzie sam adres URL. Aby zapisać taką wartość, musisz zmodyfikować atrybut submitForm w Cards.gs tak, by URL arkusza kalkulacyjnego był zapisywany jako właściwość po dołączeniu nowego wiersza do arkusza.

Pamiętaj, że właściwości mogą mieć jeden z 3 zakresów: skrypt, użytkownik lub dokument. Zakres dokumentu nie dotyczy dodatków w Gmailu, ale ma zastosowanie w przypadku oddzielnego typu dodatku w przypadku przechowywania informacji związanych z konkretnym Dokumentem lub Arkuszem Google. W przypadku naszego dodatku domyślna opcja w formularzu ma być wyświetlana użytkownikowi (w przeciwieństwie do najnowszego arkusza kalkulacyjnego) przez inną osobę. Dlatego wybieramy zakres user zamiast zakresu script.

Użyj PropertiesService.getUserProperties().setProperty(), by zapisać adres URL arkusza kalkulacyjnego. Dodaj do submitForm w Cards.gs te elementy:

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

Następnie zmodyfikuj funkcję getSheetUrl w tabeli Helpers.gs, by zwracała zapisaną właściwość. Dzięki temu użytkownik za każdym razem, gdy użyje dodatku, będzie widział najnowszy URL. Użyj PropertiesService.getUserProperties().getProperty(), aby pobrać wartość właściwości.

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

Na koniec, aby uzyskać dostęp do usługi Property, skrypt również musi być autoryzowany. Dodaj zakres https://www.googleapis.com/auth/script.storage do pliku manifestu (tak jak poprzednio), aby umożliwić dodatkowi odczytywanie i zapisywanie informacji o właściwościach.

7. Analizowanie wiadomości z Gmaila

Aby użytkownicy wypełnij formularz odpowiednimi informacjami dotyczącymi wydatków z e-maila. Utworzyliśmy już w funkcji Helpers.gs funkcje, które odgrywają tę rolę, ale na razie zwróciliśmy tylko „TODO” z datą, kwotą i opisem wydatków.

Możemy na przykład uzyskać datę otrzymania e-maila i użyć tej wartości jako domyślnej w dacie rozliczenia.

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

Wdróż pozostałe 2 funkcje:

  1. Funkcja getExpenseDescription może wymagać połączenia nazwy nadawcy i tematu wiadomości, chociaż istnieją bardziej wyrafinowane sposoby analizowania treści wiadomości i dostarczania jeszcze dokładniejszego opisu.
  2. W przypadku języka getLargestAmount poszukaj konkretnych symboli związanych z pieniądzami. Paragony często mają kilka wartości, np. podatki i inne opłaty. Zastanów się, jak możesz określić właściwą kwotę. Wyrażenia regularne też mogą się przydać.

Jeśli potrzebujesz dodatkowej inspiracji, przejrzyj dokumentację referencyjną GmailMessage lub sprawdź kod rozwiązania pobrany na początku tych ćwiczeń. Gdy już przygotujesz własne implementacje wszystkich funkcji dostępnych w Helpers.gs, wypróbuj dodatek. Otwórz rachunki i zacznij je rejestrować w arkuszu kalkulacyjnym.

8. Wyczyść formularz z działaniami karty

Co się stanie, jeśli Expense It! nieprawidłowo identyfikuje wydatek w otwartym e-mailu i wstępnie wypełnia formularz nieprawidłowymi informacjami? Użytkownik wypełnia formularz. Klasa CardAction pozwala określić funkcję, która jest wywoływana po kliknięciu działania. Wykorzystajmy go, aby dać użytkownikowi szybki sposób na wyczyszczenie formularza.

Zmodyfikuj createExpensesCard tak, by zwracana karta miała działanie o nazwie „Wyczyść formularz” a po kliknięciu wywołuje następującą funkcję clearForm, którą możesz wkleić do komórki Cards.gs. Musisz przekazać opt_status jako parametr o nazwie „Status” (Stan). aby mieć pewność, że po wyczyszczeniu formularza komunikat o stanie pozostaje niezmieniony. Pamiętaj, że opcjonalne parametry działań muszą być typu Obiekt.<ciąg, ciąg>, więc jeśli opt_status nie jest dostępny, musisz przekazać {'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. Utwórz arkusz kalkulacyjny

Oprócz edytowania istniejącego arkusza kalkulacyjnego za pomocą Google Apps Script możesz programowo tworzyć zupełnie nowy arkusz kalkulacyjny. W przypadku naszego dodatku pozwólmy użytkownikowi utworzyć arkusz kalkulacyjny wydatków. Aby rozpocząć, dodaj poniższą sekcję karty do karty, którą createExpensesCard zwróci.

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

Gdy użytkownik kliknie „Nowy arkusz”, Dodatek generuje nowy arkusz kalkulacyjny sformatowany z zablokowanym wierszem nagłówka w taki sposób, aby był zawsze widoczny. Użytkownik określa tytuł nowego arkusza kalkulacyjnego w formularzu. Warto też dodać wartość domyślną, jeśli formularz jest pusty. W Twojej implementacji createExpensesSheet zwracaj kartę niemal identyczną z dotychczasową kartą, dodając odpowiedni komunikat o stanie i wstępnie wypełniając pole adresu URL adresem URL nowego arkusza kalkulacyjnego.

10. Gratulacje!

Udało Ci się zaprojektować i wdrożyć dodatek do Gmaila, który w ciągu kilku sekund odnotowuje wydatki w e-mailach i ułatwia użytkownikom zapisanie wydatków w arkuszu kalkulacyjnym. Udało Ci się wykorzystać Google Apps Script w interfejsie z wieloma interfejsami API Google, a dane były zachowywane podczas kolejnych uruchomień dodatku.

Możliwe ulepszenia

Ulepszając wydatki, kieruj się wyobraźnią, ale poniżej znajdziesz kilka pomysłów, jak stworzyć jeszcze bardziej użyteczny produkt:

  • Link do arkusza kalkulacyjnego, gdy użytkownik zarejestruje wydatek
  • Dodaj możliwość edytowania/cofania logowania wydatków
  • Zintegruj zewnętrzne interfejsy API, aby umożliwić użytkownikom dokonywanie płatności i wysyłanie próśb o środki

Więcej informacji