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

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

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

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

รูปที่ 1: ผู้ใช้กําหนดค่าขั้นตอนเครื่องคิดเลขเป็นส่วนหนึ่งของโฟลว์

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

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

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

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

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

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

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

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

ไฟล์ 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
    },
    "studio": {
      "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. ยืนยันว่าโฟลว์ทำงานตามที่คาดไว้ ตรวจสอบบันทึกโดย ไปที่แท็บกิจกรรมของเครื่องมือสร้างโฟลว์ ดูวิธีสร้างบันทึกที่กําหนดเองในแท็บกิจกรรมได้ที่บันทึกกิจกรรม

หัวข้อที่เกี่ยวข้อง

• ตัวแปรอินพุต
• ตรวจสอบตัวแปรอินพุต
• ตัวแปรเอาต์พุต
• กำหนดทรัพยากรที่กำหนดเอง
• ตัวแปรแบบไดนามิก
• บันทึกกิจกรรมและข้อผิดพลาด
• ออบเจ็กต์เหตุการณ์ Workspace Studio
• Codelab: สร้างขั้นตอนเริ่มต้นและขั้นตอนการดำเนินการของ Workspace Studio ที่กำหนดเอง