Basic Vue and Nuxt 3 with Prisma and Supabase

Basic Vue and Nuxt 3 with Prisma and Supabase

หลักสูตร 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 มาบ้าง
  • ความรู้พื้นฐานเกี่ยวกับการพัฒนาเว็บแอปพลิเคชัน (ไม่จำเป็นต้องมีประสบการณ์ลึกซึ้ง)
  • 12 ชั่วโมง
  • ราคาปกติ 6,500 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 5,850 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

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
21/10/2024 16:52:25