今天輪到節慶活動 頁面啦！

這次是用到 藝文活動-節慶專區 這支api

因為這支api格式跟其他的不太一樣，又多花一點時間研究，所以特別紀錄一下

到時候串接API的時候才可以快速處理

節慶活動API

話不多說，直接拿一筆資料出來看看

{
        "actId": 412,
        "actName": "2021日月潭萬人泳渡",
        "levelName": "國際級",
        "grade1": "",
        "grade2": "",
        "grade3": "樂活",
        "grade4": "",
        "grade5": "",
        "grade6": "",
        "description": "起始於1983年的日月潭國際萬人泳渡活動，每年中秋節前後舉辦，是日月潭最具歷史與規模的活動，2002年正式列入世界游泳名人堂。泳渡全程約3,000公尺，每年均吸引來自海內外四面八方上萬名游泳愛好者參加，幾乎在開放報名即迅速額滿的「日月潭萬人泳渡」嘉年華盛事，場面盛況空前。",
        "participation": "",
        "cityId": 1210,
        "address": "南投縣 魚池鄉朝霧碼頭→伊達邵碼頭",
        "tel": "",
        "org": "南投縣政府、中華民國成人游泳協會、埔里鎮四季早泳會",
        "startTime": "Sep 1, 2021 12:00:00 AM",
        "endTime": "Sep 30, 2021 12:00:00 AM",
        "cycle": "2021年暫停辦理",
        "noncycle": "",
        "website": "https://www.pulifourswim.tw/tw/index.php",
        "longitude": "23.8677467",
        "latitude": "120.9161666",
        "class1": "01",
        "class2": "02",
        "map": null,
        "travellinginfo": "",
        "parkinginfo": "",
        "charge": "",
        "remarks": "",
        "cityName": "南投縣  魚池鄉",
        "imageUrl": "/e_new_upload/task/a66dc343-cd8b-4ee0-a265-8d7fff520c3b/C2_315080000H_080485/e3418061be76a6c806de500cdf1b1187fa707bf1.jpg"
    },

資料欄位說明在這邊

actId(編號), actName(名稱), levelName(區域級別), 
grade1(主軸1), grade2(主軸2), grade3(主軸3),
grade4(主軸4), grade5(主軸5), grade6(主軸6), 
description(簡述), participation(參與對象), cityId(地點縣市代號),
address(地址), tel(電話), 
org(主辦單位), startTime(開始時間), endTime(結束時間),
cycle(週期性時間), noncycle(非週期性時間), 
website(網址), longitude(經度), latitude(緯度),
class1(分類代碼1), class2(分類代碼2), map(地圖), 
travellinginfo(交通資訊), parkinginfo(停車資訊),
charge(費用), remarks(備註), 
cityName(地點縣市名稱), imageUrl(照片網址)

API要使用前需要做的處理

1. grade (主旨)

   他有grade1~grade6，有點類似tag的概念，分別是 浪漫、文化、樂活、?、美食、生態，

   有符合該主旨，欄位才會有值，所以到時候需要把6個字段都串起來，才會是完整的主軸

   (grade4在資料集中都沒有出現，所以我也不知道是甚麼)

2. levelName (區域級別)

   目前看下來應該是分全國級跟國際級，要依照不同級別顯示不同顏色的標籤

3. startTime (開始時間)、endTime (結束時間)

   這邊的時間格式是 Nov 1, 2021 12:00:00 AM 這種，需要再轉換成 2021/11/1 這種日期格式

4. cycle (週期性時間)

   這個欄位有的是寫 "春季3/13-3/19、夏季活動停辦、秋季9/11、冬季12/11"，也有 "2021年暫停辦理"之類的字樣，應該是類似填寫備註的概念，如果這個欄位有值，顯示時會優先於活動時間

5. imageUrl (照片網址)

   這個網址看起來應該前面是接他們的網站，我找了一下應該是 https://cloud.culture.tw/ 這個網站，只要把他的imageUrl接在後面，就可以順利獲取圖片啦！

   "imageUrl": "/e_new_upload/task/a66dc343-cd8b-4ee0-a265-8d7fff520c3b/C2_315080000H_080423/023678b15b20125dfe7d49e08eea46d4cdfef21e.jpg"
   

6. cityId (地點縣市代號)、class1 (分類代碼1) 、class2 (分類代碼2)

   這個真的是迷之代號，應該是他們政府內部用的代號，有估狗了一下沒查到相關資料，只能放棄這個欄位啦~

7. noncycle (非週期性時間)、map (地圖)、travellinginfo (交通資訊)、parkinginfo (停車資訊)、charge (費用)、remarks (備註),

   這些欄位在api中完全沒有值，略過

UI設計

根據這些欄位，我大概畫了一下UI

搜尋的部分我參考了高雄市立美術館，可以點擊展開搜尋窗，不需要的時候可以再收合起來

點開後可以簡單的查看詳細內容跟簡介，最下面可以的話會想利用api給的經緯度加個Google地圖

大概醬！　每天都在幫自己出難題的感覺 XD

明天來刻前端畫面～