iannnnn.com

ต่อจากโพสต์ลองใช้ AI เขียนเว็บค้นคอร์ดเพลง ที่เป็นเว็บคอร์ดอูคู่เลเล่ใช้เองเล่นเอง เขียนด้วย DeepSeek (สมัยนั้น AI มันยังไม่ค่อยคล่อง) (ส่วนเดี๋ยวนี้มันคล่องไปไกลแล้ว แต่เราใช้เป็นแค่นี้)

ล่าสุดเมื่อคืนก็เพิ่งทำเว็บอัปเดต เป็นภาคต่อที่รื้อเว็บเดิมแล้วทำใหม่เรียกว่าเกือบทั้งหมด คราวนี้ใช้ Gemini ครับ

อ้ะ ลองดูก่อนนะพี่ชาย

anndo.com/u

ก่อนหน้านี้ อินเทอร์เฟซมันเป็นแบบ Dashboard มีการ์ดชื่อเพลงเรียงกันเยอะๆ ชอบอันไหนก็กด แล้วมันก็แค่เปิดไฟล์ภาพเพียวๆ แล้วค่อยกด back กลับมา ความสามารถที่แอบทำเพิ่มต่อมาคือมีปุ่มดาวให้กด favorite ได้ โดยที่มันจะเก็บข้อมูลใน local storage

ปรากฏว่ามันเป็นเว็บแอปที่เราเองใช้บ่อยมากๆ เพราะว่างๆ กินข้าวเสร็จก็มานั่งหัดดีดเพลง ตุ๊งแหน่วๆ ทุกวัน

แล้วบางทีก็ใช้ในไอแพดบ้าง มือถือบ้าง คอมพ์บ้าง ก็จะเจอปัญหาที่ว่า เพลงที่กดดาวไว้มันไม่ได้ซิงก์ข้ามเครื่องข้ามอุปกรณ์ ทำไงดีล่ะ

พอเมื่อวานซืนสงสัยขึ้นมา ก็เลยถามน้องเจม น้องบอกว่า เออเดี๋ยวร่างให้เลย เดี๋ยวนี้เขามี serverless cloud database อะไรงี้แล้วนะ อยู่ในชุด backend ที่ชื่อ Firebase ของกูเกิล และใช้ฟรีด้วย!

การหยุดทำเว็บมาสิบกว่าปี โลกมันไปไกลขนาดนี้เลยเหรอ

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

• ทำให้มี Google Login สามารถล็อกอินเพื่อ favorite เพลงได้
• ทั้งนี้มันจะเก็บ view count ไว้ด้วยว่าเพลงไหนเราชอบ เราเล่นบ่อย เดี๋ยวค่อยว่ากันว่าจะเอาไปพัฒนาอะไรต่อ

ไหนๆ ก็ไหนๆ เอาความรู้จากการทำเว็บทดสอบ Kerning ที่มี toolbox ลอยๆ แล้วด้านหลังเป็น canvas พ่นอะไรก็ได้ลงไป (สนุกมาก) มาปรับใช้กับเว็บนี้ ก็คือเปลี่ยนเลย์เอาต์ เปลี่ยน UX/UI ไปเลย

กลายเป็นค้นคอร์ดเพลง แล้วก็เปิดเล่นในหน้าเดียวกันได้เลย แต่ถ้าชอบโหมดคลาสสิกก็ยังคงไว้ได้อยู่

และแก้ปัญหาเรื่องการโหลดหนัก ภาระของเซิฟเวอร์ ด้วยการเอาลิสต์เพลงไปไว้บน Firebase ให้หมด ถ้าอัปเพลงใหม่ก็ใส่ “คำสั่งลับ” ลงในช่องค้นหาเท่านั้นเอง (อันนี้เราสนุกมาก เหมือนเล่นเกมแล้วมี cheat code)

นั่งทำ ยืนทำ เดินทำ กินข้าวไปก็สั่งมันไป กำกับมันไปเรื่อยๆ วนๆ งี้ทั้งวัน จนเสร็จเมื่อคืน รู้สึกว่าสมบูรณ์ละ ใช้ได้ 555555

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

สรุปว่าได้เว็บที่เบาและสวยดั่งใจปอง พอจบโปรเจกต์ก็กล่าวชมน้องเจมมัน และขอให้ทำ infographic สรุปเรื่องภาระการโหลดของเซิฟเวอร์มาให้หน่อย (เป็นเรื่องที่เราอยากรู้ว่าเว็บจะเบาแค่ไหน)

น้องก็ฟิตจัด ทำเป็น interactive เลย โหดชิบเป๋ง