106 lines
8.0 KiB
Markdown
106 lines
8.0 KiB
Markdown
# Worldview Dashboard
|
|
|
|
[](https://opensource.org/licenses/MIT)
|
|
## Table of Contents
|
|
|
|
- [เกี่ยวกับโปรเจกต์](#เกี่ยวกับโปรเจกต์)
|
|
- [ฟีเจอร์หลัก](#ฟีเจอร์หลัก)
|
|
- [ภาพรวม Tech Stack](#ภาพรวม-tech-stack)
|
|
- [การติดตั้งและเริ่มต้นใช้งาน](#การติดตั้งและเริ่มต้นใช้งาน)
|
|
- [Prerequisites](#prerequisites)
|
|
- [Clone Repository](#clone-repository)
|
|
- [การติดตั้ง Dependencies](#การติดตั้ง-dependencies)
|
|
- [การรัน Development Server](#การรัน-development-server)
|
|
- [การสร้าง Production Build](#การสร้าง-production-build)
|
|
- [โครงสร้างไฟล์ของโปรเจกต์](#โครงสร้างไฟล์ของโปรเจกต์)
|
|
- [วิธีใช้งาน Dashboard](#วิธีใช้งาน-dashboard)
|
|
- [การมีส่วนร่วม](#การมีส่วนร่วม)
|
|
- [License](#license)
|
|
- [ติดต่อ](#ติดต่อ)
|
|
- [Acknowledgements](#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](https://react.dev/)
|
|
* **3D Graphics:** [Three.js](https://threejs.org/) และ [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) (React renderer สำหรับ Three.js)
|
|
* **3D Utilities (Drei):** [@react-three/drei](https://github.com/pmndrs/drei)
|
|
* **2D Mapping:** [Leaflet](https://leafletjs.com/) และ [React-Leaflet](https://react-leaflet.js.org/) (สำหรับใช้งาน Leaflet ใน React)
|
|
* **Styling:** [Tailwind CSS](https://tailwindcss.com/) และ [DaisyUI](https://daisyui.com/) (Component library สำหรับ Tailwind)
|
|
* **Version Control:** [Git](https://git-scm.com/)
|
|
* **Git Hosting:** [Gitea](https://gitea.io/en-us/)
|
|
|
|
## การติดตั้งและเริ่มต้นใช้งาน
|
|
|
|
ทำตามขั้นตอนด้านล่างเพื่อตั้งค่าและรัน Worldview Dashboard บนเครื่องของคุณ
|
|
|
|
### Prerequisites
|
|
|
|
ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งสิ่งต่อไปนี้แล้ว:
|
|
|
|
* [Node.js](https://nodejs.org/en) (แนะนำ LTS version)
|
|
* [npm](https://www.npmjs.com/) (มาพร้อมกับ Node.js) หรือ [Yarn](https://yarnpkg.com/)
|
|
|
|
### Clone Repository
|
|
|
|
เริ่มต้นด้วยการ clone repository ของโปรเจกต์นี้:
|
|
|
|
```bash
|
|
git clone https://gitea.softwarecraft.tech/gitea/Worldview_Dashboard.git
|
|
|
|
```
|
|
|
|
### การติดตั้ง Dependencies
|
|
|
|
หลังจาก clone โปรเจกต์แล้ว ให้ติดตั้ง packages ที่จำเป็นทั้งหมด:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### การรัน Development Server
|
|
หากต้องการรันแอปพลิเคชันในโหมดพัฒนา (development mode):
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### License
|
|
โปรเจกต์นี้เผยแพร่ภายใต้ MIT License
|
|
|
|
### Acknowledgements
|
|
ขอบคุณผู้สร้างและทีมพัฒนาของ React, React Three Fiber, Three.js, Leaflet, Tailwind CSS, DaisyUI, และไลบรารี Open Source อื่น ๆ ที่เป็นส่วนสำคัญของโปรเจกต์นี้ครับ |