幫公司整個
「真」網站

要登入、要存資料、要幾個同事一齊用——呢啲離線單檔做唔到,但 Firebase 免費額度做到,仲唔使你識伺服器。

之前教嘅工具,同「公司系統」差喺邊?

我哋之前整嘅分帳器、記帳工具,全部係「離線單檔」:資料存喺你部機,自己用自己知。但公司嘢唔同——

要做到呢啲,個網站後面要有一個「資料庫+登入系統」,行內叫後端。傳統做法要租伺服器、請人寫,一年幾千蚊起步。而我哋用 Firebase——Google 出品嘅免費後端服務,免費額度夠中小企用,開通全過程撳滑鼠就得,一行伺服器碼都唔使寫。

💡 一句講晒 Firebase 係咩:你嘅網站(HTML 檔)放喺 GitHub Pages,資料同帳號就放喺 Firebase。用戶開你條 link → 登入 → 寫嘢入 Firebase → 其他同事開同一條 link 就見到。你嘅電腦閂咗都冇影響。

成個流程係咁行

1️⃣ 開個 Firebase 戶口(10 分鐘,撳滑鼠)→ 2️⃣ 攞到一串「密鑰」(一串設定文字)→ 3️⃣ 叫 AI 寫個系統,話俾佢知「用 Firebase」→ 4️⃣ 將密鑰貼入檔案頂部 → 5️⃣ 放上网(跟返我哋免費發佈教學)。

睇落五步,其實最難嗰步係「諗清楚你要咩功能」。開 Firebase 嗰啲全部係撳制,而家逐步同你行:

第一步:開 Firebase Project

1

console.firebase.google.com,用你公司嘅 Google 帳號登入(冇就開個免費嘅)。

2

撳「Create a project / 新增專案」,個名隨你(例如「company-system」)。

3

問你使唔使 Google Analytics → 可以閂咗佢(慳返啲設定)。撳 Create,等十幾秒,搞掂。

第二步:開登入功能(Authentication)

1

左邊選單撳「Build → Authentication」→「Get started」。

2

喺 Sign-in method 入面開「Email/Password」(Enable → Save)。

3

去「Users」分頁撳「Add user」,幫你同同事開帳號(email+密碼)。開幾個都得。

第三步:開資料庫(Firestore)

1

左邊選單「Build → Firestore Database」→「Create database」。

2

揀「Start in production mode」(安全啲,之後我哋會教你校規則)。地區揀「asia-east1」或最近香港嗰個。

第四步:攞你嘅密鑰(firebaseConfig)

1

左上的⚙️「Project settings / 專案設定」,拉到落去「Your apps」,撳個 </>(Web)圖示。

2

幫個 app 改個名(隨便,例如「web」),撳 Register。

3

畫面會彈出一舊 firebaseConfig = { ... } 嘅設定文字——成舊複製落嚟,收埋喺記事本。呢舊嘢就係你個系統嘅「鑰匙」。

⚠️ 呢串密鑰唔係密碼,俾人見到唔會即刻出事(Firebase 有規則擋住),但都係唔好周圍貼。第六步嘅安全規則會教你鎖好佢。

第五步:叫 AI 寫你嘅系統

用我哋首頁嘅 Prompt 生成器,揀「商業用途」+「公司同事一齊用」+「多人共享資料」+「要登入」,佢會自動生成商業路線嘅指令。或者直接用下面呢個範本:

【角色】你係資深前端工程師,擅長用 Firebase 整中小企管理系統。 【任務】生成一個「員工訂單管理系統」,單一 HTML 檔案。 【使用場景】公司內部 5-10 個同事用,要登入先用到。 【功能規格】 - 登入頁:email+密碼,未登入見唔到主頁 - 主頁:訂單列表(客戶名、貨品、金額、狀態:未出貨/已出貨/已收錢) - 加單制、改狀態制、刪單制 - 所有同事見到同一份即時資料 【技術要求】 - 用 Firebase Authentication 做 email/密碼登入 - 用 Cloud Firestore 存訂單,資料改動即時同步 - Firebase SDK 用官方 CDN 載入 - 喺檔案最頂留一個 firebaseConfig 物件位,寫明「貼上你自己嘅密鑰」 - 程式碼要有註釋,教我點貼密鑰 【設計要求】深色專業風、手機電腦都用得 【輸出】完整 HTML code,我會貼上密鑰後放上网。

AI 出咗個檔之後,開個檔(用文字編輯器),喺頂部搵到 firebaseConfig 嗰位,將第四步複製咗嗰舊嘢貼落去,儲存。然後跟免費發佈教學放上网,你公司系統就有一條正式網址。

第六步(重要):鎖好你嘅資料庫

開通咗 Firestore 之後,預設規則係「30 日內任讀任寫」——過咗期會自動鎖,但你而家就要設定好,唔係到時個系統會突然罷工:

1

Firestore Database →「Rules / 規則」分頁。

2

將規則改成「只有登入咗嘅人先可以讀寫」:

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

撳「Publish」。搞掂——而家只有你喺 Authentication 開咗嘅員工帳號先掂到啲資料。

常見問題

Q:真係免費?用到幾多先收費?

A:Firebase 免費額度(Spark plan)包:每日 50,000 次讀取、20,000 次寫入、1GB 儲存。十個八個員工嘅公司系統根本用唔晒,真係爆咗先至要升級,到時你啲生意都做得唔錯啦。

Q:我唔識寫碼,貼密鑰會唔會好難?

A:唔會。AI 出嘅檔會喺最頂留個好明顯嘅位置(通常寫住「貼上你自己嘅密鑰」),你就係刪走佢嘅示範字、貼上你複製嗰舊嘢,同填表格冇分別。

Q:員工離職點算?

A:入 Firebase → Authentication → Users,撳佢個帳號隔籬嘅選單 → Disable 或 Delete,佢即刻入唔返個系統。

Q:可唔可以唔使 Firebase?

A:可以,Supabase 都係免費代替品,玩法九成像。但 Firebase 文件最多、AI 最熟,新手建議由 Firebase 入手。