9/28/26

動態網頁

 動態網頁（Dynamic Web Page）是指頁面內容並非預先寫死在靜態檔案中，而是根據使用者身分、當前時間、地理位置、或使用者的操作行為，即時運算並動態產生的網頁。

即使不同的人造訪同一個網址（URL），或者同一個人在不同時間造訪，看到的內容與數據都可能完全不同。

一、動態網頁的核心特徵

  1. 資料即時變動：頁面數據是「活」的，隨時與資料庫同步（例如：電商商品剩餘庫存、股市即時報價、外送員目前位置）。
  2. 具備身分識別與個人化：能夠辨識「你是誰」，並給予專屬介面（例如：登入後的個人首頁、好友動態牆、購物車內容）。
  3. 雙向數據互動：使用者不僅是閱讀者，還能主動輸入並改變資料（例如：發文、留言、按讚、線上刷卡結帳）。

二、動態網頁的兩種實現架構

現代網頁技術中，「動態」的生成主要發生在兩個位置：

模式

伺服器端渲染（SSR, Server-Side Rendering）

客戶端渲染（CSR, Client-Side Rendering）

運作原理

伺服器接到請求 ➔ 執行後端邏輯並撈取資料庫 ➔ 拼裝出完整的 HTML 頁面 ➔回傳給瀏覽器顯示。

伺服器先回傳一個空白 HTML 骨架與 JS 檔案 ➔ 瀏覽器執行 JavaScript ➔ 透過 API 向後端撈取資料 ➔ 在使用者瀏覽器端組裝並更新畫面。

代表技術

PHP、Python (Django/Flask)、Node.js (Next.js SSR)、Ruby on Rails

React、Vue.js、Angular、單頁應用程式（SPA）

特色

對搜尋引擎 SEO 極度友善、初次載入首屏快。

頁面切換無須重新整頁刷新，操作體驗流暢如 App。

三、靜態 vs. 動態：生活化比喻

  • 靜態網頁（Static Web）：如同「路邊發放的紙本宣傳摺頁」。 內容在印刷（伺服器儲存）完成後就固定了，所有人不管幾點去拿，看到的字和照片都一模一樣。
  • 動態網頁（Dynamic Web）：如同「餐廳裡會認人的專屬點餐吧檯」。 你一坐下來（登入身分），廚房會去冰箱翻找你的歷史喜好（資料庫），並根據今天的當季食材（即時數據），現場為你客製出一份專屬菜單。
on

9/20/26

26284 Replit使用OCR.space 的方式作名片掃描

 改用 OCR.space 時，主要的流程差異在於「金鑰取得方式」、「程式架構處理資料的方式」以及「給 Replit Agent 的提示詞（Prompt）」。


以下整理前後的具體流程差異與步驟：

1. 核心流程差異對比

流程環節使用 Google AI Studio (Gemini Flash)使用 OCR.space
金鑰取得需登入 Google 帳號，至 AI Studio 點擊產生 Key。前往 OCR.space 官網填寫 Email，直接在信箱收免費 API Key（無須登入/免密碼）。
辨識與分類能力一步到位：AI 能同時「讀出文字」並「理解語意」，直接將姓名、電話、公司分裝至不同欄位。
分兩步處理：


1. OCR.space 只會吐出一整串純文字（Raw Text）。


2. 程式碼必須自己寫「規則（正規表達式 Regex）」去抓電話、Email、地址。

繁體中文支援內建理解繁中語意，準確率極高。呼叫 API 時需明確指定語言參數 language=cht（繁體中文），辨識排版較雜的名片時可能需人工修正。

2. OCR.space 的具體操作流程

步驟一：取得免費 Key

  1. 前往 OCR.space 官網的「Free OCR API」註冊頁。

  2. 輸入你的 Email 與姓名，系統會立刻把 API Key 寄到你的信箱。

步驟二：安全存放金鑰（在 Replit 中）

  1. 在 Replit 專案左側工具欄，找到 Tools > Secrets（鎖頭圖示）。

  2. 新增一組環境變數：

    • Key: OCR_SPACE_API_KEY

    • Value: 填入信件中收到的那一長串金鑰代碼。

步驟三：給 Replit Agent 的提示詞（Prompt）調整

因為 OCR.space 只會回傳原始文字，你必須在 Prompt 中特別要求它撰寫「文字解析與過濾規則」，否則抓下來的文字會全部塞在同一個欄位。

可以將以下提示詞直接貼給 Replit Agent：

Plaintext
請幫我開發一款名片掃描與通訊錄管理的 Mobile App（React Native / Expo），並整合 OCR.space API：

1. 相機與照片：
   - 支援呼叫 Expo Camera 拍照或從相簿選擇名片照片。
   - 拍照後，將照片轉為 Base64 格式，打給後端或直接呼叫 OCR.space API。

2. OCR 辨識設定（使用 OCR.space）：
   - 請從環境變數 process.env.OCR_SPACE_API_KEY 讀取金鑰，請勿寫死在程式碼中。
   - API 請求參數請帶入 language=cht 以支援繁體中文名片。

3. 文字自動解析與欄位歸類（重要）：
   - OCR.space 只會回傳整段純文字，請在前端寫文字處理邏輯（Regex 正規表達式）：
     * 自動過濾出 Email（如包含 @ 與網域名稱）
     * 自動過濾出 電話號碼（符合常見手機 09xx 或市話格式）
     * 辨識可能包含「公司/有限公司」的字串做為公司名稱
   - 將辨識結果自動帶入「新增聯絡人」的表單中（姓名、電話、Email、公司、備註）。
   - 剩餘未被分類的文字，自動放進「備註」欄位，供使用者手動剪貼調整。

4. 介面與儲存：
   - 使用者確認並可手動編輯所有欄位後，點擊「儲存」存入本機（AsyncStorage / SQLite）。
   - 首頁為通訊錄清單，具備搜尋功能，並能一鍵撥打電話與發送 Email。

3. 後續測試與發布

接下來的步驟與原教學完全相同：

  • 點選 Replit 右上角的 Try on device。

  • 手機打開 Expo Go 掃描 QR Code 進行相機實測。

  • 拍下一張名片，測試文字是否能成功被 OCR.space 讀取並分類到姓名、電話等欄位中。
on
訂閱： 文章 (Atom)