Building ListenUp for My Kid

ช่วงนี้อยากมีกิจกรรมสั้น ๆ ที่นั่งทำกับลูกได้ทุกวัน — แบบไม่ต้องยื่นจอให้ลูกจ้องเอง เลยลองทำเว็บเล็ก ๆ ขึ้นมาตัวหนึ่งชื่อ ListenUp ไว้ฝึกฟังภาษาไทยวันละ 5 นาที

ไอเดียมันง่ายมากครับ: พ่อแม่อ่านเรื่องสั้นให้ลูกฟัง แล้วถามคำถามจับใจความ ลูกตอบด้วยปากเปล่า

จุดที่ผมชอบที่สุด — ตัด TTS ทิ้ง

ตอนแรกผมคิดว่าต้องมีเสียงอ่านในแอป (TTS) ให้ลูกฟัง แต่พอคิดไปคิดมา เสียง TTS ภาษาไทยมันยังฟังไม่ค่อยเป็นธรรมชาติ แถมต้อง host ไฟล์เสียง ต้องมี pipeline generate เสียงอีก

สุดท้ายเลยเปลี่ยนเป็น ให้พ่อแม่อ่านเอง — มีปุ่ม “อ่านให้ลูกฟัง” โชว์ประโยคบนจอ พ่อแม่อ่านออกเสียง ลูกฟังจากเสียงพ่อแม่จริง ๆ

พอตัด requirement ตรงนี้ออก:

ไม่ต้องมี audio pipeline เลย
ไม่ต้อง host ไฟล์เสียง
ไม่ต้องแก้ปัญหาเสียงไทยฟังแปลก ๆ

แถมได้คุณค่าที่ดีกว่าเดิมด้วย — เด็กได้ฟังเสียงพ่อแม่ ไม่ใช่เสียงหุ่นยนต์. บางทีการลบ feature ออกก็คือ feature

Content 90 เรื่อง มาจาก AI

ส่วนที่กินเวลาที่สุดของแอปแบบนี้คือ “เนื้อหา” — ผมให้ Claude ช่วย generate คลังเรื่องมา 90 เรื่อง แบ่งเป็น 3 ระดับ (ง่าย → ท้าทาย) และ 6 หมวด เช่น ครอบครัว สัตว์ มารยาท ธรรมชาติ มีทั้งเรื่องแต่งเองกับนิทานอีสปเล่าใหม่เป็นภาษาไทย

แต่เคล็ดลับคือ ห้ามขอลอย ๆ ว่า “เขียนนิทานมา 90 เรื่อง” ผมล็อก format ก่อน — กำหนดเป็น schema ว่าแต่ละเรื่องต้องมี:

ประโยคสั้น ๆ ที่พ่อแม่อ่านได้ใน 1 ลมหายใจ
คำถามจับใจความ 3 ข้อ (ถามให้คิด ไม่ใช่ถามคำต่อคำ)
เฉลยสั้น ๆ ให้พ่อแม่กดดูตอนให้คะแนน

แล้วค่อยให้ AI เติมเนื้อหาตาม schema นี้ — ได้ของที่คุมคุณภาพและระดับภาษาได้ตามที่ตั้งใจ

Stack — เรียบ ๆ ไม่มี backend

React + Vite + TypeScript + Tailwind — เป็น single-page app ตัวเดียว
ไม่มี backend, ไม่มี login — progress / สตรีค / ประวัติการเล่น เก็บใน localStorage ของ browser ล้วน
deploy เป็น static ขึ้น Hostinger ผ่าน Docker + nginx

พอไม่มี database ไม่มี API จากไอเดียถึง live บน domain จริงเลยเร็วมาก เพราะไม่มี infra ให้ดูแล

AI ช่วยตรงไหนบ้าง

เกือบทุกขั้นเหมือนเดิมครับ:

Code — Claude Code เขียน React component, screen, routing ทั้งหมด
Content — Claude generate คลัง 90 เรื่อง + คำถาม + เฉลย ตาม schema
Asset — มาสคอตเด็กผู้ชายกับโลโก้ generate ด้วย AI image
Deploy — Dockerfile + nginx config ก็ให้ Claude Code เขียนให้

ส่วนที่ยังต้องเป็นคนตัดสินใจ คือ “จะตัด TTS ทิ้งไหม” และ “เนื้อหาควรเป็นแนวไหน เพื่อใคร” — อันนี้ AI ช่วยคิดได้ แต่คนต้องเลือก

ลองเล่นได้เลย

เปิดที่ listenup.gongideas.com ใครมีลูกเล็กลองเอาไปฝึกกับลูกวันละ 5 นาทีดูครับ