เกี่ยวกับโปรเจกต์และโครงสร้างโค้ด

ทำความเข้าใจโครงสร้างของ ONE EV Station

โปรเจกต์ ONE EV Station นี้ถูกสร้างขึ้นด้วย Next.js และใช้ App Router เป็นหลัก ซึ่งเป็นมาตรฐานใหม่ที่ช่วยให้การจัดการหน้าเว็บและ state ทำได้ง่ายและมีประสิทธิภาพมากขึ้น นี่คือโครงสร้างโฟลเดอร์หลักที่คุณควรรู้:

src/app/

เป็นหัวใจหลักของแอปพลิเคชันตามโครงสร้างของ App Router

  • (pages)/[page]/page.tsx: โฟลเดอร์แต่ละอันจะแสดงถึงหน้าเว็บหนึ่งหน้า เช่น /map/page.tsx คือโค้ดสำหรับหน้าแผนที่
  • layout.tsx: เป็นไฟล์ Layout หลักของทุกหน้าในแอปพลิเคชัน ใช้สำหรับวางโครงสร้างร่วม เช่น Header และ Footer
  • globals.css: ไฟล์สำหรับตั้งค่า CSS Global และกำหนดตัวแปรสีสำหรับธีมของ Tailwind CSS

src/components/

เก็บ React Components ที่สามารถนำกลับมาใช้ซ้ำได้ในส่วนต่างๆ ของแอปพลิเคชัน

  • ui/: คอมโพเนนต์พื้นฐานจาก ShadCN/UI เช่น Button, Card, Input
  • layout/: คอมโพเนนต์เกี่ยวกับโครงสร้างหลักของเว็บ เช่น Header, Footer
  • (feature)/: คอมโพเนนต์ที่สร้างขึ้นมาเพื่อใช้ในหน้าหรือฟีเจอร์เฉพาะ เช่น station/station-info.tsx

src/lib/

รวบรวมฟังก์ชันช่วยเหลือ (Utilities), ข้อมูลจำลอง (Mock Data), และการตั้งค่าต่างๆ

  • utils.ts: ฟังก์ชันช่วยเหลือทั่วไป เช่น cn สำหรับรวม class name ของ Tailwind
  • mock-data.ts: ข้อมูลจำลองสำหรับใช้ในการพัฒนาและแสดงผลในหน้าต่างๆ
  • firebase.ts: ไฟล์สำหรับตั้งค่าและเชื่อมต่อกับ Firebase

src/ai/

ทุกอย่างที่เกี่ยวข้องกับฟังก์ชัน AI จะถูกเก็บไว้ที่นี่

  • genkit.ts: ไฟล์สำหรับตั้งค่าเริ่มต้นของ Genkit
  • flows/: เป็นที่อยู่ของ Genkit Flows ซึ่งเป็นฟังก์ชันหลักในการเรียกใช้ AI Model ต่างๆ เช่น การวิเคราะห์ข้อมูลจากรีวิวของผู้ใช้