จุดประสงค์ของ Wrikka Learn

• เพื่อให้เข้าใจ concept ว่าประมาณไหน มี keyword อะไรบ้าง
• เพื่อเป็น Guide ให้ไปศึกษาต่อ
• ให้ Setup Devtools และมี Productivity ในการทำงาน

วิธีการเรียนรู้และนำไปใช้

• ไม่แนะนำให้ทำตามเอกสารนี้ ให้ทำตามเอกสารต้นฉบับ
• เขียนเพื่อเห็น concept ว่ามีอะไรที่ต้องรู้บ้าง

สิ่งที่แนะนำให้ทำ

• ติดตั้งเครื่องมือต่างๆ ให้พร้อม เช่น Scoop, Git, IDE, Terminal, Starship
• ไม่ต้องทำตามในเว็บไซต์นี้ ให้เป็นแค่ concept แล้วเวลาทำงานจริงให้ทำตาม docs ต้นทาง
• ใช้ Noi
• ใช้ Raindrop สำหรับ Bookmark Manager
• ทดลอง

สิ่งควรทำ

Setup Devtools ไว้

• ติดตั้ง Starship เพื่อให้ Prompt สวยๆ
• ติดตั้ง CLI ต่างๆที่จำเป็น
• ตั้งค่า Continue
• ติดตั้ง Program ต่างๆที่จำเป็นผ่าน Package Manager
• ดาวน์โหลด ChatGPT Desktop และตั้ง Gloabl shortcut
• ติดตั้ง Program ต่างๆใน Scoop

ทดลองใช้งาน AI

• ทดลองใช้ Continue
• ทดลองใช้ Aide

สิ่งที่อยากให้ทดลอง

• ทดลอง ออกแบบ UI ด้วย Framer เพื่อเข้าใจการออกแบบมากขึ้น
• ทดลองใช้ Aide Aide เพื่อสัมผัส Agentics AI ที่แท้จริงๆ

คำแนะนำในการทำ project

Package

• ใช้ Bun แทน PNPM หรือ NPM ได้ เนื่องจากมันเข้ากับกันได้ Nodejs (แต่ต้องเขียนโค้ดให้สมัยใหม่ เช่นระบบโมดูลต้องเป็น ESM)

UI

• เมื่อก่อนการออกแบบ UI จากออกแบบใน Figma แล้วค่อยแปลงเป็น Code แต่เมื่อ AI มา เราสามารถให้ AI สร่าง UI ได้เลย
• ใช้ tailwindcss หรือ unocss เป็นหลักก่อน
• ในอย่าที่จะคิดว่า uxui เมื่อออกแบบ

Version Control

• ใช้ git init .gitignore เสมอๆ
• ใช kogit ในการ commit
• เมื่อทำอะไรเสร็จ อย่าลืมที่จะ commit บ่อยๆ

Code Quanlity

• ใช้ Linter เพื่อให้แสดงข้อผิดพลาด
• ใช้ Formatter ในการจัดรูปแบบ
• อย่าลืม refactor code เพื่อให้ง่ายในการอ่านและจัดการ

Language

• ใช้ typescript เพื่อให้โค้ดมีประสิทธิภาพ
• ถ้า project มี frontend ง่ายๆไม่มี routing ใช้ vite ก็ได้
• ถ้าเป็น fullstack project ใช้ next หรือ nuxt

AI

• ใช้ Agentics AI ในการ draft เร็วๆ
• ใช้ Quick Edit ในการแก้ไขเร็วๆ
• พยายามแก้ไข Problems เสมอๆ
• ใช้ Autocomplete ในการแนะนำ

Solve Problems

• อย่าลืมสังเกตุ Problems และให้ AI ช่วยแก้
• ใช้ Error Lens ในการแสดงข้อผิดพลาด