Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การเริ่มต้นอย่างรวดเร็ว: สร้างขั้นตอนเครื่องคิดเลขด้วย Google Apps Script

คู่มือเริ่มใช้งานฉบับย่อนี้จะสอนวิธีสร้างขั้นตอนที่กำหนดเองสำหรับ Workspace Studio โดยใช้ Google Apps Script ขั้นตอนที่กำหนดเองจะรับตัวเลข 2 ตัวและการดำเนินการทางคณิตศาสตร์เป็นอินพุต ทำการคำนวณ และแสดงผลลัพธ์

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

วัตถุประสงค์

สร้างขั้นตอนที่กำหนดเองสำหรับ Workspace Studio ด้วย Google Apps Script
ทำให้ขั้นตอนที่กำหนดเองใช้งานได้ในองค์กร Google Workspace ของคุณเอง
ทดสอบขั้นตอนที่กำหนดเองใน Workspace Studio

ข้อกำหนดเบื้องต้น

บัญชี Google ที่มีสิทธิ์เข้าถึง Workspace Studio

ตั้งค่าสคริปต์

หากต้องการตั้งค่าสคริปต์ ให้สร้างโปรเจ็กต์ Apps Script ใหม่และเพิ่มโค้ดเริ่มต้นใช้งานด่วนดังนี้

คลิกปุ่มต่อไปนี้เพื่อสร้างโปรเจ็กต์ Apps Script ใหม่

สร้างโปรเจ็กต์
ตั้งชื่อโปรเจ็กต์ Apps Script ดังนี้
1. คลิกโปรเจ็กต์ที่ไม่มีชื่อ
2. ในชื่อโปรเจ็กต์ ให้พิมพ์ Calculator quickstart
3. คลิกเปลี่ยนชื่อ
ข้างไฟล์ Code.gs ให้คลิกเพิ่มเติม > เปลี่ยนชื่อ ตั้งชื่อไฟล์ว่า Calculator

แทนที่เนื้อหาของ Calculator.gs ด้วยโค้ดต่อไปนี้ ไฟล์นี้กำหนดขั้นตอนที่กำหนดเองสำหรับ Google Workspace Studio ชื่อ "Calculate" ซึ่งรับตัวเลข 2 ตัวและการดำเนินการเป็นอินพุต แล้วแสดงผลลัพธ์ของการคำนวณ

ดูโค้ด `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);
}

คลิกการตั้งค่าโปรเจ็กต์ แล้วเลือกช่องทำเครื่องหมายแสดงไฟล์ Manifest "appsscript.json" ในเครื่องมือแก้ไข

คลิกเครื่องมือแก้ไข เปิดไฟล์ Manifest appsscript.json แล้วแทนที่เนื้อหาด้วยโค้ดต่อไปนี้

ดูโค้ด `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"
          }
        }
      ]
    }
  }
}

คลิกบันทึก

ติดตั้งใช้งานและทดสอบขั้นตอน

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

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

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

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

ขั้นตอนถัดไป

คุณสร้างและทดสอบขั้นตอนที่กำหนดเองสำหรับ Workspace Studio เรียบร้อยแล้ว คุณทำสิ่งต่อไปนี้ได้แล้ว

ปรับแต่งขั้นตอนต่อไปโดยใช้พรอมต์ให้ Gemini ช่วยคุณใช้ตรรกะที่ซับซ้อนมากขึ้น
สร้างการ์ดการกำหนดค่าเพื่อปรับแต่งการกำหนดค่าขั้นตอน
บันทึกกิจกรรมและข้อผิดพลาดเพื่อบันทึกและแก้ปัญหาการเรียกใช้ขั้นตอน
ตรวจสอบออบเจ็กต์เหตุการณ์เพื่อตรวจสอบเพย์โหลด JSON ที่โฟลว์ส่งและรับเมื่อขั้นตอนทำงาน
ลองใช้ Codelab สร้างเงื่อนไขเริ่มต้นและขั้นตอนการดำเนินการที่กำหนดเองของ Workspace Studio เพื่อสร้างเงื่อนไขเริ่มต้นและขั้นตอนที่กำหนดเองด้วย Apps Script