𝗜 𝗕𝘂𝗶𝗹𝘁 𝗔 𝗠𝗼𝗱𝗲𝗿𝗻 𝗔𝗜 𝗔𝘀𝘀𝗶𝘀𝘁𝗮𝗻𝘁

บทเรียน AI ส่วนใหญ่มักจะสอนแค่การเรียกใช้ API แต่ผมต้องการสร้างแอปพลิเคชันที่ใช้งานได้จริง ผมจึงเลือกใช้ vanilla HTML, CSS และ JavaScript

แอปนี้มีฟีเจอร์ต่างๆ ดังนี้:

  • Responsive UI
  • โหมดมืดและโหมดสว่าง (Dark and Light modes)
  • การตอบกลับแบบ Streaming
  • การแสดงผล Markdown
  • การเน้นไวยากรณ์โค้ด (Syntax highlighting)
  • ประวัติการแชท
  • การจัดการข้อผิดพลาด (Error handling)
  • การ Deploy บน GitHub Pages

เครื่องมือที่ผมใช้:

  • HTML5 และ CSS3
  • Vanilla JavaScript
  • Marked.js
  • DOMPurify
  • Prism.js
  • Google Generative AI SDK

ผมให้ความสำคัญกับเรื่องความปลอดภัย โดยใช้ DOMPurify ในการล้างข้อมูล (clean) การตอบกลับจาก AI เพื่อป้องกันความเสี่ยงด้านความปลอดภัย

ผมให้ความสำคัญกับประสบการณ์ผู้ใช้งาน (User Experience) แอปจะทำการสตรีมข้อความในขณะที่กำลังสร้างคำตอบ ทำให้คุณได้รับข้อมูลทันทีโดยไม่ต้องรอไอคอนโหลดหมุนๆ

ผมเพิ่ม Prism.js สำหรับส่วนของ Code blocks เพื่อเพิ่มป้ายบอกภาษาและปุ่มคัดลอกโค้ด

ผมใช้ localStorage สำหรับเก็บประวัติการแชท ทำให้บทสนทนาของคุณยังคงอยู่แม้จะรีเฟรชหน้าเว็บ ซึ่งวิธีนี้รวดเร็วและไม่จำเป็นต้องมี Backend

ผมได้เพิ่มระบบ Retry logic และข้อความแจ้งเตือนข้อผิดพลาด เพื่อทำให้แอปมีความเสถียรมากขึ้น

โปรเจกต์ AI ช่วยให้คุณได้เรียนรู้ทักษะมากมาย:

  • การเชื่อมต่อ API (API integration)
  • การออกแบบ UI
  • การจัดการ State (State management)
  • ประสบการณ์ผู้ใช้งาน (User experience)

ลองสร้างโปรเจกต์แบบนี้ลงใน Portfolio ของคุณดูครับ มันจะแสดงให้เห็นว่าคุณมีทักษะที่ใช้งานได้จริง

ฟีเจอร์ไหนที่ผมควรเพิ่มเป็นลำดับถัดไปดี?

  • การสั่งงานด้วยเสียง (Voice input)
  • การอัปโหลดไฟล์ (File uploads)
  • หน่วยความจำ (Memory)

บอกผมในคอมเมนต์ได้เลยครับ

Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Optional learning community: https://youtu.be/nbFKG_6DkSE