ข้ามไปยังเนื้อหาหลัก
ผลงานทั้งหมด

โปรเจกต์ส่วนตัว·2026·Web App · Local-first · Browser Extension

BookNest — ห้องสมุดส่วนตัวพร้อมแผนที่ความรู้ของหนังสือ

ห้องสมุดหนังสือและนิตยสารแบบ local-first ที่เก็บสารบัญจริง คำศัพท์ ผัง และเส้นทางอ่านของแต่ละเล่มไว้เป็น JSON ที่ตรวจสอบได้ ไม่ต้องมีบัญชีหรือคลาวด์

BookNest — ห้องสมุดส่วนตัวพร้อมแผนที่ความรู้ของหนังสือ
บทบาท
นักพัฒนาเดี่ยว — โมเดลข้อมูล Frontend ข้อกำหนด JSON และตัวตรวจ กราฟ ส่วนขยาย Chrome และสคริปต์ตรวจสอบ
ทีม
งานเดี่ยว
ระยะเวลา
17–30 ก.ย. 2026
ปี
2026

ตัวเลขสำคัญ

11
โมเดลข้อมูล (SQLite)
7
ชนิดผังความรู้
6
ชนิดความสัมพันธ์
6
ชนิดรายการในสารบัญ
3
สคริปต์ตรวจสอบ
1.3.0
เวอร์ชันส่วนขยาย Chrome

BookNest เป็นห้องสมุดส่วนตัวสำหรับหนังสือและนิตยสารที่รันบนเครื่องตัวเอง ใช้ SQLite และเก็บปกไว้ในโฟลเดอร์ในเครื่อง ไม่ต้องมีบัญชี คลาวด์ หรืออินเทอร์เน็ต นอกจากจดสถานะการอ่าน ความสำคัญ โน้ต และแท็กแล้ว แต่ละเล่มมี “คลังความรู้” เป็นเอกสาร JSON เวอร์ชัน booknest-knowledge/v1 ที่ให้ AI ช่วยค้นคว้าตามพรอมป์ของแอป แล้วนำเข้ามาตรวจ: สารบัญจริง (แยกจากแผนที่เนื้อหาที่ AI สังเคราะห์), คำศัพท์, ความเชื่อมโยง, ผัง, เส้นทางอ่าน และหนังสือที่เกี่ยวข้อง ข้อความทุกข้อมีป้ายว่าตรวจแล้วหรือสังเคราะห์ พร้อมที่มา และเผยแพร่เป็นหน้าอ่านอย่างเดียวเฉพาะเล่มที่เลือกได้ มีส่วนขยาย Chrome สำหรับนำเข้าหนังสือจาก Amazon Store

โจทย์และปัญหา

  1. 01หนังสือเทคนิคหลายเล่มอ่านค้างหรือซื้อมาแล้วไม่ได้เปิด ถ้ามีแค่ชื่อกับปกก็บอกไม่ได้ว่าเล่มนี้เกี่ยวกับอะไร เหมาะกับใคร และควรเริ่มอ่านตรงไหน
  2. 02AI สรุปเนื้อหาหนังสือได้แต่ปนข้อเท็จจริงกับการตีความ ถ้าแสดงแผนที่ที่ AI สังเคราะห์เป็นสารบัญจริงจะทำให้ผู้อ่านเข้าใจผิด
  3. 03ข้อมูลห้องสมุดเป็นของส่วนตัว ไม่ควรต้องฝากไว้กับบริการภายนอก และต้องสำรองและย้ายเครื่องได้ง่าย
  4. 04การพิมพ์ข้อมูลหนังสือทีละเล่มช้า และร้านออนไลน์หลายแห่งไม่มีวิธีส่งออกรายการ

วิธีแก้

  1. 01ห้องสมุดแบบ local-first: Next.js + Prisma + SQLite (11 โมเดล) ปกเก็บบนดิสก์ในเครื่อง ไม่มีบัญชีหรือคลาวด์ สร้างฐานข้อมูลครั้งแรกอัตโนมัติจาก migration ที่ commit ไว้ และสำรองเป็น ZIP ที่รวมฐานข้อมูลกับปกได้จากหน้า Settings
  2. 02จัดการหนังสือและนิตยสารในที่เดียว: ผู้แต่งหลายคน ISBN-10/13 ที่ตรวจเลขตรวจสอบ ฉบับ ปี สำนักพิมพ์ แท็ก สถานะ (Want to read, Reading, Finished, On hold, Archived) ความสำคัญ รายการโปรด ตรวจหนังสือซ้ำก่อนบันทึก และนำเข้าข้อมูลจากลิงก์หน้าหนังสือ (ใช้ Cheerio) หรือวางภาพปกด้วย Ctrl/⌘+V ส่วนนิตยสารบันทึกบทความรายชิ้นพร้อมสถานะอ่านแล้ว
  3. 03ข้อกำหนดโครงสร้างข้อมูล (data contract) booknest-knowledge/v1 ตรวจด้วย Zod ครบทุกชั้น: แหล่งที่มา, ภาพรวม, โปรไฟล์เทคนิค, สารบัญ (6 ชนิดรายการ), แผนที่เนื้อหา, คำศัพท์, ความสัมพันธ์ (6 ชนิด), ผัง (7 ชนิด), เส้นทางอ่าน และ errata กติกาสำคัญ: รายการสารบัญจริงต้องมีแหล่งที่มา ข้อความที่ติดป้าย “ตรวจแล้ว” ต้องมีแหล่งอ้างอิง และ JSON ต้องตรงกับข้อมูลระบุตัวเล่มที่กำลังแก้ (ชื่อ ผู้แต่ง ฉบับ ปี ISBN)
  4. 04ขั้นตอนทำงานร่วมกับ AI: ปุ่มคัดลอกพรอมป์ที่เติมชื่อ ผู้แต่ง ฉบับ ปี และ ISBN ของเล่มนั้นให้แล้ว พร้อมเทมเพลต JSON ที่มีตัวอย่างทุกคอลเลกชัน ผู้ใช้นำไฟล์ที่ AI คืนมานำเข้า ตัวแก้ไขตรวจทันทีและบอกตำแหน่งที่ผิด มีเลขรุ่นของข้อมูล (revision) กันการบันทึกทับเมื่อแก้จากอีกแท็บ
  5. 05หน้าอ่านคลังความรู้แบบแท็บ (ภาพรวม สารบัญจริง แผนที่เนื้อหา คำศัพท์ ความเชื่อมโยง ผัง เส้นทางอ่าน ที่มา) ค้นหาข้ามทั้งเล่มด้วย ⌘K และแสดงหนังสือที่เกี่ยวข้องจากหัวข้อที่ใช้ร่วมกัน
  6. 06กราฟความเชื่อมโยงและผังวาดด้วย React Flow โดยคำนวณเลย์เอาต์ด้วย ELK ใน Web Worker เพื่อไม่ให้หน้าค้าง รองรับผังที่มี cycle เส้นซ้ำ และ self-loop ส่งออกเป็น SVG หรือ PNG และเปิดเต็มจอได้
  7. 07เผยแพร่เฉพาะที่เลือก: เปิด “เผยแพร่ข้อมูลเล่มนี้” เพื่อได้หน้า /share/books/[id] แบบอ่านอย่างเดียว หรือรัน npm run publish เพื่อส่งออกเว็บ HTML อิสระของเล่มที่เผยแพร่ (ไม่มีโน้ตส่วนตัว สถานะการอ่าน ความสำคัญ รายการโปรด หรือปุ่มแก้ไข) และ npm run make สร้างรายการหนังสือแบบ offline ที่มีปุ่ม Load more
  8. 08ส่วนขยาย Chrome “Amazon Store Importer” (Manifest V3): อ่านการ์ดสินค้าที่เรนเดอร์ในแท็บ กดปุ่ม Load more ให้เอง ตรวจกับ metadata ของ Amazon แล้วส่งเฉพาะ URL ร้าน ASIN ชื่อ ผู้แต่ง ปีพิมพ์ และปกไปยัง BookNest ในเครื่อง หน้า /books/store-import ทำเครื่องหมายเล่มที่มีแล้ว ส่วนขยายไม่อ่านรหัสผ่าน ข้อมูลชำระเงิน หรือประวัติการเข้าเว็บ

ผลลัพธ์

  1. 01ห้องสมุดที่เปิดเล่มแล้วตอบได้ว่าเกี่ยวกับอะไร เหมาะกับใคร ต้องรู้อะไรก่อน และควรอ่านบทไหนก่อน โดยแยกสิ่งที่หนังสือระบุออกจากสิ่งที่ AI สังเคราะห์อย่างเห็นได้ชัด
  2. 02ข้อมูลทั้งหมดอยู่ในเครื่อง ไฟล์เดียว (SQLite) กับโฟลเดอร์ปก สำรองและย้ายเครื่องได้ด้วย ZIP
  3. 03มีสคริปต์ตรวจสอบ 3 ชุด: verify:knowledge (ตัวตรวจ JSON, หนังสือที่มีและไม่มี Part, revision, การบันทึก การลบ และการส่งออกสาธารณะกับฐานข้อมูลชั่วคราว), verify:graphs (เลย์เอาต์ของผัง) และ verify:graphs:browser (ตรวจผังในเบราว์เซอร์จริงด้วย Playwright)

สิ่งที่ส่งมอบ

  • เว็บแอป Next.js 15 + Prisma + SQLite (11 โมเดล) พร้อม migration, backup ZIP และหน้า Settings
  • ห้องสมุดหนังสือ/นิตยสาร กรอง ค้นหา ตรวจซ้ำ นำเข้าจากลิงก์ และจัดการผู้แต่ง สำนักพิมพ์ แท็ก
  • ตัวตรวจ booknest-knowledge/v1, พรอมป์ AI, เทมเพลต JSON และตัวแก้ไข/อ่านคลังความรู้
  • กราฟความเชื่อมโยงและผังด้วย React Flow + ELK (Web Worker) พร้อมส่งออก SVG/PNG
  • หน้าแชร์อ่านอย่างเดียว การส่งออกเว็บ HTML (npm run publish) และรายการหนังสือ offline (npm run make)
  • ส่วนขยาย Chrome Amazon Store Importer (Manifest V3, เวอร์ชัน 1.3.0)
  • สคริปต์ตรวจสอบ verify:knowledge, verify:graphs และ verify:graphs:browser

ทบทวนโปรเจกต์

ความท้าทาย

  • แยก “สารบัญจริง” ออกจาก “แผนที่เนื้อหาที่ AI สังเคราะห์” ให้เห็นชัดทั้งในโมเดลข้อมูล ตัวตรวจ และหน้าจอ ไม่เช่นนั้นผู้อ่านจะเชื่อสิ่งที่ AI เดา
  • ผังที่มาจาก AI อาจมี cycle เส้นซ้ำ ป้ายยาวมาก หรือโหนดโดดเดี่ยว จึงต้องมีฟิกซ์เจอร์ทดสอบเลย์เอาต์และตรวจในเบราว์เซอร์จริง และย้ายการคำนวณ ELK ไปไว้ใน Web Worker
  • ออกแบบ schema JSON ให้ผ่านทั้งหนังสือที่มี Part/Division และหนังสือที่บทอยู่ที่ราก และยังรองรับการแก้ไข (revision) โดยไม่ทำให้อ้างอิงเดิมพัง
  • ปรับสารบัญแบบ Markdown เดิม (ลบแล้วสร้างใหม่ทุกครั้งที่บันทึก ทำให้ ID ไม่คงที่) ไปเป็นเอกสาร JSON เวอร์ชัน ผ่าน migration ที่ลบตารางสารบัญเก่าโดยไม่ทำลายหนังสือ

สิ่งที่เรียนรู้

  • ข้อกำหนดโครงสร้างข้อมูลที่ตรวจได้ (Zod + กติกาข้ามฟิลด์) ทำให้ใช้ AI เป็นผู้ช่วยค้นคว้าได้โดยยังควบคุมคุณภาพ เพราะข้อมูลที่ไม่ผ่านจะไม่ถูกบันทึก
  • ป้ายสถานะของข้อความ (ตรวจแล้ว / สังเคราะห์ / ไม่ทราบ) ช่วยให้ข้อมูลที่ไม่แน่นอนยังมีประโยชน์ โดยไม่ทำให้ดูเหมือนข้อเท็จจริง
  • การให้ส่วนขยายเบราว์เซอร์ส่งเฉพาะฟิลด์ที่จำเป็นไปยังแอปในเครื่อง ช่วยลดสิทธิ์ที่ต้องขอและความเสี่ยงด้านความเป็นส่วนตัว

สนใจงานแนวนี้?

เล่าโจทย์ของคุณให้ผมฟัง ตอบกลับภายใน 24 ชั่วโมง

คุยเรื่องงาน