React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop

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

สาขากรุงเทพฯ (ลาดพร้าว)
  • ยังไม่มีรอบเปิดอบรม (ลงชื่อจองไว้ได้)
  • สามารถพัฒนาโปรเจ็กต์ด้วย JavaScript ได้
  • ผู้ที่ต้องการ พัฒนาเว็บแอปพลิเคชันแบบ "Full Stack"
  • IT Managers
  • Developers
  • พื้นฐาน HTML 5 & CSS 3
  • พื้นฐาน JavaScript ES 6
  • พื้นฐาน Docker
  • 18 ชั่วโมง
  • ราคาปกติ 9,500 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 8,550 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

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