[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"seo":3,"site":24,"contact":28,"portfolio:cellenya":36},{"titleTemplate":4,"description":5,"keywords":6,"organizationName":7,"personName":7,"personJobTitle":8,"bingVerification":9,"customMeta":10,"googleVerification":15,"headInjections":16},"%s | 全端系統開發 | 網頁設計 | 伺服器託管","全端系統開發、網頁設計、伺服器託管一站式服務 — 韓滷 ozakboy","全端開發,網頁設計,伺服器託管,韓滷,ozakboy,C#,Vue,Nuxt,微服務","韓滷","全端系統工程師","4928B4223346F74DB53D9754C37164AB",[11],{"kind":12,"key":13,"content":14},"name","google-adsense-account","ca-pub-5488118663607574","npSud3_qj3nhajB0DeUEYYZbdflOR4vLDaLWnXD2liU",[17,21],{"label":18,"content":19,"enabled":20},"GA Google tag","\u003C!-- Google tag (gtag.js) -->\n\u003Cscript async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-L0QNGPN253\">\u003C\u002Fscript>\n\u003Cscript>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-L0QNGPN253');\n\u003C\u002Fscript>",true,{"label":22,"content":23,"enabled":20},"Google Syndication","\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-5488118663607574\"\n     crossorigin=\"anonymous\">\u003C\u002Fscript>",{"siteTitle":7,"subtitle":25,"copyright":26,"favicon":27},"全端系統開發 \u002F 網頁設計 \u002F 伺服器託管","© 2026 韓滷 ozakboy. All rights reserved.","\u002Fdata\u002Fimages\u002Fsite\u002F33752408-36e1e0da1af5.ico",{"name":7,"title":8,"tagline":25,"email":29,"telegram":30,"line":31,"github":32,"intro":33,"website":34,"threads":35},"ozakboy@ozakboy.life","https:\u002F\u002Ftelegram.me\u002Fminksaki64","https:\u002F\u002Fline.me\u002Fti\u002Fp\u002FllWJZ4iuiJ","https:\u002F\u002Fgithub.com\u002Fozakboy","## 關於我\n\n我是韓滷,全端系統工程師。\n\n具備紮實的軟體開發基礎,擅長專案開發規劃、流程設計、各種 Bot 開發、網頁前後端開發、高頻交易系統、微服務架構等。主要開發語言為 C# .NET,擁有豐富的系統架構設計與實作經驗。\n\n## 聯絡方式\n\n歡迎透過 Email 或 Telegram 聯繫,討論您的專案需求。","https:\u002F\u002Fwww.ozakboy.life","https:\u002F\u002Fwww.threads.com\u002F@ozakboy",{"title":37,"description":38,"category":39,"status":40,"date":41,"gallery":42,"version":61,"duration":62,"teamSize":63,"demo":64,"technologies":65,"features":81,"coverImage":44,"updatedAt":92,"slug":93,"body":94},"妍雅 Cellenya — 品牌官網 × LINE 自助預約平台","美容品牌一體式官網與 24 小時 LINE 自助預約系統:客戶從 LINE 圖文選單即時查看美容師空檔並鎖定時段,總部集中管理班表、內容與行銷推播。","Web 應用","production","2026-07-04",[43,46,49,52,55,58],{"path":44,"alt":45},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fshot-home-262cba8ae687.png","首頁 Hero — 品牌主視覺與導覽",{"path":47,"alt":48},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fshot-about-e296791a0e92.png","關於妍雅 — 品牌故事頁",{"path":50,"alt":51},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fshot-treatments-4e7bf77137a8.png","療程介紹 — TSD 技術療程列表",{"path":53,"alt":54},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fshot-beauticians-49bc4123e9f8.png","專業美容師 — 美容師列表頁",{"path":56,"alt":57},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fshot-news-b6e244e6ac41.png","品牌動態 — 文章列表與分類快速篩選",{"path":59,"alt":60},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fshot-locations-82f483454af7.png","服務據點 — 直營\u002F加盟據點與地圖導航","0.27.0","約 2 個月(2026-05 起持續迭代)","1 人獨立開發","https:\u002F\u002Fwww.cellenya.com",[66,67,68,69,70,71,72,73,74,75,76,77,78,79,80],"Nuxt 4","Vue 3","TypeScript","Nitro","PrimeVue 4","SCSS","Prisma 7","SQLite","LINE LIFF","LINE Messaging API","Docker","AWS EC2 (ARM)","Cloudflare","Vitest","Zod",[82,83,84,85,86,87,88,89,90,91],"24 小時 LINE 自助預約:即時查詢美容師可用時段,transaction + UNIQUE 約束三層防重複預約","多據點 × 美容師班表引擎:週固定班 + 單日例外(休假\u002F換店),跨店以排班駐點為準","LINE 深度整合:LIFF 免帳密登入、Rich Menu 綁定後動態切換、圖文選單後台 CMS、歡迎訊息模板","LINE 行銷推播:久未回診客群篩選 + 圖片\u002F圖文卡\u002F輪播\u002F影片 rich message + 發送前估算防額度爆量","舊客回流機制:自動預選上次服務的美容師、Deep Link 深度導頁預填療程","營運數據看板:熱門療程排名 + 留客率(重複預約比例)分析","完整內容管理後台:療程\u002F美容師\u002F見證\u002F動態\u002F據點\u002FFAQ\u002F首頁區塊\u002FSEO 全後台可編","三角色權限分流:客戶(LINE)\u002F 總部 \u002F 美容師端(唯讀極簡),獨立認證通道","SSR SEO:前台 9 頁 SSR + JSON-LD + 動態 sitemap;會員\u002F後台 SPA + noindex 隱私分線","通知雙通道:LINE Push 為主、Email 自動備援,每日 cron 預約提醒","2026-07-05","cellenya","## 專案背景\n\n妍雅 Cellenya 是一個 TSD 技術美容品牌。過去客戶預約仰賴總部人工一對一確認,隨加盟據點成長,人力成本與時段衝突風險同步上升。本專案為其打造品牌官網與自助預約平台:客戶從 LINE 官方帳號圖文選單進入,**即時看到「誰、幾點有空」並直接鎖定時段**,總部則透過後台集中控管班表、內容與行銷。\n\n## 主要功能\n\n### 自助預約引擎(核心)\n\n可用時段 = 週固定班表 − 單日例外(休假\u002F換店)− 已預約時段 − 全域療程間隔 buffer。寫入以 Prisma `$transaction` + `@@unique([beauticianId, startTime])` 複合約束 + SQLite serialized 三層防護,從機制上杜絕重複預約;30 天滾動預約窗口與 24 小時自助取消政策皆可由後台參數調整。\n\n### LINE 深度整合\n\n預約入口強制走 LIFF 免帳密識別;Rich Menu 依「綁定前\u002F後」自動切換,圖文選單由後台 CMS 上傳部署免工程師;行銷推播支援受眾篩選(久未回診天數)、rich message(圖片\u002F圖文卡\u002F輪播\u002Fimagemap\u002F影片)與發送前則數估算二次確認,控管訊息額度成本。\n\n### 三角色分流\n\n客戶(LINE LIFF \u002F 信箱雙軌)、總部後台(全站管理)、美容師端(唯讀查班表與預約)。三張獨立資料表、三條獨立 API middleware,權限互不越界。\n\n### 營運與行銷\n\n數據看板(熱門療程、留客率)、歷史美容師自動推薦、廣告 Deep Link 導頁預填、招商申請收件箱、CSV 匯出。\n\n## 技術架構\n\nNuxt 4 SSR 單一應用(Nitro 同 port 供前台、API、圖片服務與 LINE Webhook),SQLite + Prisma 7 輕量資料層,Sharp 圖片多尺寸處理,Docker 多階段建置部署於 AWS EC2 ARM(Graviton),前面接 Cloudflare + nginx reverse proxy 與 Let's Encrypt。前台 9 頁 SSR 主攻 SEO(JSON-LD、動態 sitemap、單頁 SEO 覆寫),登入後區域一律 SPA + noindex。預約引擎抽為純函式並以 Vitest 覆蓋 16 個邊界案例。66 個 release commits 持續迭代至 v0.27.0。\n"]