สร้างแอพ Daily Goal Tracker ใช้เองด้วย AI - เปิดได้ทั้งมือถือและคอม

หลาย ๆ คนน่าจะมีแอปเอาไว้จดโน้ตของตัวเอง — วันนี้ทำอะไรไปบ้าง ได้ตามเป้าหมายไหม หรือไปทำอะไรมาก็อยากจดไว้ส่วนตัว ผมเองก็จดมาตลอด เคยเอา Notion และแอปอื่น ๆ อีกหลายตัวมาลองใช้ แต่ส่วนใหญ่มันยังไม่ค่อยตอบโจทย์การใช้งานของผม — บางอันฟีเจอร์เยอะไป บางอันจดยากไป บางทีแค่อยากจดอะไรสั้น ๆ ก็กลับยุ่งยาก

ผมเลยมีไอเดียขึ้นมาว่า ถ้าเอา AI มาทำแอปตัวนี้เองเลยน่าจะตอบโจทย์ได้ ก็เลยเป็นที่มาของตอนนี้ — ผมทำ Daily Goal Tracker ส่วนตัวขึ้นมาด้วย Claude แล้วอยากมาเล่าให้ฟัง เผื่อใครฟังแล้วอยากเอาไปประยุกต์ทำแอปจดบันทึกของตัวเองบ้าง

สองอย่างที่ผมอยากจดเป็นประจำ

เวลาผมจดอะไรในแต่ละวัน หลัก ๆ มันมีอยู่ 2 อย่างที่อยากจดประจำ:

• เรื่องออกกำลังกาย — วันนี้ออกกำลังกายอะไรไปบ้าง และมีเป้าในการออกกำลังกาย
• เป้าหมายประจำวัน — งานต่าง ๆ ที่ต้องโฟกัสในแต่ละวัน ทั้งงานประจำ งานส่วนตัว และเป้าหมายส่วนตัวอื่น ๆ

พอโจทย์เป็นแบบนี้ ผมก็เลยเอามาทำเองด้วย AI

iamDiary ทำอะไรได้บ้าง

ผมเรียกแอปที่ทำขึ้นมาใช้เองว่า iamDiary ตัวแอปจะออนไลน์อยู่ตลอด ดูได้ทั้งจากมือถือและจากในคอม ฟีเจอร์หลัก ๆ คือ

• บันทึกซ้อม — จดว่าวันนี้วิ่งไปกี่กิโล ใช้เวลากี่นาที และสรุปว่าสัปดาห์ที่ผ่านมาออกกำลังกายเป็นยังไง
• Success Diary — จดสิ่งที่ทำสำเร็จในแต่ละวัน หรืออะไรที่รู้สึกอยากขอบคุณตัวเอง
• เช็คอินวันนี้ — วันนี้เป็นยังไง มีความสุขไหม งานทำได้ดีไหม ได้พัฒนาตัวเองไหม
• ประวัติ — ทั้งหมดที่จดไป ย้อนกลับมาดูเป็นเหมือนเจอร์นัลของเราได้

มันไม่ได้มาทีเดียว — ค่อย ๆ พัฒนาทีละเวอร์ชัน

จริง ๆ แล้วแอปนี้ไม่ได้มีฟีเจอร์เยอะขนาดนี้ตั้งแต่แรก ผมค่อย ๆ ต่อยอดมันขึ้นมา

เวอร์ชันแรก — เริ่มจากจดเรื่องวิ่ง

ตอนแรกผมเริ่มจากแค่อยากได้แอปจดเรื่องวิ่งอย่างเดียว พร้อมท์แรกที่คุยกับ Claude คือ "ผมอยากทำเป็นระบบจดโน้ตบน HTML แบบง่าย ๆ เพื่อ tracking การออกกำลังกายและการวิ่ง อยากได้เป็นไอเดียแล้ววางแผนประยุกต์มาทำเป็นแบบฉบับของเราเอง" — Claude ก็ไปช่วยหาข้อมูลมาให้ แล้วทำออกมาเป็นเวอร์ชันแรก เป็น dark theme หน้าเดียว จดเรื่องวิ่งได้ว่าตั้งเป้าอะไร วิ่งไปกี่กิโล ใช้เวลากี่นาที

เวอร์ชันสอง — เพิ่ม Success Diary

พอได้ตัวแรกมาก็รู้สึกว่าง่ายดี เลยต่อยอดต่อ เพราะนอกจากเรื่องออกกำลังกาย ผมก็อยากจดเรื่อง success ที่วันนั้นทำสำเร็จด้วย ที่ผ่านมาถ้าอยากจดอะไร ผมต้องเปิดโน้ตบ้าง เปิด Obsidian บ้าง แล้วก็ต้องไปไล่หา ผมเลยบอก requirement กับ Claude ว่าอยากได้เมนู Success Diary ที่กรอกเสร็จแล้วบันทึกเป็น bullet ได้เลย หน้าแรกอยากให้ simple จดได้เร็ว เลือกได้ว่าจะจดเรื่องซ้อมหรือ Success Diary กดดูย้อนหลังได้ และขอเป็น light theme ด้วย ระหว่างทาง Claude ก็จะเสนอโครงสร้างมาให้ พอเห็นด้วยแล้วผมก็กด accept ให้ทำต่อ สุดท้ายได้ออกมาเป็นเวอร์ชันสอง

เวอร์ชันปัจจุบัน — เพิ่มเช็คอินวันนี้

จากนั้นผมเพิ่มเรื่องเช็คอินวันนี้เข้าไป ว่าวันนี้ทำอะไรไปบ้าง ได้ตามเป้าหมายที่วางไว้ไหม จนกลายเป็นแอปตัวปัจจุบัน พอ AI ค่อย ๆ ทำความเข้าใจเรา เราอธิบายไป มันก็ค่อย ๆ ได้สิ่งที่ต้องการออกมา

ทำยังไงให้ออนไลน์ + sync ข้ามเครื่อง

สิ่งที่ผมคิดว่าต้องมีคือ แอปต้องเข้าถึงได้ทั้งจากมือถือและคอม ออนไลน์ตลอด และข้อมูล sync หากัน ผมเลยถาม Claude ตรง ๆ ว่าทำยังไงดี Claude แนะนำมา 3 วิธี วิธีที่น่าสนใจที่สุดคือ Artifact Capability

Claude มีฟีเจอร์หนึ่งชื่อ Artifact — คือให้ AI สร้างหน้าเว็บที่ใช้งานได้จริงขึ้นมา แล้วโฮสต์ให้เลย เราไม่ต้องมีเซิร์ฟเวอร์ ไม่ต้องหาโฮสติ้ง ไม่ต้องหาโดเมนเอง มันข้ามขั้นตอนพวกนี้ไปหมด ข้อมูลจะถูกเก็บบนเซิร์ฟเวอร์ผูกกับบัญชีเรา ทำให้ไม่ว่าจะเปิดจากมือถือหรือคอม ก็เข้าถึงข้อมูลชุดเดียวกันได้ และ save/update ได้ด้วย — เหมาะกับ mini-app ที่เอาไว้ใช้ส่วนตัวแบบนี้พอดี

ฝั่ง OpenAI ก็ทำได้เหมือนกัน

ผมใช้ทั้ง Claude และฝั่ง OpenAI/ChatGPT เลยอยากรู้ว่า ChatGPT มีฟีเจอร์แบบนี้ไหม ปรากฏว่าฝั่ง OpenAI Codex ก็มีฟีเจอร์คล้าย ๆ กันเรียกว่า OpenAI Sites ผมลองให้มัน clone iamDiary ไป ก็เห็นว่าทำงานได้แบบเดียวกันเลย

OpenAI Sites หลัก ๆ คือสั่งให้ AI build เว็บแอปขึ้นมา แล้ว deploy + โฮสต์ให้ พร้อม URL ที่แชร์ได้ จะใช้เองคนเดียวหรือแชร์ให้ทีมก็ได้ และคุมสิทธิ์คนเข้าถึงลิงก์ได้ด้วย มีฐานข้อมูล (Cloudflare) เก็บไฟล์อยู่ในนั้น ฟีเจอร์นี้มีมาตั้งแต่ประมาณเดือนกรกฎาคมที่ผ่านมา

เพราะฉะนั้น ถ้าอยากทำแอปจดไดอารีแบบนี้ ไม่ว่าจะใช้ Claude อยู่หรือใช้ OpenAI Codex อยู่ ก็ทำได้ทั้งคู่

ทำให้เหมือนแอปจริงด้วย Add to Home Screen

แอปนี้ทำงานเป็น Browser HTML เป็นหลัก เวลาใช้งานก็เปิดผ่านบราวเซอร์อย่าง Chrome ถ้าอยากให้เหมือนแอปมากขึ้น วิธีหนึ่งคือ เปิดแอป (Artifact) ขึ้นมาใน Chrome บนมือถือ แล้วกดเลือก Add to Home Screen พอกดเสร็จเราจะได้ไอคอนบนหน้าจอ กดแล้วเข้าโปรแกรมแบบ full screen เต็มจอ เหมือนใช้แอปจริง ๆ เลย แถมตั้งชื่อได้ด้วย — ผมก็ตั้งว่า iamDiary

สิ่งที่ได้เรียนรู้

• ทุกวันนี้อยากทำแอปส่วนตัวใช้เอง มันง่ายขึ้นเยอะมาก เพราะ AI ช่วยได้เยอะ
• ไม่จำเป็นต้อง perfect ตั้งแต่แรก ของผมเริ่มจากฟีเจอร์เดียวคือจดเรื่องวิ่ง แล้วค่อย ๆ คุยเพิ่มทีละนิด จนได้ครบแบบที่อยากได้
• รู้ technical นิดหน่อยช่วยให้ทำบางอย่างง่ายขึ้น ถ้าเราไม่ได้อยู่สายไอที บางคำอย่าง HTML คืออะไร เอาไป deploy หรือ online ยังไง อาจไม่คุ้น แต่พอใช้ AI บ่อย ๆ เดี๋ยวก็เริ่มคุ้นเอง
• ข้อสำคัญที่สุด: รู้ความต้องการตัวเองให้ชัด ถ้าเรามี requirement ที่ชัด และอธิบายให้ AI เข้าใจได้ว่าเราอยากได้อะไร ความชัดเจนตรงนี้ช่วยชดเชยเรื่องที่เราไม่รู้เชิงเทคนิคได้ พอ AI เข้าใจ มันก็เสนอไอเดียและพัฒนาออกมาเป็นแอปให้เราได้

ใครสนใจก็ลองเอาไปประยุกต์ทำของตัวเองดูได้ครับ