# DoujinSale 開發日誌

## 2021/03/28

今天就是開了 github 專案和 hackmd

然後更新了 git 和安裝 aws cli

設定好 aws cli

沒了

## 2021/04/02

今天大致寫了[架構](https://hackmd.io/@umBhzVYqQXOkdc_91WUbrw/r1u7ex04_)

就先這樣吧
開發到哪再補東西

連假結束前要把 chatbot 和 web 生出來

可以的話 , 順便完成 UI

## 2021/04/03

基本上就是把東西建一建 , 丟到 [github](https://github.com/KevinKu/DoujinSale) , 沒了

反而都在看 line 的 message api 怎麼用

## 2021/04/04

放個開發用的 chatbot 連結 :


加入好友 , 開啟聊天的樣子 :


明天重做圖文選單 , 感覺連假最多做到 bot 發訊息而已....

## 2021/04/05

弄懂了昨天上傳 rich menu 圖片 404 的問題
因為上傳圖片的 url , line 換 domain name 了

所以照著[文章](https://ithelp.ithome.com.tw/articles/10221422)做會出問題 , 要參考官方的[文件](https://developers.line.biz/en/reference/messaging-api/#upload-rich-menu-image)

目前聊天的畫面改成下列的畫面了

今天也到這了 , 看來連假結束 , 進度落後 XD

接下來要處理 lamda 的 deploy 腳本

## 2021/04/11

補完 lambda 更新 code 的[腳本](https://github.com/KevinKu/DoujinSale/commit/aa827e66834558949de00b9b2b979cfd93258815)

然後設好 api gateway

以下是收到的 line message

	{
    "events": [
        {
            "type": "postback",
            "replyToken": "7d93d024aca64891bd74837ebc165434",
            "source": {
                "userId": "U2c44def2716edfac106b9bdb55cc5af0",
                "type": "user"
            },
            "timestamp": 1618153826073,
            "mode": "active",
            "postback": {
                "data": "type=Session"
            }
        }
    ],
    "destination": "U75da6751b0cbd28f6b324fa767afd759"
}

接下來要補 flex message , 秀出目前的場次 ,
給 user 選擇要看哪場次的販賣資訊

## 2021/04/18

使用 replyMessage 一直出現 bad request

後來才發現 , [模擬器](https://developers.line.biz/flex-simulator/?status=success) 弄出的 JSON , 只是部分 value

參考了 [doc](https://developers.line.biz/en/reference/messaging-api/#flex-message) 才發現還要再多補一些 key 和 value

於是終於可以選場次惹


這次的[commit](https://github.com/KevinKu/DoujinSale/commit/bac4278f5c6dedb162f136c6e440306a810aa3a8)

## 2021/04/19

嚴格來說 , flex message 的 JSON 寫死是不對的

它應該是去找一個場次列表 , 篩出最近的時間再把 JSON 拚出來.....

目前 , 我想用 google 的 excel 表來記錄....

就當成 webhook 的 DB 用

## 2021/05/02

今天還是弄環境

建好 s3 和 CloudFront

再到 line 開發者 console , 用 line login 建好 liff 的 app

整個整到原本的 webhook , 以下是成果

[部署 s3 的 commit](https://github.com/KevinKu/DoujinSale/commit/ce18e71563385215f5e2f1dcb99d11135d7a043f)

接下來就是處理畫面了 , 原本想做複雜 , 但現在應該會簡單處理

## 2021/06/15

趁著端午連假 , 補完選取攤位的操作畫面



題外話 , [vant](https://youzan.github.io/vant/#/zh-CN/swipe) 還是沒看文件時覺得好用

最終還是補了一堆 css 參數才使用正常.......

## 2021/09/18

接著補 list 和 header 的部份

list 是最近的貼文 , 跟物販有關的
由上而下是時間最新到舊

header 是社團的簡介

### list

剛剛看了 vant 的 [list](https://youzan.github.io/vant/#/zh-CN/list)

發現不合需求

需求是這樣的 , list 會列出社團跟販賣有關的訊息

使用者可能想看最新的 , 或最舊的

換句話說 , 往上滑到底要去抓最新情報 , 往下滑抓舊的情報

vant 的 list 只提供往下滑的功能

目前考慮是用 [摺疊面版](https://youzan.github.io/vant/#/zh-CN/collapse) 來做 list

使用手風琴效果

展開後第一排是縮圖

第二排是文字內容

然後在摺疊面板上下 , 各放一個組件

此二組件用來抓新舊資料用

組件實現的方法參考[這篇](https://www.w3cplus.com/vue/build-an-infinite-scroll-component-using-intersection-observer-api.html)

## 2021/09/21

查了一下文件 , 原來要 import 對應的 css
組件才會有作用(之前的 Footer 就算了)


然後今天測試才發現 , 原來 liff , line 會 cache

要清掉才會去抓新的網頁........