ภาพรวมหลักสูตร
หลักสูตร Basic Vue and Nuxt 3 with Prisma and Supabase นี้ถูกออกแบบมาเพื่อให้ผู้เรียนที่มีความสนใจในการพัฒนาเว็บแอปพลิเคชันสามารถเข้าใจและนำไปประยุกต์ใช้ได้จริง Vue 3 ซึ่งเป็นเฟรมเวิร์กที่เน้นการสร้าง UI ที่ยืดหยุ่น พร้อมกับ Nuxt 3 ที่เน้นการทำงานกับ Server Side Rendering (SSR) จะช่วยให้ผู้เรียนได้เรียนรู้การพัฒนาแอปที่มีประสิทธิภาพสูง สำหรับ Prisma และ Supabase นั้นเป็นเครื่องมือที่ช่วยในการจัดการฐานข้อมูลและระบบหลังบ้านแบบ Full Stack โดยไม่ต้องเขียนโค้ดที่ซับซ้อน
หลักสูตรนี้จะเน้นการประยุกต์ใช้ Vue 3 และ Nuxt 3 ในการพัฒนาแอปพลิเคชัน รวมถึงการเชื่อมต่อกับฐานข้อมูลผ่าน Prisma และ Supabase ตั้งแต่ขั้นพื้นฐานไปจนถึงการ Deploy แอปพลิเคชันเข้าสู่ Production ทำให้ผู้เรียนได้รับทักษะที่ครบถ้วนและสามารถนำไปใช้งานจริงได้
สิ่งที่คุณจะได้รับ
- ให้ผู้เรียนสามารถเข้าใจหลักการและการใช้งาน Vue 3 Composition API
- สอนให้ผู้เรียนสามารถสร้างแอปพลิเคชันที่ใช้ Nuxt 3 ในการจัดการเส้นทางและการทำงานฝั่งเซิร์ฟเวอร์
- ให้ผู้เรียนเข้าใจการเชื่อมต่อและการจัดการฐานข้อมูลด้วย Prisma และ Supabase
- เรียนรู้การพัฒนา Full Stack Application ด้วย Vue 3 และ Nuxt 3 อย่างเป็นระบบ
- สามารถ Deploy แอปพลิเคชันสู่ Production ได้อย่างมีประสิทธิภาพ
หลักสูตรนี้เหมาะสำหรับ
- ผู้ที่ต้องการเรียนรู้การพัฒนาแอปที่มีประสิทธิภาพสูงด้วย Vue 3
พื้นฐานของผู้เข้าอบรม
- มีความรู้พื้นฐานเกี่ยวกับ HTML, CSS, และ JavaScript
- เคยเขียนโค้ดด้วย JavaScript มาบ้าง
- ความรู้พื้นฐานเกี่ยวกับการพัฒนาเว็บแอปพลิเคชัน (ไม่จำเป็นต้องมีประสบการณ์ลึกซึ้ง)
หัวข้อการฝึกอบรม
Section 1 Basic Vue 3 Composition API
- แนะนำ Vue 3
- ตั้งค่าและเริ่มต้นโปรเจกต์
- Composition API ใน Vue 3 เทียบกับ Options API
- สร้าง Component ที่ใช้ Composition API และสามารถนำกลับมาใช้ซ้ำได้
- การสร้าง Component ที่สามารถปรับตัวได้ (reactive components)
Section 2 What is Nuxt?
- ภาพรวมของ Nuxt.js และสถาปัตยกรรมของมัน
- ความแตกต่างระหว่าง Nuxt 2 และ Nuxt 3
- ประโยชน์ของการใช้ Nuxt ในการพัฒนาเว็บแอปพลิเคชัน
- การตั้งค่าโปรเจกต์ Nuxt 3
Section 3 File based routing
- การกำหนดเส้นทางโดยใช้ไฟล์ (file-based routing) คืออะไร
- สร้างเส้นทางใน Nuxt
- การสร้างเส้นทางแบบไดนามิกและแบบซ้อน (Nested)
- การเปลี่ยนเส้นทางและการใช้งาน navigation guards
Section 4 Auto imports
- การนำเข้าอัตโนมัติ (auto imports) ใน Nuxt 3
- ประโยชน์ของการใช้ auto imports
- การปรับแต่งการตั้งค่า auto import
Section 5 Middleware
- Middleware ใน Nuxt คืออะไร
- วิธีการสร้างและใช้งาน Middleware
- ความแตกต่างระหว่าง Middleware แบบ Global และ Local
- ตัวอย่าง Middleware สำหรับการตรวจสอบสิทธิ์ (authentication)
Section 6 Layouts
- แนะนำ Layouts ใน Nuxt
- การกำหนด Layout เริ่มต้น
- Layout แบบซ้อน (Nested) และกรณีการใช้งาน
- การปรับแต่ง Layout ตามเส้นทาง
Section 7 Data fetching
- วิธีการดึงข้อมูลใน Nuxt
- การใช้ useFetch และ asyncData
- การดึงข้อมูลฝั่ง Client และฝั่ง Server
- การแคชและการปรับปรุงประสิทธิภาพการดึงข้อมูล
Section 8 Module Discovery and Use
- แนะนำโมดูลใน Nuxt
- สำรวจโมดูลที่นิยมใช้ใน Nuxt
- วิธีการติดตั้งและตั้งค่าโมดูลใน Nuxt
- การสร้างโมดูลแบบกำหนดเองใน Nuxt
Section 9 Server API routes
- แนะนำการสร้างเส้นทาง API ใน Nuxt 3
- วิธีการสร้างและจัดการเส้นทาง API ฝั่งเซิร์ฟเวอร์
- การใช้งาน query parameters และ body payload
- การจัดการการตรวจสอบสิทธิ์และการอนุญาต (authorization)
Section 10 Hybrid rendering
- การเรนเดอร์แบบไฮบริด (hybrid rendering) ใน Nuxt 3 คืออะไร
- ความเข้าใจเกี่ยวกับ Server-Side Rendering (SSR) และ Static Site Generation (SSG)
- ประโยชน์และกรณีการใช้งานของ hybrid rendering
- การตั้งค่า hybrid rendering ใน Nuxt 3
Section 11 Prisma and Supabase
- แนะนำ Prisma: ORM สำหรับการจัดการฐานข้อมูล
- การตั้งค่า Prisma ในโปรเจกต์ Nuxt
- แนะนำ Supabase: Backend as a Service
- การผนวกรวม Supabase กับ Nuxt และ Prisma
Section 12 Deployment
- เตรียมแอป Nuxt 3 สำหรับการใช้งานใน Production
- การ Deploy ไปยังแพลตฟอร์ม Cloud เช่น Vercel หรือ Netlify
- การปรับปรุงประสิทธิภาพสำหรับ Production
- การจัดการ environment variables และ secrets
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
ขอใบเสนอราคาอบรมองค์กร คำถามที่พบบ่อย
หลักสูตร Basic Vue and Nuxt 3 with Prisma and Supabase เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับ ผู้ที่ต้องการเรียนรู้การพัฒนาแอปที่มีประสิทธิภาพสูงด้วย Vue 3 พื้นฐานที่ผู้เรียนควรมี มีความรู้พื้นฐานเกี่ยวกับ HTML, CSS, และ JavaScript · เคยเขียนโค้ดด้วย JavaScript มาบ้าง หากไม่แน่ใจว่าพื้นฐานพอหรือไม่ ปรึกษาทีมงานได้ฟรีทาง LINE @itgenius หรือโทร 02-570-8449
หลักสูตร Basic Vue and Nuxt 3 with Prisma and Supabase ราคาเท่าไร ใช้เวลาเรียนกี่ชั่วโมง
ราคาปกติ 6,500 บาท (โปรโมชันปัจจุบันเหลือ 5,850 บาท) ใช้เวลาอบรม 12 ชั่วโมง ราคานี้ยังไม่รวม VAT 7% (กรณีชำระในนามนิติบุคคล) ชำระค่าอบรมด้วยการโอนเข้าบัญชีบริษัท แล้วแจ้งชำระเงินผ่านหน้าแจ้งชำระเงินของเว็บไซต์ และขอใบเสร็จรับเงินหรือใบกำกับภาษีในนามบริษัทได้
เรียนจบได้รับ Certificate หรือไม่
ได้รับ ผู้ผ่านการอบรมทุกท่านจะได้รับใบประกาศนียบัตร (Certificate of Completion) จากสถาบันไอทีจีเนียส ใบประกาศแต่ละใบมีเลขที่ของตัวเอง ใครก็ตามที่มีเลขที่ใบประกาศตรวจสอบความถูกต้องออนไลน์ได้ที่หน้าตรวจสอบใบประกาศของสถาบัน จึงใช้แนบแฟ้มผลงานหรือส่งให้ฝ่ายบุคคลประกอบการพัฒนาบุคลากรได้
อบรมที่ไหน มีเรียนแบบออนไลน์หรือไม่
เรียนได้ทั้งแบบออนไซต์ที่สถาบันไอทีจีเนียส และนัดเรียนผ่านออนไลน์ และรับจัดอบรมเฉพาะทีม (In-house Training) ให้องค์กร สอบถามรอบและสถานที่ได้ที่ LINE @itgenius หรือโทร 02-570-8449
ถ้าเรียนไม่ทันหรือขาดเรียน มีเรียนซ้ำ/เรียนชดเชยหรือไม่
มี ผู้เรียนสามารถแจ้งขอเรียนซ้ำ (repeat) ในรอบถัดไปของหลักสูตรเดียวกันได้ฟรีตามเงื่อนไขของสถาบัน แจ้งชื่อหลักสูตรและรอบที่เคยเรียนกับทีมงาน แล้วทีมงานจะตรวจสอบและแจ้งรอบที่ยังมีที่นั่งว่างให้เลือก สอบถามได้ที่ LINE @itgenius หรือโทร 02-570-8449
สมัครเรียนหรือขอใบเสนอราคาในนามบริษัทได้อย่างไร
สมัครออนไลน์ได้จากแบบฟอร์มลงทะเบียนบนหน้านี้ ลงทะเบียนผู้เข้าอบรมหลายคนได้ในครั้งเดียว และกรอกเลขประจำตัวผู้เสียภาษีกับที่อยู่สำหรับออกใบกำกับภาษีได้ในฟอร์ม หรือขอใบเสนอราคา (Quotation) ในนามนิติบุคคลได้ทันทีจากปุ่มขอใบเสนอราคา สอบถามเพิ่มเติมโทร 02-570-8449 หรือ LINE @itgenius
