React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

React เป็นหนึ่งใน Library สาย JavaScript ที่ได้รับความนิยมสูงสุดตลอดกาล ด้วยความสามารถและจุดเด่นมากมายทั้งเรื่องโครงสร้างที่ดี ประสิทธิภาพที่สูงโดดเด่น มี library รองรับการทำงานสายนี้อย่างครบครัน จึงเป็นตัวเลือกแรกๆ สำหรับนักพัฒนาเว็บแอพพลิเคชั่นเสมอมา

Node.js เป็นแพลตฟอร์มที่ให้ความสามารถในการสร้างแอปพลิเคชันเว็บและเซิร์ฟเวอร์ด้วยภาษา JavaScript ทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอนต์ ซึ่งเปิดโอกาสให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่มีประสิทธิภาพและมีความยืดหยุ่นสูง และในหลักสูตรนี้จะใช้ Strapi ซึ่งเป็นเฟรมเวิร์กที่ให้บริการในการสร้างเซิร์ฟเวอร์ API หรือแอปพลิเคชัน CMS (Content Management System) ด้วย Node.js โดยมีความสามารถในการสร้าง API ที่สามารถจัดการข้อมูลที่หลากหลายและมีระบบการยืนยันตัวตน (Authentication with JWT) ให้ใช้งานง่าย

Docker เป็นแพลตฟอร์มที่ให้ควบคุมการใช้งานและการปรับปรุงแอปพลิเคชันในรูปแบบของ Container ซึ่งเป็นหน่วยของแอปพลิเคชันที่มีทั้งระบบปฏิบัติการและแอปพลิเคชันที่ทำงานอยู่ภายในเดียวกัน ซึ่งช่วยให้สามารถสร้างและปรับปรุงแอปพลิเคชันได้อย่างรวดเร็วและเสถียรมากขึ้น นอกจากนี้ยังช่วยลดปัญหาของความแตกต่างในสภาพแวดล้อมที่ใช้ในการพัฒนาและการให้บริการแอปพลิเคชัน

หลักสูตรนี้เป็นการเรียนรู้ผ่านการทำ Workshop จริงโดยใช้ React V.18 เป็นส่วนหน้าบ้าน (Frontend) ร่วมกับ NodeJS Strapi V.4 CMS เป็นระบบหลังบ้าน (Backend) และเซ็ตอัพสภาพแวดล้อมทั้งหมดให้ทำงานอยู่บน Docker Container เพื่อให้ผู้เรียนเห็นภาพรวมและประยุกต์นำไปต่อยอดใช้งานได้เองในอนาคต

(((เปิดลงทะเบียนพร้อมกันตั้งแต่วันที่ 2 พฤษภาคม 2566 เวลา 14.00 น. เป็นต้นไป)))

React 18 มีอะไรใหม่ ? ทำใมจึงน่าใช้

  • Concurrent Features: ฟีเจอร์ที่ช่วยให้ React สามารถทำงานแบบ Concurrent หรือสามารถทำงานพร้อมกันได้โดยไม่ขัดกัน มาพร้อม hook ที่น่าสนใจหลายตัว อาทิ useTransition, useDeferredValue เป็นต้น
  • Server Components: ฟีเจอร์ใหม่ที่ช่วยให้สามารถสร้างและนำเสนอคอมโพเนนต์ของ React ที่ทำงานที่ด้านเซิร์ฟเวอร์ ซึ่งช่วยลดการทำงานที่ต้องถูกส่งไปยัง client และสามารถอัพเดตเพียงส่วนเล็ก ๆ ของหน้าเว็บ มี hook เช่น useServerAction ให้ใช้งานง่ายๆ
  • Automatic batching เป็นเทคนิคที่ใช้ใน React 18 เพื่อเพิ่มประสิทธิภาพในการแสดงผล UI โดยลดจำนวนการทำงานที่ไม่จำเป็นในการสร้างและอัพเดต UI components ซึ่งสามารถช่วยลดการทำงานที่ซ้ำซ้อนและสร้างแผนที่ทำงานเพื่อเปรียบเทียบและปรับปรุงการแสดงผล UI ให้มีประสิทธิภาพมากขึ้น
  • ปรับปรุงใน React DevTools: เครื่องมือช่วยในการพัฒนาแอปพลิเคชัน React ที่มาพร้อมกับการปรับปรุงและความสามารถใหม่ ๆ

ผู้เรียนต้องมีพื้นฐานอะไรบ้าง ?


คอมพิวเตอร์และโปรแกรมที่รองรับการพัฒนา

  • รองรับ Windows 7, 8 ,10, 11
  • รองรับ MacOS
  • รองรับ Linux OS
  • ใช้โปรแกรม Visual Studio Code (VSCode) เป็นเครื่องมือหลัก

โปรโมชั่นราคาพิเศษ

  • สำหรับ 50 ท่านแรกราคา 300 บาท
  • ลำดับที่ 51-100 ราคา 350 บาท
  • และลำดับที่ 101 เป็นต้นไปที่ราคา 400 บาทเท่านั้นครับ

จากราคาเต็มปกติ 4,000 บาท

ราคานี้ให้เฉพาะนามรายบุคคล ถ้าจะรับใบกำกับภาษี (เฉพาะรายบุคคล และ นามบริษัท จะต้องจ่ายราคาคอร์สอบรมเต็มจำนวน รวมถึงภาษี มูลค่าเพิ่ม 7%)

การอบรมในหลักสูตรนี้เป็นการสอนสดออนไลน์ ผ่านโปรแกรม Zoom Meeting และมีการบันทึกการอบรมส่งให้ดูย้อนหลังทั้งหลักสูตรครับ

กำหนดการอบรม

  • ศุกร์ที่ 5 และเสาร์ที่ 6,13,20,27 พฤษภาคม 2566 (5 วัน) เวลา 20:00-23.30
  • อบรมรวม 5 วัน เฉลี่ยวันละ 3.5 ชั่วโมง
  • ระยะเวลารวมทั้งหลักสูตร 18 ชั่วโมง (มีคลิปเก็บตกเพิ่มเติมให้)
อบรมออนไลน์ (สอนสด)
  • 5 - 27 พฤษภาคม 2023
  • 18 ชั่วโมง

ภาพรวมหัวข้อการอบรม

  • Section 1: ติดตั้งเครื่องมือ เช่น Docker Desktop, Node.JS, VSCode, Git
  • Section 2: สร้าง Workshop โปรเจ็กต์ React 18 ด้วย Vite ทำงานบน Docker Container
  • Section 3: ใช้ React ออกแบบ UI ด้วย Material UI (MUI) ล่าสุด
  • Section 4: สร้าง Workshop Rest API ด้วย Strapi CMS V.4
  • Section 5: ใช้ React เชื่อมต่อ Web API พร้อมทำ Authentication
  • Section 6: Workshop React เรียกข้อมูล/เพิ่ม/แก้ไข/ลบ (CRUD) ผ่าน API
  • Section 7: การ Build และ Deployed project ไปใช้งานจริง

รายละเอียดหลักสูตร

Section 1: ติดตั้งเครื่องมือ เช่น Docker Desktop, Node.JS, VSCode, Git

  • แนะนำการดาวน์โหลดและติดตั้ง Docker Desktop ทั้งหมด Windows & MacOS
  • ดาวน์โหลดและติดตั้ง Node.JS พร้อมทดสอบการทำงาน
  • ติดตั้งเครื่องเขียนโปรแกรมด้วย Visual Studio Code พร้อมส่วนเสริม (Extension) ที่จำเป็น
  • ติดตั้ง Git และตั้งค่าการใช้งานเบื้องต้น
  • ติดตั้ง Extension บน Google Chrome

Section 2: สร้าง Workshop โปรเจ็กต์ React 18 ด้วย Vite ทำงานบน Docker Container

  • แนะนำการสร้างโปรเจ็กต์ React V.18 ใหม่แบบ TypeScript ด้วย Vite V.4
  • เซ็ตอัพโปรเจ็กต์บน Docker โดยเขียนสคริปต์ Dockerfile และ docker-compose.yml
  • ทำการตั้งค่า Vite ให้รองรับการทำ Hot Reload บน Docker
  • แนวทางการ Build / Run โปรเจ็กต์บน Docker
  • ติดตั้ง NPM Package ต่างๆ ลงโปรเจ็กต์ผ่านคำสั่งของ Docker
  • ปรับโครงสร้างโปรเจ็กต์สำหรับทำ Workshop ระบบคงคลังสินค้าอย่างง่าย
  • ติดตั้ง React Router Dom V.6 พร้อมใช้งาน
  • ทดสอบ Run และ Build Project ใช้งาน

Section 3: ใช้ React ออกแบบ UI ด้วย Material UI (MUI) ล่าสุด

  • ติดตั้ง Library Material UI (MUI) V.5 ลงในโปรเจ็กต์
  • Config และปรับแต่ง MUI พื้นฐานในโปรเจ็กต์ที่ติดตั้ง
  • การออกแบบโครงสร้างด้วย Components พื้นฐาน เช่น Grid,Box,Contaniner, Tabs,List, Menu, MenuItem, Sidebar,AppBar,Toolbar
  • การใช้รูป Icons ต่างๆ ผ่าน Components Icon
  • การรับข้อมูลจากฟอร์มด้วย Components ต่าง ๆ เช่น TextField, Checkbok, Radio, Select, Slider, Button เป็นต้น
  • การใช้และปรับแต่ง Theme ใน Material UI

Section 4: สร้าง Workshop Rest API ด้วย Strapi CMS V.4

  • สร้างโปรเจ็กต์ API NodeJS ด้วย Strapi CMS Version 4
  • เพิ่ม Collections และกำหนดสิทธิ์ใน Strapi
  • ติดตั้ง Authentication ใน Strapi ด้วย JWT
  • ทดสอบเรียกใช้ API ก่อนนำไปใช้งานกับ ReactJS

Section 5: ใช้ React เชื่อมต่อ Web API พร้อมทำ Authentication

  • ติดตั้ง Node Package Libray สำหรับการเชื่อมต่อ Web API ใน React Project
  • เขียน Service ใน React เพื่อทำระบบ Login / Register ไปยัง API
  • แนวทางการเก็บ Token ที่ได้จาก API ลงใน localStorage และ Cookie ที่ฝั่ง React
  • การเขียน Private Route (Protected Route) สำหรับป้องกันการเข้าถึงโดยตรง ด้วย React Router Dom V.6

Section 6: Workshop React เรียกข้อมูล/เพิ่ม/แก้ไข/ลบ (CRUD) ผ่าน API

  • เขียน Service สำหรับเรียกข้อมูล/เพิ่ม/แก้ไข/ลบ (CRUD) ผ่าน API
  • ดึงข้อมูลจาก API แสดงผลในตารางด้วย Material UI (MUI)
  • จัดรูปแบบการแสดงผล สกุลเงิน วันที่ เวลาใน React
  • ทดสอบ Run / Build โปรเจ็กต์ที่ทำเสร็จแล้ว

Section 7: การ Build และ Deployed project ไปใช้งานจริง

  • ปรับแต่งโปรเจ็กต์ React TypeScript ก่อนทำการ Build
  • แนวทางการ Build เพื่อนำไปใช้งานบน Web Server ต่างๆ
  • แนวทางการ Deployed ผ่าน Docker Container
  • การแก้ปัญหาต่างๆ ที่อาจพบจากการนำไปขึ้นระบบจริง

ตัวอย่าง Workshop React and NodeJS with Docker (CRUD)

React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

แจกฟรี React with MUI Admin Template

React and NodeJS with Docker Template

React and NodeJS with Docker Template

React and NodeJS with Docker Template

18 ชั่วโมง

ราคา 400 บาท

ลงทะเบียนแล้ว

462 คน

สั่งซื้อวิดีโอบันทึกการอบรม
ติดต่อตามข้อมูลด้านล่างนี้