Buat langkah

Panduan ini menjelaskan cara membuat langkah yang dapat ditambahkan pengguna ke alur di Google Workspace Flows.

Langkah adalah satu langkah dalam urutan tugas alur. Langkah tidak dapat memulai alur.

Sebagai contoh, pertimbangkan langkah yang melakukan aritmatika. Aplikasi ini meminta dua nilai dan operasi matematika kepada pengguna. Kemudian, operasi matematika dilakukan pada nilai dan hasilnya ditampilkan.

Pengguna mengonfigurasi langkah kalkulator sebagai bagian dari alur.

Gambar 1: Pengguna mengonfigurasi langkah kalkulator sebagai bagian dari alur.

Untuk membuat langkah, konfigurasikan di file manifes add-on, tulis logika aplikasi dalam kode add-on Google Workspace, serta deploy dan uji langkah tersebut. Selama versi alfa, jangan memublikasikan add-on yang memperluas Alur.

Tentukan langkah

Untuk mengonfigurasi langkah, tentukan di file manifes dan tulis logika aplikasinya dalam kode.

Menentukan langkah dalam file manifes

Dalam file manifes, appsscript.json:

  1. Tetapkan onConfigFunction dan onExecuteFunction ke nama fungsi yang sesuai dalam kode add-on. Dalam contoh ini, fungsinya disebut onConfigCalculate() dan onExecuteCalculate().
    • onConfigFunction menyiapkan dan mengonfigurasi langkah. Jika perlu, kumpulkan data dari pengguna yang diperlukan untuk menjalankan langkah-langkah, seperti alamat untuk mengirim email. Dalam contoh panduan ini, kita meminta dua nilai dan operasi matematika.
    • onExecuteFunction mengeksekusi langkah. Jika data dikumpulkan dari pengguna, data tersebut diteruskan ke fungsi ini. Jika berlaku, menampilkan output. Dalam contoh panduan ini, menampilkan hasil penghitungan matematika.

  2. Tetapkan input dan output yang diperlukan, yang memungkinkan langkah mengumpulkan data dan mengirimkannya ke langkah selanjutnya. Dalam contoh ini, minta pengguna memasukkan dua nilai dan operasi matematika yang ditentukan dalam inputs[]. Output hasil penghitungan seperti yang ditentukan dalam outputs[].

    Untuk mempelajari input dan output lebih lanjut, lihat Variabel input dan Variabel output. Untuk memastikan alur berjalan tanpa error, validasi variabel input.

Berikut adalah file manifes untuk langkah Kalkulator:

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": "onConfigCalculate",
            "onExecuteFunction": "onExecuteCalculate"
          }
        }
      ]
    }
  }
}

Selanjutnya, tulis kode pendukung dengan menentukan langkah dalam kode.

Tentukan langkah dalam kode

Dalam kode aplikasi, lakukan hal berikut:

  1. Tulis onConfigFunction, yang disebut onConfigCalculate() dalam contoh ini. Saat menambahkan langkah ke alur, pengguna dapat mengonfigurasi aspek langkah di pembuat alur. Untuk mengumpulkan info yang diperlukan dari pengguna, onConfigFunction menentukan kartu konfigurasi.

    Kartu adalah elemen penyusun antarmuka pengguna di add-on. Kartu mendukung tata letak yang ditentukan, elemen UI interaktif seperti tombol, dan media kaya seperti gambar. Kartu adalah cara Anda bisa mendapatkan data dari pengguna yang diperlukan untuk menjalankan langkah, seperti alamat email untuk mengirim email.

    OnConfigFunction menampilkan objek RenderActions yang berisi kartu. Kartu ini menentukan UI tempat pengguna menetapkan data langkah. Dalam contoh ini, onConfigFunction membuat kartu yang meminta dua nilai dan operasi matematika kepada pengguna.

  2. Tulis onExecuteFunction yang disebut onExecuteCalculate() dalam contoh ini. Saat langkah Anda berjalan dalam alur, OnExecuteFunction akan berjalan. Semua nilai input yang ditetapkan pengguna selama konfigurasi seperti yang ditentukan dalam onConfigurationFunction diteruskan ke OnExecuteFunction.

    Tulis OnExecuteFunction() sehingga tugasnya dieksekusi secara sinkron menggunakan input yang diberikan. Ingat, OnExecuteFunction() harus menampilkan semua output yang ditentukan dalam manifes alur Anda, jika tidak, akan terjadi kesalahan.

Contoh kode ini mencakup fungsi pendukung, outputVariables(), yang membuat dan mengirimkan variabel yang diberikan sebagai output dari langkah.

Langkah Anda siap untuk diuji.

Berikut kode untuk langkah Kalkulator:

Apps Script

/**
 * Generates and displays a configuration card for the sample calculation step.
 *
 * This function creates a card with input fields for two values and a drop-down
 * for selecting an arithmetic operation. The card also includes a "Save"
 * button to save the step configuration for the workflow.
 *
 * The input fields are configured to let the user select outputs from previous
 * workflow steps as input values using the `hostAppDataSource` property.
 */
function onConfigCalculate() {
  var card = {
    "sections": [
      {
        "header": "Step example: 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 {
    "action": {
      "navigations": [{
        "push_card": card
      }]
    }
  };
}

/**
 * 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(variableValues) {
  var renderAction =  {
    "hostAppAction" : {
      "workflowAction" : {
        "returnOutputVariablesAction" : {
          "variables" : variableValues
        }
      }
    }
  };
  console.log("renderAction: " + JSON.stringify(renderAction));
  return renderAction;
}

/**
 * Executes the calculation step based on the inputs from a flow event.
 *
 * This function retrieves input values and the operation from the flow event,
 * performs the calculation, and returns the result as an output variable.
 * The function logs the event for debugging purposes.
 */
function onExecuteCalculate(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;
  }
  return outputVariables([{
    "variableId": "result",
    "variableData": {
        "integerValues": [
          calculatedValue
        ]
      },
  }]);
}

Menguji langkah Anda

Untuk menguji langkah, siapkan deployment pengujian untuk add-on, tambahkan langkah ke alur, lalu jalankan alur.

  1. Siapkan deployment pengujian untuk add-on Anda:

    1. Buka project skrip di editor Apps Script.
    2. Klik Deploy > Test deployments.
    3. Klik Instal.
    4. Di bagian bawah, klik Selesai.

    Anda dapat mengizinkan pengguna lain menguji add-on dengan membagikan project Apps Script ke akun mereka (akses edit diperlukan). Kemudian, minta pengguna untuk mengikuti langkah-langkah sebelumnya.

    Setelah diinstal, add-on akan langsung tersedia di Alur. Anda mungkin perlu memuat ulang Flows sebelum add-on muncul. Anda juga harus memberikan otorisasi add-on sebelum menggunakannya.

    Untuk mempelajari lebih lanjut deployment pengujian, lihat Menginstal add-on yang belum dipublikasikan.

  2. Buka Alur.

  3. Buat alur yang menyertakan langkah Anda:

    1. Klik Alur baru.
    2. Pilih cara memulai alur. Saat menguji langkah, sebaiknya pilih pemicu yang dapat Anda aktifkan sendiri, seperti mengirim email ke diri Anda sendiri. Jika langkah Anda memerlukan variabel input, konfigurasikan variabel input sebagai bagian dari output starter.
    3. Klik Tambahkan langkah. Pilih langkah yang Anda buat atau perbarui, yang disebut Calculate.
    4. Konfigurasi langkah Anda. Untuk langkah penghitungan, pilih dua nilai dan operasi matematika. Langkah akan disimpan secara otomatis.
    5. Untuk menguji output langkah, tambahkan langkah lain. Misalnya, untuk menambahkan output ke pesan email, Anda dapat menambahkan langkah Kirim pesan Gmail. Di Pesan, klik Variabel, lalu pilih output langkah Anda. Untuk langkah penghitungan, pilih Variabel > Langkah 2: Hasil yang dihitung > Hasil yang dihitung. Variabel muncul sebagai chip di kolom Pesan.
    6. Klik Aktifkan. Alur Anda siap dijalankan.

  4. Jalankan alur dengan memicu pemicu alur. Misalnya, jika alur Anda dimulai saat Anda menerima email, kirim email ke diri Anda sendiri.

  5. Verifikasi bahwa alur berjalan seperti yang diharapkan. Periksa log dengan membuka tab Aktivitas di builder alur. Untuk mempelajari cara membuat log kustom di tab Aktivitas, lihat Log aktivitas.