## Flex 開發人員工具
## 支援最新的 mention 功能
<small>https://hackmd.io/@taichunmin/chatbot-tw-202102</small>
---
## Who am I?
<table class="about-me">
<tr>
<td><img src="https://www.gravatar.com/avatar/8d9b432d861e4ac0e40954a800ae90a1?s=2048" class="avatar"></td>
<td>
<ul>
<li>戴均民</li>
<li>現職 <span style="color: #e2231a">微程式資訊</span></li>
<li>LINE API Expert</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>
---
<table>
<tr>
<td>
<img src="https://i.imgur.com/cP5purz.png"><br><a href="https://line.me/R/ti/p/%40736cebrk" style="font-size: 1.5rem">加入好友: https://line.me/R/ti/p/@736cebrk</a>
</td>
<td>
<h2>主要功能</h2>
<ol>
<li>印出 Event</li>
<li>預覽 Flex 訊息</li>
<li>呼叫 API</li>
</ol>
</td>
</tr>
</table>
---
# 印出 Event
在開發 Webhook 的時候可以很簡單看到 Event 中有什麼欄位可以使用！
---
#### Follow
|  |  |
| :-----: | :-: |
| Android | iOS |
---
#### Sticker
|  |  |
| :-----: | :-: |
| Android | iOS |
---
#### Location
|  |  |
| :-----: | :-: |
| Android | iOS |
---
# 預覽 Flex 訊息
貼上 <span style="color: gold">Message Object</span> 就直接 reply
```json
{
"type": "text",
"text": "Hello world"
}
```
---
## 在 PC 貼上 JSON
---
#### 直接在手機上看畫面
|  |  |
| :-----: | :-: |
| Android | iOS |
---
## 一次 5 個訊息
```json
[
{
"originalContentUrl": "https://i.imgur.com/9CtzqdW.png",
"previewImageUrl": "https://i.imgur.com/9CtzqdW.png",
"type": "image"
},
{
"originalContentUrl": "https://i.imgur.com/OoTN0ki.png",
"previewImageUrl": "https://i.imgur.com/OoTN0ki.png",
"type": "image"
},
{
"originalContentUrl": "https://i.imgur.com/mPZRvfa.png",
"previewImageUrl": "https://i.imgur.com/mPZRvfa.png",
"type": "image"
},
{
"originalContentUrl": "https://i.imgur.com/WI8KXOb.png",
"previewImageUrl": "https://i.imgur.com/WI8KXOb.png",
"type": "image"
},
{
"originalContentUrl": "https://i.imgur.com/ay5To6z.png",
"previewImageUrl": "https://i.imgur.com/ay5To6z.png",
"type": "image"
}
]
```
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
# [Flex Message Simulator](https://developers.line.biz/flex-simulator/)
## JSON 直接複製貼上也能用
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
## 測試跨平台的畫面呈現
Android 和 iOS 呈現的結果會有點不同，可以用來快速測試兩個平台顯示上的差異。
---
1. 準備 Android + iOS
2. 準備 2 個 LINE 帳號
3. 建立一個群組
4. 把 2 個帳號和開發工具加進群組
---
|  |  |
| :-----: | :-: |
| | |
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
#### 在 PC 貼上 JSON 一次看跨平台
|  |  |
| :-----: | :-: |
| Android | iOS |
---
## 測試 mention
---
|  |  |
| :-----: | :-: |
| 單人 | 多人 |
---
# 呼叫 API
可以透過機器人幫你呼叫大部分的 Messaging API
還支援最新的 mention 功能
---
| 沒用 mention 時預設顯示自己的資料 | 有 mention 時可以顯示別人的資料 |
| -------- | -------- |
|  |  |
---
# 支援的指令清單
請查看[「Flex 開發人員工具」的原始碼](https://github.com/taichunmin/gcf-line-devbot/tree/master/line/handler/cmd)
---
# 支援多人 mention
可以很方便看到多個帳號的資料
---
<table>
<tr style="font-size: 14px">
<th><code>/getProfile</code></th>
<th><code>/getGroupMemberProfile</code></th>
</tr>
<tr>
<td width="48%"><img src="https://i.imgur.com/6CUimdt.png"></td>
<td width="52%"><img src="https://i.imgur.com/xmgAHWu.png"></td>
</tr>
</table>
---
# 相關連結
* [新聞: LINE 2021/01/20 發佈的新聞](https://developers.line.biz/zh-hant/news/2021/01/20/messaging-api-update-january-2021/) by LINE
* [原始碼: Flex 開發人員工具](https://github.com/taichunmin/gcf-line-devbot)
* [文章: 輔助開發 LINE Flex 訊息的工具](https://taichunmin.idv.tw/blog/2020-04-06-line-devbot.html)
* [文章: LINE Simple Beacon for ESP32 工作坊](https://taichunmin.idv.tw/blog/2020-07-13-line-simple-beacon-workshop.html)
* [投影片: 如何在 LIFF 傳送隱藏資料給機器人](https://hackmd.io/@taichunmin/chatbot-tw-202005#/26)
* [文章: 如何在 LIFF 傳送隱藏資料給機器人](https://taichunmin.idv.tw/blog/2020-04-07-line-liff-send-hidden-data.html)
---
# Q & A
{"metaMigratedAt":"2023-06-15T19:24:30.213Z","metaMigratedFrom":"YAML","title":"Flex 開發人員工具支援最新的 mention 功能","breaks":true,"contributors":"[{\"id\":\"0d9a5e06-1f92-4142-b9df-fed4c8873573\",\"add\":5499,\"del\":259}]"}