【免費自己架】普普風親師聯絡簿！(使用免費firebase資料庫，附原始碼及教學)

花了整整兩天，我終於用 Gemini Pro AI 寫出了一個功能強大的網頁版親師溝通工具！這個小工具不但有著類似 Line 官方帳號的功能，介面還被我改造成了活潑有趣的普普風，希望能讓老師和家長的溝通變得更輕鬆、更有趣。

這個工具完全免費，大家可以下載原始碼，建立自己班級專用的對話網頁。不過，醜話先前頭，如果您的需求是高度即時性，那麼花錢使用 Line 官方帳號或其他的專業服務還是最佳選擇。我開發的這個小工具，是獻給像我一樣，沒有太多預算，也不需要分秒必爭地跟家長聯絡的老師們。

它的核心概念很簡單：

• 由老師統一建立全班的家長帳號及密碼。
• 家長拿到專屬密碼後，用網頁瀏覽器即可登入。
• 可以傳送文字、網址、圖片。
• 老師可以一鍵匯出家長帳號密碼小卡，方便發給家長。
• 老師也能完整匯出與個別家長的聊天紀錄（連圖片都能保留！）。
• 介面已針對手機優化，老師和家長都能在手機上流暢操作。

軟體功能介紹

這個工具主要分為「教師端」和「家長端」，兩邊的功能和看到的介面不同。

🍎 教師端功能

1. 家長帳號管理：
   • 單筆新增：可手動輸入學生姓名、家長姓名、登入密碼，快速建立單一家長帳號。
   • 批次匯入：可一次貼上多筆 學生,家長,密碼 的資料，快速建立全班帳號。
   • 匯出密碼小卡 (PDF)：一鍵產生全班的帳號密碼通知單，排版精美，可直接列印發給家長。
   • 刪除帳號：可刪除單一家長帳號及其所有對話紀錄。
2. 即時對話：
   • 一對一聊天：從左側列表選擇家長，即可進行一對一的私密對話。
   • 傳送多媒體：可傳送文字、網址連結，以及上傳圖片。
   • 群播訊息：可一次發送訊息（文字、網址或圖片）給所有家長，適合發送共同通知。
3. 對話紀錄匯出：
   • 匯出 CSV：將與某位家長的對話紀錄匯出為純文字的 CSV 檔，可用 Excel 或 Google Sheets 開啟。
   • 匯出 HTML：將對話紀錄匯出為包含圖片的完整網頁，完美還原對話情境。
4. 資料管理：
   • 提供一個「危險」選項，讓老師可以一鍵刪除所有對話中的圖片，以釋放資料庫空間。

👨‍👩‍👧‍👦 家長端功能

1. 簡單登入：從下拉式選單選擇自己的孩子姓名，並輸入老師提供的密碼即可登入。
2. 專屬對話：登入後直接進入與老師的一對一對話視窗。
3. 訊息傳送：同樣可以傳送文字、網址連結和圖片給老師。
4. 跨平台使用：不需要安裝任何 App，只要有瀏覽器，無論是手機、平板或電腦都能使用。

🛠️ 【三大步驟】從零到有，打造你的專屬溝通平台

請跟著以下三大步驟，即可完成所有設定。

第一步：下載程式碼

首先，請在下方的連結上按下滑鼠右鍵，選擇「另存新檔」。請務必將檔案名稱儲存為 index.html。(程式有在20250804晚上更新，修了一些bug，之前有下載的請重新下載更換為新的)

工具原始碼

第二步：完成 Firebase 設定並貼上金鑰

這一步是為了建立一個免費的後端資料庫來儲存所有的對話資料。

首次設定指南

歡迎！本指南將引導您完成此應用程式的首次設定。請依照以下步驟操作：

1. 第一步：建立 Firebase 專案
   • 前往 Firebase 官方網站 並登入。
   • 點擊「前往主控台」，然後「新增專案」。
   • 為專案命名，然後點擊「繼續」。
   • 關閉 Google Analytics 功能，然後「建立專案」。
2. 第二步：啟用 Firebase 服務
   在左側選單「建構」區塊，啟用以下兩項服務：
   • Authentication (認證): 點擊「開始使用」 -> 選擇「電子郵件/密碼」 -> 啟用並儲存。
   • Firestore Database (資料庫): 點擊「建立資料庫」 -> 選擇「在測試模式下啟動」 -> 選擇伺服器位置 -> 「啟用」。
3. 第三步：取得 firebaseConfig
   • 回到專案首頁，點擊 ⚙️ 圖示，選「專案設定」。
   • 在「您的應用程式」區塊，點擊網頁圖示 ( </> )。
   • 取一個暱稱，點擊「註冊應用程式」。
   • 註冊後，完整複製名為 firebaseConfig 的程式碼區塊。
4. 第四步：貼上金鑰
   • 用文字編輯器(例如 Windows 的記事本)打開這個 index.html 檔案。
   • 在檔案底部找到 <script type="module"> 標籤。
   • 找到註解 // --- 請將您從 Firebase 專案複製的設定貼到這裡 --- 的地方。
   • 將您複製的 firebaseConfig 程式碼，完整取代掉該處的範例金鑰。
   • 儲存檔案。
5. 第五步：更新 Firestore 安全規則 (最重要)
   • 回到 Firebase，進入 Firestore Database，選「規則」分頁。
   • 刪除所有預設文字。
   • 複製下方的所有規則文字，並貼到編輯器中：

     rules_version = '2';
     service cloud.firestore {
       match /databases/{database}/documents {
         match /{document=**} {
           allow read, write: if true;
         }
       }
     }

   • 點擊「發佈」按鈕，並等待約 30 秒讓規則生效。

第三步：上傳程式碼，取得你的專屬網址

完成第二步、修改並儲存好 index.html 檔案後，我們就可以上傳它來取得專屬網址了。

1. 前往 yay.boo 網站。
2. 點擊網頁中間的「Select file」按鈕，選擇您剛剛修改並儲存好的 index.html 檔案。
3. 上傳後，網站會立刻給你一個 .yay.boo 結尾的網址。例如 https://long-sun-1234.yay.boo。
4. 這個網址就是您專屬的親師溝通平台了！ 請務必把這個網址記下來。

建置說明操作影片

以下是詳細的建置與操作影片教學，幫助您快速上手。

操作流程：如何開始使用？

1. 教師首次登入：打開你的 .yay.boo 網址，點擊「教師進入」，輸入預設密碼 tpet1234 登入。
2. 建立家長帳號：登入後，點擊「家長管理」，開始建立全班的家長帳號。
3. 產生家長連結：回到主畫面，點擊「產生家長連結」，你會得到一個 QR Code 和一個專屬給家長的網址（結尾有 ?mode=parents）。
4. 提供資訊給家長：將「家長專用網址」以及從「家長管理」中匯出的「帳號密碼小卡」提供給家長。
5. 家長登入：家長打開專用網址，選擇學生姓名、輸入密碼，即可開始與您對話。

⚠️ Firebase 免費方案使用限制

使用 Firebase 免費的「Spark 方案」非常佛心，但仍有極限。這個工具最大的資源消耗來自於「圖片傳送」功能。

資源項目	Spark 方案免費限制	對您班級的影響
儲存空間	總共 1 GiB	這是最大瓶頸。程式會將圖片轉成文字(Base64)存進資料庫，體積會增加約33%。一張 500KB 照片會佔用約 665KB。傳送約 1500 張照片就會耗盡空間。
文件寫入	每日 20,000 次	每次傳訊息、建立帳號都會計算。日常文字溝通絕對夠用，但群播訊息會消耗較快。
文件讀取	每日 50,000 次	每次登入、載入對話都會計算。日常使用非常充裕。
網路傳輸量	每月 10 GiB	每次有人看到圖片，都會計算傳輸量。如果全班 30 人都看了一張大圖，流量消耗很可觀。

簡單來說：如果只傳文字，免費方案綽綽有餘。但如果大量傳送圖片，請務必提醒家長壓縮照片，並善用教師端的「刪除所有圖片」功能來釋放空間。

希望這個小工具能幫助到各位辛勞的老師們！享受溝通的樂趣吧！