AI LINE Bot練功坊-L4 Echo Bot製作
===
## 1. 選擇運行環境

### **開啟並新增檔案**
* 用Visual Studio Code開啟專案資料夾

* 開啟後新增一個附檔名為.py的python檔案


### **選擇上次建立的虛擬環境**
* 點擊右下角切換環境

* 點擊輸入環境路徑

* 繼續點擊即可從檔案系統尋找資料夾

* 尋找上次建立環境的資料夾


* 點進資料夾後尋找Scripts的資料夾並點擊python的執行檔


* 右下角可檢查環境已被更改為上次建立的虛擬環境囉

### MacOS操作 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" width=20px style="margin-bottom:8px "/>
1. 於資料中心-Finder中找到 使用者>{用戶名稱}>{環境名稱資料夾}>bin>python3.XX.X

2. 將其路徑複製下來

3. 於VSCode開啟專案資料夾

4. 點擊右下角python套件選擇環境

5. 點擊輸入解譯器路徑

6. 將複製的路徑貼上

7. 即完成環境匯入

## 2. 程式撰寫
* 點擊進入[Line Bot SDK PyPi](https://pypi.org/project/line-bot-sdk/)的官方網站

* 往下滑動後找到官方文件給出的基本用法(Synopsis中Usage的部分)全選並複製

from flask import Flask, request, abort

from linebot.v3 import (
    WebhookHandler
)
from linebot.v3.exceptions import (
    InvalidSignatureError
)
from linebot.v3.messaging import (
    Configuration,
    ApiClient,
    MessagingApi,
    ReplyMessageRequest,
    TextMessage
)
from linebot.v3.webhooks import (
    MessageEvent,
    TextMessageContent
)

app = Flask(__name__)

configuration = Configuration(access_token='YOUR_CHANNEL_ACCESS_TOKEN')
handler = WebhookHandler('YOUR_CHANNEL_SECRET')


@app.route("/callback", methods=['POST'])
def callback():
    # get X-Line-Signature header value
    signature = request.headers['X-Line-Signature']

    # get request body as text
    body = request.get_data(as_text=True)
    app.logger.info("Request body: " + body)

    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        app.logger.info("Invalid signature. Please check your channel access token/channel secret.")
        abort(400)

    return 'OK'


@handler.add(MessageEvent, message=TextMessageContent)
def handle_message(event):
    with ApiClient(configuration) as api_client:
        line_bot_api = MessagingApi(api_client)
        line_bot_api.reply_message_with_http_info(
            ReplyMessageRequest(
                reply_token=event.reply_token,
                messages=[TextMessage(text=event.message.text)]
            )
        )

if __name__ == "__main__":
    app.run()

* 貼上在剛剛建立好的python檔案中

* 找到第23、24行，設定自己的Secret和Channel Access Token

### **在程式中設定自己的Secret**
* 找到Line Dvelopers後台中Basic settings的頁籤

* 往下滑找到自己的Channel secret並複製

* 貼上到程式中取代原本的'YOUR_CHANNEL_SCRECT'

### **在程式中設定自己的Channel Access Token**
* 找到Line Dvelopers後台中Messaging API的頁籤

* 往下滑找到自己的Channel Access Token並複製

* 貼上到程式中取代原本的'YOUR_CHANNEL_ACCESS_TOKEN'

## 3. 啟動Web應用程式
### **利用Visual Studio Code的偵錯模式來啟動Flask的Web應用程式**
* 點擊左方執行與偵錯(Run and Debug)

* 建立一個執行的json檔案

* 選擇Python Debugger

* 選擇Flask

* 執行Python Debugger

* 啟動完成後可看到執行在本地端的伺服器5000port(若沒設定參數預設都為5000)

* 如果是Mac版本，5000port可能已被占用，此時可手動設定port參數(這裡設置為5001)

* 執行後可檢查port已變為自己設定的埠號(5001)

## 4. 設定Webhook
* 啟動ngrok的執行檔

* 輸入指令ngrok http 5000(自己設定的埠號)建立連線

* 複製其中Forwarding的網址

* 按下Webhook URL的Edit

* 貼上剛剛複製的網址，先不要按下Update

* 回到程式中，複製27行route中的/callback

* 貼上在剛剛的網址後

* 按下Update

* 啟用Use webhook

* 可以按下Verify驗證是否有連接成功

* 跳出以下視窗後代表成功與本地端連線了！

## 5. Echo Bot測試
* 打開Line找到自己的機器人就可以測試是否成功啦！

>Reference：https://developers.line.biz/en/docs/messaging-api/building-bot/

Youtube 課程影片
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/4eiOBj075CM?si=jCXyRkGni6eW9KFy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

{%hackmd @ntuebigdata/about %}

## 相關教材連結

<div style="display: flex; justify-content:space-between;">
<div>
<a class="btn btn-warning" href="https://hackmd.io/@ntuebigdata/setup-linebot-development-environment" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">◀◀◀ L03 開發環境建置 ◀◀◀</a>
</div>
<div>
<a class="btn btn-info" href="https://hackmd.io/@ntuebigdata/webhook-event-type" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">▶▶▶ L05 Webhook Event Type ▶▶▶</a>
</div>
</div>