---
title: Flex 開發人員工具：一個輔助開發 LINE chatbot 的開源工具
description: '這是講者為了輔助開發 LINE chatbot 而製作的小工具，它主打的功能是在收到 Messaging API 的 Event 時會直接回傳 JSON，如果傳送 Message JSON 或是 Flex Message Simulator 複製的 JSON 給它，你還能直接看到這個 JSON 的呈現結果！在這個議程內將會詳細介紹這個小工具的使用方法。原始碼以 MIT License 釋出: https://github.com/taichunmin/gcf-line-devbot'
image: https://i.imgur.com/ALfHsUN.png
tags: 簡報
type: slide
langs: zh
---

## Flex 開發人員工具
#### 輔助開發 <span style="color: lime">LINE chatbot</span> 的開源工具

###### [`hackmd.io/@taichunmin/COSCUP2022`](https://hackmd.io/@taichunmin/COSCUP2022)
###### <span style="color: gray">戴均民 @ COSCUP 2022</span>

---

## I am 戴均民

<table class="about-me">
<tr>
<td><img src="https://www.gravatar.com/avatar/8d9b432d861e4ac0e40954a800ae90a1?s=2048" class="avatar"></td>
<td>
<ul>
<li>現職 <span style="color: #e2231a">微程式資訊</span></li>
<li>LINE API 專家</li>
<li><a href="https://taichunmin.idv.tw/liff-businesscard/" target="_blank">LINE 數位版名片</a></li>
<li><a href="https://lihi1.com/l5Dld/coscup-2020" target="_blank"><i class="fa fa-fw fa-rss-square"></i>筆記國度 (部落格)</a></li>
<li><a href="https://github.com/taichunmin/" target="_blank"><i class="fa fa-fw fa-github"></i>taichunmin</a></li>
</ul>
</td>
</tr>
</table>
<style>
img.avatar {
border-radius: 50%;
width: 300px;
}
</style>

---

#### Flex 開發人員工具


###### [`line.me/R/ti/p/@736cebrk`](https://line.me/R/ti/p/@736cebrk)

---

## 這是受[卡米哥](https://medium.com/@EtrexKuo)啟發
## 而寫出來的工具

---

# 功能介紹

---

#### #1 直接把收到的 Event 以 <span style="color: lime">JSON</span> 回傳


---

## 一對一聊天 DEMO

* follow
* location
* [`01-postback.json`](https://gist.github.com/taichunmin/e1da04f9f8fd8a2529c05f1a2581c17b#file-01-postback-json)
* stickers
* videoPlayComplete<br>[`02-countdown.json`](https://gist.github.com/taichunmin/e1da04f9f8fd8a2529c05f1a2581c17b#file-02-countdown-json)

---

#### #1 你還可以在<span style="color: lime">群組</span>中使用這個工具
###### 快速測試跨平台的相容性 (<span style="color: lime">Android</span> & <span style="color: lime">iPhone</span> & <span style="color: lime">PC</span>)


---

#### 快速開箱測試 <span style="color: lime">LINE 新發佈的功能</span>

* [測試 mentions 標記好友功能](https://taichunmin.idv.tw/blog/2021-01-20-line-devbot-mention.html)
* [Quick Reply 支援 URI Action](https://taichunmin.idv.tw/blog/2021-03-11-line-quickreply-uri.html)
* [Flex 訊息第三版更新](https://taichunmin.idv.tw/blog/2022-03-11-line-flex-message-v3.html)

---

## 群組聊天 DEMO

* join
* member join/leave
* mentions

---

#### #2 回傳收到的 <span style="color: lime">Message Object</span>


---

#### #2 <span style="color: lime">跨平台</span>查看呈現結果 [`03-text.json`](https://gist.github.com/taichunmin/e1da04f9f8fd8a2529c05f1a2581c17b#file-03-text-json)
###### 在電腦上送出後 馬上在手機上查看


---

#### [`04-images.json`](https://gist.github.com/taichunmin/e1da04f9f8fd8a2529c05f1a2581c17b#file-04-images-json)
###### 不同平台的顯示上會有些微差異！


---

#### [`05-datetimepicker.json`](https://gist.github.com/taichunmin/e1da04f9f8fd8a2529c05f1a2581c17b#file-05-datetimepicker-json)


---

## [`06-quickreply.json`](https://gist.github.com/taichunmin/e1da04f9f8fd8a2529c05f1a2581c17b#file-06-quickreply-json)


---

#### #3 回傳來自 [Flex 訊息模擬器](https://developers.line.biz/flex-simulator/)的 [`07-flex.json`](https://gist.github.com/taichunmin/e1da04f9f8fd8a2529c05f1a2581c17b#file-07-flex-json)
###### (如果 JSON 過長可以先 minify)


---

#### #3 <span style="color: lime">分享訊息</span>給好友或群組 DEMO
###### 快速測試 liff.shareTargetPicker() 能不能分享訊息


---

#### #4 [圖文選單遊樂場](https://taichunmin.idv.tw/blog/2022-02-10-richmenu-playground.html)
###### 帶你超快速認識圖文選單的功能！


---

#### [模仿自圖文選單遊樂場 (日文版)](https://developers.line.biz/en/news/2022/02/02/rich-menu-playground/)
###### 這是 LINE 官方提供的，可惜只提供日文。


---

#### 圖文選單遊樂場 DEMO


---

#### #5 快速測試部份 Messaging API
###### [指令清單請點此](https://github.com/taichunmin/gcf-line-devbot/tree/master/line/handler/cmd) (某些指令還可以搭配 mentions)


---

#### #6 [查詢並快速測試傳送貼圖](https://taichunmin.idv.tw/blog/2021-04-16-linebot-test-sticker.html)
###### `/replySticker 8525 16581292` `/notifySticker 8525 16581292`


---

#### #7 選單<span style="color: lime">切換速度</span> DEMO
###### `linkRichMenuToUser` <span style="color: lime">V.S.</span> `richmenuswitch`


---

#### #8 測試 <span style="color: lime">LINE Simple Beacon</span>！

###### (感謝 `@dabo_huang` 提供照片)


---

#### #8 測試 <span style="color: lime">LINE Simple Beacon</span>！

* 建立個人的 Messaging API 頻道
* [按照教學設定 Webhook](https://taichunmin.idv.tw/blog/2020-07-13-line-simple-beacon-workshop.html)
* 發行個人的 LINE Simple Beacon HWID
* 用 ESP32 燒錄 LINE Simple Beacon

---

#### #8 [用 ESP32 自製八合一 LINE Beacon](https://taichunmin.idv.tw/blog/2021-03-06-line-octobeacon.html)
###### 進入工程模式透過 BLE 更換 HWID 等參數


---

#### GitHub 原始碼 & QA 時間
###### 喜歡的話麻煩<span style="color: lime">幫我按個 Star</span>
###### 沒有問題也可以<span style="color: lime">祝我生日快樂</span> 😝


<style>code {
font-size: 87.5%;
color: #e83e8c;
word-wrap: break-word;
background-color: white;
border-radius: .35rem;
}</style>