吳政賢 OA Wu LiveCoding.tw
實作台北 • 藝文活動 - OA Wu's Blog

實作台北 • 藝文活動

全端 HTML API WEB JavaScript CSS CSS3 HTML5 jQuery SCSS Compass Gulp OAF2E 後端 前端 PHP 資料開放 新北市 政府

這是項利用新北市政府資料開放平台提供的新北市政府文化局藝文活動 API 所製作的台北 • 藝文活動。使用 PHP 將 API 資料取下來後編輯成 HTML 頁面,並且放置到 Amazon S3。放置部署過程中同時將頁面所需的 SCSSJavaScript 一起上傳至 S3。

上傳 S3 過程採用 php 執行,關鍵程式碼在這裡,主要是利用 S3 針對檔案都有 tag 的特性,對上傳檔案做 md5_file,達成差異化更新的步驟,步驟如下:

  • 取得 S3 上所有檔案
  • 整理準備上傳的檔案
  • 比對準備上傳與 S3 上檔案的 md5_file 差異
  • 針對差異做更新、刪除、上傳

實作台北 • 藝文活動
使用 php 將 API 資料取下來後編輯成 HTML 頁面,並且放置到 Amazon S3。放置部署過程中同時將頁面所需的 css、JavaScript,並且一起上傳至 S3

 

網頁排版盡量參照 Material Design,同時具有 響應式網頁設計(RWD) 的版型,讓手機用戶也可以方便瀏覽與輕鬆操作。切版使用 Compass 編譯 SCSS,頁面上使用 JavaScript 完成互動功能,如:快速搜尋,利用 jQuery 的 selector [name*=”value”] 完成模糊搜尋,並且利用網址的 Hash 來做分類查詢。

依據資料開放平台上表示每天會更新,所以系統排程會在每日上午 6 時去取得最新的藝文活動資訊,並且放置到 s3 上做更新。目前只爬取新北市政府的開放資料,未來會補上台北市的部分,若是有發現其他縣市的活動 API,也會一併整理起來。

若是覺得不錯,可以對 GitHub 按個星星,鼓勵一下作者吧:)