tags: ItIron2022 Javascript

前言

我們昨天已經完成了基本的事前設置，今天只要把js的邏輯補上並透過Railway完成部署就行囉！

成果預覽

這次要示範的line bot功能相當的單純，當使用者輸入指定的關鍵字後便會有對應的回覆，讓別人更了解你！

有興趣的也可以透過這個QR code去玩玩看，但請不要把我的流量玩爆謝謝 :D

事前準備

為了順利完成今天的示範，請你預先準備好以下的東西

1. 一個Line帳號
2. 一個Railway帳號(可參考昨天的文章)
3. 對express.js最最基本的了解
4. 一些你想公開的資訊(個人簡介、作品集或履歷等)

Getting started

Step1: 完成index.js檔案結構

總算到了最重要的部分，但其實這部份的邏輯會遠比你想像的簡單，我們在js檔案要做的事情只有以下幾件事情。

1. 建立一個express server
2. 在express server啟動的同時向line bot發出請求，讓對應的line bot可以監聽訊息
3. 監聽使用者輸入的訊息，並針對特定的訊息做回覆

配合line developer提供的範例，雖然是heroku的版本，但我們仍可以知道大致上的架構會是什麼樣子，請你先在index.js補上以下的內容

// 建立express伺服器
const express = require("express");
const app = express();

// 引用linebot SDK
var linebot = require("linebot");

// 用於辨識Line Channel的資訊
var bot = linebot({
  channelId: process.env.channelId,
  channelSecret: process.env.channelSecret,
  channelAccessToken: process.env.channelAccessToken,
});

const linebotParser = bot.parser();

// 當有人傳送訊息給Bot時
bot.on("message", function (event) {
  // event.message.text是使用者傳給bot的訊息
  
});

// 送出帶有line-bot需要資訊的POST請求
app.post("/", linebotParser);

// 啟動express server
app.listen(process.env.PORT || 3000, () => {
  console.log("Express server start");
});

配合程式碼的註解你可以清楚看出整個結構，一點都不複雜！ 不過有幾個點確實你可以注意

• 環境變數的使用

你在剛剛的程式碼中可以看到幾個比較奇怪的東西，也就是以下的幾個變數

process.env.channelId
process.env.channelSecret
process.env.channelAccessToken

一般來說這類第三方服務的使用，為了辨識你的專案，通常都會提供一組獨立的資訊讓第三方服務可以做驗證，但直接在程式碼中使用容易造成一些資安上的問題(當然，在前端的世界沒有什麼東西是真的藏得住的，不過多一層防護總是更好一點！)，在這種情況中我們會傾向使用環境變數將值去做隱藏，而這類的環境變數通常可以在本地或是專案部署時設置，我們這次因為沒有要在本地測試，因此我們並不需要dotenv之類的套件去做環境變數設置，之後在部署時再處理即可！

• 訊息的監聽

這部分就與一般你熟知的監聽器概念類似，只是我們這次監聽的是message事件，也就是每當有訊息進來時你該做什麼處理，其中使用者的訊息會在event.message物件中，我們可以透過event.message.text去存取實際讀到的訊息，這麼一來我們就可以根據收到的訊息做進一步的判斷囉！

Step2: 完成訊息監聽邏輯

正如我們示範的，我們這次要做的機器人非常簡單，他只會根據幾個關鍵字去做比對並回覆對應訊息，同時當遇到沒有處理到的訊息時我們希望有個預設的回覆模板，讓使用者知道哪些關鍵字可以觸發有意義的回覆！ 了解這些後你就可以在訊息監聽的部分補上以下的程式碼，這邊我就先用我自己的個人資料，請你實作時用自己的個人檔案

// 當有人傳送訊息給Bot時
bot.on("message", function (event) {
  // event.message.text是使用者傳給bot的訊息
  const introRegex = /你|誰|介紹|you|yourself|hello|你好|hi/gi;
  const resumeRegex = /resume|履歷|cv/gi;
  const blogRegex = /blog|部落格|文章/gi;
  const userText = event.message.text;
  if (introRegex.test(userText)) {
    event.reply(
      "你好！我是Danny，一個外向、口條流利、良好外語能力、學習快速的網頁前端工程師，有著兩年React & Typescript的開發經驗，熱衷新功能開發同時優化既有程式碼提高使用者與開發者體驗。由於過去商管背景，有著很好的溝通協調能力，善於與不同專業領域的夥伴合作。對於程式開發與協助他人成長有著極高的熱情，喜愛透過線上資源以及實務開發學習，鑽研各種前、後端技術持續精進自己的能力，同時透過文章與活動分享所學並提供協助，期望能將學習的成就感帶給更多人。"
    );
  } else if (resumeRegex.test(userText)) {
    event.reply(
      "以下是我目前的最新履歷以及linkedIn檔案，正在尋找中高階的前端工程師職位，歡迎隨時與我聯繫 \n\n中文履歷: https://www.cakeresume.com/s03411-6bb584\n\n英文履歷: https://www.cakeresume.com/s--vUgkMAempqZ4kcWeTtVG0Q--/s03411-e4dedd-eafe49\n\nLinkedIn頁面: https://www.linkedin.com/in/danny-wang-3b7471114/"
    );
  } else if (blogRegex.test(userText)) {
    event.reply(
      "以下是我的部落格連結，主要發布一些新手教學、專案筆記以及求職紀錄\n\n部落格連結: https://eruditeness.news.blog/"
    );
  } else {
    event.reply(
      "不知道該問什麼嗎？ 歡迎透過以下的關鍵字與我互動！\n\n介紹/履歷/部落格"
    );
  }
});

我們利用正規表達式簡單處理了幾個可能的情境，並提供了基本的回覆模板讓使用者知道該怎麼與這個機器人互動！當然你也可以用其他的寫法，我示範的處理方式僅是其中一種做法而已！

完成了以上的部分後就可以將程式碼推上遠端的repo，我們準備接下來的部署

git add .
git commit -m "finished message handling"
git push

Step3: 完成專案部署

在開始這個步驟之前，請你務必照著昨天的文章取得以下的資料，我們部署時需要用到

• channelId
• channelSecret
• channelAccessToken

請你再次到Railway的網站並開啟dahshboard新增專案，但這次import完repo後，不要點選deploy now，請點擊另一個按鈕

原因在於我們在專案中是有用到環境變數的，因此我們需要將對應的變數值在這邊輸入，否則到時候post的請求並不會成功，請輸入你從line developer中得到的值，順序不重要。

最後再透過之前提到的Generate Domain產生對應的部署網址就剩最後一步囉！

你應該會得到一串類似以下的網址，host前方的前綴你可以透過編輯去改

https://itiron2022-line-bot-demo-production.up.railway.app/

拜訪這個網址你會看到以下的畫面，這是完全正常的，畢竟我們的express server完全沒有做路由，請你直接將網址複製起來就行了！

Step4: 將部署的專案與line channel透過webhook連接

目前我們雖然部署了我們的專案，但要觸發專案中我們寫好的腳本還需要額外的一步，請你到Line developer console，點選之前創建的專案並切換到Messaging API的頁面，我們需要在這邊啟動Webhook的功能(不用想得太複雜，Webhook是一種用於建立不同服務間的連結，讓網頁/應用程式都能呼叫某些函數去改變行為的技術)，先找到編輯按鈕並點擊

之後請你將剛剛複製的網址貼上並按下verfiy確保line bot能透過該url去做請求。

最後再做一步就行了，由於我們希望由我們主導所有的對話回覆，因此需要到下方將自動回覆的功能關閉

如此一來一切就完成了，你可以透過在頁面上方提供的qrcode做測試並與朋友分享，有任何需要改動的東西只要重新推送遠端repo專案，Railway就會自動幫你跑後續的部署流程，非常的方便簡單！

總結

我們今天完成了整個line bot的設計，其中你會發現程式碼的部分非常的少，主要就是一些工具的使用。當然line bot能做到的事情遠遠不止於此，你可以根據官方文件去慢慢加入你想加入的功能，礙於篇幅與個人時間，我給的東西永遠都只是敲門磚，後續的創意完全掌握在你手裡！

轉職Q & A

Danny，我開始跑面試已經有一段時間了，投遞了很多的履歷也跑了一些面試，但一直都是無聲卡或是婉拒信，心中其實越來越懷疑自己是否有這個能力當工程師了，這種情況我該怎麼辦？

我很希望我不需要回答這樣的問題，有一部分極度天真的我希望大家求職都能順順利利，但事實上這類的問題我被問了很多次，而除了針對個人情況我去做一些額外補充之外，基本回覆的核心概念我都是保持一樣的:「面試非常講究緣分，很多時候並不是你的問題」，我之前也提過，作為求職者我們能掌握的東西真的太少了，有時剛好被問到完全沒複習過的冷門問題、有時面試官刻意刁難、能力夠但市場剛好就是沒有適合的機會，甚至職缺根本不存在(我認真的，真的有這種王八蛋公司)，對方要真想拒絕你，理由只要願意找都一定能找出來，是否合理我們根本無從得知。

作為面試者你只要把你能做好的部分做到最好，像是以下幾個我們確實可以掌握的東西

1. 用心寫好履歷與cover letter
2. 練熟自我介紹等基本問答
3. 練習常見的面試題目
4. 不斷精進自己技術能力

我知道這會有點痛苦，但盡量不要因為這樣的壓力就對第一個給你offer的公司死心踏地，offer這種東西跟OO一樣，有一個後面就會有很多個，多去做比較，盡可能去選擇最適合自己的環境，一份好的工作會讓你有很大的成長，先求有再求好的概念我不認為適用於求職。我能做到順利轉職並享受著工程師的工作，相信你也可以，加油！當然，也可以多找工程師的朋友談談，多方了解市場的情況對你來說百利無一害！

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!