O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Guia de início rápido: criar uma etapa de calculadora com o Google Apps Script

Neste guia de início rápido, você vai aprender a criar uma etapa personalizada para o Workspace Studio usando o Google Apps Script. A etapa personalizada usa dois números e uma operação aritmética como entrada, realiza o cálculo e gera o resultado.

O card da etapa de calculadora do Workspace Studio mostrando dois campos de entrada de números e um menu suspenso de operações aritméticas. — **Figura 1**: um usuário configura a etapa da calculadora como parte de um fluxo.

Objetivos

Crie uma etapa personalizada para o Workspace Studio com o Google Apps Script.
Implante a etapa personalizada na sua organização do Google Workspace.
Teste a etapa personalizada no Workspace Studio.

Pré-requisitos

Uma Conta do Google com acesso ao Workspace Studio.

Configurar o script

Para configurar o script, crie um novo projeto do Apps Script e adicione o código do guia de início rápido:

Clique no botão a seguir para criar um novo projeto do Apps Script:

Criar o projeto
Dê um nome ao projeto do Apps Script:
1. Clique em Projeto sem título.
2. Em Título do projeto, digite Calculator quickstart.
3. Clique em Renomear.
Ao lado do arquivo Code.gs, clique em Mais > Renomear. Nomeie o arquivo como Calculator.

Substitua o conteúdo de Calculator.gs pelo código abaixo. Esse arquivo define uma etapa personalizada para o Google Workspace Studio chamada "Calculate", que usa dois números e uma operação como entrada e retorna o resultado do cálculo.

Ver código de `Calculator.gs`

/**
 * This script defines a custom step for Google Workspace Studio.
 * The step, named "Calculate", takes two numbers and an operation as input
 * and returns the result of the calculation.
 *
 * The script includes functions to:
 *
 * 1.  Define the configuration UI for the step using Card objects:
 *
 *     - `onConfigCalculateFunction()`: Generates the main configuration card.
 *     - Helper functions like `pushCard()`, `saveButton()` to build card components.
 *
 * 2.  Handle the execution of the step.
 *
 *     - `onExecuteCalculateFunction()`: Retrieves inputs, performs the calculation,
 *       and returns outputs.
 *
 * To learn more, see the following quickstart guide:
 * https://developers.google.com/workspace/add-ons/studio/quickstart
 */

/**
 * Creates an action response to push a new card onto the card stack.
 *
 * This function generates an action object that, when returned, causes the
 * provided card to be pushed onto the card stack, making it the currently
 * displayed card in the configuration UI.
 * @param {Object} card The Card object to push.
 * @return {Object} The action response object.
 */
function pushCard(card) {
  return {

      "action": {
        "navigations": [{
            "push_card": card
          }
        ]
      }  };  
}

/**
 * Creates an action response to update the currently displayed card.
 *
 * This function generates an action object that, when returned, causes the
 * currently displayed card to be replaced with the provided card in the
 * configuration UI.
 * @param {Object} card The Card object to update.
 * @return {Object} The render actions object.
 */
function updateCard(card) {
  return {
    "render_actions": {
      "action": {
        "navigations": [{
            "update_card": card
          }
        ]
      }
    }
  };
}

/**
 * Creates a button configuration object for saving the step.
 *
 * This function generates a button definition that, when clicked, triggers
 * a save action for the current step configuration.
 * @return {Object} The button widget object.
 */
function saveButton() {
  return {
      "text": "Save",
      "onClick": {
        "hostAppAction" : {
          "workflowAction" : {
            "saveWorkflowAction" : {}
          }
        }
      },
    };
}

/**
 * Creates a button configuration object for a refresh action.
 *
 * This function generates a button definition that, when clicked, triggers
 * a function to refresh the current card.
 * @param {string} functionName The name of the Apps Script function to call on click.
 * @return {Object} The button widget object.
 */
function refreshButton(functionName) {
  return {
      "text": "Refresh",
      "onClick": {
        "action" : {
          "function" : functionName
        }
      },
    };
}


/**
 * Generates and displays a configuration card for the sample calculation action.
 *
 * This function creates a card with input fields for two values and a dropdown
 * for selecting an arithmetic operation. The card also includes a "Save"
 * button to save the action configuration for the step.
 *
 * The input fields are configured to let the user select outputs from previous
 * steps as input values using the `hostAppDataSource` property.
 * This function is called when the user adds or edits the "Calculate" step in the UI.
 * @return {Object} The action response object containing the card to display.
 */
function onConfigCalculateFunction() {
  var card = {
    "sections": [
      {
        "header": "Action sample: Calculate",
        "widgets": [
          {
            "textInput": {
              "name": "value1",
              "label": "First value",
              "hostAppDataSource" : {
                "workflowDataSource" : {
                  "includeVariables" : true
                }
              }
            }
          },
          {
            "selectionInput": {
              "name": "operation",
              "label": "Operation",
              "type": "DROPDOWN",
              "items": [
                {
                  "text": "+",
                  "value": "+",
                },
                {
                  "text": "-",
                  "value": "-",
                },
                {
                  "text": "x",
                  "value": "x",
                },
                {
                  "text": "/",
                  "value": "/",
                }
              ]
            }
          },
          {
            "textInput": {
              "name": "value2",
              "label": "Second value",
              "hostAppDataSource" : {
                "workflowDataSource" : {
                  "includeVariables" : true
                }
              }
            }
          }
        ]
      }
    ]
  };
  return pushCard(card);
}

/**
 * Gets an integer value from variable data, handling both string and integer formats.
 *
 * This function attempts to extract an integer value from the provided variable data.
 * It checks if the data contains string values and, if so, parses the first string
 * as an integer. If integer values are present, it returns the first integer.
 * @param {Object} variableData The variable data object from the event.
 * @return {number} The extracted integer value.
 */
function getIntValue(variableData) {
  if (variableData.stringValues) {
    return parseInt(variableData.stringValues[0]);
  }
  return variableData.integerValues[0];
}

/**
* Returns output variables from a step.
*
* This function constructs an object that, when returned, sends the
* provided variable values as output from the current step.
* The variable values are logged to the console for debugging purposes.
*/
function outputVariables(variableDataMap) {
 const workflowAction = AddOnsResponseService.newReturnOutputVariablesAction()
   .setVariableDataMap(variableDataMap);

 const hostAppAction = AddOnsResponseService.newHostAppAction()
   .setWorkflowAction(workflowAction);

 const renderAction = AddOnsResponseService.newRenderActionBuilder()
   .setHostAppAction(hostAppAction)
   .build();

 return renderAction;
}

/**
 * Executes the calculation action based on the inputs from an event.
 *
 * This function retrieves input values ("value1", "value2") and the "operation"
 * from the event, performs the calculation, and returns the "result" and
 * "log" as output variables.
 * This function is called when the flow reaches this custom step.
 * @param {Object} event The event object passed by the runtime.
 * @return {Object} The output variables object.
 */
function onExecuteCalculateFunction(event) {
 console.log("output: " + JSON.stringify(event));
 var calculatedValue = 0;
 var value1 = event.workflow.actionInvocation.inputs["value1"].integerValues[0];
 var value2 = event.workflow.actionInvocation.inputs["value2"].integerValues[0];
 var operation = event.workflow.actionInvocation.inputs["operation"].stringValues[0];


 if (operation == "+") {
   calculatedValue = value1 + value2;
 } else if (operation == "-") {
   calculatedValue = value1 - value2;
 } else if (operation == "x") {
   calculatedValue = value1 * value2;
 } else if (operation == "/") {
   calculatedValue = value1 / value2;
 }

 const variableDataMap = { "result": AddOnsResponseService.newVariableData().addIntegerValue(calculatedValue) };

 return outputVariables(variableDataMap);
}

Clique em Configurações do projeto e marque a caixa de seleção Mostrar arquivo de manifesto "appsscript.json" no editor.

Clique em Editor , abra o arquivo de manifesto appsscript.json e substitua o conteúdo pelo seguinte código:

Ver código de `appsscript.json`

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Calculator",
      "logoUrl": "https://www.gstatic.com/images/branding/productlogos/calculator_search/v1/web-24dp/logo_calculator_search_color_1x_web_24dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "actionElement",
          "state": "ACTIVE",
          "name": "Calculate",
          "description": "Asks the user for two values and a math operation, then performs the math operation on the values and outputs the result.",
          "workflowAction": {
            "inputs": [
              {
                "id": "value1",
                "description": "value1",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "INTEGER"
                }
              },
              {
                "id": "value2",
                "description": "value2",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "INTEGER"
                }
              },
              {
                "id": "operation",
                "description": "operation",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "outputs": [
              {
                "id": "result",
                "description": "Calculated result",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "INTEGER"
                }
              }
            ],
            "onConfigFunction": "onConfigCalculateFunction",
            "onExecuteFunction": "onExecuteCalculateFunction"
          }
        }
      ]
    }
  }
}

Clique em Salvar .

Implantar e testar a etapa

Para testar a etapa, configure uma implantação de teste para o complemento, adicione a etapa a um fluxo e execute o fluxo.

Configure uma implantação de teste para o complemento:
1. Abra o projeto de script no editor do Apps Script.
2. Clique em Implantar > Testar implantações.
3. Clique em Instalar.
4. Na parte de baixo, clique em Concluído.
Você pode permitir que outros usuários testem o complemento compartilhando o projeto do Apps Script com a conta deles (é necessário ter acesso de edição). Em seguida, peça para os usuários seguirem as etapas anteriores.

Depois de instalado, o complemento fica imediatamente disponível no Flows. Talvez seja necessário atualizar os fluxos antes que o complemento apareça. Você também precisa autorizar o complemento antes de usá-lo.

Para saber mais sobre implantações de teste, consulte Instalar um complemento não publicado.
Abra o Flows.
Crie um fluxo que inclua sua etapa:
1. Clique em Novo fluxo.
2. Selecione como o fluxo vai começar. Se a etapa exigir uma variável de entrada, configure-a como parte da saída do inicializador.
3. Clique em Adicionar etapa. Selecione a etapa que você criou ou atualizou, chamada Calculate.
4. Configure a etapa. Para a etapa de cálculo, escolha dois valores e uma operação matemática. A etapa é salva automaticamente.
5. Para testar a saída da etapa, adicione outra etapa. Por exemplo, para adicionar uma saída a uma mensagem de chat do Google Chat, adicione a etapa Receber notificação no Chat do Chat. Em Mensagem, clique em Variáveis e selecione a saída da etapa. Para a etapa de cálculo, selecione Variáveis > Etapa 2: calcular > Resultado calculado. A variável aparece como um ícone no campo Mensagem.
6. Clique em Ativar. Seu fluxo está pronto para ser executado.
Execute o fluxo ativando o acionador dele. Por exemplo, se o fluxo começar com base em uma programação, ele será executado na data e hora especificadas.
Verifique se o fluxo é executado conforme o esperado. Verifique os registros acessando a guia Atividade do criador de fluxos. Para saber como criar registros personalizados na guia "Atividade", consulte Registros de atividades.

Próximas etapas

Você criou e testou uma etapa personalizada para o Workspace Studio. Agora você pode:

Continue personalizando a etapa pedindo ao Gemini para ajudar você a implementar uma lógica mais complexa.
Crie um card de configuração para personalizar a configuração da etapa.
Registrar atividades e erros para registrar e resolver problemas nas execuções de etapas.
Analise os objetos de evento para analisar o payload JSON que os fluxos enviam e recebem à medida que as etapas são executadas.
Faça o codelab Criar acionadores e etapas de ação personalizados do Workspace Studio para criar um acionador e uma etapa personalizados com o Apps Script.

Guia de início rápido: criar uma etapa de calculadora com o Google Apps Script Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.