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

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

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 วัน ประกอบด้วยเนื้อหาตามวันดังต่อไปนี้

ตัวอย่าง Workshop

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

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

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

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

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

นอกเหนือจากนี้ 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