【Vibe Coding實戰教學】Lovable + LINE 全攻略！打造專屬「AI 名片助理」 скачать в хорошем качестве

【Vibe Coding實戰教學】Lovable + LINE 全攻略！打造專屬「AI 名片助理」

一、本教學使用工具： 1.Lovable：https://lovable.dev/ 2.LINE官方賬號：https://tw.linebiz.com/login/ 3.LINE開發者平台：https://developers.line.biz/en/ 二、本教學使用的提示詞： Gemini： 我要做一個PWA架構的名片辨識APP，使用簡約現代設計風格，可使用LINE Login登入，並整合LINE Bot透過LINE拍攝名片進行AI OCR儲存回覆LINE Flex message。此外能輸入關鍵字快速調取名片資訊 Flex message，核心頁面如下： 登入頁 — Email/密碼註冊登入，流暢動畫 掃描頁 — 拍照 + 相簿多選上傳，圖片預覽網格 名片列表 — 搜尋、vCard 下載、卡片式瀏覽 名片詳情 — 即時編輯所有欄位、標籤管理、刪除 個人頁 — 用戶資訊、登出 請以條列非表格式提供一份SDD SPEC。 此外，名片解析資料庫欄位（姓名、公司、職稱、電話、Email、地址、統一編號），並且自動依照產業類別自動歸類。 Lovable： 請依照底下SDD SPEC，開發一套「LINE AI名片助理」： 1. 系統架構與技術棧 前端框架：Next.js 或 Vue3 (Vite) 構建 PWA，確保離線快取與接近原生 App 的操作體驗。 後端服務：Node.js (NestJS) 或 Python (FastAPI)，處理 OCR 邏輯。 OCR 引擎：Google Vision API 或 OpenAI GPT-4o (Vision)，優點是能精準分類產業。 資料庫：PostgreSQL (儲存名片文字) + Redis (處理 LINE Bot 狀態)。 身份驗證：Firebase Auth 或 Auth0，整合 LINE Login SDK。 2. 核心功能規格 (SDD SPEC) 2.1 身份驗證模組 (Login & Auth) LINE Login 整合：支援一鍵登入並獲取 LINE 唯一識別碼 (UID)。 Email 傳統登入：支援 JWT Token 驗證與密碼加密。 介面特效：背景採用毛玻璃 (Glassmorphism) 或微漸變，輸入框焦點切換時附帶淡入動畫。 2.2 掃描與影像處理 (Scanner & Upload) 相機呼叫：透過 MediaDevices API 開啟鏡頭，並顯示名片比例裁切框。 多選上傳：支援從手機相簿批次選取（Grid Layout 預覽），每張圖顯示上傳進度條。 影像優化：前端先進行基礎濾鏡處理（提高對比度）以提升 OCR 準確率。 2.3 名片列表與管理 (Business Card List) 卡片式佈局：瀑布流或左右滑動卡片，顯示姓名、職稱與公司標誌。 即時搜尋：支援關鍵字（姓名、公司、產業）模糊比對。 vCard 導出：點擊下載按鈕，產生 .vcf 格式直接存入手機通訊錄。 2.4 名片詳情與編輯 (Detail & Edit) 即時編輯：所有欄位點擊即可進入 Inline 編輯模式。 標籤系統：可自定義標籤（如：VIP、重要潛在客戶）。 刪除保護：兩段式確認彈窗，防止誤刪。 2.5 LINE Bot 整合 (LINE Bot OCR) Webhook 監聽：Bot 接收使用者傳送的照片。 AI 解析回傳：OCR 完成後，後端組裝 Flex Message。 關鍵字調取：輸入「查詢 王大明」，Bot 自動從資料庫撈取並回傳該名片的 Flex Message 卡片。 3. 資料庫欄位設計 名片資料表 (BusinessCards Table) 包含以下欄位，設計上除了基本資訊，還加入 AI 自動分析的產業屬性。 id: UUID (主鍵) user_id: 關聯的使用者 UID name: 姓名 company: 公司全稱 job_title: 職稱 phone: 電話/手機 (多組存為 JSON) email: 電子郵件 address: 地址 tax_id: 統一編號 (利用 AI 辨識數字或搜尋工商資料) industry_category: 產業類別 (由 AI 根據公司名稱與關鍵字自動歸類，如：金融業、科技業、服務業) image_url: 原始名片照片存儲路徑 tags: 標籤集合 (Array) created_at / updated_at: 建立與更新時間 4. 產業自動歸類邏輯 (AI Logic) 當圖片上傳至後端後，處理流程如下： OCR 提取文字：獲取所有原始字串。 LLM 結構化處理：將文字餵給 LLM（如 GPT-4o-mini），並要求其根據公司名稱判定產業分類。 分類對齊：AI 會將解析結果對齊至預設的類別清單（例如：科技、製造、零售、媒體、政府、其他）。 Flex Message 呈現：在 LINE 回覆中，會特別標註該名片的產業分類，方便用戶一眼辨識。 三、想學習Vibe Coding+Agentic Engineering成為AI全端架構師 請參考以下課程資訊： Vibe Coding 全端架構師養成：ASP.NET Core × AI LLM 企業級實戰 https://user135527.pse.is/8kkmdj 四、觀看更多技術分享 https://www.xschoolkh.com/blog