Worldview Dashboard

Table of Contents

• เกี่ยวกับโปรเจกต์
• ฟีเจอร์หลัก
• ภาพรวม Tech Stack
• การติดตั้งและเริ่มต้นใช้งาน
  • Prerequisites
  • Clone Repository
  • การติดตั้ง Dependencies
  • การรัน Development Server
  • การสร้าง Production Build
• โครงสร้างไฟล์ของโปรเจกต์
• วิธีใช้งาน Dashboard
• การมีส่วนร่วม
• License
• ติดต่อ
• Acknowledgements

---

เกี่ยวกับโปรเจกต์

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

โปรเจกต์นี้ใช้ประโยชน์จากพลังของ React และ React Three Fiber ในการเรนเดอร์โลก 3 มิติที่สวยงาม พร้อมด้วย Three.js สำหรับการจัดการฉาก 3D ที่ซับซ้อน และ Leaflet สำหรับการแสดงแผนที่ 2 มิติที่คุ้นเคย

ฟีเจอร์หลัก

• Interactive 3D Globe (Global View):

  • แสดงโลก 3 มิติแบบหมุนได้ พร้อมเอฟเฟกต์พื้นหลังดวงดาว (Starfield).
  • Markers (หมุด): แสดงตำแหน่งของเหตุการณ์ข่าวสารหรือจุดข้อมูลสถิติต่างๆ ทั่วโลก (สามารถกรองตามโหมด News/Stats).
  • Connection Lines: เส้นเชื่อมโยงระหว่างจุดที่สำคัญหรือมีความสัมพันธ์กัน.
  • Orbiting Satellites: ดาวเทียม 3D โคจรรอบโลก เพิ่มความสมจริงและน่าสนใจ (หากได้ทำการเพิ่มฟีเจอร์นี้แล้ว).
  • Dynamic Rotation: โลกจะหมุนไปยังตำแหน่งของ Panel ที่ถูกเลือกโดยอัตโนมัติ.

• Local 2D Map View:

  • Seamless Transition: เมื่อผู้ใช้ซูมเข้าใกล้โลก 3D ถึงระดับหนึ่ง จะสลับไปแสดงแผนที่ 2 มิติ (Leaflet) ในบริเวณนั้นโดยอัตโนมัติ.
  • แสดง Marker ในมุมมองแผนที่ 2 มิติ.
  • ปุ่มสำหรับกลับไปยัง Global 3D View.

• Dynamic Information Panels:

  • แผงควบคุมด้านข้างที่แสดงข้อมูลรายละเอียดเมื่อคลิกที่ Marker หรือเลือก Panel จาก Global Navigation.
  • โหมด News: แสดงหัวข้อข่าวสารและเนื้อหาที่เกี่ยวข้องกับภูมิภาคที่เลือก.
  • โหมด Statistics: แสดงข้อมูลสถิติต่างๆ เช่น ดัชนีตลาด, สถิติประชากร, การใช้พลังงาน.
  • Live Time & Population Display: แสดงเวลาปัจจุบันและตัวเลขประมาณการประชากรโลกที่มุมขวาบน.

• Global Navigation:

  • เมนูนำทางทางซ้ายมือสำหรับเลือกดูข้อมูลข่าวสารหรือสถิติในแต่ละ Panel.
  • สลับโหมดหลักระหว่าง "NEWS" และ "STATISTICS".

• Pop-up Details:

  • แสดงข้อมูลสรุปสั้นๆ เมื่อคลิกที่ Marker บนโลก 3D หรือแผนที่ 2D.

ภาพรวม Tech Stack

• Frontend Framework: React
• 3D Graphics: Three.js และ React Three Fiber (React renderer สำหรับ Three.js)
• 3D Utilities (Drei): @react-three/drei
• 2D Mapping: Leaflet และ React-Leaflet (สำหรับใช้งาน Leaflet ใน React)
• Styling: Tailwind CSS และ DaisyUI (Component library สำหรับ Tailwind)
• Version Control: Git
• Git Hosting: Gitea

การติดตั้งและเริ่มต้นใช้งาน

ทำตามขั้นตอนด้านล่างเพื่อตั้งค่าและรัน Worldview Dashboard บนเครื่องของคุณ

Prerequisites

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งสิ่งต่อไปนี้แล้ว:

• Node.js (แนะนำ LTS version)
• npm (มาพร้อมกับ Node.js) หรือ Yarn

Clone Repository

เริ่มต้นด้วยการ clone repository ของโปรเจกต์นี้:

git clone https://gitea.softwarecraft.tech/gitea/Worldview_Dashboard.git

การติดตั้ง Dependencies

หลังจาก clone โปรเจกต์แล้ว ให้ติดตั้ง packages ที่จำเป็นทั้งหมด:

npm install

การรัน Development Server

หากต้องการรันแอปพลิเคชันในโหมดพัฒนา (development mode):

npm run dev

License

โปรเจกต์นี้เผยแพร่ภายใต้ MIT License

Acknowledgements

ขอบคุณผู้สร้างและทีมพัฒนาของ React, React Three Fiber, Three.js, Leaflet, Tailwind CSS, DaisyUI, และไลบรารี Open Source อื่น ๆ ที่เป็นส่วนสำคัญของโปรเจกต์นี้ครับ