## 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>
{"metaMigratedAt":"2023-06-17T04:54:48.740Z","metaMigratedFrom":"YAML","title":"Flex 開發人員工具：一個輔助開發 LINE chatbot 的開源工具","breaks":true,"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","contributors":"[{\"id\":\"0d9a5e06-1f92-4142-b9df-fed4c8873573\",\"add\":8417,\"del\":2595}]"}