AI LINE Bot練功坊-L3 開發環境建置
===

## Python 安裝
### Windows安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/windows8/windows8-original.svg" width=15px style="margin-bottom:5px"/>

1. 至[官網](https://www.python.org/downloads/)下載適當的版本安裝(以python3.12.2為範例)

2. 執行安裝檔(.exe)

3. 勾選「Add python.exe to PATH」，並選擇「Install Now」進行安裝

4. 出現以下畫面即為安裝完成

5. 將Python加入環境變數(若步驟3有勾選Add python.exe to PATH 則忽略此步驟)
(1) 進入控制台後點選系統及安全性

(2) 點選系統

(3) 點選系統進階設定

(4) 點選環境變數

(5) 點選Path後點擊下方編輯

(6) 點選新增

(7) 將Python的兩個路徑新增進去(要用你自己的路徑)
:::info
C:\Users\USER\AppData\Local\Programs\Python\Python312\ C:\Users\USER\AppData\Local\Programs\Python\Python312\Scripts\
:::

6. 查看Python版本
在命令提示字元中輸入以下指令

    python --version

出現以下畫面即為安裝成功

### MacOS安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" width=20px style="margin-bottom:8px "/>

1. 至[官網](https://www.python.org/downloads/)下載適當的版本安裝(以python3.12.2為範例)

2. 執行安裝檔(.pkg)

3. 依序安裝流程點選安裝

4. 出現以下畫面即為安裝完成!

## VScode 安裝
### Windows安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/windows8/windows8-original.svg" width=15px style="margin-bottom:5px"/>

1. 至[官網](https://code.visualstudio.com/)下載安裝檔

2. 執行安裝檔(.exe)

3. 同意使用者條款

4. 除了"針對支援的檔案類型將Code註冊為編輯器"不要勾，其他都勾起

5. 安裝完成會自動打開VScode

### MacOS安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" width=20px style="margin-bottom:8px "/>

1. 至[官網](https://code.visualstudio.com/)下載安裝檔

2. 將下載好的zip檔解壓縮

3. 完成解壓縮後將執行檔拉進應用程式資料夾中

### Python Extension
1. 點選Extensions頁籤

2. 搜尋Python套件並安裝

## Ngrok 安裝
### Windows安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/windows8/windows8-original.svg" width=15px style="margin-bottom:5px"/>

1. 至[ngrok官網](https://ngrok.com/)註冊帳號

2. 登入後找到下載的頁籤

3. 複製設置token指令

4. 解壓縮下載的檔案

5. 執行ngrok.exe，並貼上剛剛複製的指令

:::warning
:warning: 紅框的路徑位置必須和剛剛解壓縮後的路徑是一樣的
:::

6. 成功設定token會出現紅框內容

7. 建立臨時伺服器

    ngrok http <port>


按下Enter

臨時伺服器建立成功

### MacOS安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" width=20px style="margin-bottom:8px "/>
1. 至[ngrok官網](https://ngrok.com/)註冊帳號

2. 登入後找到下載的頁籤

3. 複製設置token指令

4. 解壓縮下載的檔案

5. 點選前往資料夾

6. 進入/usr/local/bin 路徑資料夾中

7. 將解壓縮好的ngrok應用程式拉進該路徑資料夾中

8. 雙擊執行ngrok，直到出現［程序完成］

9. 開啟終端機，將複製的指令打上執行

10. 成功設定token會出現紅框內容

11. 建立臨時伺服器

    ngrok http <port>


按下Enter

臨時伺服器建立成功

## 建立Python虛擬環境
### Windows安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/windows8/windows8-original.svg" width=15px style="margin-bottom:5px"/>

1. 建立一個空的資料夾存放虛擬環境

2. 打開資料夾並在上方輸入`cmd`並按下Enter

這樣可以打開命令提示字元

3. 建立python虛擬環境

    python -m venv {環境名稱}


執行成功後會有一個linebot的資料夾在venv中

4. 需要啟動`activate.bat`才可以啟動虛擬環境

切換路徑指令

    cd linebot/Scripts

啟動activate.bat指令

    activate.bat

這樣就成功啟動虛擬環境了

:::warning
:bulb: 若使用powershell的指令則為

    activate.ps1

:::

### MacOS安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" width=20px style="margin-bottom:8px "/>

1. 建立一個空的資料夾存放虛擬環境

2. 點擊左上角 **終端機 Terminal** 選項，並點選 **新增終端**

3. 輸入指令，建立python虛擬環境

    python3 -m venv {環境名稱}


4. 建立完成後輸入以下指令，切換路徑至該環境資料夾中

    cd {環境名稱}


5. 啟動bin資料夾下的activate指令

    source bin/activate


這樣就成功啟動虛擬環境了

## 安裝python套件
### Windows安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/windows8/windows8-original.svg" width=15px style="margin-bottom:5px"/>
1. 建立專案的資料夾

2. 在資料夾中新增`requirements.txt`

3. 在`requirements.txt`中輸入

    line-bot-sdk==3.7.0
    flask==3.0.0


輸入後存檔

4. 複製 `requirements.txt` 路徑


5. 安裝套件

    pip install -r <requirements.txt所屬路徑>


6. 安裝完成

### MacOS安裝 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" width=20px style="margin-bottom:8px "/>
1. 建立專案資料夾

2. 開啟軟體-文字編輯器 (系統原有)

3. 點擊**新增文件**

4. 點擊上方**格式>製作純文字格式**選項

5. 將相關所需套件輸入至文件中

    line-bot-sdk==3.7.0
    flask==3.0.0


6. 輸入完成後，將檔案以`requirements.txt`存入專案資料夾中

7. 進到專案資料夾中，將`requirements.txt`檔案路徑複製起來

8. 回到VSCode中，並在終端機中輸入以下指令

    pip install -r <requirements.txt所屬路徑>


9. 安裝成功

### 查看環境套件指令

pip list


### 離開虛擬環境指令

deactivate


Youtube 課程影片
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/UoOv36rwmKQ?si=N7KatcRfrzu0Vjf4" 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/create-a-line-official-account" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">◀◀◀ L02 建立LINE Bot 官方帳號註冊 ◀◀◀</a>
</div>
<div>
<a class="btn btn-info" href="https://hackmd.io/@ntuebigdata/create-an-echo-bot" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">▶▶▶ L04 開發環境建置 ▶▶▶</a>
</div>
</div>