คอร์สอบรมการพัฒนาเว็บและ API บน Next.js ด้วย TypeScript, React, Next.js, Zustand และ tRPC

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

ทราบหรือไม่ Next.js สามารถใช้สร้างได้ทั้ง Front-End และ Back-End (API)?

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

คอร์สอบรมนี้ผู้เรียนจะได้ทราบถึงการใช้ TypeScript เพื่อพัฒนา React ที่เป็นไลบรารี่ยอดนิยมสำหรับการแสดงผล UI บน Next.js พร้อมทั้งสร้าง API บน Next.js ผ่าน tRPC โดยโค้ดทั้งหมดของโปรเจคจะเป็นแบบ end-to-end typesafe คือทั้งระบบของ API และ Front-End จะสื่อสารด้วยชนิดข้อมูลเดียวกัน จึงช่วยป้องกันความผิดพลาดจากการเขียนโค้ดได้ระดับนึง

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

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

ส่วนของ Back-End นั้นผู้เรียนจะได้รู้จักกับ tRPC หนึ่งในเฟรมเวิร์คยอดนิยมที่สุดที่ใช้สร้าง API บน Next.js แล้วทำให้ส่วนของ React ที่ทำงานบน Next.js เหมือนกันเรียกใช้ API ได้โดยตรงโดยไม่ต้องติดตั้งหรือจดจำ Path หรือ URL ของ API ปลายทางให้วุ่นวาย ที่สำคัญคือการใช้ tRPC ทำให้การเรียก API เป็น typesafe คือส่วนของ UI จะรู้ว่าต้องส่งค่าข้อมูลอะไรบ้างและได้รับผลลัพธ์เป็นสิ่งใดจาก API ผ่านชนิดข้อมูลใน TypeScript ได้ทันที โดยเบื้องหลังการทำงานของการดึงข้อมูลจาก API นั้นจะเป็นการใช้ React Query ส่วนนี้ผู้เรียนก็จะได้ทราบวิธีการใช้งานเช่นกัน

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

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

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

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

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

การปรับปรุงประสิทธิภาพของเว็บ (Optimization) เป็นอีกหนึ่งหัวข้อที่หลักสูตรนี้ให้ความสำคัญ ผู้เข้าอบรมจะได้เรียนรู้ การใช้เครื่องมือต่าง ๆ พร้อมทั้งหลักการใช้งาน React ให้ได้ประสิทธิภาพสูงสุดผ่าน Hooks เช่น useMemo และ useCallback เป็นต้น

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

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

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

ตัวอย่าง Workshop

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

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

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

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

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

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

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

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

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

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

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

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

ผู้สอน

Nuttavut Thongjor

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

คำถามพบบ่อย

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

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

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

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

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