接續昨天的實作，今天要將它完成

今日練習 Github 連結

在昨天 search() 的部分後來在測試有發現一些小問題，後來有針對 code 修正
主要問題是網站上的格式不會總是跟自己想的一樣
常常會遇到沒有我們要的參數的情況
這種時候可以透過使用默認參數的方式解決

設計 Flex Message

這裡一樣先前往 LINE Flex Message Simulator 設計好喜歡的 Flex 版型
這裡直接提供我做好的版型w

{
  "type": "bubble",
  "hero": {
    "type": "image",
    "size": "full",
    "aspectMode": "cover",
    "action": {
      "type": "uri",
      "uri": "http://linecorp.com/"
    },
    "url": "https://m.media-amazon.com/images/M/MV5BZGVkYTUzNjEtZjFkOS00ODBlLWFkYTUtMzVhYTk4MzI2YjMyXkEyXkFqcGdeQXVyMzMwMDIwMA@@._V1_UY268_CR28,0,182,268_AL_.jpg"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Violet ",
        "weight": "bold",
        "size": "xl"
      },
      {
        "type": "box",
        "layout": "baseline",
        "margin": "md",
        "contents": [
          {
            "type": "icon",
            "size": "sm",
            "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
          },
          {
            "type": "text",
            "text": "4.0",
            "size": "sm",
            "color": "#999999",
            "margin": "md",
            "flex": 0
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "spacer"
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "text": "觀看時間",
                "weight": "bold"
              },
              {
                "type": "text",
                "text": "1h 32min"
              }
            ]
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "text": "類型",
                "weight": "bold"
              },
              {
                "type": "text",
                "text": "Drama"
              }
            ]
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "text": "首播時間",
                "weight": "bold"
              },
              {
                "type": "text",
                "text": "22 February 1933"
              }
            ]
          }
        ]
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "spacing": "sm",
    "contents": [
      {
        "type": "button",
        "style": "link",
        "height": "sm",
        "action": {
          "type": "uri",
          "label": "詳細連結",
          "uri": "https://linecorp.com"
        }
      },
      {
        "type": "spacer",
        "size": "sm"
      }
    ],
    "flex": 0
  }
}

回傳訊息

跟以往的做法相同，我們只需要一個 Bubble 的版型，之後在外面套上 Carousel 就可以了

這裡先找了三張圖，放在我們的評價星星

if(message_type == 'text'):
    # star links
    FullStar = 'https://maps.gstatic.com/consumer/images/icons/2x/ic_star_rate_14.png'
    HalfStar = 'https://maps.gstatic.com/consumer/images/icons/2x/ic_star_rate_half_14.png'
    EmptyStar = 'https://maps.gstatic.com/consumer/images/icons/2x/ic_star_rate_empty_14.png'

接下來就依序將我們的資料放入到 Bubble

    user_text = event.message.text
    res = search(user_text)
    Card = json.load(open('card.json','r',encoding='utf-8'))
    for i in res:
        bubble = json.load(open('bubble.json','r',encoding='utf-8'))
        # poster
        if(i['poster'] != None):
            bubble['hero']['url'] = i['poster']
        # title
        bubble['body']['contents'][0]['text'] = i['title']
        # ranking
        ranking = float(i['rating'])/2.0
        for j in range(5):
            if(ranking >= 0.8):
                bubble['body']['contents'][1]['contents'][j]['url'] = FullStar
            elif(ranking >= 0.5):
                bubble['body']['contents'][1]['contents'][j]['url'] = HalfStar
            else:
                bubble['body']['contents'][1]['contents'][j]['url'] = EmptyStar
            ranking-=1.0
        bubble['body']['contents'][1]['contents'][5]['text'] = str(i['rating'])
        # watch_time
        bubble['body']['contents'][2]['contents'][1]['contents'][1]['text'] = i['watch_time']
        # movie_type
        bubble['body']['contents'][2]['contents'][2]['contents'][1]['text'] = ','.join(i['movie_type'])
        # release_time
        bubble['body']['contents'][2]['contents'][3]['contents'][1]['text'] = i['release_time']
        # link
        bubble['footer']['contents'][0]['action']['uri'] = i['link']
        bubble['hero']['action']['uri'] = i['link']
        Card['contents'].append(bubble)

最後再回傳訊息就可以囉
記得先判斷是不是真的有拿到 Flex Message

    if(len(res) == 0):
        line_bot_api.reply_message(reply_token, TextMessage(text='查無資料!'))
    else:
        line_bot_api.reply_message(reply_token, FlexSendMessage('查詢結果出爐~', Card))

最後可以參考完整 code