คอร์ส Nuxt.js 3 พัฒนาเว็บและ API ด้วย Vue.js 3, Nuxt.js, TypeScript, Prisma และ Pinia

สอนการใช้ Nuxt.js 3 เพื่อสร้างเว็บที่สมบูรณ์ภายใต้โค้ดชุดเดียว ผ่าน Nuxt, Nuxt Content, TypeScript, Prisma, Pinia, Tailwind และอื่น ๆ

สามารถเลือกการเรียนแบบใดแบบหนึ่ง คือ

รอบสอนสดออนไลน์

8,950 ฿

(วันอบรม 4, 12 - 13, 18 - 19 ธ.ค. 2566)

วิดีโอบันทึกการสอน

6,950 ฿

รายละเอียด

ความคิดเห็น

รายละเอียดคอร์ส

Vue.js เป็นหนึ่งในไลบรารี่ยอดนิยมสำหรับการสร้างเว็บในปัจจุบัน เมื่อใช้ Vue ควบคู่กับ Nuxt.js อำนาจการบันดาลผลลัพธ์ยิ่งเพิ่มขึ้น นั่นเพราะ Nuxt เป็นส่วนผสมที่ลงตัวในการสร้างเว็บด้วย Vue สามารถเพิ่มประสิทธิภาพและทำ SEO ได้โดยง่าย แถมยังสามารถใช้ Nuxt เพื่อสร้าง API ไปพร้อมกับ Front-End ในคราวเดียวกันได้อีกด้วย

คอร์สอบรมนี้ผู้เรียนจะได้ทราบถึงการใช้ TypeScript เพื่อพัฒนาเว็บและ API ด้วย Vue บน Nuxt.js ด้วยโค้ดชุดเดียวกัน

วันแรกของคอร์สผู้เรียนจะได้รับการทบทวนการใช้งาน JavaScript / TypeScript ยุคใหม่ เพื่อเตรียมความพร้อมก่อนลงสนามจริง พร้อมทั้งยังจะได้อัพเกรดเทรนด์ของปี 2023 ว่ามีเทคโนโลยีไหนควรไหนและตัวไหนที่เก่าและหลุดเทรนด์ไปแล้วบ้าง จากนั้นจึงเริ่มปูพื้นฐานของการใช้ Vue ทั้งเรื่องของ การใช้งาน Vue กับ Nuxt, การสร้างคอมโพแนนท์ และการใช้งาน Template เป็นต้น

การแสดงผลหน้าเพจบน Nuxt.js นั้นสามารถเลือกเทคนิคการแสดงผลได้หลายรูปแบบ ในคอร์สนี้ผู้เรียนจะได้เรียนรู้การใช้งานทั้ง Client-Side Rendering (CSR), Server-Side Rendering (SSR), Prerender, Incremental Static Regeneration (ISR), stale-while-revalidate (SWR) และการใช้งานระบบ Route บน Nuxt.js นอกจากนี้เนื้อหายังครอบคลุมถึงการทำ SEO เบื้องต้นอีกด้วย

คอร์สนี้เราสอนใช้ Tailwind CSS ไลบรารี่ยอดนิยมในการจัดการ CSS ควบคู่ไปกับ Nuxt UI เพื่อช่วยให้โปรเจคเรามีสีสันมากขึ้น ผู้เรียนจะได้เรียนรู้หลักการใช้คลาสต่าง ๆ ใน Tailwind และการทำคอมโพแนนท์ต่าง ๆ ของ Nuxt UI ให้เกิดประสิทธิภาพสูงสุด

ส่วนของ Back-End นั้นผู้เรียนจะได้เรียนรู้การใช้งาน Nuxt เพื่อสร้างส่วนของ API บนโค้ดชุดเดียวกันกับ Front-End ส่วนนี้ผู้เรียนจะเข้าใจถึงการใช้โฟลเดอร์ server และ api ของ Nuxt เพื่อประกาศ Routes ต่าง ๆ ของ API และการทำงานอื่น ๆ เช่น การตรวจสอบข้อมูลที่ส่งมาจากฟอร์ม เป็นต้น

ส่วนของการเชื่อมต่อฐานข้อมูลนั้น คอร์สนี้จะสอนใช้ Prisma ไลบรารี่ยอดนิยมที่ทำตัวเป็น ORM สำหรับการเชื่อมต่อฐานข้อมูล ผู้เรียนจะได้เข้าใจหลักการของการสร้าง Schema การทำ Database Migration และการทำ Seeding รวมถึงคำสั่งสำหรับการทำ CRUD รวมถึงการประกาศความสัมพํนธ์แบบทั้ง One-to-One และ One-to-Many ใน Prisma เป็นต้น

หนึ่งสิ่งที่สำคัญในการพัฒนาเว็บแอพพลิเคชันคือการทำงานกับฟอร์ม คอร์สนี้ผู้เรียนจะได้ใช้งาน Nuxt UI เพื่อจัดการฟอร์ม และใช้ Zod เพื่อทำการตรวจสอบข้อมูลในฟอร์ม พร้อมกันนั้นผู้เรียนยังจะได้รู้ถึงวิธีการทำฟอร์มเพื่ออัพโหลดไฟล์ด้วย เป็นต้น

เพื่อให้เว็บไซต์สามารถจัดการสมาชิกผู้ใช้งานเพื่อจำกัดสิทธิ์ในการเข้าถึงหน้าเพจต่าง ๆ ได้ คอร์สนี้จึงได้รวมการสอน การยืนยันตัวตนของผู้ใช้งานระบบ (Authentication) และการตรวจสอบสิทธิ์การเข้าถึง (Authorization) ผ่าน Nuxt Auth และ API เช่น การมีระบบ Admin หลังบ้านที่เข้าถึงได้เฉพาะ Admin และผู้มีสิทธิ์เท่านั้น เป็นต้น

การจัดการสถานะในแอพพลิเคชัน (Client State Management) เป็นหนึ่งหัวข้อที่สำคัญ คอร์สนี้จะสอนใช้เครื่องมือจัดการสถานะยุคใหม่ที่ทั้งเร็วและมีขนาดเล็กทั้งยังใช้งานได้ง่าย นั่นคือ Pinia ผู้เรียนจะได้เข้าใจหัวใจสำคัญของการใช้งาน Pinia ทั้งการสร้าง Store และการเข้าถึงเพื่อใช้งาน State ต่าง ๆ จาก Store เป็นต้น

หลายส่วนของเว็บแอปพลิเคชันสามารถจัดเก็บเนื้อหาในรูปแบบไฟล์ได้ เช่น ส่วนของบทความ คอร์สนี้ผู้เรียนจะได้ทราบถึงการสร้างเนื้อหาลงไฟล์ประเภท Markdown แล้วจึงอาศัยความสามารถของ Nuxt Content ในการแปลงเนื้อหาจากไฟล์เหล่านั้นมาเป็นเนื้อหาของเว็บ เช่น บลอค เป็นต้น

เมื่อการพัฒนาเสร็จสิ้นจึงเข้าสู่กระบวนการของการ Deploy โปรแกรม ผู้เรียนจะได้เรียนรู้ขั้นตอนของการ Build โปรเจค และการตั้งค่าต่าง ๆ เพื่อให้พร้อมต่อการส่งมอบผลิตภัณฑ์ก่อนจะ Deploy จริงสู่ Production ต่อไป โดยส่วนนี้เราจะสอนการใช้ Docker เพื่อทำการสร้าง Image พร้อมกันนั้นจึงทำการ Deploy ผลลัพธ์ด้วยการใช้เทคโนโลยีของ Docker ต่อไป

เนื้อหาบทเรียน

คอร์สนี้เป็นหลักสูตรอบรม 5 วัน ประกอบด้วยเนื้อหาตามวันดังต่อไปนี้

วันที่: 1

Unit

ทบทวนการใช้งาน JavaScript / TypeScript ยุคใหม่

เพื่อให้การเรียน Vue.js / Nuxt.js เป็นไปอย่างราบลื่น บทเรียนนี้จะทำการทบทวนการใช้งาน Node.js พร้อมทั้งไวยากรณ์ของ JavaScript / TypeScript สมัยใหม่

การประกาศตัวแปรด้วย let และ const

การใช้งาน Template Literals

ทบทวนการใช้งานออบเจ็กต์และอาร์เรย์

Destructuring Assignment

Optional Chaining

การกระจายข้อมูลด้วย Spread Operator

Arrow Functions

การใช้งาน map และ filter กับอาร์เรย์

Short-Circuit Evaluation

การจัดการโมดูลด้วย ES Module

ชนิดข้อมูลพื้นฐานใน TypeScript

Type และ Interface

Readonly และ Optional Properties

ฟังก์ชันและการจัดการชนิดข้อมูล

Generic Types

Utility Types

Unit

ก้าวสู่โลกของ Vue.js 3

บทเรียนนี้ผู้เรียนจะได้ทราบถึงความจำเป็นของการใช้งาน Vue และประโยชน์จากการใช้งาน Nuxt รวมถึงวิธีการสร้างคอมโพแนนท์และการใช้งาน Template บน Vue

Vue และการใช้ Nuxt.js

Components และ Single-File Components (SFC)

การใช้งาน Template, Binding และ Directives

การแสดงผลแบบมีเงื่อนไขด้วย v-if, v-if-else และ v-show

v-for และการใช้งาน key

Event Handling และ Modifiers

v-model และ การจัดการ State ของ input

Vue DevTools

วันที่: 2

Unit

Reactivity และ Composition API (Composable Functions)

บทเรียนนี้ผู้เรียนจะได้ทราบถึงหลักการใช้งานฟังก์ชันประเภท Composable Functions รวมถึงหลักการพื้นฐานของ Reactivity ใน Vue

หลักการของ Reactivity ใน Vue

Reactive State ด้วย ref และ reactive

ฟังก์ชัน computed

Composables

Unit

Component-Based Design

เพื่อให้การออกแบบและใช้งานคอมโพแนนท์เป็นไปได้ด้วยดี ผู้เรียนจะได้ทราบถึงแนวทางการเขียนโปรแกรมเพื่อจัดการ props และ event รวมถึงสถานะต่าง ๆ ที่เกี่ยวข้อง เช่น Lifecycle บน Vue

การสร้างและแบ่งแยกคอมโพแนนท์

Lifecycle Hooks

การใช้งานฟังก์ชัน watch และ watchEffect

Props และการส่งผ่านค่า

การส่งผ่านและการเรียก Event

Fallthrough Attributes

Slots

Unit

หลักการใช้งาน Nuxt.js 3

บทเรียนนี้ผู้เรียนจะได้เรียนรู้การใช้งาน Nuxt ผ่านการเรียนรู้โครงสร้างไดเร็กทอรี่ต่าง ๆ และการจัดการระบบ Routes บน Nuxt

Nuxt Fundamentals

App, Pages, Layout และ Components

Routing, Parameters และ NuxtLink

Transitions

การจัดการข้อผิดพลาดบน Nuxt.js

การเข้าถึง Assets บน Nuxt

Environment Variables

วันที่: 3

Unit

Rendering Modes

Nuxt สนับสนุนการแสดงผลหลายรูปแบบ เช่น Client-Side Rendering, Server-Side Rendering, Prerender และ อื่น ๆ บทเรียนนี้จะกล่าวถึงการตั้งค่าเพื่อให้เกิดการแสดงผลเหล่านั้นบน Nuxt

Client-Side Rendering / Universal Rendering / Hybrid Rendering

Prerender Routes

stale-while-revalidate (SWR)

Incremental Static Regeneration (ISR)

Server-Side Rendering (SSR)

Unit

Tailwind CSS และ Nuxt UI

เพื่อให้เว็บแอปพลิเคชันมีการแสดงผลที่สวยงาม บทเรียนนี้ผู้เรียนจะได้ทราบถึงการจัดสไตล์หน้าเพจด้วยการใช้ Tailwind CSS และ Nuxt UI

Class และ Style Bindings

Utility Classes ใน Tailwind CSS

Theming

การติดตั้งและใช้งาน Nuxt UI

Nuxt UI Components

Unit

การสร้าง API บน Nuxt.js

นอกเหนือจากความสามารถในการสร้าง Front-End แล้ว Nuxt ยังสามารถสร้าง API บนโค้ดชุดเดียวกันได้ผ่านโฟลเดอร์ server และนี่คือสิ่งที่เราจะได้เรียนกันในบทเรียนนี้

โฟลเดอร์ server และ api

API Routes

Route Parameters และ HTTP Methods

การอ่านส่วนของ body ด้วย readBody

การจัดการ HTTP Status Codes

การจัดการข้อผิดพลาด

Unit

การใช้งานฐานข้อมูลด้วย Prisma

เรียนรู้การใช้งาน Prisma อันเป็น ORM ยอดนิยมในโลกของ Node.js เพื่อใช้เข้าถึงข้อมูลในฐานข้อมูล พร้อมเรียนรู้หลักการอื่น ๆ ที่สำคัญ เช่น Database Migration และ Seeding เป็นต้น

Prisma Schema

Database Migration

Database Seeding

การจัดการ CRUD

วันที่: 4

Unit

การเรียกใช้งาน API และการแคชผลลัพธ์

Nuxt มาพร้อมกับกลุ่มของฟังก์ชันที่ใช้เพื่อดึงข้อมูลจาก API พร้อมทั้งสามารถแคชค่าผลลัพธ์ได้ เช่น useFetch เป็นต้น

การใช้งาน $fetch

การใช้งาน useAsyncData

การใช้งาน useFetch

การใช้ lazy กับ useFetch

Client-only fetching ด้วย useFetch

การใช้ pick และ transform บน useFetch

การแคชค่าและการดึงข้อมูลใหม่

Unit

การจัดการฟอร์มด้วย Zod และ Nuxt UI

เรียนรู้หลักการ Validate ข้อมูลในฟอร์มด้วย Zod และจัดการสถานะของฟอร์มด้วย Nuxt UI

การสร้างฟอร์มด้วย Nuxt UI

ตรวจสอบความถูกต้องของฟอร์มด้วย Zod

File Upload

Form Data และการอัพโหลดฟอร์ม

Unit

Authentication และ Authorization

เรียนรู้หลักการทำงานของ Authentication และ Authorization ด้วย NuxtAuth

ขั้นตอนการทำงานของ Authentication ใน NuxtAuth

ความปลอดภัยของ Cookie

ขั้นตอนการทำงานของ Authorization ใน NuxtAuth และ Nuxt

Role-Based Access Control (RBAC)

Protected Link

Protected Route

Auth Error Handling

วันที่: 5

Unit

การจัดการ Client State ในแอพพลิเคชันด้วย Pinia

Pinia เป็นเครื่องมือจัดการ State (State Management) ที่มีขนาดเล็ก ทำงานได้เร็ว และเป็นที่นิยมใช้งานในปัจจุบัน หัวข้อนี้เราจะเรียนรู้การใช้ Pinia เพื่อจัดการ State ในแอพพลิเคชันของเรา

Pinia คืออะไร ทำไมจึงสำคัญ

การสร้าง Store

การจัดการ State ใน Store

Actions

Devtools

Unit

Nuxt Content

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

การใช้งาน Nuxt Content ผ่านโฟล์เดอร์ content

การใช้งาน Markdown ใน Nuxt Content

Block Components และ Inline Components

คอมโพแนนท์ ContentDoc และ ContentRenderer

การเรียกเนื้อหาด้วย queryContent

Unit

SEO

เพื่อให้เนื้อหาของเราได้รับการทำอินเด็กซ์อย่างถูกต้อง SEO จึงเป็นหัวข้อหนึ่งที่สำคัญและสามารถถูกตั้งค่าได้โดยง่ายผ่าน Nuxt

การใช้งาน useHead

การใช้งาน useSeoMeta

SEO Components

การใช้งาน definePageMeta

Unit

Deployment

เมื่อการพัฒนาโปรเจคเสร็จสิ้นก็ถึงกระบวนการ Build และ Deployment นั่นคือหัวใจสำคัญของบทเรียนนี้

การเตรียมการสำหรับ Production

Docker

Docker Compose

Build และ Deployment

ตัวอย่าง Workshop

คอร์สของเรานอกจากจะสอนทฤษฎีและตัวอย่างการใช้งานทั่วไปแล้ว ยังมี Workshop เป็นระบบจัดการวันลาออนไลน์ ที่มีทั้งส่วนแสดงผลสำหรับผู้ใช้งานทั่วไปและส่วนจัดการสำหรับ Admin

Articles App

โดยระบบนี้ผู้เรียนจะได้ทราบถึงการออกแบบและใช้คลาสต่าง ๆ ของ Tailwind CSS และคอมโพแนนท์จาก Nuxt UI ที่สนับสนุนการทำงานแบบ Responsive สามารถเปิดเว็บเพื่อชมได้จากทั้งเดสก์ทอปหรือมือถือ โดยหน้าจอไม่เสียเลย์เอาต์

ระบบ Authentication เช่น การสมัครสมาชิก การเข้าสู่ระบบ และการออกจากระบบ ถูกรวมเข้าเป็นส่วนหนึ่งของ Workshop นี้เช่นกัน

Auth

โดยระบบจัดการวันลาออนไลน์นี้จะมีส่วนสำหรับ Admin เพื่อเข้าจัดการวันลาตามสิทธิ์ที่ตนมี ผู้เรียนจะได้เรียนรู้การทำ Authorization เพื่อจัดการสิทธิ์และตรวจสอบสิทธิ์สำหรับการเข้าถึง API และหน้าเพจต่าง ๆ ได้อย่างถูกต้อง

Auth

การทำงานกับฟอร์มก็เป็นส่วนสำคัญ Workshop นี้ได้แสดงถึงการสร้างฟอร์ม การอัพโหลดไฟล์พร้อมแสดงผลตัวอย่างรูปภาพที่อัพโหลด การตรวจสอบข้อมูลในฟอร์ม และการส่งข้อมูลในฟอร์มทั้งแบบ JSON และ Form Data

Form

นอกเหนือจากนี้ Workshop ดังกล่าวยังรวมกับจัดการ Global State ในแอพพลิเคชันผ่าน Pinia การปรับปรุงประสิทธิภาพของแอพพลิเคชันด้วยเทคนิคต่าง ๆ รวมถึงการทำ SEO และการ Deploy แอพพลิเคชันด้วย Docker

ขอใบเสนอราคา

หากต้องการขอใบเสนอราคา ใบแจ้งหนี้ หนังสือชี้ชวนการเข้าอบรม และเอกสารอื่น ๆ รบกวนคุณลูกค้าติดต่อ เพจ Babel Coder หรือทางอีเมล์ babelcoder@gmail.com ได้ครับ

จุดประสงค์การเรียนรู้

ผู้เรียนเข้าใจการออกแบบเว็บด้วยหลักการ Component-Based Design บน Vue.js
ผู้เรียนเข้าใจการสร้างและใช้งาน Component ด้วย Vue และ TypeScript บน Nuxt.js ได้
ผู้เรียนสามารถสร้างและใช้งานเว็บแอพพลิเคชันด้วย Vue บน Nuxt.js ได้อย่างมีประสิทธิภาพ
ผู้เรียนสามารถสร้าง Back-End บน Nuxt.js ได้
ผู้เรียนเข้าใจหลักการของการทำ Authentication และ Authorization บน Nuxt.js และ Nuxt Auth
ผู้เรียนเข้าใจหลักการของ Client-Side Management ด้วย Pinia
ผู้เรียนสามารถสร้างเว็บบลอคโดยง่ายด้วย Markdown ผ่าน Nuxt Content ได้
ผู้เรียนเข้าใจกระบวนการ Build และ Deploy แอพพลิเคชันที่พัฒนาด้วย Docker ได้

คอร์สนี้เหมาะกับใคร

ผู้เรียนที่ต้องการศึกษาวิธีสร้างโปรเจคได้ไวด้วยโค้ดชุดเดียวแต่ได้ทั้ง Front-End และ Back-End
ผู้เรียนที่มีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว โดยในคอร์สจะมีการทบทวน JavaScript และ TypeScript สมัยใหม่ที่จำเป็นต่อการใช้งาน Vue.js และ Nuxt.js
ผู้เรียนที่ไม่เคยเขียน Vue / Nuxt.js มาก่อน และต้องการสร้างเว็บด้วย Vue / Nuxt.js
ผู้เรียนที่เคยเขียน Vue / Nuxt.js อยู่ก่อนแล้ว แต่ต้องการอัพเดทความรู้ Vue / Nuxt.js สมัยใหม่
ผู้เรียนที่ต้องการอัพเดทเทรนด์การใช้ Vue.js และ Nuxt.js ให้เป็นปัจจุบันตามปี 2023 - 2024
ผู้เรียนที่ต้องการเรียนรู้ไลบรารี่สมัยใหม่ในการใช้งานกับ Vue เช่น Nuxt.js, Nuxt UI, Zod, Tailwind CSS และ Pinia
ผู้เรียนที่ต้องการศึกษาการใช้ Nuxt.js เพื่อสร้างทั้ง Front-End และ Back-End
ผู้เรียนที่ต้องการศึกษาการทำงานทั้งระบบตั้งแต่ Front-End, Back-End การทำงานของ Authentication และ Authorization โดยใช้โค้ดชุดเดียวกัน

ผู้สอน

Nuttavut Thongjor

นักพัฒนาซอฟต์แวร์ประสบการณ์กว่า 10 ปี ผู้ก่อตั้ง Babel Coder วิทยากรอบรมการพัฒนาซอฟต์แวร์และผู้ให้คำปรึกษาในบริษัทชั้นนำ

คำถามพบบ่อย

คำถาม: จำเป็นต้องมีพื้นฐานอะไรบ้าง
คำตอบ: ผู้เรียนจำเป็นต้องมีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว

คำถาม: ระยะเวลาศึกษาของหลักสูตรนี้
คำตอบ: หลักสูตรนี้เป็นหลักสูตร 5 วัน เวลาสอนต่อวันคือ 6 ชั่วโมง (ตลอดหลักสูตรรวม 30 ชั่วโมง) เวลา 10.00 - 17.00 น.

คำถาม: รูปแบบการอบรมเป็นอย่างไร
คำตอบ: หลักสูตรนี้จำหน่ายสองรูปแบบ คือ แบบหลักสูตรอบรมออนไลน์สอนสดผ่านเว็บ (แพคเกจนี้รวมบันทึกการสอนย้อนหลังแล้ว) และแบบวิดีโอบันทึกการสอน โดยหลักสูตรนี้จะสอนเน้นทั้งทฤษฎีและปฏิบัติจริงผ่าน Workshop

คำถาม: สามารถขอใบเสนอราคา ใบแจ้งหนี้ หนังสือชี้ชวนการเข้าอบรมได้อย่างไร
คำตอบ: รบกวนคุณลูกค้าติดต่อ เพจ Babel Coder หรือทางอีเมล์ babelcoder@gmail.com เพื่อขอเอกสารต่าง ๆ ครับ

สอบถามเพิ่มเติมโปรดติดต่อ เพจ Babel Coder