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.
142 lines
15 KiB
142 lines
15 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "d0a02cb117e91a5b5f24178080068a3d",
|
|
"translation_date": "2025-10-23T21:10:23+00:00",
|
|
"source_file": "7-bank-project/3-data/assignment.md",
|
|
"language_code": "th"
|
|
}
|
|
-->
|
|
# การมอบหมายงานการปรับปรุงโค้ดและการเขียนเอกสาร
|
|
|
|
## วัตถุประสงค์การเรียนรู้
|
|
|
|
เมื่อทำงานนี้เสร็จ คุณจะได้ฝึกทักษะสำคัญในการพัฒนาซอฟต์แวร์ที่นักพัฒนามืออาชีพใช้ในชีวิตประจำวัน คุณจะได้เรียนรู้การจัดระเบียบโค้ดเพื่อความง่ายต่อการดูแลรักษา ลดการซ้ำซ้อนผ่านการสร้างนามธรรม และเขียนเอกสารสำหรับการใช้งานในอนาคต (รวมถึงตัวคุณเองด้วย!)
|
|
|
|
โค้ดที่สะอาดและมีเอกสารประกอบที่ดีเป็นสิ่งสำคัญสำหรับโครงการพัฒนาเว็บในโลกจริงที่มีนักพัฒนาหลายคนร่วมมือกันและโค้ดเบสที่เปลี่ยนแปลงไปตามเวลา
|
|
|
|
## ภาพรวมของงาน
|
|
|
|
ไฟล์ `app.js` ของแอปธนาคารของคุณมีขนาดใหญ่ขึ้นอย่างมากด้วยฟังก์ชันการเข้าสู่ระบบ การลงทะเบียน และแดชบอร์ด ถึงเวลาแล้วที่จะปรับปรุงโค้ดนี้โดยใช้แนวทางการพัฒนามืออาชีพเพื่อเพิ่มความอ่านง่าย ความง่ายต่อการดูแลรักษา และลดการซ้ำซ้อน
|
|
|
|
## คำแนะนำ
|
|
|
|
ปรับปรุงโค้ด `app.js` ของคุณโดยใช้เทคนิคการปรับปรุงโค้ดหลักสามข้อดังนี้:
|
|
|
|
### 1. แยกค่าคงที่สำหรับการตั้งค่า
|
|
|
|
**งาน**: สร้างส่วนการตั้งค่าที่ด้านบนของไฟล์ของคุณด้วยค่าคงที่ที่สามารถนำกลับมาใช้ใหม่ได้
|
|
|
|
**คำแนะนำในการดำเนินการ:**
|
|
- แยก URL ฐานของ API เซิร์ฟเวอร์ (ที่ปัจจุบันถูกเขียนไว้ในหลายที่)
|
|
- สร้างค่าคงที่สำหรับข้อความแสดงข้อผิดพลาดที่ปรากฏในฟังก์ชันหลายๆ ตัว
|
|
- พิจารณาแยกเส้นทางของ route และ ID ของ element ที่ถูกใช้ซ้ำๆ
|
|
|
|
**ตัวอย่างโครงสร้าง:**
|
|
```javascript
|
|
// Configuration constants
|
|
const API_BASE_URL = 'http://localhost:5000/api';
|
|
const ROUTES = {
|
|
LOGIN: '/login',
|
|
DASHBOARD: '/dashboard'
|
|
};
|
|
```
|
|
|
|
### 2. สร้างฟังก์ชันการส่งคำขอที่รวมกัน
|
|
|
|
**งาน**: สร้างฟังก์ชัน `sendRequest()` ที่สามารถนำกลับมาใช้ใหม่ได้เพื่อกำจัดโค้ดที่ซ้ำซ้อนระหว่าง `createAccount()` และ `getAccount()`
|
|
|
|
**ข้อกำหนด:**
|
|
- รองรับทั้งคำขอ GET และ POST
|
|
- มีการจัดการข้อผิดพลาดที่เหมาะสม
|
|
- รองรับ endpoint URL ที่แตกต่างกัน
|
|
- รับข้อมูล body ของคำขอเป็นตัวเลือก
|
|
|
|
**คำแนะนำสำหรับ signature ของฟังก์ชัน:**
|
|
```javascript
|
|
async function sendRequest(endpoint, method = 'GET', data = null) {
|
|
// Your implementation here
|
|
}
|
|
```
|
|
|
|
### 3. เพิ่มเอกสารประกอบโค้ดแบบมืออาชีพ
|
|
|
|
**งาน**: เขียนเอกสารประกอบโค้ดของคุณด้วยความคิดเห็นที่ชัดเจนและมีประโยชน์ซึ่งอธิบาย "เหตุผล" เบื้องหลังตรรกะของคุณ
|
|
|
|
**มาตรฐานการเขียนเอกสาร:**
|
|
- เพิ่มเอกสารประกอบฟังก์ชันที่อธิบายวัตถุประสงค์ พารามิเตอร์ และค่าที่ส่งกลับ
|
|
- รวมความคิดเห็นในบรรทัดสำหรับตรรกะที่ซับซ้อนหรือกฎทางธุรกิจ
|
|
- จัดกลุ่มฟังก์ชันที่เกี่ยวข้องเข้าด้วยกันพร้อมส่วนหัวของแต่ละส่วน
|
|
- อธิบายรูปแบบโค้ดที่ไม่ชัดเจนหรือการแก้ไขปัญหาเฉพาะของเบราว์เซอร์
|
|
|
|
**ตัวอย่างสไตล์การเขียนเอกสาร:**
|
|
```javascript
|
|
/**
|
|
* Authenticates user and redirects to dashboard
|
|
* @param {Event} event - Form submission event
|
|
* @returns {Promise<void>} - Resolves when login process completes
|
|
*/
|
|
async function login(event) {
|
|
// Prevent default form submission to handle with JavaScript
|
|
event.preventDefault();
|
|
|
|
// Your implementation...
|
|
}
|
|
```
|
|
|
|
## เกณฑ์ความสำเร็จ
|
|
|
|
โค้ดที่ปรับปรุงของคุณควรแสดงให้เห็นถึงแนวทางการพัฒนามืออาชีพดังนี้:
|
|
|
|
### การดำเนินการที่ยอดเยี่ยม
|
|
- ✅ **ค่าคงที่**: ค่าที่ใช้ซ้ำและ URL ทั้งหมดถูกแยกออกมาเป็นค่าคงที่ที่มีชื่อชัดเจน
|
|
- ✅ **หลักการ DRY**: ตรรกะคำขอที่ใช้ร่วมกันถูกรวมไว้ในฟังก์ชัน `sendRequest()` ที่สามารถนำกลับมาใช้ใหม่ได้
|
|
- ✅ **เอกสารประกอบ**: ฟังก์ชันมีความคิดเห็น JSDoc ที่ชัดเจนซึ่งอธิบายวัตถุประสงค์และพารามิเตอร์
|
|
- ✅ **การจัดระเบียบ**: โค้ดถูกจัดกลุ่มอย่างมีเหตุผลพร้อมส่วนหัวของแต่ละส่วนและรูปแบบที่สม่ำเสมอ
|
|
- ✅ **การจัดการข้อผิดพลาด**: การจัดการข้อผิดพลาดได้รับการปรับปรุงโดยใช้ฟังก์ชันคำขอใหม่
|
|
|
|
### การดำเนินการที่เพียงพอ
|
|
- ✅ **ค่าคงที่**: ค่าที่ใช้ซ้ำส่วนใหญ่ถูกแยกออกมา โดยยังมีค่าที่เขียนไว้บางส่วน
|
|
- ✅ **การปรับปรุง**: สร้างฟังก์ชัน `sendRequest()` พื้นฐาน แต่ยังอาจไม่ครอบคลุมทุกกรณี
|
|
- ✅ **ความคิดเห็น**: ฟังก์ชันสำคัญได้รับการเขียนเอกสาร แม้ว่าบางคำอธิบายอาจยังไม่สมบูรณ์
|
|
- ✅ **ความอ่านง่าย**: โค้ดโดยทั่วไปมีการจัดระเบียบดี แม้ว่าบางส่วนอาจยังต้องปรับปรุง
|
|
|
|
### ต้องปรับปรุง
|
|
- ❌ **ค่าคงที่**: ค่าที่ใช้ซ้ำและ URL จำนวนมากยังคงถูกเขียนไว้ในไฟล์
|
|
- ❌ **การซ้ำซ้อน**: มีการซ้ำซ้อนของโค้ดอย่างมากระหว่างฟังก์ชันที่คล้ายกัน
|
|
- ❌ **เอกสารประกอบ**: ไม่มีความคิดเห็นหรือความคิดเห็นไม่เพียงพอที่อธิบายวัตถุประสงค์ของโค้ด
|
|
- ❌ **การจัดระเบียบ**: โค้ดขาดโครงสร้างที่ชัดเจนและการจัดกลุ่มที่มีเหตุผล
|
|
|
|
## การทดสอบโค้ดที่ปรับปรุง
|
|
|
|
หลังจากการปรับปรุง ตรวจสอบให้แน่ใจว่าแอปธนาคารของคุณยังคงทำงานได้อย่างถูกต้อง:
|
|
|
|
1. **ทดสอบทุกขั้นตอนของผู้ใช้**: การลงทะเบียน การเข้าสู่ระบบ การแสดงผลแดชบอร์ด และการจัดการข้อผิดพลาด
|
|
2. **ตรวจสอบคำขอ API**: ยืนยันว่าฟังก์ชัน `sendRequest()` ของคุณทำงานได้ทั้งการสร้างบัญชีและการดึงข้อมูลบัญชี
|
|
3. **ตรวจสอบสถานการณ์ข้อผิดพลาด**: ทดสอบด้วยข้อมูลรับรองที่ไม่ถูกต้องและข้อผิดพลาดของเครือข่าย
|
|
4. **ตรวจสอบผลลัพธ์ในคอนโซล**: ตรวจสอบว่าไม่มีข้อผิดพลาดใหม่ที่เกิดขึ้นระหว่างการปรับปรุง
|
|
|
|
## แนวทางการส่งงาน
|
|
|
|
ส่งไฟล์ `app.js` ที่ปรับปรุงของคุณพร้อมกับ:
|
|
- ส่วนหัวที่ชัดเจนสำหรับการจัดระเบียบฟังก์ชันต่างๆ
|
|
- รูปแบบและการเยื้องโค้ดที่สม่ำเสมอ
|
|
- เอกสาร JSDoc ที่สมบูรณ์สำหรับฟังก์ชันทั้งหมด
|
|
- ความคิดเห็นสั้นๆ ที่ด้านบนอธิบายแนวทางการปรับปรุงของคุณ
|
|
|
|
**ความท้าทายเพิ่มเติม**: สร้างไฟล์เอกสารโครงสร้างโค้ด (`CODE_STRUCTURE.md`) ง่ายๆ ที่อธิบายสถาปัตยกรรมของแอปของคุณและวิธีการทำงานร่วมกันของฟังก์ชันต่างๆ
|
|
|
|
## การเชื่อมโยงกับโลกจริง
|
|
|
|
งานนี้สะท้อนถึงประเภทของการดูแลรักษาโค้ดที่นักพัฒนามืออาชีพทำเป็นประจำ ในการทำงานในอุตสาหกรรม:
|
|
- **การตรวจสอบโค้ด** ประเมินความอ่านง่ายและความง่ายต่อการดูแลรักษาเหมือนกับงานนี้
|
|
- **หนี้ทางเทคนิค** สะสมเมื่อโค้ดไม่ได้รับการปรับปรุงและเขียนเอกสารอย่างสม่ำเสมอ
|
|
- **การทำงานร่วมกันในทีม** ขึ้นอยู่กับโค้ดที่ชัดเจนและมีเอกสารประกอบที่นักพัฒนาคนใหม่สามารถเข้าใจได้
|
|
- **การแก้ไขข้อผิดพลาด** ง่ายขึ้นในโค้ดเบสที่มีการจัดระเบียบดีและมีการสร้างนามธรรมที่เหมาะสม
|
|
|
|
ทักษะที่คุณกำลังฝึกฝนที่นี่ - การแยกค่าคงที่ การกำจัดการซ้ำซ้อน และการเขียนเอกสารที่ชัดเจน - เป็นพื้นฐานของการพัฒนาซอฟต์แวร์มืออาชีพ
|
|
|
|
---
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |