01. 開發理念說明
本次作業的目標是完成一個具備登入、註冊、留言板與更改密碼功能的聊天室系統。 系統以 Python Flask 作為後端，HTML、CSS、JavaScript 作為前端畫面， 並使用 Firebase Realtime Database 作為雲端資料庫。
為了符合 PWA 的概念，專案也加入 manifest.json 與 service-worker.js，讓網頁可被瀏覽器辨識為可安裝的應用程式。
本報告頁面則整理完整開發成果，並上傳到 Neocities 作為作業繳交用的靜態網站。
02. 系統頁面與功能介紹
登入頁面 Screen1
使用者輸入帳號與密碼後，系統會到 Firebase 檢查帳號資料，驗證成功後進入留言板頁面。
留言板頁面 Screen2
登入後可以查看聊天室訊息並發送新留言，資料會即時儲存到 Firebase 的 messages 節點。
註冊頁面 Screen3
使用者可以建立新帳號，系統會檢查帳號是否重複，密碼會經過 hash 後才儲存。
使用者頁面 Screen4
登入後可進入使用者頁面，更改目前帳號的密碼。
系統功能與應用
| 功能 | 說明 | 使用技術 |
|---|---|---|
| 多畫面切換 | 登入、註冊、聊天室、使用者頁面之間可以正常切換。 | Flask Route / Jinja Template |
| 雲端資料庫 | 帳號資料與留言資料儲存在 Firebase Realtime Database。 | Firebase REST API |
| 留言板顯示 | 前端定時讀取訊息，讓聊天室內容持續更新。 | JavaScript Fetch API |
| PWA 支援 | 加入 Manifest 與 Service Worker，讓網站具備 PWA 基礎設定。 | manifest.json / service-worker.js |
| 密碼保護 | 密碼不直接存明文，而是以 hash 形式保存。 | Werkzeug Security |
03. 成果截圖
04. 專案架構
本專案採用 Flask 後端與靜態前端模板架構：
firebase-python-pwa-chat/ ├─ app.py ├─ requirements.txt ├─ .env ├─ templates/ │ ├─ base.html │ ├─ login.html │ ├─ register.html │ ├─ chat.html │ └─ user.html └─ static/ ├─ css/ │ └─ style.css ├─ js/ │ ├─ chat.js │ └─ service-worker.js └─ manifest.json
主要程式檔說明
| 檔案 | 功能 |
|---|---|
| app.py | Flask 主程式，處理登入、註冊、聊天 API、更改密碼與 Firebase 連線。 |
| templates/*.html | 四個主要畫面的 HTML 模板。 |
| static/css/style.css | 所有頁面的視覺設計與 RWD 響應式排版。 |
| static/js/chat.js | 讀取與送出留言，使用 fetch 呼叫 Flask API。 |
| manifest.json / service-worker.js | PWA 基本設定與快取處理。 |
05. UML / DFD
DFD 資料流程圖
說明：使用者透過瀏覽器操作畫面，Flask 接收請求後與 Firebase 交換資料，最後將結果回傳給前端顯示。
Class Diagram 類別圖
User
- username
- password_hash
- created_at
- updated_at
Message
- id
- username
- text
- created_at
FirebaseService
- fb_get(path)
- fb_put(path, data)
- fb_post(path, data)
- firebase_url(path)
User 與 Message 是主要資料模型，FirebaseService 負責與 Firebase Realtime Database 進行資料讀寫。
06. Firebase 設定
本專案使用的 Firebase Realtime Database 位置如下：
https://chat-c6c18-default-rtdb.firebaseio.com/
Firebase 資料結構
{
"users": {
"username": {
"username": "username",
"password_hash": "hashed_password",
"created_at": "time"
}
},
"messages": {
"message_id": {
"username": "username",
"text": "message",
"created_at": "time"
}
}
}
Firebase 建立 SOP
進入 Firebase Console，新增專案並設定專案名稱。
選擇 Realtime Database，建立資料庫並選擇地區。
作業測試時可暫時將 read/write 設為 true；正式使用時應改成安全規則。
在 Python 專案的 .env 或 app.py 中設定 Firebase URL。
注意：Neocities 是靜態網站空間，適合上傳本報告頁面；Python Flask 專案若要正式部署，較適合放到 Render。
07. 與 AI 工具互動過程
本次作業使用 AI 協助完成以下項目：
需求整理
將作業需求整理成四個 Screen 與對應功能。
程式架構
協助規劃 Flask + Firebase + PWA 的專案架構。
Firebase URL 修改
將舊 Firebase 連結改成 chat-c6c18 專案連結。
錯誤排除
協助檢查 Firebase 資料、路由、API 請求與前端顯示。
報告製作
整理系統介紹、UML、截圖與心得，製作成可上傳到 Neocities 的靜態網頁。
部署說明
說明 Neocities 與 Render 的用途差異，避免將 Python 後端直接上傳到靜態空間。
AI 互動紀錄摘要
學生：請幫我完成 Firebase Python PWA 聊天室作業。 AI：建立登入、註冊、留言板、更改密碼四個頁面。 學生：請把 Firebase 連結改成 https://chat-c6c18-default-rtdb.firebaseio.com/ AI：已將專案設定改成新的 Firebase Realtime Database URL。 學生：請幫我製作上傳 Neocities 的報告。 AI：整理專案功能、UML、Trouble-shooting、心得與成果截圖，輸出靜態網頁報告。
08. Trouble-shooting
| 問題 | 原因 | 解決方法 |
|---|---|---|
| Firebase 資料沒有寫入 | 資料庫網址使用舊專案，或 Firebase Rules 尚未開放測試。 | 將 URL 改為 chat-c6c18 專案，並確認 read/write 規則。 |
| 聊天室送出空白訊息 | 輸入框為必填欄位，空白內容不能送出。 | 前端與後端都加入空白檢查，避免空訊息寫入資料庫。 |
| 瀏覽器顯示 304 | 瀏覽器使用快取，屬於正常狀態碼。 | 若要強制更新，可按 Ctrl + F5 或清除快取。 |
| Neocities 無法執行 Python | Neocities 主要支援 HTML/CSS/JS 靜態網站，不能直接跑 Flask 後端。 | Neocities 用來交報告；Flask App 若要上線，可部署到 Render。 |
目前測試結果
從成果截圖可看到 Firebase 中已成功出現 users 與 messages 節點， 代表註冊、登入與留言功能已能正常與 Firebase 交換資料。
09. 繳交連結
| 項目 | 連結 / 說明 |
|---|---|
| Neocities 報告頁 | 上傳完成後，請在此填入自己的 Neocities 網址。 |
| GitHub 原始碼 | 請在此填入 GitHub Repository 連結。 |
| Render App | 若有部署 Flask App，請在此填入 Render 網址。 |
| YouTube 操作影片 | 請在此填入實際操作錄影網址。 |
交作業前可以把這一區的文字改成自己的實際連結。
10. 本次作業心得
透過本次 Firebase Python PWA 聊天室作業，我學習到如何使用 Flask 建立多頁面網站， 並透過 Firebase Realtime Database 儲存雲端資料。相比只製作靜態頁面， 這次專案需要同時理解前端畫面、後端路由、資料庫讀寫與登入驗證流程。
在開發過程中，Firebase URL、資料庫節點、表單驗證與 API 請求都是需要注意的地方。 當 Firebase 中能成功看到 users 與 messages 資料時，代表整個資料流程已經串接成功。
另外，這次也了解 Neocities 與 Render 的用途不同： Neocities 適合放報告與靜態網站，Render 比較適合部署 Python Flask 這類需要後端伺服器的專案。 這讓我更清楚網站部署平台的差異。