iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
2
Modern Web

使用 Modern Web 技術來打造 Chat App系列 第 26

Day 26:Action 傳參數與模組化 - 傑出的一手

很前面的文章「Console Mode 還能怎麼玩,開發與 Debug 技巧」,有講到說我們推薦用這種 Action Function 的方式來整理程式,並回傳給 Bottender 去執行:

const random = require('random-item');

async function SendJoke(context) {
  await context.sendText(
    random([
      '加油站最怕什麼樣的員工?油腔滑調的員工',
      '有一天,西瓜、榴槤、奇異果一起出去玩,結果榴槤不見了。因為榴槤忘返',
      '海記憶體知己,天涯若比鄰',
    ])
  );
}

module.exports = async function App(context) {
  return SendJoke;
};

但只是這樣做,可能有些人已經發現了一個問題,如果我想要擴充這個 Action 或增加它的彈性,似乎沒辦法做到,因為這個 Action 就寫好在那裡,沒有提供傳參數的管道。

因此,今天要來利用傳參數的方式來看看這對模組化好會有什麼好處。

注意:今天請務必使用最新版本的 bottender,較舊的版本可能會沒有這個功能)

假想一下,當今天我想要開發一個講笑話的 Action,讓別人直接這樣使用:

const SendJoke = require('./SendJoke');

他的 SendJoke.js 應該就是這樣寫:

// SendJoke.js
const random = require('random-item');

module.exports = async function SendJoke(context) {
  await context.sendText(
    random([
      '加油站最怕什麼樣的員工?油腔滑調的員工',
      '有一天,西瓜、榴槤、奇異果一起出去玩,結果榴槤不見了。因為榴槤忘返',
      '海記憶體知己,天涯若比鄰',
    ])
  );
}

乍看之下也是可以,但某一天有人提出問題了:「我可不可以加一些自己的笑話進去?」。這樣就麻煩了,他的笑話可能不好笑,我沒有想要把它納入我的模組裡面啊...。

想了想,你可能會只想讓他的笑話出現在他的程式裡,因此我們需要傳參數的方法。

先來看看我們要怎麼改寫:

// SendJoke.js
const random = require('random-item');

module.exports = async function SendJoke(context, props) {
  const extraJokes = props.jokes || [];

  await context.sendText(
    random([
      '加油站最怕什麼樣的員工?油腔滑調的員工',
      '有一天,西瓜、榴槤、奇異果一起出去玩,結果榴槤不見了。因為榴槤忘返',
      '海記憶體知己,天涯若比鄰',
      ...extraJokes,
    ])
  );
}

這邊大家會注意到第二個參數 props,我們讓它接收了 jokes 的陣列,並把它添加到笑話裡。

接下來要看一下這樣的 Action 要如何去使用,因為想不到什麼好笑話,所以決定借用一下碼天狗的笑話

const { withProps } = require('bottender');

const SendJoke = require('./SendJoke');

module.exports = async function App(context) {
  return withProps(SendJoke, {
    jokes: [
      '軟體設計最困難的部分... 是阻擋新功能的引入',
      '工作進度上越快落後,你就會有越充足的時間趕上',
      '評估一件事情要比去理解你評估了什麼容易',
      '本系統上次更新時間:NaN/NaN/NaN',
      '我喜歡在填表單的時候加一些 � 和 ’,好讓那些工程師懷疑系統有 bug',
      '我們公司有一個 Ting 可以支援這個專案,我們公司有 Michael service 提供完整服務',
    ],
  });
};

我們利用 withProps 這個 Function 來讓 Action 附帶指定的 props。執行起來是這樣:

https://ithelp.ithome.com.tw/upload/images/20191011/20103630YYiuMBGkRr.png

props 是一個 freeze 過的物件,不可修改。接下來不久後可能會導入 React 的 PropTypes,並視情況看看是否只在開發環境 freeze props

結語

在經過今天這個主題後,大家應該有漸漸發現要怎樣去寫會比較好維護、比較好預測了,不妨在你的 Bottender App 裡面馬上試試看吧。


上一篇
Day 25:「意圖」與「實體」的應用 -「Dialogflow」
下一篇
Day 27:聊天機器人的錯誤處理
系列文
使用 Modern Web 技術來打造 Chat App30

尚未有邦友留言

立即登入留言