wanlong-church / service

萬隆基督的教會服事表

萬隆基督的教會服事表

開啟專案

First, run the development server:

$ npm install
$ npm run prepare
$ cp .env.template .env.local
# open .env.local and put your google drive token
$ npm run dev

Open http://localhost:3000 with your browser to see the result.

功能列表

🚀 現有功能

• 首頁 - 非常樸素的標題以及進入頁面按鈕
• 介接 Google Sheet API - 但是使用者看不到

🛠️ 開發中的功能

• [頁面] 依據時間顯示所有服事 - UI 趕工中

📅 規劃中的功能

開發中功能請看 Projects

service's Issues

調整環境變數

描述

Next.js 的 .env.local 放的是機密資訊，當前放進 .env.local 的兩個參數不是很機密，可以拉到 .env 裡面。
補充：如果有 development 或 production 特有的環境變數應該加在 .env.development 或 .env.production，.env 是存放所有環境下都共用的環境變數

不機密的參數：

1. GOOGLE_DRIVE_ENDPOINT
2. MAIN_SPREAD_SHEET_ID

規格

1. 將 不機密的環境變數 加進 .env 裡
2. 將 .env.local, .env.local.template 裡 不機密的環境變數 刪除

api 加上錯誤處理

描述

目前 sheetAPI 尚未做錯誤處理，為該 api request 加上錯誤處理，錯誤時返回 500 錯誤，然後給個 message 吧，暫時沒想到錯誤訊息格式，有想法可以討論一波。

規格

1. 當 API 發生無法預期的錯誤時返回 500 錯誤，並加上 message

當一個 CD Player

為 main branch 加上 CD 自動部署至 GCP

william

增加搜尋欄位以供用戶登入和顯示個人化服事表

描述:

我們需要在現有的歡迎頁面藍色按鈕下方新增一個搜尋欄位。此搜尋欄位將允許用戶輸入他們的姓名，並在點擊藍色按鈕後進行登入，登入後將用戶重定向至一個個人化的服事表頁面，該頁面只會顯示與該用戶相關的服事內容。

接受標準:

1. 在現有的藍色按鈕下方新增一個搜尋欄位。
2. 搜尋欄位允許用戶輸入他們的姓名。
3. 當用戶在輸入姓名後點擊藍色按鈕，系統應進行登入操作。
4. 登入後，用戶應被重定向至個人化的服事表頁面。
5. 個人化的服事表頁面應僅顯示與登入用戶相關的服事內容。

在個人化服事表新增加入行事曆超連結

目標:

在現有的個人化服事表頁面中，為每個服事內容增加行事曆圖示，點擊該圖示後，可以自動在使用者的行事曆中建立相應的事件。

接受標準:

1. 在個人化服事表頁面的每個服事內容旁新增一個行事曆圖示。
2. 點擊行事曆圖示後，自動打開瀏覽器並跳轉至行事曆事件建立頁面，預填相關服事內容。

Link Feature Planning to Project Page

Update README to link feature planning to our project page

總表 UI 調整

描述

當前的服事表排版過於陽春，應該要按照時間遠近排列，年跟年、月跟月特別標示出來，如果是開合區域則預設開當週的服事內容，並且置頂。

規格

1. 年月日用中文一點的方式顯示
2. 把年、月分隔區塊特別標出來
3. 進入頁面時預設開啟當週服事、並置頂。這裡可以加上判斷只有第一次開才會這樣做，之後就不會這樣。

Add Node Restriction

Set node and npm constraint

"engines" : {
"npm" : ">=10.0.0",
"node" : ">=18.0.0"
}

將 UI 方案改為 Shadcn UI

描述

現在的 ui library 是 Chakra UI，它目前運行良好。
可惜的是 Chakra UI 的 design system 自成一格，許多內建的 component 的需要按照 Chakra UI 的設計思路使用，需要額外的學習成本。

Shadcn UI 是 Radix UI （headless UI）搭配 tailwinds 的產物，具有更良好的無障礙訪問的特性（因為 Radix UI）。同時因為他不是 npm 套件。Shadcn UI 是利用 CLI 指令將整份 component code 丟進專案當中，需要用的時候再 copy past 進專案。

PWA 改用 serwist 實作

描述

當前 next-pwa 都沒什麼在維護了，大部分的 pwa 套件只支援 Next13 以前的 page router。
目前看起來有在更新的是 @ducanh2912/next-pwa 這個套件，但她推薦 migrate 至 serwist，就... 就 migrate 吧。

跳過去 serwist 後還有相應 workbox 的設定需要處理，這個可以留到下張 ticket。

規格

1. 把當前的 next-pwa 卸載，去除 /public 資料夾底下 sw.js 相關的檔案
2. 按照 serwist 文件，把 pwa 初步設定設定好

加入常用服事列表功能

Link

block by #11

描述

下方 Nav 加上一顆愛心 icon，可將常用的篩選器存到「常用服事表」，「總表」不提供儲存篩選器的功能，但可將當前篩選器加入「常用服事表」。

規格

1. 下方 Nav 加上「愛心 icon」進入「常用服事表」
2. 進入「常用服事表」後根據儲存的篩選器顯示對應的篩選資料
3. 「常用服事表」可自行更換 & 儲存當前的篩選器 -> 存在 localStorage
   私心希望可以自己調整背景顏色，太麻煩的話就下次一定
4. 「總表」篩選器列表加上「加號 icon」將當前篩選器加到「常用服事表」

Fix Typo: 服侍

服侍 -> 服事
服侍通常是對人，服事指的是教會聖殿裡面的服事

開發模式下的 api 返回 mock data

描述

目前開發模式下都是打真實的 API，為避免開發者開發的太頻繁導致 API 被打到上限，在程式加上判斷當前環境是 development 就返回 mock data，正式環境才打真正的 API。

規格

1. 透過環境變數判斷 process.env.NODE_ENV 為 development 就返回 mock data，正式環境才打 API