วิธีอ่านซอร์สโค้ด: ตัวอย่างจาก Frappe Framework

การอ่านซอร์สโค้ดคือสุดยอดทักษะของนักพัฒนา
ไม่ว่าคุณจะต้องการ contribute โอเพนซอร์ส แก้บั๊ก หรือแค่อยากรู้ว่าระบบที่คุณใช้ทำงานอย่างไร “การอ่านและเข้าใจโค้ดขนาดใหญ่” คือทักษะสำคัญ

ในโพสต์นี้ ผมขอแนะนำแนวทางการอ่านซอร์สโค้ด ด้วยตัวอย่างจริงจาก Frappe Framework (เอ็นจิ้นของ ERPNext)

⭐ แนวทางทั่วไปในการอ่านซอร์สโค้ด

ก่อนจะลงมืออ่านโค้ดของโปรเจ็กต์ใด ๆ ลองดูเคล็ดลับเหล่านี้ ใช้ได้กับ Frappe และทุกโค้ดเบสขนาดใหญ่:

เริ่มจากอ่านเอกสาร
- ไล่อ่าน README, wiki, และ documentation เพื่อเข้าใจวัตถุประสงค์และโครงสร้างหลัก
สำรวจโครงสร้างโฟลเดอร์
- สแกนไล่โฟลเดอร์ ดูชื่อโมดูล จุดเริ่มต้นของโปรเจ็กต์ และ naming convention
อย่าพยายามอ่านทุกบรรทัด
- โฟกัสเฉพาะส่วนที่เกี่ยวข้องกับโจทย์หรือสิ่งที่อยากรู้จริง ๆ
ตาม flow ของฟีเจอร์ทีละขั้น
- เลือกฟีเจอร์ง่าย ๆ (เช่น “สร้างเอกสาร” หรือ “ล็อกอิน”) แล้วตามรอยตั้งแต่ UI ยัน backend
ติดตามข้อมูล
- ดูว่าข้อมูลถูกเรียก ส่งต่อ และแสดงผลอย่างไร
ใช้เครื่องมือช่วย
- ใช้ฟีเจอร์ค้นหา “ไปที่นิยาม” หรือ “หาการอ้างอิง” ของ IDE
- ใส่ log หรือ print() เพื่อดูว่าโค้ดไหนรัน
หาตัวอย่างจากเทสต์
- เทสต์มักแสดงให้เห็นวิธีใช้งานจริงของโค้ด
จดแผนผังหรือ flowchart
- วาดผัง/จดโน้ตระหว่างที่สำรวจไปด้วย
ถาม/หาคำตอบจากคอมมูนิตี้
- ค้นหาใน GitHub, Stack Overflow, กลุ่ม/ฟอรั่มต่าง ๆ
ฝึกฝนบ่อย ๆ
- ยิ่งอ่านโค้ดโปรเจ็กต์มากขึ้น ก็จะเข้าใจและจับจุดเร็วขึ้น

1. เริ่มจากภาพรวม

ก่อนเปิดไฟล์ใด ๆ ให้อ่าน README และ docs ของ Frappe
ดูเอกสารหลักที่นี่ หรือบน GitHub
จะเข้าใจโครงสร้างและสถาปัตยกรรมโปรเจ็กต์นี้ได้เร็วขึ้น

2. ไล่โครงสร้างโฟลเดอร์

เปิด repo ใน editor ที่ชอบ จะเจอประมาณนี้:

frappe/
├── app.py
├── desk/
├── core/
├── model/
├── utils/
├── public/
├── website/
├── workflow/
└── ...

app.py: จุดเริ่ม web app (WSGI)
desk/: ส่วนของ Desk (admin UI)
core/: โมดูลหลัก (user, role, permission, session ฯลฯ)
model/: ORM และตรรกะ DocType
utils/: ฟังก์ชันอรรถประโยชน์
workflow/: โลจิกระบบ workflow

Tip: เปิดอ่าน comment หรือ __init__.py ในแต่ละโฟลเดอร์เพื่อเข้าใจภาพรวม

3. หา entry point

สำหรับเว็บแอป มักจะเป็นไฟล์ app.py หรือ wsgi.py
ใน Frappe คือ frappe/app.py ซึ่งมีโค้ดแบบนี้:

application = get_wsgi_application()

เมื่อลง Frappe ผ่าน Docker, Bench หรืออื่น ๆ ไฟล์นี้คือจุดเริ่มต้นแรกสำหรับ web request

4. ไล่ฟีเจอร์ตัวอย่างจากต้นจนจบ

เช่น ถ้าอยากรู้ว่าเอกสาร “Task” ถูกโหลดขึ้นฟอร์ม Desk ยังไง:

ผู้ใช้เปิดฟอร์ม Task ใน Desk
ฝั่ง JS (public/js/frappe/desk/) เรียก API โหลดข้อมูล
ฝั่ง backend รับที่ frappe/desk/form/load.py (ฟังก์ชัน getdoc)
ORM ใน frappe/model/document.py จะดึงข้อมูลจากฐานข้อมูลมาใช้งาน

เคล็ดลับ: ใช้ฟีเจอร์ “Go to Definition” หรือ “Find All References” ใน editor เพื่อไล่ตามฟังก์ชันและคลาสได้เร็ว

5. ดูจุดเชื่อมต่อ config/hook

จุดเด่นของ Frappe คือรองรับ hook ผ่านไฟล์ hooks.py
อยากรู้ว่าแต่ละโมดูลเชื่อมกันยังไงหรือเพิ่ม/override โลจิกตรงไหน ดูที่นี่ก่อน

6. อ่านจากไฟล์ test

Test เปรียบเหมือนเอกสารคู่มือที่มีชีวิต!
ดูในโฟลเดอร์ /tests/ หรือ /testing/ จะเห็นตัวอย่างการใช้งานฟีเจอร์ต่าง ๆ

7. ไม่ต้องอ่านทุกบรรทัด—เน้น scan/skimming

มองหาชื่อ function/class, docstring, comment, TODO, และโครงสร้างหลัก
ลงลึกเฉพาะส่วนที่ต้องการจริง ๆ

8. ลองใช้งานจริง

การรันแอปบนเครื่องช่วยได้มาก:

ใช้ UI ทดลองสร้าง/แก้ไข แล้วดู log/console
เพิ่ม print() หรือใช้ debugger ไล่ flow ของโค้ด

บทสรุป

การอ่านโค้ดก็เหมือนการท่องเที่ยวเมืองใหม่ — ใช้แผนที่ (docs), ถามคนท้องถิ่น (community, comment), และกล้า “หลง” เพื่อเข้าใจระบบ
ยิ่งฝึกบ่อยจะยิ่งคล่องและเห็นแพทเทิร์นของระบบขนาดใหญ่ได้ง่ายขึ้น

ขอให้สนุกกับการสำรวจ Frappe Framework!