<!--
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้