Bcard論壇網站
關於Bcard論壇網站
- Bcard為一個論壇網站，復刻臺灣知名論壇Dcard
- 在本論壇中，你可以瀏覽會員所發佈的文章，也可以註冊成為會員，自己撰寫文章
- 登入後，你可以自由撰寫文章，還可以收藏他人文章；為他人文章按愛心；追蹤其他使用者，也可以於文章下留言發表你的感想！
實體關聯圖（ERD）
如何開始
- 註冊帳號
- 設定個人資訊
- 歡迎使用本論壇各種功能！（撰寫文章、收藏文章、為文章按愛心、追蹤別人、文章留言）
專案畫面與功能介紹
首頁（最新文章）
按文章新舊顯示文章
熱門文章
按文章愛心數多寡顯示文章
創作者列表
可以看到本論壇已註冊之會員，並追蹤他們！
創作者個人頁面
自己或其他使用者的個人頁面，呈現這位用戶的追蹤與被追蹤人數，及發佈了哪些文章
個人資訊首頁（我的收藏）
顯示自己收藏了哪些文章（遭作者下架的文章則無法點擊觀看內文）
我追蹤的使用者
顯示自己追蹤了哪些人
我的文章
顯示自己的文章列表（含未發佈及已發佈）
我的個人資料
更改自己的個人資料
單一文章頁面
- 如果為自己的文章，則可進行編輯及刪除
- 可以對文章按愛心、收藏文章或追蹤作者
單一文章頁面（留言區）
如果為自己的留言，則可進行編輯及刪除
新增、編輯文章
不只可以上傳文章封面照片，內文也可以再上傳其他圖片
安裝
以下皆為於macOS環境運行
安裝Ruby
$ brew install ruby
安裝Rails v7.1.3.4
$ gem install rails -v 7.1.3.4
安裝libvips（處理縮圖）
$ brew install vips
下載PostgreSQL
$ brew install postgresql
建立資料庫
$ rails db:create
建立資料表
$ rails db:migrate
安裝相關套件
$ bundle install
啟動rails伺服器及編譯器
$ bin/dev
開啟專案
在瀏覽器網址列輸入以下網址即可看到專案首頁
http://localhost:3000/
專案技術
- 前端：HTML、Bulma、Tailwind CSS、Stimulus.js
- 後端：Ruby on Rails
- 資料庫：PostgreSQL
- 版本控制：Git
使用技術詳細說明
- 以HTML、CSS、JavaScript及Ruby撰寫，為動態網頁
- 設計模式（design pattern）採用MVC架構
- 圖示部分使用Font Awesome，以方便控制大小顏色等設定
- 使用Bulma及Tailwind CSS設計頁面
- 使用ES6使JavaScript語法變得簡潔（箭頭函式、以let定義變數等）
- 追蹤、愛心、收藏等功能運用AJAX技術，提升使用者體驗
- 前端無複雜邏輯，故使用輕量化Stimulus框架
- 使用Rails框架製作網頁
- 前端檔案中，CSS檔案以Asset Pipeline打包，JavaScript檔案以Webpack打包
- 使用includes與with_attached語法，解決資料庫撈資料時的N+1問題
- 使用Active Storage處理圖檔上傳功能，並使用image processing及libvips處理上傳後之圖檔（libvips較ImageMagick快上10倍，且消耗的記憶體為1/10）
- 使用Froala editor製作文章之文字編輯器
- 使用devise套件製作會員系統功能，並客製化
- 使用aasm（act as state machine）有限狀態機控制文章狀態，將低資料受非預期修改之機率
- 使用friendly id套件，美化網址顯示，並達避免洩漏過多資訊之效果；另使用babosa套件，讓文章標題可以中文顯示在網址中
- 使用paranoia套件，讓文章及留言之刪除功能為軟刪除
- 使用axios串接API
- 使用PostgreSQL資料庫儲存資料
聯絡作者
你可以透過email與我聯絡：tamy8677@gmail.com
最後更新：2024.7.9
