iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 28
1
Software Development

LINE bot 好好玩 30 天玩轉 LINE API系列 第 28

[30 天教你如何玩弄 Line bot API] 第 28 天:賴滴卡製作 - 第三集 - 看回應訊息

本文同步刊載於 Clarence 部落格:[LINE bot 好好玩 30 天玩轉 LINE API] 第 28 天:賴滴卡製作 - 第三集 - 看回應訊息

前言

來想想今天要討論什麼好呢?
其實在昨天有使用者用了機器人之後反應怎麼都沒反應,結果發現是有一個地方處理好,今天會在這篇跟大家分享一下 ~
然後昨天的回應部分是給一個連結讓大家直接去網頁看回覆,今天就來把文章回應做起來吧!!

Line Flex 造成 400

首先先分享一下沒處理好資料的原因,有時候 API 回傳的訊息可能會是空值,這時候如果沒有處理直接喂進去就會 400 的錯誤,舉例來說:

{
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": forumName,
        "size": "xs",
        "color": "#ffffff",
        "align": "center",
        "gravity": "center"
      }
    ],
    "backgroundColor": "#EC3D44",
    "paddingAll": "2px",
    "paddingStart": "4px",
    "paddingEnd": "4px",
    "flex": 0,
    "position": "absolute",
    "offsetStart": "18px",
    "offsetTop": "18px",
    "cornerRadius": "100px",
    "width": "48px",
    "height": "25px"
}

上面的 forumName 如果是空值喂進去就會造成 400,因為 JSON 出去的時候就會是空值,所以我們需要對他做一點處理,改成如下:

{
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": forumName ? forumName : '',
        "size": "xs",
        "color": "#ffffff",
        "align": "center",
        "gravity": "center"
      }
    ],
    "backgroundColor": "#EC3D44",
    "paddingAll": "2px",
    "paddingStart": "4px",
    "paddingEnd": "4px",
    "flex": 0,
    "position": "absolute",
    "offsetStart": "18px",
    "offsetTop": "18px",
    "cornerRadius": "100px",
    "width": "48px",
    "height": "25px"
}

這樣就可以解決會 400 的問題了!

研究 Dcard API

回應 API 討論

要做回應之前我們依樣需要 API,所以今天依樣來找一下 API,打開一篇文章,然後開始滾動回應頁面找找有沒有 API 的足跡!

https://ithelp.ithome.com.tw/upload/images/20191013/20117701b5m4WtT1LD.png

太棒了!看起來我們又找到 API 拉!
API 的 URL 是

https://www.dcard.tw/_api/posts/232275726/comments?after=50

看起來這個 API 需要文章的 id 與在哪一篇之前的參數
來比對一下昨天的 API 好了

https://www.dcard.tw/_api/posts?popular=false&limit=30&before=232275378

感覺 limit 的參數好像可以用來試試看好了!
組合一下

https://www.dcard.tw/_api/posts/232275726/comments?after=50&limit=1

https://ithelp.ithome.com.tw/upload/images/20191013/20117701hFQqBjupWb.png

太棒了!看起來可以噎!

Dcard 回應 UI 製作

那我們來設計一下 UI 的部分好了!

https://ithelp.ithome.com.tw/upload/images/20191013/20117701lcA6EIIN3T.png

就這樣好了 XD 讓我偷懶一下!

這邊的想法是如果男生用一個男孩的頭代替,女生就用一個女孩的頭代替,那這樣要怎麼完成這個呢?

其實就做一個樣板字串(template strings)就好了!

先上結果!

${dcard.gender === 'M' ? '?' : '?'} ${dcard.school ? dcard.school : ''} ${dcard.department ? dcard.department : ''}`

這邊忘記有沒有講過了,不過還是可以分析一下,這邊主要希望的是可以得到

? XXXX大學 XXXX系

首先我們有的資料是
dcard.gender 會是 M 或是 F
dcard.school 會是學校名稱ㄑ
dcard.department 會是科系名稱

所以說把上面的程式拆開來看

${dcard.gender === 'M' ? '?' : '?'}

這樣就可以做到如果 dcard.gender 是 M 就 return ? 反之就是 ?
另外兩個上面就解釋過拉!

所以整合以上就可以把它做出來拉 ~


工商時間

團隊系列文

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難!新手用JavaScript入門做自己的玩具~
Hina Hina - 陣列大亂鬥
阿斬 - Python 程式交易 30 天新手入門
塔塔默 - 用Python開發的網頁不能放到Github上?Lektor說可以!!
Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。


上一篇
[30 天教你如何玩弄 Line bot API] 第 27 天:賴滴卡製作 - 第二集
下一篇
[30 天教你如何玩弄 Line bot API] 第 29 天:有了它!我就知道你經過這裡!
系列文
LINE bot 好好玩 30 天玩轉 LINE API30

尚未有邦友留言

立即登入留言