สร้างแอปบันทึกรายรับ-รายจ่ายด้วย Google Sheets และ Drive ในเวลาไม่ถึงชั่วโมง ด้วย AI

แอปจดบัญชีมีให้โหลดเป็นร้อย แต่หลายตัวเก็บข้อมูลไว้ในระบบของผู้พัฒนา ส่งออกยาก และปรับให้เข้ากับนิสัยการใช้เงินของเราไม่ได้ ผมเลยลองสร้างแอปของตัวเองขึ้นมา โดยมีเงื่อนไขง่ายๆ ว่าข้อมูลต้องอยู่ในบัญชี Google ของเราเอง เปิดดูเป็นตารางได้ และเก็บสลิปไว้ใน Drive ได้ บทความนี้เล่าว่าสร้างอย่างไร เลือกอะไร และเจอปัญหาอะไรระหว่างทางบ้าง

โจทย์ที่ตั้งไว้

ความต้องการมีแค่ไม่กี่ข้อ แต่ครอบคลุมสิ่งที่คนจดบัญชีใช้จริง

• บันทึกได้ทั้งรายจ่ายและรายรับ
• ดูสรุปได้ทั้งรายวัน รายเดือน และรายปี
• ข้อมูลทั้งหมดอยู่ใน Google Sheet
• แนบสลิปหรือใบเสร็จเก็บใน Google Drive และเปิดดูจากในแอปได้
• ใช้ได้บนมือถือ เพราะส่วนใหญ่จดตอนจ่ายเงินเสร็จใหม่ๆ

ทำไมเลือก Google Apps Script

ทางเลือกแรกที่คนส่วนใหญ่นึกถึงคือทำเว็บเพจแล้วเรียก Google Sheets จากหน้าเว็บ แต่วิธีนี้ติดข้อจำกัดเรื่องการเข้าถึงข้อมูลข้ามเว็บและการยืนยันตัวตน ต้องมีเซิร์ฟเวอร์กลางหรือคีย์ลับมาเกี่ยวข้อง

Google Apps Script ตัดปัญหาทั้งหมดนี้ เพราะเป็นโค้ดที่รันอยู่ในบัญชี Google ของเราเอง เรียก Sheets และ Drive ได้โดยตรง และเผยแพร่เป็นเว็บแอปได้ด้วยลิงก์เดียว ข้อดีที่ตามมาคือไม่มีค่าเซิร์ฟเวอร์ ไม่มีบัญชีผู้ใช้ให้จัดการ และข้อมูลไม่ออกจากบัญชีของเรา

โครงสร้างของแอป

โปรเจกต์มีแค่สามไฟล์

ครั้งแรกที่เปิดแอป ระบบจะสร้าง Google Sheet และโฟลเดอร์ใน Drive ให้อัตโนมัติ แล้วจำรหัสของทั้งสองไว้ ถ้าใครมีชีตอยู่แล้ว ก็วางลิงก์ในหน้าตั้งค่าเพื่อเชื่อมต่อแทนได้

ข้อมูลในชีต

ทุกรายการคือหนึ่งแถว มีคอลัมน์ดังนี้ รหัสรายการ วันที่ หมวดหมู่ รายละเอียด จำนวนเงิน ลิงก์ไฟล์แนบ เวลาที่บันทึก และประเภท (รายรับหรือรายจ่าย)

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

หน้าจอและรายงาน

หน้าจอแบ่งเป็นสองแท็บ แท็บบันทึกมีปุ่มสลับรายจ่ายหรือรายรับ ช่องจำนวนเงินขนาดใหญ่ เลือกหมวดหมู่ด้วยปุ่มกดแทนการพิมพ์ และแนบไฟล์ได้ รูปถ่ายจะถูกย่อขนาดในเบราว์เซอร์ก่อนอัปโหลด ทำให้ส่งเร็วและไม่เปลืองพื้นที่ Drive

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

กราฟทำจากแท่ง HTML ธรรมดา ไม่ใช้ไลบรารีกราฟ ทำให้หน้าเบาและโหลดไว

ขั้นตอนติดตั้งแบบย่อ

1. เปิด script.google.com แล้วสร้างโปรเจกต์ใหม่
2. วางโค้ด Code.gs และสร้างไฟล์ HTML ชื่อ Index แล้ววางโค้ดหน้าจอ
3. เปิดแสดงไฟล์ appsscript.json ใน Project Settings แล้ววางค่าตั้งต้น
4. กด Deploy แล้วเลือก Web app ตั้งให้รันในนามของเจ้าของและเข้าถึงได้เฉพาะตัวเอง
5. อนุญาตสิทธิ์ครั้งแรก แล้วเปิดลิงก์ที่ได้บนมือถือ จากนั้นเพิ่มลงหน้าจอโฮมเพื่อใช้เหมือนแอปทั่วไป

บทเรียนจากการดีบัก

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

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

ใส่ป้ายเวอร์ชันไว้ข้างชื่อแอป Apps Script จะใช้โค้ดใหม่ก็ต่อเมื่อสร้างเวอร์ชันใหม่ในการ Deploy ถ้าลืมขั้นนี้ ผู้ใช้จะยังเห็นโค้ดเก่าโดยไม่รู้ตัว ป้ายเล็กๆ อย่าง v5 ทำให้แยกได้ทันทีว่ากำลังดูเวอร์ชันไหน

ระวังอักขระบางแบบในสคริปต์ที่ฝังในหน้า HTML ข้อผิดพลาดที่เจอชี้ไปที่บรรทัดเดียวกันทุกครั้ง และบรรทัดนั้นเป็นบรรทัดเดียวที่มีเครื่องหมายสองขีดเฉียงอยู่ในข้อความ (ลิงก์ที่ขึ้นต้นด้วย https) ข้อสันนิษฐานคือระบบประมวลผลหน้าเว็บของ Apps Script อาจตีความส่วนนั้นเป็นคอมเมนต์แล้วตัดทิ้ง ผมจึงเปลี่ยนไปประกอบลิงก์จากข้อมูลที่ได้รับตอนรันแทนการเขียนลิงก์ยาวไว้ในโค้ด ข้อนี้เป็นการวิเคราะห์จากอาการ ควรทดสอบกับระบบของคุณเองอีกครั้ง

ทดสอบโค้ดฝั่งหน้าจอได้โดยไม่ต้องมี Google ผมใช้ jsdom จำลองหน้าเว็บ พร้อมออบเจ็กต์ปลอมที่ทำหน้าที่แทนการเรียกเซิร์ฟเวอร์ ทำให้จับข้อผิดพลาดทั่วไปได้ก่อนนำไปวางจริง แต่การทดสอบแบบนี้ไม่เห็นความต่างของสภาพแวดล้อมจริง จึงยังต้องทดสอบบน Apps Script ปิดท้ายเสมอ

ต่อยอดได้อย่างไร

• ตั้งงบประมาณรายเดือนต่อหมวดหมู่ แล้วเตือนเมื่อใกล้เต็ม
• บันทึกรายการประจำ เช่น ค่าเช่าหรือค่าสมาชิก ให้เพิ่มเองทุกเดือน
• ส่งออกรายงานเป็น PDF ส่งเข้าอีเมลสิ้นเดือน
• แชร์ชีตให้คู่สมรสหรือคนในครอบครัวดูร่วมกัน

สรุป

แอปจดบัญชีที่ใช้ได้จริงไม่จำเป็นต้องมีเซิร์ฟเวอร์ ไม่ต้องจ่ายค่าบริการ และไม่ต้องยกข้อมูลการเงินของตัวเองไปฝากใคร Google Sheets ทำหน้าที่ฐานข้อมูล Drive ทำหน้าที่เก็บไฟล์ และ Apps Script เป็นตัวเชื่อมทั้งสองเข้าด้วยกัน ส่วนที่ยากที่สุดไม่ใช่การเขียนฟีเจอร์ แต่เป็นการทำให้ทุกอย่างทำงานในสภาพแวดล้อมจริง ซึ่งการมีตัวแสดงข้อผิดพลาดและป้ายเวอร์ชันช่วยประหยัดเวลาได้มาก