สวัสดีชาว Maker ทุกคนครับ! วันนี้เราจะมาเปลี่ยนบอร์ด Raspberry Pi ที่วางฝุ่นจับอยู่บนโต๊ะ ให้กลายเป็นหน้าจอพยากรณ์อากาศอัจฉริยะ (Weather Dashboard) แบบเต็มจอ (Full-screen) กันครับ

โปรเจกต์นี้พัฒนาขึ้นบน Astro ซึ่งเป็นเฟรมเวิร์ก JavaScript สำหรับสร้างเว็บไซต์ที่โหลดไวและทรงพลังมาก โดยเราจะทำให้หน้าจอนี้แสดงทั้งสภาพอากาศปัจจุบัน พยากรณ์ล่วงหน้า 5 วัน และกราฟ Meteogram สุดล้ำที่ดูโปรสุดๆ (ขอขอบคุณโปรเจกต์ต้นฉบับจากคุณ infinitel8p บน GitHub ด้วยครับ)

ฮาร์ดแวร์และซอฟต์แวร์ที่ต้องใช้ 💻

• บอร์ด Raspberry Pi 5 (หรือใช้ Raspberry Pi CM4 / OS 32-bit หรือ 64-bit ก็ได้) รันบนระบบปฏิบัติการ Raspbian
• หน้าจอแสดงผล เช่น 7 inch Elecrow Pi Terminal หรือจอคอมพิวเตอร์ทั่วไป
• เมาส์และคีย์บอร์ด (แนะนำเป็น Bluetooth Mini Keyboard เพื่อความกะทัดรัด)

Step 1: โคลนโปรเจกต์และแทนที่ไฟล์ 📂

เริ่มต้นให้เปิดหน้าต่าง Terminal ขึ้นมา แล้วพิมพ์คำสั่งเพื่อโคลนโปรเจกต์จาก GitHub ลงมาที่โฟลเดอร์ /home/pi ของเราครับ

git clone https://github.com/infinitel8p/weather-forecast.git

หลังจากโหลดเสร็จ เราต้องมีการโมดิฟายไฟล์นิดหน่อยเพื่อให้แสดงผลได้สวยงามที่สุด โดยให้โหลดไฟล์ที่ปรับแก้แล้วจากลิงก์นี้ 👉 Modified_Files.zip แล้วนำไปวางทับไฟล์เดิมตามตำแหน่งนี้ครับ:

• index.astro นำไปวางทับใน /home/pi/weather-forecast/src/pages
• WeatherChart.jsx นำไปวางทับใน /home/pi/weather-forecast/src/components
• global.css นำไปวางทับใน /home/pi/weather-forecast/src/styles

Step 2: ตั้งค่า API Key และติดตั้ง Node.js ⚙️

เพื่อให้ดึงข้อมูลสภาพอากาศได้ คุณต้องไปสมัครและสร้าง Free API Key ที่เว็บไซต์ OpenWeatherMap ก่อน

1. เปิดไฟล์ .env แล้วใส่ API Key ที่ได้มาลงไป
2. เปิดไฟล์ notes.txt แล้วกรอกข้อมูลพิกัดละติจูด (Latitude), ลองจิจูด (Longitude), ประเทศ (Country) และรัฐ/จังหวัด (State) ของพื้นที่ที่คุณต้องการดูพยากรณ์
3. จากนั้นดาวน์โหลดและติดตั้ง Node.js สำหรับ Linux ให้เรียบร้อย
4. เปิด Terminal ชี้ไปที่โฟลเดอร์โปรเจกต์ แล้วรันคำสั่งติดตั้งไลบรารี:

npm install

Step 3: รันโปรแกรมและเปิดแบบ Full-screen 🚀

เมื่อติดตั้งทุกอย่างเสร็จสิ้น ก็ถึงเวลาสั่งรันเซิร์ฟเวอร์จำลองของเราครับ พิมพ์คำสั่งด้านล่างนี้ลงใน Terminal:

npm run dev

ระบบจะสร้าง LOCAL (address) ขึ้นมา ให้คลิกขวาแล้วเลือก Open in URL เบราว์เซอร์จะเปิดหน้าต่างขึ้นมา ทริคคือให้กดปุ่ม F11 เพื่อสลับหน้าต่างให้เป็นแบบเต็มจอ (Full screen) เท่านี้ก็เรียบร้อย!

สำรวจหน้าจอ UI: มีอะไรให้ดูบ้าง? 👀

หน้าตาของ Dashboard ตัวนี้ถูกออกแบบมาให้มองแค่แวบเดียวก็รู้เรื่องทั้งสัปดาห์เลยครับ ประกอบด้วย:

• มุมซ้ายบน: ข้อมูลพื้นฐาน สภาพอากาศปัจจุบัน, ไอคอนขนาดใหญ่, อุณหภูมิ, รวมถึงอุณหภูมิต่ำสุด/สูงสุดของวัน
• มุมขวาบน: ข้อมูลเชิงลึก เช่น ความเร็วลม, ความชื้น, ความกดอากาศ, ดัชนี UV, ทัศนวิสัย, เปอร์เซ็นต์เมฆ, และเวลาพระอาทิตย์ขึ้น-ตก
• ด้านล่าง: พยากรณ์อากาศล่วงหน้า 5 วันพร้อมอุณหภูมิสูงสุด
• ตรงกลาง (Meteogram): กราฟเส้นแบบไดนามิก แสดงแนวโน้มอุณหภูมิและความกดอากาศ พร้อมกราฟแท่งแนวตั้งแสดงปริมาณน้ำฝน

และที่เจ๋งสุดๆ คือระบบมี สองธีม (Color schemes) คือ ธีมสว่าง (กลางวัน) และ ธีมมืด (กลางคืน) ซึ่งจะสลับให้เองอัตโนมัติ สบายตาแน่นอนครับ!

วิดีโอสาธิตการทำงาน (Video Demo) 🎬

ติดตั้ง Node.js สำหรับรัน JavaScript Framework

สั่งรันเซิร์ฟเวอร์ผ่านคำสั่ง npm run dev ใน Terminal

การจัดวางเลย์เอาต์ข้อมูลพยากรณ์อากาศที่เข้าใจง่าย

ธีมสว่างสำหรับเวลากลางวัน (Day Theme)

ธีมมืดสำหรับเวลากลางคืน (Night Theme)