home-stock

Vibe coding project · แอปจัดการของในบ้านที่พัฒนาร่วมกับ AI และนำมาใช้งานจริง

เว็บจดของในบ้านสำหรับมือถือและคอม ใช้รหัสผ่านเดียวกันบนเครื่องที่ต้องการเปิดตู้เดียวกัน

ใช้งาน

• เปิดเว็บในเครื่องด้วย npm run dev หรือทดสอบจากมือถือในเครือข่ายเดียวกันด้วย npm run dev:host แล้วเปิด URL Network ที่แสดงในเทอร์มินัล ทั้งสองอุปกรณ์ต้องอยู่ใน Wi-Fi เดียวกัน โหมด host เปิดเซิร์ฟเวอร์บนทุก network interface และควรใช้เฉพาะเครือข่ายที่ไว้ใจได้ ใช้รหัสจาก .local-stock/access-key.txt เพื่อเข้าสู่ระบบ
• หลังซื้อของ กด เพิ่มของ กรอกชื่อ จำนวน และหน่วย ถ้ามีให้ใส่วันที่บนฉลากและรูป เลือกติดตามแบบ (EXP : วันหมดอายุ), (BBE : ควรบริโภคก่อน) หรือวันที่ตั้งใจใช้ได้
• วันที่รับเข้าเริ่มต้นเป็นวันนี้ หากชื่ออาหาร หมวด และที่เก็บตรงกับพจนานุกรม จะมีปุ่มเสนอวันที่เหนือช่องติดตามวันที่ กดแล้วระบบเลือก BBE และกรอกวันที่ให้ แก้ค่าเองได้ก่อนบันทึก วันที่นี้เป็นเพียงค่าประมาณคุณภาพ ไม่ใช่วันหมดอายุด้านความปลอดภัย
• เปิด วันนี้ เพื่อเลือกของที่ต้องรีบใช้ หรือเปิด ของในบ้าน เพื่อค้นหาและปรับจำนวน
• ในหน้า ของในบ้าน กดรูป placeholder เพื่ออัปโหลดรูป เลือกรูปที่ยังใช้อยู่ในรายการอื่น หรือเลือกไอคอน SVG สำเร็จรูปโดยไม่อัปโหลดไฟล์ แล้วเลือกสีไอคอนและสีพื้นหลังจากพาเลตหรือกำหนดสีเองได้ก่อนกด บันทึก กดรูป/ไอคอนเดิมเพื่อเปลี่ยน หรือเลือก ใช้ตัวอักษรเดิม เพื่อเอารูปออก รูปใหม่จะถูกครอปตรงกลางเป็นสัดส่วน 1:1 ย่อไม่เกิน 1200 × 1200 พิกเซล และบันทึกเป็น JPEG quality 50% (ไฟล์ต้นฉบับไม่เกิน 25 MB)
• รูปที่ใช้ร่วมกันจะไม่ถูกลบจนกว่าจะไม่มีรายการใดใช้อยู่ คลังตัวเลือกแสดงเฉพาะรูปที่ยังใช้อยู่ ไม่รวมรูปที่ถูกลบจากทุกรายการแล้ว ไอคอนไม่ใช้พื้นที่เก็บรูป
• ไอคอนของในบ้านใช้ SVG จาก Lucide สร้างเป็น sprite ใน public/item-icons.svg พร้อมเก็บสัญญาอนุญาตไว้ที่ LICENSES/lucide-static-LICENSE.txt
• เปิด รายการซื้อ จดของที่ต้องซื้อ เมื่อซื้อจริงแล้วให้ระบุจำนวนและวันที่เพื่อรับของเข้าบ้าน
• เมนูและปุ่มจดรายการซื้อใช้ไอคอนรถเข็น ปุ่มเพิ่มใช้เครื่องหมายบวกสีพื้นหลังในวงกลมสีเดียวกับไอคอน หน้าแผนทำอาหารแยกข้อมูลและปุ่มเป็นคนละแถวบนมือถือ รวมถึงขนาด 375×667
• หน้าต่างบนมือถือแสดงเป็น bottom sheet ชิดขอบซ้าย ขวา และล่าง สูงตามเนื้อหา หากเนื้อหายาวจะเว้นด้านบนและเลื่อนอ่านได้ เปิดด้วยการสไลด์ขึ้นนุ่ม ๆ 320ms และปิดด้วยการสไลด์ลง 240ms พร้อมเฟดฉากหลัง เมื่ออุปกรณ์ตั้งค่าลดการเคลื่อนไหวจะยังสไลด์แบบเรียบง่าย โดยลดเวลาเปิด/ปิดเหลือ 180/140ms แทนการปิดแอนิเมชันทั้งหมด ลากแถบจับหรือหัวหน้าต่างลงเพื่อปิด หรือกดปุ่มปิดตามเดิม ระหว่างบันทึกจะยังปิดไม่ได้
• ในหน้า ของในบ้าน กด Excel → ดาวน์โหลดไฟล์เทมเพลตนำเข้าของ แล้วกรอกชีต นำเข้าของ โดยไม่เปลี่ยนหัวตาราง หน่วย หมวด ที่เก็บ และประเภทวันที่มี dropdown ใน Excel; หน่วยและที่เก็บพิมพ์ค่าใหม่ได้ รวมถึงหน่วยและที่เก็บที่ใช้อยู่แล้วในบ้าน คอลัมน์แจ้งเตือนก่อนกำหนดเว้นว่างเพื่อใช้ค่า Settings หรือใส่ 0–365 วันเฉพาะรายการได้
• กรอกชื่อของ จำนวน และหน่วย จำนวนต้องมากกว่า 0 ถึง 999999 ทศนิยมไม่เกิน 3 ตำแหน่ง หมวดว่างใช้ อื่น ๆ วันที่เว้นว่างได้ หรือใช้ 31/12/2026 (ปี ค.ศ.) / 2026-12-31 ประเภทวันที่ว่างใช้ (EXP : วันหมดอายุ) รองรับ (BBE : ควรบริโภคก่อน) และ ตั้งใจใช้ภายใน ไม่รองรับสูตรในเซลล์ ดูรายละเอียดเพิ่มเติมในชีต วิธีกรอก
• กด Excel → อัปโหลดไฟล์นำเข้าของ เลือก .xlsx ไม่เกิน 10 MB ตรวจพรีวิวแล้วกด นำเข้า หากพบข้อมูลผิดต้องแก้ไฟล์แล้วอัปโหลดใหม่ก่อน ระบบเพิ่มเป็นรายการใหม่ไม่มีรูป ไม่ทับหรือลบของเดิม รองรับรวมของเดิมไม่เกิน 2,000 รายการ อัปโหลดไฟล์เดิมซ้ำจะเพิ่มของซ้ำ
• หน้าตัวอย่างเดิมอยู่ที่ /home-stock.html ข้อมูลตัวอย่างแยกจากสต็อกจริง

การดูแลเว็บบน Vercel

โปรเจกต์ใช้ Vercel Hobby กับ Private Blob ในสิงคโปร์ เซิร์ฟเวอร์ตรวจรหัสก่อนส่งข้อมูลหรือรูปให้เบราว์เซอร์ ข้อมูลเก็บใน home-stock/stock.json ภายใน store รูปเก็บใน home-stock/photos/ หน้าเว็บย่อรูปก่อนส่ง

การเขียน Blob ใช้ ETag จาก head() กับ ifMatch ไม่ใช้ ETag ของ HTTP download ซึ่งอาจต่างกันเมื่อบีบอัดข้อมูล การอ่านตรวจ metadata ก่อนและหลังดาวน์โหลดแบบไม่ใช้ cache เพื่อให้เนื้อหากับเวอร์ชันตรงกัน หากข้อมูลเปลี่ยนระหว่างอ่านจะลองใหม่ โดยไม่ปิดการป้องกันเขียนทับข้อมูลจากอุปกรณ์อื่น

รหัสเข้าเว็บบนเครื่องอยู่ที่ .local-stock/access-key.txt ซึ่งถูกยกเว้นจาก Git สำหรับ local development ตั้งรหัสสั้นได้ แต่ production บน Vercel กำหนดให้ HOME_STOCK_SECRET ยาวอย่างน้อย 8 ตัวอักษร ผู้ที่มีรหัสจะเห็นและแก้ไขข้อมูลทั้งหมดของบ้านได้

หากต้องการเปลี่ยนรหัส ให้ตั้งค่า HOME_STOCK_SECRET ใหม่ใน Project Settings → Environment Variables (Production) ใช้รหัสสุ่มอย่างน้อย 24 ตัวอักษร แล้ว redeploy อัปเดตสำเนารหัสที่เก็บไว้เองด้วย หลัง deploy รอบใหม่ให้ลงชื่อเข้าใหม่บนแต่ละเครื่อง

หากต้องการอัปเดตโค้ดจากโฟลเดอร์ที่เชื่อมโปรเจกต์นี้แล้ว ให้ใช้ npx vercel deploy --prod ใช้ store เดิมเพื่อคงข้อมูล

โควตาและเงื่อนไขปัจจุบันดูได้ใน Vercel Hobby และ Vercel Blob pricing หากใช้ Blob เกินโควตา Hobby จะระงับการเข้าถึงชั่วคราว

รันบนเครื่องเพื่อพัฒนา

ใช้ Node.js 24 และรัน npm run dev จากโฟลเดอร์นี้ จากนั้นเปิด http://127.0.0.1:4177 เวอร์ชันบนเครื่องเก็บข้อมูลแยกไว้ใน SQLite ใต้ .local-stock/ โดยใช้หน้าจอและกติกา API ชุดเดียวกับเวอร์ชันออนไลน์

โค้ดหน้าจอหลักอยู่ใน src/app/ แยกตามส่วนงาน public/app.js สร้างจากไฟล์เหล่านี้ตามลำดับโดย scripts/build-app.mjs จึงไม่ควรแก้ public/app.js โดยตรง npm run dev ประกอบไฟล์ใหม่เมื่อแก้ไฟล์ใน src/app/; npm test และ npm run build ประกอบไฟล์ก่อนใช้งานด้วย

สไตล์อยู่ใน src/styles/ และ Tailwind CLI รวมทุกส่วนเป็น public/tailwind.css ให้แก้ไฟล์ต้นฉบับใน src/styles/ ตามส่วนของหน้าจอ

การย้ายสไตล์ไป Tailwind CSS กำลังทำแบบทยอยเปลี่ยน โดย src/styles/tailwind.css กำหนด theme และ source ที่ต้องสแกน npm run build สร้าง public/tailwind.css สำหรับ utility classes ที่ย้ายแล้ว ระหว่างนี้ CSS เดิมยังอยู่ใน src/styles/ จนย้ายครบ

Vue 3 + Vite ใช้กับตัวเลขรายการซื้อในเมนู หน้ารายการซื้อ หน้าเมนูที่บันทึกไว้ หน้าการตั้งค่า และหน้าแผนทำอาหารแล้ว โดย source อยู่ที่ src/vue/ และ vite.config.js สร้างไฟล์ public/vue-pages.js ผ่าน npm run build หรือ npm run dev ขณะย้ายหน้าจออื่นยังใช้ JavaScript เดิม

This is the beginning of the README. Read the rest at the original. Read the full README ↗