React and NodeJS with Docker Workshop

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 ต่างๆ เช่น Text Field, Checkbox, Radio, Select, Slider, Button เป็นต้น
• การใช้และปรับแต่ง Theme ใน Material

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
• การแก้ปัญหาต่างๆ ที่อาจพบจากการนำไปขึ้นระบบจริง