สร้างขั้นตอน

คู่มือนี้อธิบายวิธีสร้างขั้นตอนที่ผู้ใช้เพิ่มลงในโฟลว์ใน Google Workspace Studio ได้

ขั้นตอนคือขั้นตอนเดียวในลำดับงานของโฟลว์ ขั้นตอนจะเริ่มโฟลว์ไม่ได้

ตัวอย่างเช่น ลองพิจารณาขั้นตอนที่ทำการคำนวณ โดยจะขอให้ผู้ใช้ป้อนค่า 2 ค่าและการดำเนินการทางคณิตศาสตร์ จากนั้นจะดำเนินการทางคณิตศาสตร์กับค่าดังกล่าวและแสดงผลลัพธ์

การ์ดขั้นตอนเครื่องคิดเลขของ Workspace Studio แสดงช่องป้อนตัวเลข 2 ช่องและเมนูแบบเลื่อนลงสำหรับการดำเนินการทางคณิตศาสตร์
รูปที่ 1: ผู้ใช้กำหนดค่าขั้นตอนเครื่องคิดเลขเป็นส่วนหนึ่งของโฟลว์

หากต้องการสร้างขั้นตอน ให้กำหนดค่าในไฟล์ Manifest ของส่วนเสริม เขียนตรรกะของแอปพลิเคชันในโค้ดของส่วนเสริม Google Workspace แล้วทำให้ขั้นตอนใช้งานได้และทดสอบ

กำหนดขั้นตอน

หากต้องการกำหนดค่าขั้นตอน ให้กำหนดขั้นตอนในไฟล์ Manifest และเขียนตรรกะของแอปพลิเคชันในโค้ด

กำหนดขั้นตอนในไฟล์ Manifest

ในไฟล์ Manifest appsscript.json ให้ทำดังนี้

  1. ตั้งค่า onConfigFunction และ onExecuteFunction เป็นชื่อฟังก์ชันที่เกี่ยวข้องในโค้ดของส่วนเสริม ในตัวอย่างนี้ ฟังก์ชันมีชื่อว่า onConfigCalculate และ onExecuteCalculate
    • onConfigFunction จะตั้งค่าและกำหนดค่าขั้นตอน รวบรวมข้อมูลจากผู้ใช้ที่จำเป็นต่อการดำเนินการตามขั้นตอน เช่น อีเมลที่จะส่ง หากจำเป็น ในตัวอย่างของคู่มือนี้ ให้ระบุค่า 2 ค่าและการดำเนินการทางคณิตศาสตร์
    • onExecuteFunction จะดำเนินการตามขั้นตอน หากมีการรวบรวมข้อมูลจากผู้ใช้ ระบบจะส่งข้อมูลดังกล่าวไปยังฟังก์ชันนี้ และจะแสดงเอาต์พุตหากมี ในตัวอย่างของคู่มือนี้ จะแสดงผลลัพธ์ของการคำนวณทางคณิตศาสตร์

  2. ตั้งค่าอินพุตและเอาต์พุตที่จำเป็น ซึ่งจะช่วยให้ขั้นตอนรวบรวมข้อมูลและส่งข้อมูลไปยังขั้นตอนต่อๆ ไปได้ ในตัวอย่างนี้ ให้ขอค่า 2 ค่าและการดำเนินการทางคณิตศาสตร์จากผู้ใช้ที่กำหนดไว้ใน inputs[] และแสดงผลลัพธ์ที่คำนวณตามที่กำหนดไว้ใน outputs[]

    ดูข้อมูลเพิ่มเติมเกี่ยวกับอินพุตและเอาต์พุตได้ที่ ตัวแปรอินพุตและ ตัวแปรเอาต์พุต และตรวจสอบตัวแปรอินพุตเพื่อให้แน่ใจว่าโฟลว์จะทำงานโดยไม่มีข้อผิดพลาด validate input variables

นี่คือไฟล์ Manifest สำหรับขั้นตอนเครื่องคิดเลข

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": "calculatorDemo",
          "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"
          }
        }
      ]
    }
  }
}

จากนั้นเขียนโค้ดสนับสนุนโดยกำหนดขั้นตอนในโค้ด

กำหนดขั้นตอนในโค้ด

ในโค้ดของแอปพลิเคชัน ให้ทำดังนี้

  1. เขียน onConfigFunction ซึ่งในตัวอย่างนี้เรียกว่า onConfigCalculate เมื่อผู้ใช้เพิ่มขั้นตอนลงในโฟลว์ ผู้ใช้จะกำหนดค่าลักษณะต่างๆ ของขั้นตอนในเครื่องมือสร้างโฟลว์ได้ onConfigFunction จะกำหนดการ์ดการกำหนดค่าเพื่อรวบรวมข้อมูลที่จำเป็นจากผู้ใช้

    การ์ดเป็นองค์ประกอบพื้นฐานสำหรับอินเทอร์เฟซผู้ใช้ในส่วนเสริม การ์ดรองรับเลย์เอาต์ที่กำหนดไว้ องค์ประกอบ UI แบบอินเทอร์แอกทีฟ เช่น ปุ่ม และริชมีเดีย เช่น รูปภาพ การ์ดเป็นวิธีที่คุณจะได้รับข้อมูลจากผู้ใช้ที่ขั้นตอนต้องใช้ในการทำงาน เช่น อีเมลสำหรับส่งอีเมล

    onConfigFunction จะแสดงการ์ด ซึ่งกำหนด UI ที่ผู้ใช้ตั้งค่าข้อมูลของขั้นตอน ในตัวอย่างนี้ onConfigFunction จะสร้างการ์ดที่ขอค่า 2 ค่าและการดำเนินการทางคณิตศาสตร์จากผู้ใช้

  2. เขียน onExecuteFunction ซึ่งในตัวอย่างนี้เรียกว่า onExecuteCalculate onExecuteFunction จะทำงานเมื่อขั้นตอนทำงานในโฟลว์ ระบบจะส่งค่าอินพุตที่ผู้ใช้ตั้งค่าไว้ระหว่างการกำหนดค่าตามที่กำหนดไว้ใน onConfigFunction ไปยัง onExecuteFunction

    เขียน onExecuteFunction เพื่อให้ฟังก์ชันนี้ทำงานแบบซิงโครนัสโดยใช้ข้อมูลที่ป้อน onExecuteFunction ต้องแสดงเอาต์พุตทั้งหมดที่กำหนดไว้ใน Manifest ของโฟลว์ ไม่เช่นนั้นจะเกิดข้อผิดพลาด

ตัวอย่างโค้ดนี้มีฟังก์ชันสนับสนุน outputVariables ซึ่งสร้างและส่งตัวแปรที่ระบุเป็นเอาต์พุตจากขั้นตอน

ขั้นตอนของคุณพร้อมสำหรับการทดสอบแล้ว

นี่คือโค้ดสำหรับขั้นตอนเครื่องคิดเลข

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 input fields are configured to let the user select outputs from previous
 * steps as input values using the `hostAppDataSource` property.
 */
function onConfigCalculate() {
  const firstInput = CardService.newTextInput()
  .setFieldName("value1")
  .setTitle("First Value")
  .setHostAppDataSource(
    CardService.newHostAppDataSource()
      .setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
      )
  );
  const secondInput = CardService.newTextInput()
    .setFieldName("value2")
    .setTitle("Second Value").setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    );
  const selectionInput = CardService.newSelectionInput()
    .setTitle("operation")
    .setFieldName("operation")
    .setType(CardService.SelectionInputType.DROPDOWN)
    .addItem("+", "+", false)
    .addItem("-", "-", true)
    .addItem("x", "x", false)
    .addItem("/", "/", false);

  const sections = CardService.newCardSection()
    .setHeader("Action_sample: Calculate")
    .setId("section_1")
    .addWidget(firstInput)
    .addWidget(selectionInput)
    .addWidget(secondInput)

  var card = CardService.newCardBuilder()
    .addSection(sections)
    .build();

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

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

  return outputVariables(variableDataMap);
}

ทดสอบขั้นตอน

หากต้องการทดสอบขั้นตอน ให้ตั้งค่าการทำให้ใช้งานได้สำหรับการทดสอบสำหรับส่วนเสริม เพิ่มขั้นตอนลงในโฟลว์ แล้วเรียกใช้โฟลว์

  1. ตั้งค่าการทำให้ใช้งานได้สำหรับการทดสอบสำหรับส่วนเสริมโดยทำดังนี้

    1. เปิดโปรเจ็กต์สคริปต์ในเครื่องมือแก้ไข Apps Script
    2. คลิกทำให้ใช้งานได้ > การทำให้ใช้งานได้สำหรับการทดสอบ
    3. คลิกติดตั้ง
    4. คลิกเสร็จสิ้น ที่ด้านล่าง

    คุณสามารถให้ผู้ใช้รายอื่นทดสอบส่วนเสริมได้โดยแชร์โปรเจ็กต์ Apps Script กับบัญชีของผู้ใช้ (ต้องมีสิทธิ์เข้าถึงเพื่อแก้ไข) จากนั้นแจ้งให้ผู้ใช้ทำตามขั้นตอนก่อนหน้า

    เมื่อติดตั้งแล้ว ส่วนเสริมจะพร้อมใช้งานในโฟลว์ทันที คุณอาจต้องรีเฟรชโฟลว์ก่อนที่ส่วนเสริมจะปรากฏขึ้น นอกจากนี้ คุณต้องให้สิทธิ์ส่วนเสริมก่อนจึงจะใช้งานได้

    ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำให้ใช้งานได้สำหรับการทดสอบได้ที่ ติดตั้งส่วนเสริมที่ยังไม่ได้เผยแพร่

  2. เปิดโฟลว์

  3. สร้างโฟลว์ที่มีขั้นตอนของคุณโดยทำดังนี้

    1. คลิก โฟลว์ ใหม่
    2. เลือกวิธีเริ่มโฟลว์ เมื่อทดสอบขั้นตอน คุณควรเลือกเงื่อนไขเริ่มต้นที่คุณตั้งค่าเองได้ เช่น การส่งอีเมลถึงตัวเอง หากขั้นตอนต้องใช้ตัวแปรอินพุต ให้กำหนดค่าตัวแปรอินพุตเป็นส่วนหนึ่งของเอาต์พุตของตัวเริ่ม
    3. คลิกเพิ่มขั้นตอน เลือกขั้นตอนที่คุณสร้างหรืออัปเดต ซึ่งเรียกว่าคำนวณ
    4. กำหนดค่าขั้นตอน สำหรับขั้นตอนการคำนวณ ให้เลือกค่า 2 ค่าและการดำเนินการทางคณิตศาสตร์ ระบบจะบันทึกขั้นตอนโดยอัตโนมัติ
    5. หากต้องการทดสอบเอาต์พุตของขั้นตอน ให้เพิ่มอีกขั้นตอน เช่น หากต้องการเพิ่มเอาต์พุตลงในข้อความอีเมล คุณอาจเพิ่มขั้นตอนส่งข้อความ ของ Gmail ในส่วนข้อความ ให้คลิก ตัวแปร แล้วเลือกเอาต์พุตของ ขั้นตอน สำหรับขั้นตอนการคำนวณ ให้เลือก ตัวแปร > ขั้นตอนที่ 2: ผลลัพธ์ที่คำนวณ > ผลลัพธ์ที่คำนวณ ตัวแปรจะปรากฏเป็นชิปในช่องข้อความ
    6. คลิกเปิด โฟลว์ของคุณพร้อมทำงานแล้ว

  4. เรียกใช้โฟลว์โดยตั้งค่าตัวเริ่มของโฟลว์ เช่น หากโฟลว์เริ่มทำงานเมื่อคุณได้รับอีเมล ให้ส่งอีเมลถึงตัวเอง

  5. ตรวจสอบว่าโฟลว์ทำงานตามที่คาดไว้ โดยดูบันทึกได้ที่แท็บกิจกรรม ของเครื่องมือสร้างโฟลว์ ดูวิธีสร้างบันทึกที่กำหนดเองในแท็บกิจกรรมได้ที่ บันทึกกิจกรรม