跳到主要內容
Fu Yi-Sian
回到專案列表

大學課程期末專案

基隆景點推薦網站

以 Strapi 作為 headless CMS、Heroku 託管資料庫、Vercel 部署前端,景點內容由 API 動態提供,含分頁、卡片樣式與 icon 設計。

StrapiNode.jsSCSSHerokuVercel
前端 GitHub RepoVercel 線上版本(已停止維護)已下線Strapi 後端 Repo(已停止維護)已下線Heroku 後台(已停止維護)已下線

專案內容

  • Nav 配置調整:Home page 改為作品集、API project 改為基隆景點推薦,並修正 Logo 連結
  • Home page 加入新的 card 樣式
  • 在 Strapi 中增加作品集資料的 API
  • 加入分頁、icon,以及「沒有照片的選單補一張背景圖」的處理

問題與解決

這次期末專案花最多時間的是建立 Heroku 資料庫:資料如何從本地端的 Strapi 上傳至 GitHub 需要花上蠻久的時間。在 Heroku 要開啟 open app 時,會因為前面本地端的資料錯誤而需要重新建立 Strapi。在這幾週的報告中比較熟悉了 Heroku 的用法,發現在建立本地端 Strapi 時需要非常注意,相信之後多練習會減少出錯率。

再來是建立 Shop Product 頁面時,需要寫判斷式去 Heroku 抓資料,這個地方問了老師和同學才寫出來。上網查資料後發現自己的程式邏輯還要再加強,之後應該要多加熟悉。

期末專案的 navbar、card 上的 SCSS 套用與相容性問題:有的 card 會用到另外的 .js 檔去控制動畫,這個部分現在的我似乎還不太清楚,需要再去研究。flex 如何排列這個上網也找了很多資料。經過這次的報告,我發現對於 CSS 的熟悉度比以往大幅提升,蠻有成就感的。

心得

我覺得這次的 project 蠻有成就感的,解決了蠻多期中前不太了解的問題:Heroku 資料庫的運作、Node.js 編譯方向,這些都需要花時間去熟悉,但是跟上學期學的 MySQL 比起來還更容易上手。這學期因為疫情影響,上課時間也有點壓縮,前幾週的遠端教學要跟上、消化上課所學會有點困難,助教課的複習幫助我們消化之前上課的小問題。也要謝謝老師願意花時間幫我們解決問題,不然這次的報告完成度也不會那麼高。可以把之前做的作品統整起來,方便之後需要用到時能更有效率地查找,對我們的幫助也很大。

畫面截圖

1 / 5Strapi 後台:作品集資料的 Collection Type 與六筆已發布內容。Heroku 服務已下線,這張截圖是後端存在過的紀錄。