Skip to content

REPORT.md

Latest commit

 

History

History
46 lines (34 loc) · 5.16 KB

REPORT.md

File metadata and controls

46 lines (34 loc) · 5.16 KB
Raw

รายงานสรุปการพัฒนา: Python vs C Translation Visualizer (ฉบับปรับปรุงสมบูรณ์)

1. วัตถุประสงค์ (Objective)

เพื่อสร้างสื่อการเรียนรู้อัจฉริยะ (Interactive Learning Lab) ที่เปรียบเทียบกระบวนการทำงานและการแปลงภาษาโปรแกรม (Translation Process) ระหว่าง Python และ ภาษา C เพื่อให้นักเรียนเข้าใจลึกซึ้งเกี่ยวกับการทำคอมไพล์ (Compile), การเป็นล่าม (Interpreter), รหัสไบต์โค้ด (Bytecode), สถาปัตยกรรม CPU และความปลอดภัยของข้อมูลในหน่วยความจำคอมพิวเตอร์

2. โหมดการเรียนรู้ภายในแอปพลิเคชัน (Learning Labs)

แอปพลิเคชันถูกออกแบบใหม่ให้มีความสมบูรณ์แบ่งออกเป็น 4 แท็บทดลองหลัก:

  1. Translation Flow (เส้นทางการแปลงโค้ด):

    • แสดงขั้นตอนตั้งแต่ Source Code จนส่งไปประมวลผลปลายทางบน CPU
    • Python: Source (.py) ➔ Parser AST ➔ Compiler ➔ pycache (.pyc) ➔ PVM Interpreter ➔ CPU
    • C: Source (.c) ➔ Preprocessor ➔ Compiler & Assembler ➔ Linker ➔ CPU (Executable Direct)

  2. Code & VM Lab (เปรียบเทียบคอมพิวเตอร์เสมือน):

    • แสดงผลลัพธ์เปรียบเทียบโค้ดสั้นๆ (พิมพ์ข้อความ, การบวกเลขตัวแปร)
    • แสดงสเตปการทำงานและโครงสร้างการจัดการระดับต่ำแบบจริงจัง:
      • Python: แสดง Python Bytecode จริง ร่วมกับจำลองการทำงานบน Stack ของ PVM
      • C: แสดง x86-64 Assembly จริง ร่วมกับการเก็บข้อมูลลง CPU Registers และ Memory Stack Frame

  3. Portability Lab (ทดลองความยืดหยุ่นต่างแพลตฟอร์ม):

    • ให้ผู้เรียนทดลองคอมไพล์โค้ดในรูปแบบต่างๆ แล้วทดลองสั่งรัน (Deploy) ไปยังเป้าหมายต่างสถาปัตยกรรม (Windows PC Intel x86_64, macOS Macbook ARM64, Raspberry Pi ARM32)
    • ชี้ให้เห็นว่า Python Bytecode (.pyc) ทำงานได้บนทุกแพลตฟอร์มที่มี Interpreter ประจำเครื่อง ในขณะที่ C Executable จะเกิดข้อผิดพลาดไม่เข้ากันหากคอมไพล์ผิดสถาปัตยกรรม CPU

  4. Type Safety & Memory Lab (การประกาศชนิดข้อมูล):

    • จำลองการกำหนดค่าตัวแปรประเภทจำนวนเต็ม แล้วพยายามเปลี่ยนให้เป็นตัวอักษร (String)
    • แสดงโครงสร้างการจัดเก็บข้อมูลใน Memory (PyObject Pointer vs Stack Allocation)
    • แสดงเหตุผลที่ภาษา C ตรวจพบ Compile Error ทันที (Static typing) ขณะที่ Python อนุญาตให้สลับได้อย่างราบรื่น (Dynamic typing)

3. เทคโนโลยีที่ใช้ (Tech Stack)

  • Frontend Framework: React 18 + Vite (TypeScript)
  • Animation & Interactivity: Framer Motion (จัดการ layout animations และสลับสถานะ)
  • Styling: Tailwind CSS (ชุดสี Zinc Dark Theme ผสาน Glow effect สีสะท้อนแสง)
  • Iconography: Lucide React

4. สถิติความเข้ากันได้และการปรับแต่ง (Troubleshooting)

  • ใช้ Vite 5.4.1 และ Tailwind CSS v3 เพื่อความเสถียรสูงสุดของ Node.js (v22) และการรัน Production Build ในเครื่อง PC
  • แก้ไขข้อผิดพลาดประเภทข้อมูล TypeScript (Type inference) สำหรับโครงสร้างหน่วยความจำเรียบร้อย

จัดทำโดย: Gemini CLI Agent | วันอังคารที่ 16 มิถุนายน 2569