Make a Line Bot
===
> 111 金門高中-微課程
> [Author](https://vic.kmn.tw/about/)

> [e-mail]
> lineId: shaichun

# Get started

## 軟體需求

### Ngrok

> 傳送門 https://ngrok.com/

1. 註冊一個帳號
2. 然後登入後下載
3. $ ngrok http 8000

* 這是一個反向代理的工具

想知道更多的話 -> [使用 ngrok 讓外網連接你的 API](https://ithelp.ithome.com.tw/articles/10197345)

### VSCode

> 傳送門 https://code.visualstudio.com/download

> IDE 開發工具

### Nodejs

> 主要的開發工具(程式語言 Javascript 的 lib)

https://nodejs.org/zh-tw/download/

### Git

> 程式開發過程中的版本控制

> https://git-scm.com/download/win

# 基本常識 - 小知識

## HTTP 是什麼? HTTPS 多一個S 又是什麼

* HTTP (HyperText Transfer Protocol)
* HTTPS (HyperText Transfer Protocol Secure)
* 反正就是有加密 安全一點

想知道更多的話 -> [一文搞懂HTTPS](https://tw.alphacamp.co/blog/http-https-difference)

## Client & Server 是什麼

> 成功的男人背後都有一個 ... 脊椎

* Client 前端
* 手機、網頁、windows應用程式...之類的
* Server 後端
* 放在機房裡的東西


## RESTful Api 是什麼

* API (Application Programming Interface)
* 某種介面
* 可以想像一下USB，為何滑鼠可以用、鍵盤可以用、手機也能用?

* REST (Representational State Transfer,表現層狀態轉移, 翻譯而已不用想太多他得意思)
* 就只是一種設計風格
* 就像
* 所有人都用相同的方式說話(講中文、成語、語法)，所以我可以聽懂你說什麼

* ful...只是變成形容詞所以不用理他

* GET、POST、PATCH、DELETE...表達API要做什麼事
* get 取得資料
* post 更新資料
* patch 局部更新資料
* delete 刪除什麼東西
* 當然...你也可以全部都用post，跟你一起寫程式的人看得懂就好
* 如果要給別人用，最好是根據大眾的規則

想知道更多的話 -> [API 是什麼? RESTful API 又是什麼?](https://medium.com/itsems-frontend/api-%E6%98%AF%E4%BB%80%E9%BA%BC-restful-api-%E5%8F%88%E6%98%AF%E4%BB%80%E9%BA%BC-a001a85ab638)

題外話 -> [基礎但不簡單-變數命名規則](https://medium.com/%E7%A8%8B%E5%BC%8F%E6%84%9B%E5%A5%BD%E8%80%85/%E8%AE%8A%E6%95%B8%E5%91%BD%E5%90%8D-f53cd1115076)
當所有人都叫張三，會發生什麼事?XD

## Port

> 翻譯是通訊埠
> 但是可以把它想像成門牌號碼，同一棟大樓有100戶，port 就像 13F-1、14F-2之類的

* Port 號 範圍
* 0 ~ 65535
* 有些PORT是固定的，不要亂用
* 21 FTP
* 23 SSH、TELNET
* 80 通常是網頁
* 443 SSL
* 3306 MySQL DB
* 反正，如果要用，最好用1000以上的

想知道更多的話 -> [常用 TCP Port作用](https://yun1450.pixnet.net/blog/post/47494172)

## IP

> 地址

* 0.0.0.0 -> 255.255.255.255

2的n次方

想知道更多的話 -> [網路設定](https://www.twbsd.org/cht/book/ch05.htm)

## JSON

> 一種資料結構 長這樣


## Webhook

* 事件、訂閱、當某事件發生的時候執行


想知道更多的話 -> [第四天：認識 Webhook](https://ithelp.ithome.com.tw/articles/10193212)

## javascript

### 物件導向

> 物件導向 封裝 繼承 多形

> js的繼承 = 繼承原型練

// 腿
function Leg(){
    
}

// 移動
Leg.prototype.move = function(dist){
    ...
}

// 定義一個動物
function Animal(legs){
    this.legs = legs;
}

// 動物的方法，只要是動物就會叫
Animal.prototype.bark = function(something){
    console.log('say ' + something)
}

// 動物的方法，只要是動物就走路
Animal.prototype.walk = function(mile){
    this.legs.forEach( leg => leg.move(mile / this.legs.length))
}

// 定義一個狗 繼承 Animal...
function Dog(){
    
}

// 原型繼承
Dog.prototype = Object.create(Animal.prototype);
...

[原型基礎物件導向](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/prototype.html)

[鐵人賽：JavaScript 的原型繼承](https://www.casper.tw/javascript/2017/12/17/javascript-prototype/)

[JavaScript 物件導向 (3) - 繼承原型方法](https://ithelp.ithome.com.tw/articles/10196763)
### ＊callback function

1. 讓函式成為另一個函式的參數
2. 讓函式控制參數函式的執行時機

[什麼是Callback函式](https://medium.com/appxtech/%E4%BB%80%E9%BA%BC%E6%98%AFcallback%E5%87%BD%E5%BC%8F-callback-function-3a0a972d5f82)

// 定義
function sayHello(name){
    console.log('Hello ' + name + ' !')
}
    
// 定義
function exec(cb){
    cb('Alice')
}
    
// 執行
exec(sayHello)


//result
// Hello Alice !

### ＊lambda function

#### lambda 與一般function 差別

1. lambda 可以讓程式碼變短，但建議熟悉後再使用，不然可能會看不懂
2. lambda 裏面 沒有 'this'
3. 通常 lambda 可以取代 callback function 的寫法

> 相等

const something = param => {
    ...
    console.log(param)
}

function something(param){
    ...
    console.log(param)
}

const something = (p1, p2) => {
    ...
    console.log(p1,p2)
}

function something(p1, p2){
    ...
    console.log(p1,p2)
}

### Promise

> 程式碼一行一行執行，當遇到需要等待的時候...?

> 所以用來處理非同步

function DoSomething(params){
    const promise = (resolve, reject) => {
            fetch(`url/something`, {
                method: 'POST',
                headers:{
                    'Authorization': `Basic xxx`
                },
                body: params
            }).then(res => {
                resolve(res.json());
            }).catch(err => {
                reject(err);
            })
        };
    return new Promise(promise)
}

// 使用時
DoSomething('xxx')
    .then(res => {
        
    })
    .catch(err => {
    
    })

[JavaScript Promise 全介紹](https://www.casper.tw/development/2020/02/16/all-new-promise/)

# 真正的 Line Bot 課程 從這開始

> 應該大家都有line 吧?

* https://developers.line.biz/console
* 用自己的line 帳號登入
* [Ref: Line Bot Api](https://developers.line.biz/en/reference/messaging-api/)
* [LINE Messaging API SDK for nodejs](https://line.github.io/line-bot-sdk-nodejs/)
* [範例程式在這](https://github.com/YICHUNLIN/linebottech)
## 設定

> 關閉一些功能


> Webhook


### 兩種模式

1. 自己寫個webhook
2. 用 Line offical account app
3. 只能2選1

## 範例 -> npm i @line/bot-sdk

傳送門 -> [@line/bot-sdk](https://github.com/line/line-bot-sdk-nodejs)

## Webhook Event Objects

針對當使用者與機器人好友的事件
1. 加好友
2. 解除好友
3. 等等...

[Webhook Event Objects](https://developers.line.biz/en/reference/messaging-api/#webhook-event-objects)

## rich menu

[什麼是 rich menu?](https://engineering.linecorp.com/zh-hant/blog/rich-menu-alias-switch-action/)

## 文字解析

> 取得文字 -> 解析 -> 給予回應

git clone https://github.com/YICHUNLIN/linebottech.git