Vibe Coding สร้าง App แชร์ภาพลง Mini Display (GeekMagic Ultra) ผ่าน Web App

วิธีสร้างระบบแชร์ภาพขึ้นจอ Mini Display แบบอัตโนมัติด้วย Vibe Coding โดยใช้ Vercel เป็นตัวกลางรับ-ส่งไฟล์ภาพ จอ Mini Display ที่ซื้อมาตามปกติจะวนแสดงได้แค่รูปที่อัปโหลดเองทีละภาพ ระบบนี้เพิ่มชั้นให้เพื่อนอัปโหลดรูปเข้ามาได้เอง แล้วจอเปลี่ยนภาพอัตโนมัติตามรอบเวลาที่ตั้งไว้

โปรเจกต์แบ่งเป็นสองส่วนที่ทำงานคู่กัน คือโปรแกรม Receiver ที่รันอยู่บนคอมพิวเตอร์ และเว็บแอป Collector ที่ Deploy บน Vercel ให้เพื่อนอัปโหลดรูป ทั้งสองส่วนเป็น Open Source พร้อมโค้ดให้โหลดไปรันเอง หรือ Vibe Coding ต่อยอดเป็นของตัวเองได้

หลักการทำงาน

ระบบมีสามส่วนที่ทำงานต่อกันเป็นทอด ๆ

• Collector คือเว็บแอปที่ Deploy บน Vercel เปิดให้เพื่อนอัปโหลดรูปผ่าน URL /upload/:name แล้วเก็บไฟล์ไว้บน Vercel Blob Storage ส่วน Receiver ก็จะไปดึงรูปจาก /get/:name ของ slot นั้นมาส่งขึ้นจอต่อ
  
• Receiver คือโปรแกรม Desktop (Electron) ที่รันอยู่บนคอมพิวเตอร์เราเบื้องหลัง ทำหน้าที่ตั้งเวลาไปดึงรูปล่าสุดจากลิงก์ที่กำหนดไว้ ย่อขนาดเป็น 240×240 อัตโนมัติ แล้วส่งขึ้นจอ MiniDisplay ผ่าน LAN ให้เองตามรอบเวลาที่ตั้งไว้
• MiniDisplay คือตัวจอแสดงผลขนาดเล็กที่มี Wi-Fi ในตัว (เช่น GeekMagic Ultra หรือ Smart Clock Pro Ultra) เปิด Local Port ไว้ให้อัปโหลดภาพที่ Folder ของเครื่องเช่น /image/ เข้าไปแสดงผลได้โดยตรงผ่าน URL อย่าง http://192.168.xx.xx/doUpload

โดยเมื่อใช้งานจริง ระบบจะทำงานแบบนี้: ผู้ใช้งานอัปโหลดรูปเข้า Collector (บน Vercel) → Receiver (ทำงานบนคอมเรา) ดึงรูปไปตามรอบเวลา → ส่งภาพเข้า MiniDisplay ผ่าน Wi-Fi วงเดียวกัน

สิ่งที่ต้องเตรียม

• เครื่อง Mini Display รุ่นใดก็ได้ต่อไปนี้
  • GeekMagic Ultra ราคาประมาณ 500 บาท (สั่งซื้อ, วิธี Setup ก่อนทำโปรเจค)
  • Smart Clock Pro Ultra ราคาประมาณ 350 บาท (สั่งซื้อ, วิธี Setup ก่อนทำโปรเจค)
• Node.js เวอร์ชัน LTS: โหลดที่ nodejs.org หรือติดตั้งผ่าน nvm (Mac) / nvm-windows (Windows) ถ้าจะรัน Collector จาก Source เอง
• Git: โหลดที่ git-scm.com (Mac ที่มี Homebrew ใช้ brew install git ได้เลย)
• Vercel Account: สมัครฟรีที่ vercel.com/signup ใช้ login ด้วย GitHub ได้ ใช้สำหรับ Deploy โปรเจกต์และสร้าง Blob Store เก็บรูป
• AI coding agent : สำหรับ Vibe Coding ต่อยอด – Claude Desktop, Codex, หรือ Antigravity

ข้อจำกัดที่ควรรู้ไว้ก่อนเริ่ม: จอ MiniDisplay รับภาพขนาด 240×240 พิกเซล รองรับแค่ไฟล์ภาพกับ GIF เท่านั้น ต่อให้ปรับโค้ดสวยแค่ไหนก็ไม่เกินสเปกของจอ

วิธีการทำ

ขั้นตอนทั้งหมดเรียงเป็น 3 ช่วง: ตั้งค่าจอ MiniDisplay ให้ต่อ Wi-Fi ก่อน จากนั้นติดตั้ง Receiver App ให้ดึงรูปไปส่งขึ้นจอ แล้วค่อยติดตั้ง Collector ให้เพื่อนอัปโหลดรูปเข้ามา

ตั้งค่า MiniDisplay

ต้องต่อจอ MiniDisplay เข้า Wi-Fi ให้เรียบร้อยก่อน ถึงจะไปตั้งค่า Receiver App ต่อได้:

1. เปิดจอ MiniDisplay แล้วเข้าเมนูตั้งค่า Wi-Fi บนตัวจอ (ปุ่ม/เมนูต่างกันตามรุ่น ดูขั้นตอนละเอียดจากคู่มือของรุ่นที่ใช้ได้ที่ GeekMagic Ultra / Smart Clock Pro Ultra)
2. เชื่อมต่อ Wi-Fi 2.4GHz หรือ Personal Hotspot วงเดียวกับเครื่องคอมพิวเตอร์ที่จะรัน Receiver App (จอกลุ่มนี้ไม่รองรับ Wi-Fi 5GHz)
3. เมื่อเชื่อมต่อสำเร็จ จอจะแสดง IP Address ของตัวเองขึ้นบนหน้าจอ (เช่น 192.168.1.xx) ให้จด IP นี้ไว้
4. ทดสอบเปิดเบราว์เซอร์เข้า URL ตาม Port ของรุ่นจอ เช่น GeekMagic Ultra คือ http://<IP>/doUpload (Directory /image/) หรือ Smart Clock Pro Ultra คือ http://<IP>/photo/upload (Directory /photo/) ถ้าเข้าได้แปลว่าจอพร้อมรับภาพผ่าน Wi-Fi แล้ว
5. ตั้งค่าให้ระบบโชว์เป็น Photo Album ,เปลี่ยนภาพ ๆ ทุก 60 วินาที และลบภาพ Default ทั้งหมด

IP Address และ Port ที่ได้ตรงนี้ คือค่าที่ต้องเอาไปกรอกเป็น Device URL และ Directory ในขั้นตอนตั้งค่า Receiver App ถัดไป

ติดตั้ง Receiver App

Receiver คือโปรแกรมที่รันอยู่บนคอมพิวเตอร์เรา คอยดึงรูปจาก Collector มาส่งขึ้นจอ

Download Program

เข้าหน้า Releases ของ mini-display-receiver-photo แล้วโหลดไฟล์ตาม Platform ของเครื่อง:

• Mac → MiniDisplay-macOS-version-arm64.dmg
• Windows → MiniDisplay-windows-version.exe

วิธีนี้ไม่ต้องลง Node.js ไม่ต้องรันคำสั่งอะไรเลย เหมาะกับคนที่แค่อยากใช้งาน ถ้าอยากดูโค้ดหรือแก้ไขต่อเอง ให้ Clone Source มารันแทน (git clone https://github.com/Datayolk/mini-display-receiver-photo.git แล้ว npm install และ npm run dev โดย ต้องลงโปรแกรม Node.js)

Installation

เปิดไฟล์ที่โหลดมาเพื่อติดตั้งตามปกติ เนื่องจาก App ไม่ได้ Submit ขึ้น Store ทำให้เครื่องจะเตือนตอนเปิดครั้งแรก (ไม่เป็นอันตราย)

MacOS ขึ้น “Apple could not verify…” ให้ไปที่ System Settings → Privacy & Security เลื่อนหาข้อความแอปที่ถูกบล็อก กด Open Anyway แล้วยืนยันอีกครั้ง (อาจต้องใส่รหัสหรือ Touch ID) ทำครั้งเดียวพอ

---

Windows ขึ้นเตือน SmartScreen เป็นเรื่องปกติเพราะไฟล์ยังไม่ได้เซ็นเซอร์ทิฟิเคต กด More info → Run anyway

Run Program

เปิด App แล้วกรอกค่าตามรุ่นจอที่ใช้เพื่อทดสอบ

Brand	Device URL	Upload Directory
GeekMagic Ultra	http://192.168.xx.xx/doUpload	/image/
Smart Clock Pro Ultra	http://192.168.xx.xx/photo/upload	/photo/

(แทน 192.168.xx.xx ด้วย IP จริงของจอในเครือข่ายคุณ)

ตัวอย่างแนวทางการกรอกข้อมูล

1. ใส่ Web Image URL ทดสอบก่อนด้วยภาพสุ่มจาก https://picsum.photos/250.jpg (ต้องเป็น Direct Image Link ที่ตอบกลับ Content-Type: image/* ไม่ใช่หน้าเว็บ Preview)
2. ใส่ Device URL และ Directory ตามตารางด้านบน
3. กด Save settings
4. กด Push now เพื่อดึงรูป+ส่งขึ้นจอทันที 1 ครั้ง
5. เช็กสถานะที่หน้า App หากขึ้น Success แปลว่ารูปขึ้นจอแล้ว ถ้าขึ้น Error ให้เช็ก IP ของจอว่าเปลี่ยนไปหรือยัง หรือเช็กว่าเครื่องกับจออยู่ Wi-Fi วงเดียวกันจริงไหม
6. กด Start เพื่อเริ่มดึงรูปอัตโนมัติตามรอบเวลาที่ตั้งไว้: ปล่อยแอปทำงานอยู่ใน System Tray ได้เลย ไม่ต้องเปิดหน้าต่างค้างไว้

พอ Push now แล้วขึ้น Success กับภาพสุ่ม แปลว่า Receiver คุยกับจอได้แล้ว ขั้นต่อไปคือเปลี่ยน Web Image URL จากภาพสุ่ม ให้ไปชี้ที่ลิงก์จาก Collector แทน

เปิดใช้งาน Vercel Storage

โปรเจกต์เก็บรูปที่อัปโหลดไว้บน Vercel Blob ต้องสร้าง Store ก่อนถึงจะรันได้ (ใช้ค่าเดียวกันได้ทั้งตอนรัน Local และตอน Deploy จริง):

1. เข้า vercel.com/dashboard → เลือก (หรือสร้าง) Project
2. ไปแท็บ Storage → เลือก Blob
3. กรอกฟอร์มสร้าง Store:

• Store name: ตั้งชื่ออะไรก็ได้ เช่น mini-display
• Access: เลือก Public (จำเป็น เพราะหน้า /get/[name] ต้องดึงรูปแบบ Public URL ได้)
• Region: เลือก Region ที่ใกล้ผู้ใช้งานที่สุด เช่น Tokyo ถ้าใช้งานในไทย/เอเชีย

1. กด Create แล้วเข้าไปที่หน้า Store จะเจอ BLOB_READ_WRITE_TOKEN ในแท็บ Quickstart (ใต้หัวข้อ .env.local) และ BLOB_STORE_URL ในแท็บ Settings → Store Access

พอรัน Local สำเร็จแล้ว วิธีใช้คือเปิดหน้าแรก ตั้งชื่อ Slot เช่น living-room ระบบจะพาไปหน้า /upload/living-room ให้แก้ไขรูป (ครอป/ใส่ข้อความ) แล้ว Export เป็นภาพ 240×240 กดอัปโหลดแล้วรูปจะถูกเก็บไว้ที่ Slot นั้นบน Vercel Blob ทันที ส่วน Receiver ก็ไปดึงรูปล่าสุดของ Slot ผ่าน GET /get/living-room มาส่งขึ้นจอต่อ โดยหนึ่งเว็บรองรับหลาย Slot พร้อมกันได้ ให้เพื่อนกี่คนก็อัปโหลดของใครของมัน

ได้ BLOB_READ_WRITE_TOKEN และ BLOB_STORE_URL ครบแล้ว กลับไปทำตามขั้นตอน Deploy ขึ้น Vercel ผ่าน GitHub ในหัวข้อ Setup Program ได้เลย

ติดตั้งโปรแกรม Collector

Collector คือเว็บแอปที่ให้เพื่อนอัปโหลดรูปเข้ามา รันบน Vercel ทั้งตอน Develop และตอนใช้งานจริง

Setup Program

Clone และติดตั้งโปรเจกต์ด้วย Git โดยสามารถให้ AI Coding Agent ช่วยติดตั้งให้ได้ทั้งหมด แค่ก็อปปี้วิธีการทำทั้งขั้นตอนนี้ไปวางให้ AI ทำตามได้เลย:

---

### Prompt: การติดตั้ง Node.js Project จาก GitHub

**Role & Goal:**
คุณคือ DevOps Engineer ที่มีหน้าที่ทำการ Clone และ Setup โปรเจกต์ Node.js จาก GitHub ให้พร้อมใช้งาน โดยปฏิบัติตามกระบวนการ **Verify -> Install -> Report** อย่างเคร่งครัด

---

#### Step 1: Verify (ตรวจสอบความพร้อมของระบบ)

ก่อนเริ่มกระบวนการ ให้ตรวจสอบสภาพแวดล้อมของเครื่องเป้าหมาย ดังนี้:

1. **ตรวจสอบความพร้อมของ Tools:**
* เช็กว่ามี `git`, `node`, และ `npm` ในระบบหรือไม่ (ผ่านคำสั่ง `git --version`, `node -v`, `npm -v`)
* *หากไม่มี Tool ใด ให้หยุดการทำงานและแจ้งเตือนผู้ใช้ทันที*


2. **ตรวจสอบ Directory:**
* เช็กว่าโฟลเดอร์ `mini-display-collector-photo` มีอยู่อยู่แล้วใน Directory ปัจจุบันหรือไม่
* *หากมีอยู่แล้ว ให้แจ้งเตือนก่อนดำเนินการต่อ หรือเปลี่ยนไปใช้โฟลเดอร์นั้นโดยไม่ต้อง Clone ซ้ำ*



---

#### Step 2: Install (ดำเนินการติดตั้ง)

เมื่อการตรวจสอบผ่านทั้งหมด ให้รันชุดคำสั่งตามลำดับดังนี้:

1. **Clone Repository:**
```bash
git clone https://github.com/Datayolk/mini-display-collector-photo.git

```


2. **เข้าสู่ Directory โปรเจกต์:**
```bash
cd mini-display-collector-photo

```


3. **ติดตั้ง Dependencies:**
```bash
npm install

```


4. **ตั้งค่า Environment File:**
* สำหรับ **Linux/macOS/Git Bash**:
```bash
cp .env.example .env.local

```


* สำหรับ **Windows Command Prompt (CMD)**:
```cmd
copy .env.example .env.local

```


* สำหรับ **Windows PowerShell**:
```powershell
Copy-Item .env.example -Destination .env.local

```





---

#### Step 3: Report (ตรวจสอบและรายงานผล)

ทำการตรวจสอบความสมบูรณ์หลังการติดตั้ง และสรุปรายงานในรูปแบบดังนี้:

1. **การตรวจสอบผลลัพธ์ (Validation):**
* [ ] โฟลเดอร์ `node_modules` ถูกสร้างขึ้นเรียบร้อยแล้ว
* [ ] ไฟล์ `.env.local` ถูกสร้างขึ้นเรียบร้อยแล้ว


2. **รูปแบบการรายงาน (Output Format):**
```text
==================================================
INSTALLATION REPORT
==================================================
Status: [SUCCESS / FAILED]
Repository: https://github.com/Datayolk/mini-display-collector-photo.git
Directory: ./mini-display-collector-photo

Checklist:
[✓] Git Clone Complete
[✓] Dependencies Installed (node_modules created)
[✓] Environment File Created (.env.local)

Next Steps:
1. ตรวจสอบและแก้ไขค่า Configuration ในไฟล์ .env.local (ถ้ามี)
2. เริ่มต้นใช้งานโปรเจกต์ด้วยคำสั่ง:
   $ cd mini-display-collector-photo
   $ npm run dev (หรือ npm start)
==================================================

```


*(หมายเหตุ: หากพบ Error ในขั้นตอนใดขั้นตอนหนึ่ง ให้แสดงข้อความ Error Log พร้อมแนวทางการแก้ไขปัญหาเบื้องต้น)*

แก้ไข .env.local ใส่ค่าที่จำเป็น 3 ตัว:

BLOB_READ_WRITE_TOKEN=vercel_blob_rw_...
SECRET=<strong-random-secret>
BLOB_STORE_URL=https://<store-id>.public.blob.vercel-storage.com

BLOB_READ_WRITE_TOKEN กับ BLOB_STORE_URL ได้มาจากขั้นตอน Setup Vercel Storage ด้านล่าง ส่วน SECRET ตั้งเองเป็นค่าสุ่มที่คาดเดายาก ใช้ป้องกันหน้า Upload (Client จะส่งค่านี้ผ่าน Header x-upload-secret) หรือจะไม่ใส่ค่านี้ก็ได้ถ้าไม่ต้องการป้องกันหน้า Upload

Run Program

ทดสอบโดยการ รัน npm run dev แล้วเปิด http://localhost:3000 เพื่อทดสอบ

• เข้า /upload/:name (เช่น /upload/test) เพื่ออัปโหลดรูป
• เข้า /get/:name (เช่น /get/test) เพื่อเช็กว่าดึงรูปที่เพิ่งอัปโหลดขึ้นมาแสดงได้จริง
• เอา URL /get/:name นี้ไปใส่เป็น Web Image URL ใน Receiver App ได้เลย เช่น localhost:3000/get/peter (ถ้า Deploy ขึ้น Vercel แล้วก็เปลี่ยนเป็น URL จริงแทน)

Publish Web App

ทดสอบผ่านแล้วอยากให้เพื่อนใช้งานจริงผ่านอินเทอร์เน็ต ให้ Deploy ขึ้น Vercel ผ่าน GitHub:

1. สร้าง Repository ใหม่บน GitHub แล้ว Push โค้ดโปรเจกต์นี้ขึ้นไป
2. เข้า vercel.com/new เลือก Import Git Repository แล้วเลือก Repo ที่เพิ่ง Push ขึ้นไป จากนั้น Vercel จะตรวจพบว่าเป็นโปรเจกต์ Next.js และตั้งค่า Build ให้อัตโนมัติ
3. ก่อนกด Deploy ให้ใส่ Environment Variables ให้ครบ 3 ตัว (BLOB_READ_WRITE_TOKEN, BLOB_STORE_URL, SECRET) เหมือนใน .env.local (ถ้ายังไม่ได้สร้าง Vercel Blob Store ดูวิธีได้ที่หัวข้อ Setup Vercel Storage)
4. กด Deploy แล้ว Vercel จะ Build ให้และได้ URL จริงมาแชร์ให้เพื่อนอัปโหลดได้เลย ครั้งต่อไปแค่ Push โค้ดใหม่ขึ้น GitHub Vercel จะ Deploy ให้อัตโนมัติ

FAQ คำถามที่พบบ่อย