Vibe Coding ทำ Fortune Cookie คำทำนายประจำวันบน Mini Display

เปิดโต๊ะทำงานมาแล้วเจอคุกกี้เสี่ยงทายพร้อมข้อความคำทำนายประจำวันบน Mini Display เป็นจุดเริ่มต้นวันที่ทำให้ยิ้มได้ โปรเจกต์นี้จะดึงคำทำนายใหม่จาก API ทุกวันตามเวลาที่เราตั้ง สร้างเป็นภาพ GIF แล้วส่งขึ้น Mini Display ให้เองผ่าน Wi-Fi วงเดียวกัน

สิ่งที่ได้บน Mini Display:

• แอนิเมชันคุกกี้เสี่ยงทาย ตามด้วยข้อความ “Your Fortune”
• คำทำนายของวัน แสดงแบบพิมพ์ดีดทีละตัวอักษร
• Lucky numbers ชุดตัวเลขนำโชคใต้คำทำนาย

หลักการทำงานเบื้องหลัง

โปรแกรมนี้ทำงานบนคอมพิวเตอร์ของเรา วันละหนึ่งครั้งตามเวลาที่ตั้งไว้ โดยดึงคำทำนายจาก API, ประกอบเป็นภาพ GIF ไฟล์เดียว แล้วส่งเข้า Mini Display ผ่าน Wi-Fi วงเดียวกัน ไม่ต้องใช้เซิร์ฟเวอร์หรือ Cloud

1. รันวันละครั้งตามเวลาที่ตั้ง ตั้งด้วย RUN_AT รูปแบบ HH:MM แบบ 24 ชั่วโมง ค่าเริ่มต้นคือ 09:00 ตามเวลาของคอมพิวเตอร์
2. ดึงคำทำนายจาก API ใช้ tinyfn Fortune API (ส่ง API key ใน header X-API-Key) ได้ข้อความคำทำนายและ Lucky numbers ถ้าไม่ใส่ API key โปรแกรมจะใช้คำทำนายตัวอย่างแทน
3. สร้างภาพ Animation ในรูปแบบไฟล์ GIF และ ส่งไฟล์เข้า Mini Display ผ่าน Local Network ด้วย Endpoint ของรุ่นนั้น

ภาพที่ได้บน Mini Display

GIF หนึ่งไฟล์ประกอบด้วยสองช่วงต่อกัน แล้ววนซ้ำไปเรื่อย ๆ จนกว่าจะถึงรอบอัปเดตวันถัดไป

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

ต้องมี Mini Display หนึ่งตัวที่ต่อ Wi-Fi ได้แล้ว คอมพิวเตอร์ (macOS หรือ Windows) ที่ติดตั้ง Node.js และ API key จาก tinyfn ถ้าอยากได้คำทำนายจริงทุกวัน (ไม่มีก็ทดลองด้วยคำทำนายตัวอย่างได้)

ข้อจำกัดและข้อควรระวังก่อนเริ่ม

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

1. API key คือรหัสของเรา ใครได้ไปก็ใช้โควตาของเราได้ ให้วางลงไฟล์ .env เอง อย่าโพสต์ใน Chat ที่คนอื่นเห็น และอย่าส่งให้ AI ถ้าไม่จำเป็น ถ้าหลุดให้ขอ Key ใหม่จากเว็บ tinyfn
2. ทุกครั้งที่ Run Project จริงเสีย API หนึ่งครั้ง ตอนลองปรับหน้าตา ให้ใช้โหมดตัวอย่างเพื่อจะได้ไม่ต้องเรียก API ใหม่
3. อัปเดตวันละครั้ง Mini Display ค้างที่คำทำนายเดิมทั้งวัน ถ้าคอมพิวเตอร์ปิดอยู่ตอนถึง RUN_AT ก็ยังไม่ได้คำทำนายใหม่จนกว่าจะถึงรอบวันถัดไป (หรือสั่ง node watch.mjs --now ให้รันทันทีตอนเปิดเครื่อง)
4. ข้อความเป็นภาษาอังกฤษ คำทำนายจาก API เป็นภาษาอังกฤษ และฟอนต์บนการ์ดเป็นฟอนต์ละติน (Helvetica/Arial) ถ้าอยากได้คำทำนายภาษาไทย ต้องปรับโค้ดและฟอนต์ (ดูไอเดียต่อยอด)
5. ต้องมีคอมพิวเตอร์เปิดอยู่ โปรแกรมรันบนเครื่องเรา ถ้าเครื่อง Sleep หรือหลุดจาก Wi-Fi ตอนถึงเวลา Mini Display จะค้างที่ภาพเดิม และเวลา RUN_AT ใช้ Time Zone ของคอมพิวเตอร์

วิธีทำอย่างละเอียด

ตั้งค่า Mini Display

ทำให้ Mini Display ต่อ Wi-Fi 2.4GHz (หรือ Hotspot) วงเดียวกับคอมพิวเตอร์ และรู้ IP กับ Path อัปโหลดของรุ่นที่ใช้ ถ้ายังไม่เคยตั้งค่า ให้ทำตามบทความ วิธีตั้งค่า Mini Display (GeekMagic Ultra และ Smart Clock Pro Ultra) ก่อน แล้วกลับมาที่นี่

การตั้งค่า Mini Display จะทำให้ได้ IP ของจอ (เช่น 192.168.1.xxx) ที่ต้องเอาไปใส่ในไฟล์ .env ตามรุ่นที่ใช้:

⚠️ ไฟล์ .env.example ใน Repo ตั้งค่าเป็นของ Smart Clock Pro Ultra (/photo/upload และ /photo/) ถ้าใช้ GeekMagic Ultra ต้องแก้ทั้งสองบรรทัด

เอา API Key สำหรับคำทำนาย

สมัครบัญชีที่ tinyfn.io แล้วคัดลอก API key ของบัญชีเรา เก็บไว้ก่อน เดี๋ยวเอาไปวางในไฟล์ .env ด้วยตัวเองในขั้นถัดไป

ถ้ายังไม่อยากสมัคร ข้ามขั้นนี้ได้ ปล่อย FORTUNE_API_KEY ว่างไว้ โปรแกรมจะใช้คำทำนายตัวอย่างหนึ่งข้อ เหมาะสำหรับทดสอบว่าจอรับภาพได้ก่อน

ติดตั้งโปรเจกต์และทดสอบ

ติดตั้งโปรเจกต์ ตั้งค่า .env แล้วทดสอบทีละขั้น: สร้างภาพดูบนเครื่องก่อน ต่อด้วยส่งคำทำนายตัวอย่างขึ้นจอ แล้วค่อยใช้ API จริง การทดสอบเป็นขั้น ๆ ช่วยให้รู้ทันทีว่าติดที่การเชื่อมต่อจอหรือติดที่ API

ดาวน์โหลด Node.js

ดาวน์โหลด Node.js ที่ nodejs.org เวอร์ชั่น 22 ขึ้นไป ใช้ได้ทั้ง macOS และ Windows จากนั้นเช็กเวอร์ชั่นด้วย node -v

ดาวน์โหลดและติดตั้ง Project จาก GitHub

ไปที่ หน้า Project แล้วกด Code → Download ZIP แล้วแตกไฟล์ จากนั้นเปิด AI Tools อย่าง Claude, Codex หรือ Antigravity บนโฟลเดอร์ Project นั้น

กรณีที่ติดตั้ง Git หรือ GitHub Desktop สามารถ Clone Project มาได้เลย

แล้วสั่งให้ AI ช่วยติดตั้งให้ด้วย Prompt นี้

Setup Project นี้ ตาม AGENTS.md ทำตามขั้นตอนและอธิบายสิ่งที่ทำ

ระบบจะติดตั้ง package ที่จำเป็น และสร้างไฟล์ .env ให้

หากต้องการรันคำสั่งเองใน Terminal (macOS) หรือ PowerShell (Windows)

npm install
cp .env.example .env

สร้างและแก้ไฟล์ .env

เปิด .env ด้วยโปรแกรมแก้ข้อความ แล้วแก้ค่าตามนี้ (ตัวอย่างนี้เป็นของ Smart Clock Pro Ultra):

DEVICE_URL=http://192.168.1.106/photo/upload
UPLOAD_DIR=/photo/
FORTUNE_API_URL=https://tinyfn.io/v1/fun/fortune
FORTUNE_API_KEY=
RUN_AT=09:00

⚠️ ไฟล์ .env.example ใส่ตัวอย่าง FORTUNE_API_KEY=tf_live_xxx ไว้ ถ้าเรายังไม่มี Key จริง ให้ลบค่านี้ออกให้เหลือว่าง ไม่เช่นนั้นโปรแกรมจะส่ง Key ปลอมไปที่ API แทนที่จะใช้คำทำนายตัวอย่าง

วางค่า FORTUNE_API_KEY เองลงในไฟล์ .env อย่าส่ง Key ให้ AI ถ้าไม่จำเป็น ถ้าใช้ AI Agent ช่วยติดตั้ง ให้ AI ทำถึงขั้นสร้างไฟล์ .env แล้วเราค่อยวาง Key เอง

ถ้าอยากให้ AI Agent พาติดตั้งและทดสอบ ใช้ Prompt นี้ได้:

ช่วยติดตั้งโปรเจกต์ https://github.com/Datayolk/mini-display-fortune-cookie ให้ฉันทีละขั้น

- Mini Display รุ่น: [GeekMagic Ultra หรือ Smart Clock Pro Ultra]
- IP ของ Mini Display: [เช่น 192.168.1.106] (ถ้าฉันไม่ได้ใส่มา ให้ถามก่อน)
- ระบบปฏิบัติการ: [macOS หรือ Windows]

ทำให้ถึงขั้นสร้างไฟล์ .env และใส่ DEVICE_URL, UPLOAD_DIR ให้ตรงกับรุ่นจอ
แต่ห้ามขอ FORTUNE_API_KEY จากฉัน ให้ฉันวางเองลงไฟล์ .env แล้วบอกฉันว่าต้องวางตรงไหน
ถามฉันก่อนเสมอเมื่อจะรันคำสั่งที่เปลี่ยนภาพบนจอจริง
ถ้ามีอะไรที่ฉันต้องทำเอง ให้อธิบายเป็น Step by Step

รัน Project บน Mini Display Device จริง

ให้ AI Agent รัน Project ให้ใช้ Prompt นี้

รัน Project นี้เพื่อใช้งานจริง

หากต้องการรัน Project ใน Terminal ด้วยตัวเองให้ใช้คำสั่ง npm run watch

ไอเดียต่อยอด

โค้ดใน Project แยกเป็นส่วน ๆ ชัดเจน แก้เฉพาะจุดได้โดยไม่ต้องรื้อทั้งโปรเจกต์ ไอเดียด้านล่างยังไม่ได้ทำใน Repo ปัจจุบัน เป็นทิศทางที่ต่อยอดได้ และสั่ง AI Agent ให้ช่วยเขียนได้ (Vibe Coding)

• เปลี่ยนแอนิเมชันคุกกี้เป็นแบบของเรา แทนที่ไฟล์ fortune-cookie-animation.gif หรือสร้างแอนิเมชันใช้เอง
• ปรับระยะเวลาและความเร็วการแสดงผลข้อความ ปรับการแสดงผล
• เปลี่ยนสีและฟอนต์ ปรับการแสดงผล
• ทำคำทำนายภาษาไทย ให้ AI ช่วยแปลคำทำนายก่อนวาด และเปลี่ยนฟอนต์เป็นฟอนต์ที่รองรับภาษาไทย
• เปลี่ยนจากคำทำนายเป็นคำคม วันนี้ในอดีต หรือคำศัพท์ประจำวัน
• รวมกับ Google Calendar ใช้คู่กับโปรเจกต์ mini-display-calendar เพื่อสลับการแสดงผลคนละช่วงเวลา

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

• Facebook
• Twitter
• Line

DIY Fortune Cookie GeekMagic Ultra GIF Mini Display Node.js Smart Clock Pro Ultra Vibe Coding

Worakarn Ounhattapradit

วรกาญจน์ อุ่นหัตถประดิษฐ์ (ปีเตอร์) ผู้เชี่ยวชาญด้าน No-Code และ Vibe Coding ที่ปรึกษาธุรกิจที่ต้องการนำ Technology มาใช้ในองค์กร อ่านรายละเอียดเพิ่มเติม