01
建立 Firebase 即時資料庫
🔗 https://chat-app-<id>-default-rtdb.firebaseio.com
📁 chatter (ProjectBucket)
├─ account ["1111310033", ...]
├─ password ["1234", ...]
├─ article ["Hello!", ...]
├─ author ["1111310033", ...]
├─ like [1, 2, 0]
└─ vote [[0,1], [0,2,1], ...]
⚙️ 規則設定：將 .read 與 .write 改為 true，並發布規則，讓應用程式能正常存取資料庫。
02
開啟 Visual Studio Code 並安裝 Python
1
下載 VS Code
前往官方網站下載並安裝 Visual Studio Code 編輯器。
2
安裝 Python Extension
在 VS Code Extensions 市集中搜尋並安裝 Microsoft Python 擴充套件。
3
安裝相依套件
在終端機執行 pip install flask firebase-admin 安裝必要函式庫。
03
請 Gemini 建立必要的目錄結構
📁 my_pwa_chat/
├─ app.py# Flask 主程式（後端邏輯）
├─ requirements.txt# 套件清單
├─ render.yaml# Render 部署設定
├─ static/
├─ manifest.json# PWA 設定檔
└─ sw.js# Service Worker
└─ templates/
├─ base.html# 共用版面
├─ login.html# Screen1：登入
├─ board.html# Screen2：留言板
├─ register.html# Screen3：註冊
└─ settings.html# Screen4：修改密碼
04
系統頁面截圖展示
用戶登入
立即註冊
Screen 1 · 登入
帳號密碼驗證 → 進入留言板
點讚聊天室
❤️ 1
❤️ 2
❤️ 0
Screen 2 · 留言板
發言、按讚、即時同步
👤 註冊新帳號
已有帳號？回登入
Screen 3 · 註冊
建立新帳號 → 寫入 Firebase
⚙️ 帳號設定
當前帳號：1111310033
Screen 4 · 密碼設定
更改密碼 → 更新資料庫
05
技術架構與功能亮點
Python + Flask
後端伺服器 · 路由邏輯
Firebase RTDB
即時雲端資料庫
PWA
可安裝 · 離線支援
Render.com
雲端部署 · 免費方案
GitHub
版本控制 · 自動部署
Gemini AI
AI 輔助開發
多畫面 Screen 切換
Firebase 即時同步
帳號密碼索引比對
按讚防重複機制
5秒自動刷新留言
PWA 手機安裝
Render 雲端部署
Session 登入狀態
06
Render 部署流程
1
上傳至 GitHub
將 my_pwa_chat 專案所有檔案 push 到 GitHub repository。
2
Render 建立 Blueprint
登入 render.com → New + → Blueprint → 連接 GitHub 帳號並選擇 repo。
3
自動讀取 render.yaml
Render 讀取設定檔，自動安裝依賴並執行 Flask 應用程式。
4
取得公開網址
部署完成後獲得 https://my-pwa-chat.onrender.com 全球可存取網址。
07
心得學習
透過這次 W12 點讚聊天室的實作，我從零開始建立了一個結合前端、後端與雲端資料庫的完整應用程式。 這是我第一次真正體驗到「全端開發」的感覺——從 Firebase 資料結構設計、Flask 路由邏輯撰寫， 到最後成功部署在 Render 平台上，整個過程充滿挑戰卻也充實。
Firebase 即時資料庫的設計邏輯讓我理解到「扁平化資料結構（Flat Data）」的重要性。
所有資料以平行列表的方式儲存，透過索引值（Index）對齊，是 App Inventor 2 與 Python Flask 串接 Firebase 的核心心法。
使用 Gemini AI 輔助開發大幅提升了建立目錄結構與撰寫程式碼的效率。
AI 工具不只是「幫我寫程式」，更幫助我理解每個檔案的用途與系統架構的整體思維。
從本機到雲端部署的過程讓我學到了版本控制（GitHub）與雲端平台（Render）的實際操作。
成功看到自己的網站出現在公開網址上，那種成就感是無可取代的學習動力。
PWA（Progressive Web App）的概念讓我了解到網頁應用程式也能像原生 App 一樣安裝在手機上，
搭配 Service Worker 還能實現離線支援，這是我過去從未接觸過的技術領域。
整體而言，這次作業讓我深刻體會到「掌握 UI 觸發、索引鎖定、平行列表寫入」的循環，
就能用 Python 與 Firebase 打造出無限可能的全端應用程式，未來我也希望能繼續深化這方面的技能。
★
實際操作截圖
步驟 1
建立 Firebase 即時資料庫 — 設定讀寫規則（.read / .write = true）
步驟 2
開啟 Visual Studio Code 並下載 Python，同時使用 Gemini 協助開發
步驟 3
請 Gemini 建立必要目錄，並在 VS Code 中撰寫 app.py，執行 Flask 伺服器
步驟 4
Screen1 — 用戶登入：輸入帳號 1111310033 與密碼，進入聊天室
步驟 5
Screen3 — 使用者註冊：建立新帳號，資料寫入 Firebase account / password 列表
步驟 6
Screen2 — 聊天廣場：發言與按讚，顯示作者、留言內容與愛心計數
步驟 7
Screen4 — 帳號設定：更改密碼，顯示當前帳號 1111310033
