Test Driven Development(TDD) with React and Storybook
- TTDG36
- Classroom
- Fundamental
- Thai | 0
ในหลักสูตรนี้จะเป็นการนำความสามารถของทั้งสองตัวคือ React ที่เป็น Framework ที่มีความคล่องตัวสูง มาพัฒนาในรูปแบบ TypeScript ที่มีความคล่องตัวสูงทำให้การพัฒนา Solution ด้วย React สามารถต่อยอดได้ง่ายขึ้นหลักการ TDD (Test-Driven Development) กับ Node.js โดยการใช้ TypeScript เป็นเรื่องของการเสริมสร้างคุณภาพของ Code และลดการเกิดปัญหาของงานได้ดีขึ้น
Course description
Time
Instructor
Venue
Test Driven Development(TDD) with React and Storybook
React เป็น Java Script Library ตัวนึงที่ได้รับความสนใจเป็นอย่างมากในขณะนี้ เนื่องด้วยเป็น Library ที่มีจุดเด่นสำคัญคือ Virtual DOM ทำให้ทำงานได้เร็วมากเมื่อเทียบกับ Framework อื่น ๆ ทั่วไป อีกทั้งเป็นLibrary ที่สามารถนำมาพัฒนาต่อยอดได้อย่างง่ายดาย มีประสิทธิภาพสูง เป็นที่ยอมรับในหมู่นักพัฒนา web application อีกทั้งยังสามารถพัฒนาต่อยอดไปทำ mobile application ได้ด้วย (React Native)
TypeScript เป็น Super Script ของ Java Script เพื่อช่วยให้การพัฒนาโปรแกรมด้วยภาษา Java Script มีความยืดหยุ่นสูงขึ้น มีความเป็น OOP, ทำให้สามารถ scale ขนาด Project ได้อย่างง่ายดายและมีประสิทธิภาพ
ในหลักสูตรนี้จะเป็นการนำความสามารถของทั้งสองตัวคือ React ที่เป็น Framework ที่มีความคล่องตัวสูง มาพัฒนาในรูปแบบ TypeScript ที่มีความคล่องตัวสูงทำให้การพัฒนา Solution ด้วย React สามารถต่อยอดได้ง่ายขึ้น
หลักการ TDD (Test-Driven Development) กับ Node.js โดยการใช้ TypeScript เป็นเรื่องของการเสริมสร้างคุณภาพของ Code และลดการเกิดปัญหาของงานได้ดีขึ้น ในการทำ TDD นั้นจะมีแนวทางสำคัญ ๆดังนี้
- เขียนทดสอบก่อน (Write tests first) โดยการเขียน test อิงตามความต้องการของการทำงานก่อน
- เขียน Code ให้ผ่านการทดสอบ (Write just enough code) โดยเป็นการเขียนเพื่อหวังผลการผ่านการทดสอบก่อน
- Refactor เป็นการปรับปรุงคุณภาพการเขียนให้มีประสิทธิภาพมากยิ่งขึ้น
โดยในหลักสูตรนี้จะเน้นไปที่การทำ workshop เพื่อให้เห็นการทำงานของ TDD และแนวทางการนำไปประยุกต์ใช้ในงานต่อไป
กลุ่มเป้าหมาย
- นักเรียน, นักศึกษา, ผู้ประกอบการ, Developer ที่มีความรู้ในการพัฒนาโปรแกรมในด้าน Web ทั้งสาย .NET, PHP, Java และอื่น ๆ
- ผู้ที่ทำงานทางด้าน IT อื่น ๆ ที่อยากศึกษาเพิ่มเติมความรู้ หรืออยากเปลี่ยนมาทำงานสายนี้
คุณสมบัติของผู้เข้าอบรม
- นักพัฒนาที่มีความรู้ในการเขียนโปรแกรมภาษาใดภาษาหนึ่ง
- นักพัฒนาที่มีความรู้ความเข้าใจในการทำงานของ Web Application เป็นอย่างดี
- เรียนรู้วิธีการเขียน React แบบ TypeScript
- เรียนรู้แนวคิดของการพัฒนาระบบในรูปแบบ Component
- เรียนรู้วิธีการเชื่อมต่อ REST Api ด้วย axios
- เรียนรู้วิธีการจัดเก็บข้อมูลภายใน (State management) ด้วย Redux
- เรียนรู้วิธีการจัด UX/UI ให้สวยงามหน้าใช้ด้วย TailwindCSS
- เรียนรู้วิธีการทำ Component testing ด้วย Storybook
Day 1 : Programming React with TypeScript
ความรู้เบื้องต้นเกี่ยวกับ React
- ประวัติ ความเป็นมา สถานการณ์ที่เหมาะแก่การใช้งาน
- การติดตั้ง (Installation)
Typescript เบื้องต้น
- การพัฒนาโปรแกรมด้วย Typescript
- การ compile Typescript ให้เป็น Javascript
โครงสร้าง ReactJS Project แบบ Type Script
- การใช้งาน ReactJS Language (ES7 and JSX) เบื้องต้น
- การใช้งาน React Component (Class and Functional) และ UI เบื้องต้น
- การสร้าง Sub Component
- เครื่องมือแปลง HTML ให้เป็น JSX
- การใช้งาน Data Binding (Props and State)
- การดัก Event ที่เกิดขึ้นกับ UI Components แต่ละตัวเช่น การ click ที่ Button, Inp
Day 2 : Styling react with TailwindCSS
- การติดตั้ง TailwindCSS เพื่อใช้งานร่วมกับ React
- การใช้งาน TailwindCSS สร้างหน้าแสดงผลข้อมูล
- การใช้งาน TailwindCSS สร้าง Form สำหรับจัดการข้อมูล
- การใช้งาน Redux (Unidirectional Data Flow)
- การใช้งาน React Router
- การส่งและรับค่าระหว่าง Pages
- การใช้ Validate input และแจ้งเตือน
- การส่งข้อมูลไปและรับข้อมูลกลับจาก server ในรูปแบบ REST Api ด้วย axios
Workshop
- ฝึกปฏิบัติทำหน้าจอสำหรับการ login เข้าระบบ
- ฝึกปฏิบัติทำหน้าจอสำหรับการ register new user
- ฝึกปฏิบัติทำหน้าจอสำหรับ dashboard
- ฝึกปฏิบัติทำหน้าจอสำหรับ main menu
Day 3 : Automate test
Component Testing
- การติดตั้ง storybook สำหรับการทำ component testing
- ฝึกปฏิบัติการเขียน component testing ด้วย storybook
- การติดตั้ง plugins สำหรับการทำ automate test
- ฝึกปฏิบัติการใช้งาน expect ในรูปแบบต่าง ๆ
- ฝึกปฏิบัติการทำ code coverage
- แนวทางการนำ automate test มาใช้งานร่วมกับการทำ CI/CD
Workshop
- ฝึกปฏิบัติเขียน script สำหรับทดสอบหน้าจอ login
- ฝึกปฏิบัติเขียน script สำหรับทดสอบหน้าจอ register new user
- ฝึกปฏิบัติเขียน script สำหรับทดสอบหน้าจอ dashboard
- ฝึกปฏิบัติเขียน script สำหรับทดสอบหน้าจอ main menu
Payment can be made by:
- Cash or Credit Card or Bank Cheque payable to
สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ or National Science and Technology Development Agency
(a post-dated cheque is not accepted) on the first day of the service or within the last day of the service. - Account transfer and send the proof of the payment (the deposit slip) via email patsorn@swpark.or.th
- ธนาคารกรุงเทพ สาขาอุทยานวิทยาศาสตร์
Saving Account Number: 080-0-00001-0
Account Name: สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ - ธนาคารกรุงไทย สาขาตลาดไท
Saving Account Number: 152-1-32668-1
Account Name: สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
- ธนาคารกรุงเทพ สาขาอุทยานวิทยาศาสตร์
Notes:
- Withholding tax (3%) is exempt.
- Should you need to withdraw, you must send the notice of the withdrawal in writing no later than 7 working days before the commencement date. The cancellation less than 7 days will be subject to a fine of 40% of the fee.
- Software Park Thailand reserves the rights to cancel courses due to unforeseen circumstances.
Contact Person
For more information, contact our course coordinator on:
คุณภัสสร พรทิพย์
Ms. Patsorn Pornthip
Tel: +66-2583-9992 Ext. 81422
Email: patsorn@swpark.or.th
You are encouraged to use the course schedule as a guide to plan your training.
The schedule is accessible at www.swpark.or.th for more information.
12,000 THB .
สำคัญ!!! กรุณารอการยืนยันเปิดการอบรมจากเจ้าหน้าที่ก่อนการชำระค่าลงทะเบียน
สำคัญ!!! กรุณารอการยืนยันเปิดการอบรมจากเจ้าหน้าที่ก่อนการชำระค่าลงทะเบียน
Course Detail :
Instructor info
