拍拍｜線上心理諮商平台（管理者後台）

｜ 前台網站 ｜ 後台網站 ｜ 前台 Repo ｜ API List ｜ Swagger ｜

歡迎來到拍拍！拍拍是個線上心理諮商平台
幫助人們克服各種情緒和心理上的困難，改善他們的生活品質。

拍拍｜線上心理諮商平台

拍拍的進駐諮商師皆為經驗豐富、專業資格齊全的心理學家和臨床心理師，能夠針對每個人的獨特情況提供量身定制的建議和解決方案。您可以隨時隨地在線上與諮商師進行互動，無論您在家中、辦公室或旅途中，都可以方便地使用我們的服務。

我們的目標是成為您信任和依賴的心理諮商平台，幫助您實現自我成長、改善人際關係、克服情緒困擾、減輕壓力和焦慮等問題。歡迎您註冊成為拍拍會員，開始您的心理健康之旅！

---

功能介紹

管理員端：

• 管理員登入
• 管理員查看諮商師審核狀態
• 管理員審核諮商師
• 管理員要求諮商師補件
• 管理員查看所有訂單狀態
• 管理員查看特定用戶的訂單狀態
• 管理員查看所有金流狀態
• 管理員查看特定用戶的總消費金額

---

建議體驗流程

• 後台管理員：
  1. 登入帳號
  2. 確認新註冊的諮商師資格，並決定是否通過審核，如無法通過審核，則發信要求補件
  3. 確認每筆訂單的課程狀態
  4. 確認每筆訂單的金流狀態，且可搜尋特定用戶的總消費金額

---

下載與安裝

Clone 專案

  git clone https://github.com/roceil/Rocket_PI_backend.git

進入專案

  cd Rocket_PI_backend

安裝套件

  npm install

建立環境變數

  .env.example 改為 .env.local

啟動專案

  npm run dev

---

資料夾結構

Rocket_PI_backend/
├── public/
│   ├── loading
│   ├── logo.svg
│   └── ...
├── src/
│   ├── common/
│   │   ├── components/
│   │   │   └── Loading.tsx
│   │   ├── helpers/
│   │   │   └── customAlert.tsx
│   │   ├── hooks/
│   │   │   ├── useCloseLoading.tsx
│   │   │   └── useOpenLoading.tsx
│   │   └── redux/
│   │       ├── feature/
│   │       │   └── loading.ts
│   │       └── store.ts
│   ├── modules/
│   │   └── dashboard/
│   │       └── DashBoardLayout.tsx
│   ├── pages/
│   │   ├── dashboard/
│   │   │   ├── index.tsx
│   │   │   ├── order.tsx
│   │   │   └── payment.tsx
│   │   ├── index.tsx
│   │   └── ...
│   ├── styles/
│   │   ├── antd/
│   │   │   └── antd.css
│   │   └── globals.css
│   ├── types
│   └── interface.ts
├── next.config.js
├── package.js
├── tailwind.config.js
└── tsconfig.js

---

Git Commit 規則

類型	格式	範例
新增功能	[Feat] create [ModalName]	[Feat] create header
修補錯誤	[Fix] fix [ModalName] bug	[Fix] fix carousel bug
樣式相關	[Style] adjust [ModalName] gap	[Style] adjust card gap
更新檔案	[Update] update [ModalName] pic	[Update] update user pic
重構代碼	[Refactor] refactor [ModalName]	[Refactor] refactor API function
快速更新	[Hotfix] fix [ModalName]	[Hotfix] fix API function

---

Git Branch 命名規則

• 以類型格式為開頭並大寫，如：Feat
• 以區塊為命名提示並大寫，如：OrderStep
• 範例：Feat/OrderStep

---

技術規格

👩‍💻 設計工具

工具說明：

• [ 設計稿製作 ]：Figma

  • 用於製作線稿、精稿及 prototype。
  • 方便團隊之間協作，理解產品操作流程

• [ 繪圖工具 ]：Procreate

  • 用於繪製插圖及 loading 動畫
  • 內建筆刷庫非常豐富，且能針對每種筆刷自由調整參數
  • 支援匯出各式檔案

💻 前端技術

技術說明：

• [ 環境 ]：Next 13

  • 使用 Next.js 來進行 SSR，讓網頁能夠快速的載入，並且透過 head 元件，使諮商師頁面能夠在 SEO 上有更好的表現。

• [ 框架 ]：React

  • 使用 React 來進行前端開發，透過 React 的生態系，能夠快速的開發出一個網頁，並且透過 React 的生命週期，能夠更好的管理網頁的狀態。

• [ 語言 ]：TypeScript

  • 語言使用 TypeScript 來進行開發，透過型別管理，減少協作間產生衝突的機會。

• [ CSS ]：Tailwind

  • 使用 Tailwind 來進行 CSS 的開發，透過 Tailwind 的原子化架構，可以增加協作時的樣式更改效率。

• [ 部署平台 ]：Vercel／Zeabur * 使用 Vercel 及 Zeabur 來進行部署，透過 Vercel 的自動化部署，能夠快速的部署網頁；而 Zeabur 的集成式服務，則是能夠增加未來網站快速建構資料庫的可能性。

⌨️ 後端技術

技術說明：

• [ 環境 ]：Microsoft Visual Studio

  • 使用的是.net Freamwork 平台，網頁技術版本則是 asp.net。

• [ 框架 ]：ASP.NET Web API 2

  • 一個由 Microsoft 開發的框架，用於快速構建 Web API 的接口。裡面包含 Get、Post、Put、Delete、Patch 等。

• [ 資料庫 ]：Microsoft SQL Server

  • 微軟的關聯式資料庫，用來查詢垂直擴展的關聯表格，可以高效的查詢表跟表之間的關聯資料。

• [ 技術 ]：SignalR

  • SignalR 是一個由 Microsoft 開發的開源庫，根據情況使用 WebSocket、Server-Sent Events 或 Long Polling 等技術來實現雙向通信。能迅速地渲染使用者的畫面。

• [ 雲端平台 ]：Azure

  • Microsoft 提供一個雲端平台，讓使用者可以使用多種的服務，其中有計算、存儲、資料庫、部署和管理自己的應用程序。