12 KiB

Raw Permalink Blame History

ใช้ API

ภาพรวม

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

คำแนะนำ

ขั้นตอนที่ 1: เลือก API ของคุณ

เลือก API จาก รายการ API สาธารณะฟรี ที่คัดสรรมาแล้ว ลองพิจารณาหมวดหมู่เหล่านี้:

ตัวเลือกยอดนิยมสำหรับผู้เริ่มต้น:

บันเทิง: Dog CEO API สำหรับรูปภาพสุนัขแบบสุ่ม
สภาพอากาศ: OpenWeatherMap สำหรับข้อมูลสภาพอากาศปัจจุบัน
คำคม: Quotable API สำหรับคำคมสร้างแรงบันดาลใจ
ข่าว: NewsAPI สำหรับหัวข้อข่าวปัจจุบัน
ข้อเท็จจริงสนุกๆ: Numbers API สำหรับข้อเท็จจริงเกี่ยวกับตัวเลขที่น่าสนใจ

ขั้นตอนที่ 2: วางแผนส่วนขยายของคุณ

ก่อนเริ่มเขียนโค้ด ตอบคำถามการวางแผนเหล่านี้:

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

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

ส่วนขยายของคุณควรมี:

ฟีเจอร์ที่จำเป็น:

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

ข้อกำหนดด้านโค้ด:

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

ขั้นตอนที่ 4: ทดสอบและปรับปรุง

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

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

ยกระดับส่วนขยายของคุณไปอีกขั้น:

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

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

ส่วนขยายเบราว์เซอร์ที่ใช้งานได้ ซึ่งรวมเข้ากับ API ที่คุณเลือกได้สำเร็จ
ไฟล์ README ที่อธิบาย:
- API ที่คุณเลือกและเหตุผล
- วิธีติดตั้งและใช้งานส่วนขยายของคุณ
- API keys หรือการตั้งค่าที่จำเป็น
- ภาพหน้าจอของส่วนขยายของคุณขณะทำงาน
โค้ดที่สะอาดและมีความคิดเห็น ที่ปฏิบัติตามแนวทาง 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 ที่ครอบคลุมพร้อมคำแนะนำการตั้งค่าและภาพหน้าจอ	เอกสารประกอบที่ดีครอบคลุมข้อกำหนดส่วนใหญ่	เอกสารประกอบพื้นฐานที่ขาดรายละเอียดบางส่วน	เอกสารประกอบไม่ดีหรือไม่มี

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

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

แหล่งข้อมูล

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

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

12 KiB Raw Permalink Blame History