[LINE bot 好好玩 30 天玩轉 LINE API] 第 26 天:賴滴卡製作 – 第一集

2020 11th 鐵人賽 LINE

本文同步刊載於 iT 邦幫忙第11屆鐵人賽:[LINE bot 好好玩 30 天玩轉 LINE API] 第 26 天:賴滴卡製作 – 第一集

前言

這幾天在想說有沒有什麼好玩的東西可以結合 LINE 就想到有一個東西好像滿適合的就是 Dcard,就去看了一下它好像有 API 可以 Call,所以我們就來用這個當成一個主題來實作他吧!

研究 Dcard API

最新文章 API 討論

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701RLxEVLb7Os.png?w=640&ssl=1

在這邊我們可以觀察一下我們打開 Dcard 的時候他是怎麼實作的,首先打開首頁 Dcard,我們先打開 開發人員工具

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20191011/201177014ObkI6ladR.png?w=640&ssl=1

然後切換一下最新文章,在右邊找一下有沒有什麼好像是 API 的東西,運氣不錯找到了了一個 posts 的 API

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191011/201177011aRuXHWWq4.png?w=640&ssl=1

比對一下資料,看看是不是,OK!運氣不錯有找到

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701iszqOZdBB6.png?w=640&ssl=1

那我們回到 Headers 的地方看一下他的 API 路徑

https://www.dcard.tw/_api/posts?popular=false&limit=30
https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701EvbTRxf9iw.png?w=640&ssl=1

有點不放心,用 Postman 再戳一次

OK! 有回傳資料看來可以用!
先來把最新文章的頁面做完,所以先找到這隻就好。

文章內文 API 討論

因為目標是顯示最新文章,所以說文章連結還是跳回去 Dcard,那來找一下這個文章連結怎麼做好了~
隨便來點一篇文章

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701ng056rLwnA.png?w=640&ssl=1

看起來好像是網址加上 ID 的做法

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701N3RRiP9Ap3.png?w=640&ssl=1

看一下我們的 API 收到的資料是什麼好了

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701ZUQkQirS08.png?w=640&ssl=1

OK! 看起來我們有 ID 不過跟剛剛的連結好像不太一樣,先不管這麼多先試試看好了!

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701txCYaTQnoU.png?w=640&ssl=1

太棒了可以用!那這樣就可以開始做我們的機器人了!

LINE 文章 UI

依樣先用 FLEX MESSAGE SIMULATOR [β] 做一下設計,想想應該讓它長這樣好了!

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191011/20117701NPutpsJFwY.png?w=640&ssl=1

一樣不藏私把原始的 JSON 提供給大家!

{
  "type": "bubble",
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "image",
            "url": "https://www.dcard.tw/build/landing-c9e7b8fb.png",
            "aspectMode": "cover",
            "flex": 1,
            "size": "full",
            "aspectRatio": "20:13"
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "text": "穿搭",
                "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"
          }
        ]
      }
    ],
    "paddingAll": "0px"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "text",
                "contents": [],
                "size": "xl",
                "wrap": true,
                "text": "全部",
                "color": "#ffffff",
                "weight": "bold"
              },
              {
                "type": "text",
                "text": "最新",
                "color": "#ffffffcc",
                "size": "sm"
              },
              {
                "type": "text",
                "text": "幫選英倫外套 內有選手",
                "margin": "lg",
                "size": "lg",
                "color": "#ffffffde"
              },
              {
                "type": "text",
                "text": "個人偏好英倫或是皇室風,也已經穿很久這種風格了,有點猶豫該選哪件",
                "margin": "lg",
                "size": "sm",
                "color": "#ffffffde",
                "wrap": true
              }
            ],
            "spacing": "sm"
          },
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "filler"
              },
              {
                "type": "box",
                "layout": "baseline",
                "contents": [
                  {
                    "type": "filler"
                  },
                  {
                    "type": "text",
                    "text": "前往連結",
                    "color": "#ffffff",
                    "action": {
                      "type": "uri",
                      "label": "前往",
                      "uri": "https://www.dcard.tw/f/dressup/p/232270699"
                    },
                    "offsetTop": "-2px",
                    "flex": 0
                  },
                  {
                    "type": "filler"
                  }
                ]
              },
              {
                "type": "filler"
              }
            ],
            "spacing": "sm",
            "margin": "xxl",
            "height": "40px",
            "borderWidth": "1px",
            "borderColor": "#ffffff",
            "cornerRadius": "4px"
          }
        ]
      }
    ],
    "paddingAll": "20px",
    "backgroundColor": "#464F69"
  }
}

剩下我們就可以利用前面教的方式把它做出來拉!
主要需要替換的資料有

  • “text”: “穿搭”
  • “text”: “幫選英倫外套 內有選手”
  • “text”: “個人偏好英倫或是皇室風,也已經穿很久這種風格了,有點猶豫該選哪件”
  • “uri”: “https://www.dcard.tw/f/dressup/p/232270699”
    這邊就交給大家實作拉!

有興趣歡迎加入看看啊 ~
試用看看有問題歡迎下面留言,有希望的功能也可以呦!