bizdocgen

ช่วงปีสองปีที่ผ่านมา เวลาจัดอีเวนต์แล้วรับเงินจากสปอนเซอร์ ก็ต้องทําเอกสารพวก Quotation, Invoice, Receipt ส่งให้สปอนเซอร์ต่างๆ… ช่วงนั้นเริ่มฝึกใช้โปรแกรม Grist ในการจัดการข้อมูลต่างๆ พอดีด้วย เลยลองเขียน Custom Widget เพื่อให้สามารถ Print เอกสารจาก Grist ได้ตรงๆ ดู

ปีที่แล้วก็เริ่มส่งให้แฟนกับเพื่อนๆ ที่รับฟรีแลนซ์ ลองใช้ระบบนี้ออกเอกสารต่างๆ ดูบ้าง (ก็คือส่งไฟล์เทมเพลตให้ แล้วก็ใช้ได้เลย) ตอนนี้ตัวเทมเพลตค่อนข้างนิ่งแล้ว เลยเอามาแชร์ให้ลองเล่นกันดูครับบ

เปิด Template ใน Gristhttps://bizdocgen.getgrist.com/cq6sb6WHRMre/bizdocgen-template

ตัวเทมเพลตสามารถเอาไปปรับแต่งต่อเพื่อเพิ่มเติมความสามารถต่างๆ ได้ตามต้องการได้เลย (ตัวอย่าง: ในไฟล์ Grist ของ Papatsiri ได้เพิ่มอีกคอลัมน์นึง สำหรับอัปโหลดไฟล์ 50 ทวิไว้ด้วย พอลูกค้าจ่ายเงินแล้วส่งใบ 50 ทวิมา ก็อัปโหลดเก็บไว้ ปีถัดไปเวลายื่นภาษีแล้วเขาขอหลักฐาน เอกสารทุกอย่างจะได้รวมไว้ที่เดียวเลย)

ส่วนโค้ดของตัว Custom Widget อัปไว้บน GitHub dtinth/bizdocgen สามารถ fork และนำไป deploy เองได้เลยครับบ

เนื้อหาต่อไปนี้จะเป็นคู่มือการใช้งานเบื้องต้นครับ~

ความสามารถหลัก

Grist คืออะไร?

Grist เป็นโปรแกรมจัดการข้อมูล ที่มีหน้าตาและวิธีใช้งานที่คุ้นเคยคล้ายกับ Spreadsheet (คล้าย Excel หรือ Google Sheets) แต่มีความสามารถที่เหนือกว่า เช่น:

• การเชื่อมโยงข้อมูลระหว่างตาราง
• การเขียนสูตรคำนวณด้วยภาษา Python
• การนำ Custom Widgets เข้ามาเชื่อมต่อ เพื่อแสดงผลข้อมูลในรูปแบบต่างๆ ได้อย่างอิสระ

ซึ่ง bizdocgen ใช้ความสามารถเหล่านี้ เพื่อสร้างเอกสารจากข้อมูลในโปรแกรม Grist ได้ทันที

เริ่มต้นใช้งาน

เปิดเทมเพลต

1. คลิกที่นี่เพื่อเปิด Template (ไม่จำเป็นต้องล็อกอิน)
2. คุณสามารถลองแก้ไขข้อมูลในเอกสารได้เลย (ระบบจะสร้างสำเนาชั่วคราว ให้คุณทดลองใช้งาน)
3. หากต้องการบันทึกเก็บไว้ใน Workspace ของคุณเอง ให้คลิกที่ Use This Template หรือ Save Copy (ในขั้นตอนนี้คุณจะต้องสมัครสมาชิกหรือเข้าสู่ระบบ Grist)

เปิด Template ใน Gristhttps://bizdocgen.getgrist.com/cq6sb6WHRMre/bizdocgen-template

ส่วนประกอบของเทมเพลต

เมื่อคุณเปิดไฟล์เทมเพลตขึ้นมา จะเห็นแถบเมนูด้านซ้ายมือที่ประกอบไปด้วย Pages ต่างๆ ดังนี้

1. 📝 Documents – หน้าแรกและหน้าหลักที่ใช้สำหรับสร้างเอกสารต่างๆ
2. 💼 Providers – หน้าสำหรับใส่ชื่อผู้ให้บริการ (ชื่อของคุณ/หน่วยงานของคุณ)
3. 👥 Clients – หน้าสำหรับเก็บข้อมูลลูกค้า/สปอนเซอร์
4. 💳 Payment Methods – หน้าสำหรับเก็บข้อมูลวิธีการรับเงิน

ในตัว Template เราได้เตรียมข้อมูลตัวอย่างในแต่ละหน้าไว้ให้เรียบร้อยแล้ว (ทั้ง Documents, Providers, Clients, และ Payment Methods) เดี๋ยวเราจะมาลองออกเอกสารกันดู

โครงสร้างของหน้า Documents

ในหน้า Documents (หน้าแรก) หน้าจอจะถูกแบ่งออกเป็น 3 ส่วนหลักๆ

1. Documents (ซ้ายบน): แสดงตารางรายการเอกสารต่างๆ
2. Items (ซ้ายล่าง): แสดงรายการสินค้าหรือบริการต่างๆ ภายในเอกสารนั้น เมื่อคุณเลือกคลิกเอกสารใดๆ ในส่วน Documents ด้านบนแล้ว ตารางส่วน Items ด้านล่างก็จะเปลี่ยนตาม เพื่อแสดงเฉพาะรายการภายในเอกสารที่คุณกำลังเลือกอยู่
3. Preview & Print (ขวา): แสดงตัวอย่างหน้าตาเอกสารแบบเรียลไทม์ และมีปุ่มสำหรับสั่งพิมพ์เอกสารออกมา

ขั้นตอนการลองสร้างเอกสาร

1. สร้างเอกสารใบใหม่:

   • เข้าไปที่ตารางในส่วน Documents ด้านซ้ายบน
   • ไปที่แถวล่างสุด ซึ่งเป็นพื้นที่ว่างสำหรับเพิ่มแถวใหม่

2. กำหนดประเภทเอกสาร (Document Type):

   • ในแถวใหม่ คอลัมน์แรกสุดจะชื่อ Document Type สำหรับเลือกประเภทเอกสาร
   • ให้ดับเบิลคลิกแล้วเลือกประเภทเอกสารตามที่ต้องการ
   • ในตัวอย่างนี้เราจะเลือกเป็น Quotation

   

   • เมื่อเลือกเสร็จ คอลัมน์ Date (วันที่) และ Number (เลขที่เอกสาร) จะถูกเติมให้โดยอัตโนมัติ

   

3. กรอกข้อมูลที่เกี่ยวข้อง:

   • Credit Term: กำหนดระยะเวลาการชำระเงิน (เช่น 7 วัน, 15 วัน, 30 วัน)
   • Provider และ Client: ดับเบิลคลิกเซลล์ว่างๆ แล้วเลือกชื่อผู้ให้บริการและลูกค้า จากข้อมูลที่ได้กรอกไว้ในหน้า Providers และ Clients
   • Tax: ค่าเริ่มต้นจะอยู่ที่ 0% สามารถปรับเปลี่ยนเป็น -3% หากต้องการหักภาษี ณ ที่จ่าย
   • Payment Method: เลือกช่องทางการรับเงิน ข้อมูลส่วนนี้จะถูกแทรกเข้าไปในส่วนท้ายใบแจ้งหนี้ พร้อมๆ กับการแนบ PromptPay QR Code มาให้ด้วย ถ้ากำหนดไว้

4. เพิ่มรายการสินค้าและบริการ:

   • คลิกเลือกแถวเอกสารที่คุณเพิ่งสร้างอยู่
   • มองไปที่ตาราง Items ฝั่งซ้ายล่าง
   • กรอกข้อมูลลงในคอลัมน์ Description (รายละเอียด), Quantity (จำนวน), และ Unit Price (ราคาต่อหน่วย)
   • เมื่อกรอกเสร็จ ยอด Total จะถูกคำนวณโดยอัตโนมัติ และผลลัพธ์ทั้งหมดจะแสดงที่ส่วนด้านขวาทันที

5. สั่งพิมพ์เอกสาร / บันทึก PDF:

   • ไปที่กล่อง Preview & Print ด้านขวา
   • คลิกที่ปุ่ม "🖨️ พิมพ์เอกสาร"
   • เลือกว่าจะพิมพ์ออกมาเลย หรือบันทึกเป็นไฟล์ PDF
   • ในไฟล์เอกสารจะมีพื้นที่ว่างสำหรับใส่ลายเซ็น ให้ใช้โปรแกรมแก้ไข PDF ใส่ลายเซ็นเข้าไปในเอกสารด้วยตัวเองอีกที

คำแนะนำการใช้ Keyboard Shortcut ใน Grist

คุณสามารถศึกษา Keyboard Shortcut ของ Grist เพื่อให้เพิ่มข้อมูลได้อย่างรวดเร็ว

ตัวอย่างการใช้งานคีย์บอร์ด:

1. คลิกที่กล่อง Documents ตรงไหนก็ได้ เพื่อให้โฟกัสอยู่ในตารางเอกสาร
2. กด ⌘+↓ (Mac) หรือ Ctrl+↓ (Windows) เพื่อเลื่อนเคอร์เซอร์ไปที่แถวล่างสุด (แถวว่างสำหรับเพิ่มเอกสารใหม่)
3. กด Home เพื่อเลื่อนเคอร์เซอร์ไปที่คอลัมน์แรกสุด (Document Type)
4. กด Enter เพื่อเริ่มแก้ไขเซลล์ (Grist จะแสดงเมนูให้เลือกประเภทเอกสาร)
5. กด q เพื่อเลือกประเภทเอกสาร Quotation (หรือกด i สำหรับ Invoice, r สำหรับ Receipt)
6. กด Tab เพื่อยืนยันการเลือกประเภทเอกสาร และเลื่อนไปยังคอลัมน์ถัดไป (Date) โดยอัตโนมัติ

หลังจากกรอกข้อมูลในแต่ละเซล แนะนำให้กดปุ่ม Tab เพื่อไปยังคอลัมน์ถัดไป (หากกดปุ่ม Enter โปรแกรมจะเลื่อนไปยังแถวถัดไปแทน)

การปรับแต่งและการนำไปโฮสต์เอง

หากคุณต้องการปรับแต่งหน้าตาเอกสาร แก้ไขโค้ด หรือต้องการความเสถียรสูงสุดในการใช้งาน คุณสามารถนำ Custom Widget นี้ไปโฮสต์เองได้ โดยทำตามขั้นตอนดังนี้:

1. Fork โค้ดต้นฉบับ: เข้าไปที่ Repository dtinth/bizdocgen แล้วทำการ Fork ไปยังบัญชี GitHub ของคุณ
2. Deploy: นำโค้ดที่ Fork ไว้ไป Deploy บนบริการ Static Site Hosting ที่คุณถนัด (เช่น Cloudflare Pages, Vercel หรือ Netlify เป็นต้น)
3. อัปเดต URL ใน Grist: เมื่อ Deploy สำเร็จและได้ URL ใหม่มาแล้ว ให้กลับมาที่ Grist Document ของคุณเพื่ออัปเดต URL ของ Custom Widget

วิธีการอัปเดต URL ของ Custom Widget ใน Grist:

1. ไปที่หน้า Documents
2. คลิกเลือกกล่อง Preview & Print
3. กดเปิดแผงควบคุม Creator Panel ที่อยู่บริเวณมุมขวาบนของหน้าจอ เลือกแท็บ Custom แล้วไปที่แท็บย่อย Widget
4. ตรง Custom URL นำ URL ใหม่ของคุณไปวางแทนที่ URL เดิม ระบบก็จะเปลี่ยนไปใช้ Widget เวอร์ชันของคุณทันที

ข้อตกลงการใช้งานและข้อจำกัดความรับผิดชอบ (License & Disclaimer)

โปรเจกต์นี้เผยแพร่เป็นโอเพนซอร์สภายใต้ MIT License ซึ่งเปิดให้ทุกคนสามารถนำไปใช้งานหรือดัดแปลงได้อย่างอิสระ แต่มีข้อควรทราบดังนี้:

• ให้บริการแบบ "ตามสภาพ" (As-is): ระบบนี้ไม่มีการรับประกันใดๆ ทั้งสิ้น ไม่รับประกันว่าจะปราศจากบั๊ก หรือรับประกันว่าตัว Widget จะสามารถเข้าถึงได้ตลอดเวลา
• การอัปเดตและ Breaking Changes: ปัจจุบัน Custom Widget นี้ถูกโฮสต์ไว้บน Cloudflare Pages แม้ระบบนี้จะค่อนข้างเสถียร แต่ในอนาคตอาจมีการอัปเดตเพื่อปรับปรุงหรือเพิ่มฟีเจอร์ใหม่ๆ ซึ่งอาจทำให้เกิด Breaking Changes ที่ส่งผลกระทบต่อรูปแบบการใช้งานเดิมของคุณได้ (แม้ผมจะพยายามหลีกเลี่ยงให้มากที่สุดก็ตาม) หากคุณนำไปใช้งานจริงจังและกังวลเรื่องผลกระทบจากการอัปเดต หรือต้องการความแน่นอน ขอแนะนำอย่างยิ่งให้ทำการโคลนโค้ดไปโฮสต์และจัดการ URL ด้วยตัวคุณเอง (ตามวิธีในหัวข้อด้านบน) เพื่อให้คุณสามารถควบคุมระบบทั้งหมดอย่างสมบูรณ์
• การสนับสนุน (Support): หากคุณพบปัญหาในการใช้งาน สามารถเข้าไปเปิด Issue แจ้งไว้ได้ที่ GitHub Issues อย่างไรก็ตาม ผู้พัฒนาอาจไม่ได้มีทรัพยากรพอที่จะดูแลหรือแก้ปัญหาให้ได้ทั้งหมด แต่เนื่องจากโปรเจคนี้เป็นโอเพนซอร์ส คุณสามารถ Fork โปรเจกต์ไปแก้ไขเองได้เลย