# line 機器人 第一堂
###### tags: `LineBot`


1. **終端機指令輸入 =="npm init --yes"==**
`初始化產生"package.json"`

2. **package.json 加入 "type":"midule"**
`使用 ECMAScript 語法 import / export`
:::warning

:::

3. **安裝<a href="https://www.npmjs.com/package/linebot"> linebot</a>套件 指令：=="npm i linebot"==**
linebot套件
`產生"package-lock.json"紀錄linebot相依的套件 `
`產生 node_modules 資料夾 (套件包)`
:::warning
:::

4. **建立檔案".gitignore"**
用來上傳git時，忽略不需要上傳的檔案
:::warning

:::

5. **建立檔案".env"**
用來放置需要加密的資料ex:linebotID、金鑰等等。

6. **安裝<a href="https://www.npmjs.com/package/dotenv">dotenv</a> 指令:=="npm i dotenv"==**
用來讀取.env檔案的套件
可以安裝<a href="https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv">dotENV_VScods套件</a> 讓.env有顏色
*如果有安裝成功，package.json會顯示已安裝套件及版本*

7. **安裝<a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">ESLint-VScode套件</a>**
用於安裝eslint

8. **安裝enlint 指令:=="npm i -D eslint"==***
<a href="https://hackmd.io/@ChiaJung/rku_5Dzvq">安裝指南</a>
:::info
- 安裝 VSCode 套件 ESLint 並新增下面的設定，驗證程式碼並保持風格一致
(在VScode的settings.json)

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

- 安裝 **<a href="https://www.npmjs.com/package/nodemon">nodemon</a>**
指令 : npm i -D nodemon
只需要在 package.json 將啟動的 node 改成 nodemon 就好
==如果更改.env還是必須手動重開==

"scripts": {
  "dev": "nodemon index.js",
},

終端機指令 : npm run dev
(要中斷ctrl+c)
:::

9. **建立 "index.js"**

import 'dotenv/config' //引用dotenv套件 (config.js檔) 詳情看文件
import linebot from 'linebot' //引用linebot套件

const bot = linebot({
    //放在.env檔案裡的資料，用 process.env.(key值) 引用
  channelId: process.env.CHANNEL_ID,
  channelSecret: process.env.CHANNEL_SECRET,
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
})

bot.listen('/',process.env.PORT || 3000, () => {
console.log('機器人啟動')
})

// 機器人.監聽('根目錄',port號,()=>{顯示是否有成功啟動})
// process.env.PORT (server的port)
// 連進來的 http://localhost:3000/

:::success

> #### <a href="https://zh.m.wikipedia.org/zh-tw/%E9%80%9A%E8%A8%8A%E5%9F%A0" title="維基資料">通訊埠（英語：port）</a>
> 又稱為連接埠、埠、協定埠（protocol port）在電腦網路中是一種經由軟體建立的服務，在一個電腦作業系統中扮演通訊的端點（endpoint）。每個通訊埠都會與主機的IP位址及通訊協定關聯。通訊埠以16位元數字來表示，這被稱為通訊埠編號（port number）。
:::

10. **開啟 ngrok**
<a href="https://hackmd.io/@ChiaJung/BJPhBUGv9">ngrok 開啟指南</a>

11. **設置 Webhook URL**
開啟後將ngrok位址，
複製貼上至 <a href="https://developers.line.biz/en/">line Developers </a> 機器人內 API 的 Webhook URL 。
點選 Verify 審核測試 ，出現*成功*。

::: danger
(注意! 機器人開啟ngrok後需要重啟)
:::

:::warning

:::

12. 設定回覆
開啟 "LINE Official Account Manager"
:::warning

:::

13. 測試

注意 : 每一次修改要測試都必須重啟機器人。

import 'dotenv/config'
import linebot from 'linebot'

const bot = linebot({
  channelId: process.env.CHANNEL_ID,
  channelSecret: process.env.CHANNEL_SECRET,
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
})

bot.on('message', (event) => { //監測機器人收到訊息，執行
  console.log(event) 
  if (event.message.type === 'text') { //當訊息 是文字
    event.reply(event.message.text) // 回覆 傳來的文字
  }
})

bot.listen('/', process.env.PORT || 3000, () => {
  console.log('機器人啟動')
})

bot.on('message', (event) => {
  console.log(event)
  
  switch (event.message.text) { //文字訊息
    case '1': //文字訊息 = "1" 的時候
      event.reply('尼好') //回覆 "尼好"
      break //停止執行
    case '2': //文字訊息 = "2" 的時候
      event.reply('晚安') // 回覆"晚安"
      break // 停止執行
      }
    })
  }

14. **<a href="https://developers.line.biz/en/docs/">LINEBOT 文件</a>**
<a href="https://developers.line.biz/en/docs/messaging-api/message-types/">Message types</a>

15. **指令 :"npm i axios" 串接API用的套件**
引入套件

 import axios from 'axios'

16.