You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
11 KiB
76 lines
11 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
|
|
"translation_date": "2025-10-23T20:50:47+00:00",
|
|
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
|
"language_code": "th"
|
|
}
|
|
-->
|
|
# งาน: สำรวจเครื่องมือพัฒนาเว็บสมัยใหม่
|
|
|
|
## คำแนะนำ
|
|
|
|
ระบบนิเวศของการพัฒนาเว็บมีเครื่องมือเฉพาะทางมากมายที่ช่วยให้นักพัฒนาสามารถสร้าง ทดสอบ และดูแลรักษาแอปพลิเคชันได้อย่างมีประสิทธิภาพ งานของคุณคือการค้นคว้าและทำความเข้าใจเครื่องมือที่ช่วยเสริมเครื่องมือที่ครอบคลุมในบทเรียนนี้
|
|
|
|
**ภารกิจของคุณ:** เลือก **สามเครื่องมือ** ที่ **ไม่ได้ครอบคลุมในบทเรียนนี้** (หลีกเลี่ยงการเลือกโปรแกรมแก้ไขโค้ด เบราว์เซอร์ หรือเครื่องมือบรรทัดคำสั่งที่มีอยู่แล้ว) เน้นเครื่องมือที่แก้ปัญหาเฉพาะในกระบวนการพัฒนาเว็บสมัยใหม่
|
|
|
|
**สำหรับแต่ละเครื่องมือ ให้ระบุ:**
|
|
|
|
1. **ชื่อและหมวดหมู่ของเครื่องมือ** (เช่น "Figma - เครื่องมือออกแบบ" หรือ "Jest - เฟรมเวิร์คการทดสอบ")
|
|
2. **วัตถุประสงค์และประโยชน์** - อธิบาย 2-3 ประโยคว่าทำไมนักพัฒนาถึงใช้เครื่องมือนี้และเครื่องมือนี้แก้ปัญหาอะไร
|
|
3. **ลิงก์เอกสารอย่างเป็นทางการ** - ให้ลิงก์ไปยังเอกสารหรือเว็บไซต์อย่างเป็นทางการของเครื่องมือ (ไม่ใช่แค่เว็บไซต์สอน)
|
|
4. **บริบทในโลกจริง** - กล่าวถึงวิธีที่เครื่องมือนี้เข้ากับกระบวนการพัฒนาในระดับมืออาชีพ
|
|
|
|
## หมวดหมู่เครื่องมือที่แนะนำ
|
|
|
|
ลองสำรวจเครื่องมือจากหมวดหมู่เหล่านี้:
|
|
|
|
| หมวดหมู่ | ตัวอย่าง | สิ่งที่พวกเขาทำ |
|
|
|-----------|----------|------------------|
|
|
| **เครื่องมือ Build** | Vite, Webpack, Parcel, esbuild | รวมและปรับปรุงโค้ดสำหรับการใช้งานจริง พร้อมเซิร์ฟเวอร์พัฒนาแบบรวดเร็ว |
|
|
| **เฟรมเวิร์คการทดสอบ** | Vitest, Jest, Cypress, Playwright | ตรวจสอบว่าโค้ดทำงานถูกต้องและจับข้อผิดพลาดก่อนการใช้งานจริง |
|
|
| **เครื่องมือออกแบบ** | Figma, Adobe XD, Penpot | สร้าง mockups, prototypes และระบบการออกแบบร่วมกัน |
|
|
| **แพลตฟอร์มการปรับใช้** | Netlify, Vercel, Cloudflare Pages | โฮสต์และแจกจ่ายเว็บไซต์พร้อมระบบ CI/CD อัตโนมัติ |
|
|
| **การควบคุมเวอร์ชัน** | GitHub, GitLab, Bitbucket | จัดการการเปลี่ยนแปลงโค้ด การทำงานร่วมกัน และกระบวนการทำงานของโปรเจกต์ |
|
|
| **เฟรมเวิร์ค CSS** | Tailwind CSS, Bootstrap, Bulma | เร่งการออกแบบด้วยไลบรารีคอมโพเนนต์ที่สร้างไว้ล่วงหน้า |
|
|
| **ตัวจัดการแพ็กเกจ** | npm, pnpm, Yarn | ติดตั้งและจัดการไลบรารีโค้ดและ dependencies |
|
|
| **เครื่องมือการเข้าถึง** | axe-core, Lighthouse, Pa11y | ทดสอบการออกแบบที่ครอบคลุมและการปฏิบัติตาม WCAG |
|
|
| **การพัฒนา API** | Postman, Insomnia, Thunder Client | ทดสอบและจัดทำเอกสาร API ระหว่างการพัฒนา |
|
|
|
|
## รูปแบบที่ต้องการ
|
|
|
|
**สำหรับแต่ละเครื่องมือ:**
|
|
```
|
|
### [Tool Name] - [Category]
|
|
|
|
**Purpose:** [2-3 sentences explaining why developers use this tool]
|
|
|
|
**Documentation:** [Official website/documentation link]
|
|
|
|
**Workflow Integration:** [1 sentence about how it fits into development process]
|
|
```
|
|
|
|
## แนวทางคุณภาพ
|
|
|
|
- **เลือกเครื่องมือที่ทันสมัย**: เลือกเครื่องมือที่ได้รับการดูแลรักษาและใช้งานอย่างแพร่หลายในปี 2025
|
|
- **เน้นคุณค่า**: อธิบายประโยชน์เฉพาะ ไม่ใช่แค่สิ่งที่เครื่องมือทำ
|
|
- **บริบทระดับมืออาชีพ**: พิจารณาเครื่องมือที่ทีมพัฒนาใช้งาน ไม่ใช่แค่ผู้ใช้งานทั่วไป
|
|
- **การเลือกที่หลากหลาย**: เลือกเครื่องมือจากหมวดหมู่ที่แตกต่างกันเพื่อแสดงความหลากหลายในระบบนิเวศ
|
|
- **ความเกี่ยวข้องสมัยใหม่**: ให้ความสำคัญกับเครื่องมือที่สอดคล้องกับแนวโน้มและแนวปฏิบัติที่ดีที่สุดในปัจจุบันของการพัฒนาเว็บ
|
|
|
|
## เกณฑ์การประเมิน
|
|
|
|
| ยอดเยี่ยม | ดี | ต้องปรับปรุง |
|
|
|-----------|----|---------------|
|
|
| **อธิบายชัดเจนว่าทำไมนักพัฒนาถึงใช้แต่ละเครื่องมือและเครื่องมือแก้ปัญหาอะไร** | **อธิบายสิ่งที่เครื่องมือทำ แต่ขาดบริบทเกี่ยวกับคุณค่า** | **ระบุเครื่องมือแต่ไม่ได้อธิบายวัตถุประสงค์หรือประโยชน์** |
|
|
| **ให้ลิงก์เอกสารอย่างเป็นทางการสำหรับทุกเครื่องมือ** | **ให้ลิงก์อย่างเป็นทางการส่วนใหญ่ แต่มี 1-2 เว็บไซต์สอน** | **อ้างอิงเว็บไซต์สอนเป็นหลักแทนเอกสารอย่างเป็นทางการ** |
|
|
| **เลือกเครื่องมือที่ทันสมัย ใช้งานในระดับมืออาชีพจากหมวดหมู่ที่หลากหลาย** | **เลือกเครื่องมือที่ดี แต่มีความหลากหลายในหมวดหมู่น้อย** | **เลือกเครื่องมือที่ล้าสมัยหรือจากหมวดหมู่เดียวเท่านั้น** |
|
|
| **แสดงความเข้าใจเกี่ยวกับวิธีที่เครื่องมือเข้ากับกระบวนการทำงานระดับมืออาชีพ** | **แสดงความเข้าใจบางส่วนเกี่ยวกับบริบทระดับมืออาชีพ** | **เน้นเฉพาะคุณสมบัติของเครื่องมือโดยไม่มีบริบทการทำงาน** |
|
|
|
|
> 💡 **เคล็ดลับการค้นคว้า**: มองหาเครื่องมือที่กล่าวถึงในประกาศรับสมัครงานสำหรับนักพัฒนาเว็บ ตรวจสอบแบบสำรวจนักพัฒนายอดนิยม หรือสำรวจ dependencies ที่ใช้ในโปรเจกต์โอเพ่นซอร์สที่ประสบความสำเร็จบน GitHub!
|
|
|
|
---
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |