---
# System prepended metadata

title: 9/7給工程 _ 建立程式分類檔案、新增自動回應(Flex MESSAGE)相關程式

---

# 9/7給工程 _ 建立程式分類檔案、新增自動回應(Flex MESSAGE)相關程式

### Introduction
- Flex MESSAGE是一個LINE訊息模板 ，能夠讓開發者透過JSON 的方式建立起漂亮的訊息樣式。
![](https://i.imgur.com/UwicHjW.png)

> 帳號參考資料

test帳號的 Channel access token
```
823IJ0YpfoYtIdDHYELC6pv9bk9WCjBFpFqmI81XAF3tBx34ZgoYKL1qjlADSGnyrzx1DS6yQXiFd2jFvoZs5fci+arQcuuGKIcYXZiy3Uc5Oi1IeJgGxLNuveHtzCeyrmjWykT0WgOIy6AIhrqY5AdB04t89/1O/w1cDnyilFU=
```
   test帳號的 Channel secret 
```
ca900a2627b393b550f18cabea446bc1
```
 
 - Line bot其他相關資料補充
 [Python ：Line bot SDK](https://ithelp.ithome.com.tw/articles/10278048)
 [LINE Messaging API SDK for Python](https://github.com/line/line-bot-sdk-python)
 [Python Chatbot開發](https://qiu-yan-ming.gitbook.io/python-chatbot/shi-yong-line-bot-sdk)
 
---
### 正式步驟
> 主要執行程式語言:python
> Flex MESSAGE程式語言:JSON


**一、建立&分類程式檔案名稱
二、製作 Flex MESSAGE 至專案資料夾
三、設定自動回覆 handle_message(自動回應)指令**


---
### 一、建立&分類程式檔案名稱
>檔案名稱、存放內容 皆可更改、討論~

| 編號 | 檔案名稱           | 功能說明             |
| ---- | ------------------ | -------------------- |
| 1    | app.py             | 進入 Line Bot 程式   |
| 2    | linebot.routes.py  | 設定 webhook url     |
| 3    | linebot.config.py  | Line Bot 連接設定    |
| 4    | richmenu.model.py  | 設定圖文選單模型     |
| 5    | message.model.py   | 設定Flex MESSAGE模型 |
| 6    | message.service.py | 處理及回傳訊息       |
| 7     |linebot.image.png   | Line Bot圖片素材  |

---

### 二、製作 Flex MESSAGE 至專案資料夾

- 新增Flex MESSAGE json檔至資料夾的語法

需新增Flex MESSAG
- [ ] 1.找工作(alt_text='找工作')、(alt_text='job01')
- [ ] 2.求職準備(alt_text='求職準備')、(alt_text='prepare01')


>此寫法就像查字典 dict 來包就好，引入的函數只需 linebot.models.FlexSendMessage 相對單純
>(下為範例模板)  [參考資料](https://ithelp.ithome.com.tw/articles/10243224)
```
from linebot.models import FlexSendMessage

flex_message = FlexSendMessage(
    alt_text='hello',
    # alt_text= 訊息顯示的名稱
    contents={
    #把JSON貼過來
        }
)
line_bot_api.reply_message(event.reply_token, flex_message)

```

---
- 需製作的Flex MESSAGE
- [ ] 1.找工作(alt_text='找工作')、(alt_text='job01')
- [ ] 2.求職準備(alt_text='求職準備')、(alt_text='prepare01')
>如果alt_text可以用中文設定就用中文，不行的話再用英文，感謝!

#### 1. Flex MESSAGE 找工作(alt_text='找工作')、(alt_text='job01')
[FLEX MESSAGE SIMULATOR 線上模板製作](https://developers.line.biz/flex-simulator/)
[Flex Message 相關資料](https://ithelp.ithome.com.tw/articles/10243334)

> 樣式參考示意圖

![](https://i.imgur.com/Kwz5esH.png)
```
{
  "type": "carousel",
  "contents": [
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "text",
            "text": "北部💼各類職缺",
            "weight": "bold",
            "size": "xxl",
            "align": "center"
          }
        ],
        "offsetTop": "xs",
        "offsetStart": "xs",
        "offsetBottom": "xs",
        "offsetEnd": "xs",
        "borderWidth": "none",
        "cornerRadius": "none"
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "md",
        "contents": [
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "無經驗可 月薪32K+",
              "uri": "http://1111.com.tw/190101/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "月薪40K+",
              "uri": "http://1111.com.tw/190102/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "年薪14個月",
              "uri": "http://1111.com.tw/190103/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "二度就業",
              "uri": "http://1111.com.tw/190104/"
            }
          },
          {
            "type": "text",
            "text": "更多地區  →",
            "weight": "bold",
            "size": "md",
            "align": "end"
          }
        ],
        "flex": 0,
        "margin": "md"
      }
    },
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "text",
            "text": "中部💼各類職缺",
            "weight": "bold",
            "size": "xxl",
            "align": "center"
          }
        ],
        "offsetTop": "xs",
        "offsetStart": "xs",
        "offsetBottom": "xs",
        "offsetEnd": "xs",
        "borderWidth": "none",
        "cornerRadius": "none"
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "md",
        "contents": [
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "無經驗可 月薪32K+",
              "uri": "http://1111.com.tw/190105/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "月薪40K+",
              "uri": "http://1111.com.tw/190106/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "年薪14個月",
              "uri": "http://1111.com.tw/190107/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "二度就業",
              "uri": "http://1111.com.tw/190108/"
            }
          },
          {
            "type": "text",
            "text": "更多地區  →",
            "weight": "bold",
            "size": "md",
            "align": "end"
          }
        ],
        "flex": 0,
        "margin": "md"
      }
    },
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "text",
            "text": "南部💼各類職缺",
            "weight": "bold",
            "size": "xxl",
            "align": "center"
          }
        ],
        "offsetTop": "xs",
        "offsetStart": "xs",
        "offsetBottom": "xs",
        "offsetEnd": "xs",
        "borderWidth": "none",
        "cornerRadius": "none"
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "md",
        "contents": [
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "無經驗可 月薪32K+",
              "uri": "http://1111.com.tw/190109/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "月薪40K+",
              "uri": "http://1111.com.tw/190110/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "年薪14個月",
              "uri": "http://1111.com.tw/190111/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "二度就業",
              "uri": "http://1111.com.tw/190112/"
            }
          },
          {
            "type": "text",
            "text": "更多地區  →",
            "weight": "bold",
            "size": "md",
            "align": "end"
          }
        ],
        "flex": 0,
        "margin": "md"
      }
    },
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "text",
            "text": "東部、離島💼各類職缺",
            "weight": "bold",
            "size": "xl",
            "align": "center",
            "offsetTop": "md"
          }
        ],
        "offsetTop": "xs",
        "offsetStart": "xs",
        "offsetBottom": "xs",
        "offsetEnd": "xs",
        "borderWidth": "none",
        "cornerRadius": "none"
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "md",
        "contents": [
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "無經驗可 月薪32K+",
              "uri": "http://1111.com.tw/190113/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "月薪40K+",
              "uri": "http://1111.com.tw/190114/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "年薪14個月",
              "uri": "http://1111.com.tw/190115/"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "二度就業",
              "uri": "http://1111.com.tw/190116/"
            }
          },
          {
            "type": "text",
            "text": ". ",
            "weight": "bold",
            "size": "md",
            "align": "end"
          }
        ],
        "flex": 0,
        "margin": "md"
      }
    }
  ]
}
```

- 第一頁:北部💼各類職缺

| 名稱              | 類型   | 網址 |
| ----------------- | ------ | ---- |
| 無經驗可 月薪32K+ | button |http://1111.com.tw/190101/|
| 月薪 40K+         | button |http://1111.com.tw/190102/      |
| 年薪14個月        | button |http://1111.com.tw/190103/      |
| 二度就業          | button |http://1111.com.tw/190104/      |
| 其他地區  →        |text |  無 |

- 第二頁:中部💼各類職缺

| 名稱              | 類型   | 網址 |
| ----------------- | ------ | ---- |
| 無經驗可 月薪32K+ | button |http://1111.com.tw/190105/      |
| 月薪 40K+         | button |http://1111.com.tw/190106/      |
| 年薪14個月        | button |http://1111.com.tw/190107/      |
| 二度就業          | button |http://1111.com.tw/190108/      |
| 其他地區  →        |text |  無 |

- 第三頁:南部💼各類職缺

| 名稱              | 類型   | 網址 |
| ----------------- | ------ | ---- |
| 無經驗可 月薪32K+ | button |http://1111.com.tw/190109/      |
| 月薪 40K+         | button |http://1111.com.tw/1901010/      |
| 年薪14個月        | button |http://1111.com.tw/190111/      |
| 二度就業          | button |http://1111.com.tw/190112/      |
| 其他地區  →        |text |  無 |

- 第四頁:東部、離島💼各類職缺

| 名稱              | 類型   | 網址 |
| ----------------- | ------ | ---- |
| 無經驗可 月薪32K+ | button |http://1111.com.tw/190113/      |
| 月薪 40K+         | button |http://1111.com.tw/190114/      |
| 年薪14個月        | button |http://1111.com.tw/190115/      |
| 二度就業          | button |http://1111.com.tw/190116/      |
| .      |text |  無 |
#### 2. Flex MESSAGE 求職準備(alt_text='求職準備')、(alt_text='prepare01')

![](https://i.imgur.com/nFRl8tk.png)
```
from linebot.models import FlexSendMessage

flex_message = FlexSendMessage(
    alt_text='求職準備',
    contents={
{
  "type": "carousel",
  "contents": [
    {
      "type": "bubble",
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "md",
        "contents": [
          {
            "type": "text",
            "text": "✉ 面試 ✉",
            "size": "xxl",
            "weight": "bold",
            "align": "center",
            "gravity": "center"
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "各職務分享",
              "uri": "hhttp://1111.com.tw/190375/"
            },
            "position": "relative",
            "margin": "sm"
          },
          {
            "type": "button",
            "style": "secondary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "各企業分享",
              "uri": "http://1111.com.tw/190376/"
            }
          },
          {
            "type": "separator"
          },
          {
            "type": "text",
            "text": "✎ 履歷 ✐",
            "size": "xxl",
            "weight": "bold",
            "align": "center",
            "gravity": "center"
          },
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "免費履歷健診",
              "uri": "http://1111.com.tw/190377/"
            },
            "margin": "md",
            "height": "sm",
            "style": "secondary"
          },
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "各職務履歷範本",
              "uri": "http://1111.com.tw/190378/"
            },
            "margin": "md",
            "height": "sm",
            "style": "secondary"
          }
        ],
        "flex": 0,
        "margin": "md"
      }
    }
  ]
}
 }
)
line_bot_api.reply_message(event.reply_token, flex_message)
```
- ✉ 面試經驗 ✉

| 名稱              | 類型   | 網址 |
| ----------------- | ------ | ---- |
| 各職務分享 | button |http://1111.com.tw/190375/  |
|各企業分享        | button |http://1111.com.tw/190376/      |

- ✎ 履歷相關 ✐

| 名稱              | 類型   | 網址 |
| ----------------- | ------ | ---- |
| 免費履歷健診 | button | http://1111.com.tw/190377/     |
| 各職務履歷範本| button | http://1111.com.tw/190378/     |

---
### 三、新增自動回應handle_message指令至message.service.py專案資料夾
[參考資料](https://ithelp.ithome.com.tw/articles/10243334)

>需先在專案資料夾最前面導入 json 套件
```
import json
```
模板>在 handle_message 中新增以下內容
>剛剛導入的 JSON檔 FlexMessage，在 python 中要傳送 Flex Message ，可以直接將 JSON 傳入到 FlexSendMessage
不過在 JSON 之前需要給一個 alt_text (是訊息顯示的預覽內容)
ex:以關鍵字profile呼叫alt_text='profile'
```
    if(message == 'profile'):
    # 這的'profile'= 呼叫訊息的關鍵字
        FlexMessage = json.load(open('card.json','r',encoding='utf-8'))
        # 輸入FlexMessage存放處以及encoding
        line_bot_api.reply_message(reply_token, FlexSendMessage('profile',FlexMessage))
        
```

須設定handle_message的FlexMessage資料

| alt_text英文版| alt_text中文版 | 呼叫關鍵字   |
| --------- | ------------| ------------|
| job01     | 找工作      |找工作、求職、依地區找工作、地區職缺、求職懶人包|
| prepare01 | 求職準備     |求職準備、面試、履歷 |



