iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 12

以演算法實踐商業邏輯——全端實作體驗 V

幹話產生器

本篇筆記將以我蠻喜歡的一個有趣作業「幹話產生器」為例,來剖析「產品功能」到「程式邏輯」之間的思考脈絡。

將解決以下問題:

  • 運算思維的步驟有哪些?如何應用?
  • 如何以演算法來呈現商業邏輯?

P.S. 幹話句型出自星爺電影《少林足球》:「身為一位汽車維修員,隨身攜帶扳手,也是很合乎邏輯吧!」

星爺電影《少林足球》經典片段

應用運算思維

Computational Thinking

Computational Thinking from Simply Primary

運算思維的核心慨念是,將複雜的問題簡化,並以數學公式或有限的邏輯步驟來呈現解決方案。

拆解問題(decomposition)

產品功能 (user story)

  • 使用者可以在工程師、設計師、或創業家中選擇一個對象(三選一)
  • 使用者按下【產生幹話】後,旁邊的 textbox 就會出現一句幹話

拆解反思

有了產品功能後,問題就簡化了不少。只要聚焦對象 target 、對應的工作任務task,以及關鍵幹話 phrase 分別處理即可。

辨識模式(pattern recognition)

分別處理拆解後三個部分,可以產生一個遞進的關聯模式:

  1. 辨識選擇的對象
  2. 選取該對象的工作任務
  3. 隨機產生關鍵幹話
  4. 組裝並輸出

抽象化(abstraction)

經過整理後能產出以下規格:

幹話規格

身為 targettaskphrase 吧!(如:身為工程師,加個功能,就跟呼吸一樣吧!)

設計演算法(algorithm)

演算法包含:輸入 input、輸出 output、處理 process,關鍵要能確認輸入來源、定義輸出結果,接著就是研究過程如何發展。

INPUT

定義一個變數,接收選擇對象。

OUTPUT

輸出上個階段歸納出來的規格。

PROCESS

  1. 分別定義targetstasksphrases 三組內容。
  2. 辨識 target、對應 tasks 、隨機產生 phrase
  3. 組裝並回傳完整句子:身為 targettaskphrase 吧!

實現商業邏輯

最後就是按思考流程,除不把程式碼敲出來就搞定了!

// return a random item in an arry
function sample(array) {
  const index = Math.floor(Math.random() * array.length)
  return array[index]
}

function generateNonsense(option) {
  // define tasks for different roles and nonsense phrases
  const targets = {
    developer: '工程師',
    designer: '設計師',
    founder: '創業家',
  }
  const tasks = {
    developer: ['加個按鈕', '加新功能', '切個版', '改一點 code', '生個演算法', '修個 Bug'],
    designer: ['畫一張圖', '改個 logo', '順便幫忙設計一下', '隨便換個設計', '弄張 Banner'],
    founder: ['週末加班', '能賺錢', '想個 business model', '找 VC 募錢', '病毒行銷', '找個大客戶', '自己掏點錢', 'Pitch 一下', '搞個群募']
  }
  const phrases = ['很簡單', '很容易', '很快', '很正常', '很愜意', '很輕鬆', '小事一件', '就像呼吸一樣', '就像喝杯水', '難不倒你']

  // return error message
  if (!option) {
    return `身為幹話王,記得選對象,很容易吧!`
  }

  // start generating task and phrase of nonsense for selected role
  const target = targets[option]
  const task = sample(tasks[option])
  const phrase = sample(phrases)

  // return the generated nonsense
  return `身為${target},${task},${phrase}吧!`
}
module.exports = generateNonsense

from my GitHub

 


閱讀更多

Infinite Gamer
關於本系列更多內容及導讀,請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南


上一篇
活用 URL 及表單資料打造多種功能——全端實作體驗 IV
下一篇
資料庫學習的入門指南——全端產品工具箱 V
系列文
用 JavaScript 打造全端產品的入門學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言