<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "25b8d28b8531352d4eb67291fd7824c4",
  "translation_date": "2025-10-23T21:23:53+00:00",
  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
  "language_code": "th"
}
-->
# ใช้ API

## ภาพรวม

API เปิดโอกาสไม่สิ้นสุดสำหรับการพัฒนาเว็บที่สร้างสรรค์! ในงานนี้ คุณจะเลือก API ภายนอกและสร้างส่วนขยายเบราว์เซอร์ที่แก้ปัญหาจริงหรือให้ฟังก์ชันการทำงานที่มีคุณค่าแก่ผู้ใช้

## คำแนะนำ

### ขั้นตอนที่ 1: เลือก API ของคุณ
เลือก API จาก [รายการ API สาธารณะฟรี](https://github.com/public-apis/public-apis) ที่คัดสรรมาแล้ว ลองพิจารณาหมวดหมู่เหล่านี้:

**ตัวเลือกยอดนิยมสำหรับผู้เริ่มต้น:**
- **บันเทิง**: [Dog CEO API](https://dog.ceo/dog-api/) สำหรับรูปภาพสุนัขแบบสุ่ม
- **สภาพอากาศ**: [OpenWeatherMap](https://openweathermap.org/api) สำหรับข้อมูลสภาพอากาศปัจจุบัน
- **คำคม**: [Quotable API](https://quotable.io/) สำหรับคำคมสร้างแรงบันดาลใจ
- **ข่าว**: [NewsAPI](https://newsapi.org/) สำหรับหัวข้อข่าวปัจจุบัน
- **ข้อเท็จจริงสนุกๆ**: [Numbers API](http://numbersapi.com/) สำหรับข้อเท็จจริงเกี่ยวกับตัวเลขที่น่าสนใจ

### ขั้นตอนที่ 2: วางแผนส่วนขยายของคุณ
ก่อนเริ่มเขียนโค้ด ตอบคำถามการวางแผนเหล่านี้:
- ส่วนขยายของคุณแก้ปัญหาอะไร?
- ใครคือผู้ใช้เป้าหมายของคุณ?
- ข้อมูลใดที่คุณจะเก็บไว้ใน local storage?
- คุณจะจัดการกับการล้มเหลวของ API หรือข้อจำกัดการใช้งานอย่างไร?

### ขั้นตอนที่ 3: สร้างส่วนขยายของคุณ
ส่วนขยายของคุณควรมี:

**ฟีเจอร์ที่จำเป็น:**
- ช่องป้อนข้อมูลสำหรับพารามิเตอร์ API ที่จำเป็น
- การรวม API พร้อมการจัดการข้อผิดพลาดที่เหมาะสม
- local storage สำหรับการตั้งค่าผู้ใช้หรือ API keys
- ส่วนติดต่อผู้ใช้ที่สะอาดและตอบสนอง
- สถานะการโหลดและการตอบกลับผู้ใช้

**ข้อกำหนดด้านโค้ด:**
- ใช้ฟีเจอร์ JavaScript สมัยใหม่ (ES6+)
- ใช้ async/await สำหรับการเรียก API
- รวมการจัดการข้อผิดพลาดที่เหมาะสมด้วย try/catch blocks
- เพิ่มความคิดเห็นที่มีความหมายเพื่ออธิบายโค้ดของคุณ
- ปฏิบัติตามรูปแบบการจัดโค้ดที่สม่ำเสมอ

### ขั้นตอนที่ 4: ทดสอบและปรับปรุง
- ทดสอบส่วนขยายของคุณด้วยข้อมูลป้อนเข้าหลายรูปแบบ
- จัดการกรณีขอบ (ไม่มีอินเทอร์เน็ต, การตอบกลับ API ที่ไม่ถูกต้อง)
- ตรวจสอบให้แน่ใจว่าส่วนขยายของคุณทำงานหลังจากรีสตาร์ทเบราว์เซอร์
- เพิ่มข้อความแสดงข้อผิดพลาดที่เป็นมิตรต่อผู้ใช้

## ความท้าทายเพิ่มเติม

ยกระดับส่วนขยายของคุณไปอีกขั้น:
- เพิ่ม API endpoints หลายตัวเพื่อเพิ่มฟังก์ชันการทำงาน
- ใช้การแคชข้อมูลเพื่อลดการเรียก API
- สร้างคีย์ลัดสำหรับการดำเนินการทั่วไป
- เพิ่มฟีเจอร์การส่งออก/นำเข้าข้อมูล
- ใช้ตัวเลือกการปรับแต่งสำหรับผู้ใช้

## ข้อกำหนดการส่งงาน

1. **ส่วนขยายเบราว์เซอร์ที่ใช้งานได้** ซึ่งรวมเข้ากับ API ที่คุณเลือกได้สำเร็จ
2. **ไฟล์ README** ที่อธิบาย:
   - API ที่คุณเลือกและเหตุผล
   - วิธีติดตั้งและใช้งานส่วนขยายของคุณ
   - API keys หรือการตั้งค่าที่จำเป็น
   - ภาพหน้าจอของส่วนขยายของคุณขณะทำงาน
3. **โค้ดที่สะอาดและมีความคิดเห็น** ที่ปฏิบัติตามแนวทาง JavaScript สมัยใหม่

## เกณฑ์การประเมิน

| เกณฑ์ | ยอดเยี่ยม (90-100%) | ดี (80-89%) | พัฒนา (70-79%) | เริ่มต้น (60-69%) |
|-------|----------------------|-------------|-----------------|-------------------|
| **การรวม API** | การรวม API ที่ไร้ที่ติพร้อมการจัดการข้อผิดพลาดและกรณีขอบที่ครอบคลุม | การรวม API สำเร็จพร้อมการจัดการข้อผิดพลาดพื้นฐาน | API ทำงานแต่มีการจัดการข้อผิดพลาดจำกัด | การรวม API มีปัญหาสำคัญ |
| **คุณภาพของโค้ด** | โค้ด JavaScript สมัยใหม่ที่สะอาดและมีความคิดเห็นที่ดีตามแนวทางปฏิบัติที่ดีที่สุด | โครงสร้างโค้ดดีพร้อมความคิดเห็นที่เพียงพอ | โค้ดทำงานแต่ต้องการการจัดระเบียบที่ดีกว่า | คุณภาพโค้ดต่ำและมีความคิดเห็นน้อย |
| **ประสบการณ์ผู้ใช้** | ส่วนติดต่อที่ปรับแต่งอย่างดีพร้อมสถานะการโหลดและการตอบกลับผู้ใช้ที่ยอดเยี่ยม | ส่วนติดต่อที่ดีพร้อมการตอบกลับผู้ใช้พื้นฐาน | ส่วนติดต่อพื้นฐานที่ทำงานได้เพียงพอ | ประสบการณ์ผู้ใช้ไม่ดีพร้อมส่วนติดต่อที่สับสน |
| **local storage** | การใช้ local storage อย่างซับซ้อนพร้อมการตรวจสอบและจัดการข้อมูล | การใช้งาน local storage อย่างเหมาะสมสำหรับฟีเจอร์สำคัญ | การใช้งาน local storage แบบพื้นฐาน | การใช้ local storage น้อยหรือไม่ถูกต้อง |
| **เอกสารประกอบ** | README ที่ครอบคลุมพร้อมคำแนะนำการตั้งค่าและภาพหน้าจอ | เอกสารประกอบที่ดีครอบคลุมข้อกำหนดส่วนใหญ่ | เอกสารประกอบพื้นฐานที่ขาดรายละเอียดบางส่วน | เอกสารประกอบไม่ดีหรือไม่มี |

## เคล็ดลับการเริ่มต้น

1. **เริ่มต้นง่ายๆ**: เลือก API ที่ไม่ต้องการการตรวจสอบสิทธิ์ที่ซับซ้อน
2. **อ่านเอกสาร**: ทำความเข้าใจ endpoints และการตอบกลับของ API ที่คุณเลือกอย่างละเอียด
3. **วางแผน UI ของคุณ**: ร่างส่วนติดต่อของส่วนขยายของคุณก่อนเขียนโค้ด
4. **ทดสอบบ่อยๆ**: สร้างทีละขั้นตอนและทดสอบแต่ละฟีเจอร์เมื่อคุณเพิ่มเข้าไป
5. **จัดการข้อผิดพลาด**: คาดการณ์ว่าอาจเกิดการล้มเหลวของ API และวางแผนรับมือ

## แหล่งข้อมูล

- [เอกสารประกอบส่วนขยายเบราว์เซอร์](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
- [คู่มือ Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
- [บทเรียน local storage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
- [การแยกวิเคราะห์และจัดการ JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)

ขอให้สนุกกับการสร้างสิ่งที่มีประโยชน์และสร้างสรรค์! 🚀

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้