วิธีใช้ Apidog ใน VS Code

สรุป

ส่วนขยาย Apidog VS Code ช่วยให้คุณสามารถส่งคำขอ API, จัดการคอลเลกชัน, เรียกใช้การทดสอบ และแบ่งปันพื้นที่ทำงานกับทีมของคุณได้—ทั้งหมดนี้โดยไม่ต้องออกจากโปรแกรมแก้ไขของคุณ การตั้งค่าใช้เวลาไม่ถึงห้านาที: ติดตั้งส่วนขยาย, ลงชื่อเข้าใช้บัญชี Apidog ฟรีของคุณ, และพื้นที่ทำงานของคุณจะโหลดโดยตรงในแถบด้านข้างของ VS Code

บทนำ

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

คู่มือนี้จะอธิบายขั้นตอนการทำงานทั้งหมด: การติดตั้งส่วนขยาย, การเชื่อมต่อกับพื้นที่ทำงานของคุณ, การส่งคำขอ, การเรียกใช้การทดสอบ และการใช้ส่วนขยาย VS Code ควบคู่ไปกับแอปเดสก์ท็อป

ขั้นตอนที่ 1: ติดตั้งส่วนขยาย Apidog VS Code

เปิด VS Code และคลิกไอคอน Extensions ในแถบด้านข้างซ้าย (หรือกด Ctrl+Shift+X / Cmd+Shift+X)

ค้นหา “Apidog” ในแถบค้นหา Extensions Marketplace มองหาส่วนขยายที่เผยแพร่โดย Apidog Inc. – โดยจะมีโลโก้ Apidog (ไอคอนสีเข้มที่มีตัวอักษร API ที่ออกแบบพิเศษ)

คลิก ติดตั้ง VS Code จะติดตั้งส่วนขยายและเพิ่มไอคอน Apidog ไปยัง Activity Bar ของคุณทางด้านซ้าย

หลังจากการติดตั้ง ให้คลิกไอคอน Apidog ใน Activity Bar VS Code จะเปิดแผง Apidog ในแถบด้านข้าง

ขั้นตอนที่ 2: ลงชื่อเข้าใช้บัญชี Apidog ของคุณ

แผง Apidog จะแสดงปุ่ม “Sign In” คลิกปุ่มนั้น

แท็บเบราว์เซอร์จะเปิดไปยังหน้าการยืนยันตัวตนของ Apidog หากคุณมีบัญชี Apidog อยู่แล้ว ให้ป้อนอีเมลและรหัสผ่านของคุณ หากคุณยังไม่มีบัญชี ให้คลิก “Sign Up” – ระดับฟรีต้องใช้อีเมลเท่านั้น ไม่ต้องใช้บัตรเครดิต

หลังจากลงชื่อเข้าใช้ เบราว์เซอร์จะแสดงการยืนยันและขอให้คุณกลับไปที่ VS Code คลิก “Open VS Code” หรือสลับกลับไปที่ VS Code ด้วยตนเอง

VS Code จะทำการยืนยันตัวตนเสร็จสมบูรณ์และโหลดพื้นที่ทำงาน Apidog ของคุณในแถบด้านข้าง

แถบด้านข้างมีลักษณะอย่างไรหลังจากลงชื่อเข้าใช้: แผงด้านซ้ายจะแสดงมุมมองแบบต้นไม้ของพื้นที่ทำงานของคุณ ด้านบนสุด คุณจะเห็นชื่อพื้นที่ทำงานของคุณ ด้านล่างนั้น คอลเลกชันของคุณจะปรากฏเป็นโฟลเดอร์ แต่ละคอลเลกชันจะขยายเพื่อแสดงคำขอที่อยู่ภายใน ซึ่งจัดเรียงตามโครงสร้างโฟลเดอร์ สภาพแวดล้อมจะปรากฏในเมนูดรอปดาวน์ที่ด้านบนของแผง

ขั้นตอนที่ 3: นำทางในคอลเลกชันของคุณ

แถบด้านข้าง Apidog ใน VS Code สะท้อนโครงสร้างคอลเลกชันจากพื้นที่ทำงาน Apidog ของคุณอย่างถูกต้อง

หากต้องการเรียกดูคอลเลกชัน ให้คลิกที่ลูกศรข้างชื่อคอลเลกชัน มันจะขยายเพื่อแสดงโฟลเดอร์และคำขอ โฟลเดอร์จะขยายเพิ่มเติมเป็นคำขอแต่ละรายการ

แต่ละคำขอจะปรากฏเป็นรายการพร้อมป้ายสีที่แสดงเมธอด HTTP (GET สีเขียว, POST สีน้ำเงิน, PUT สีส้ม, DELETE สีแดง) การคลิกคำขอจะเปิดคำขอนั้นในพื้นที่โปรแกรมแก้ไข VS Code เป็นแท็บ

การใช้แถบค้นหา: ที่ด้านบนของแผง Apidog มีช่องป้อนข้อมูลการค้นหา พิมพ์คำหลักใดก็ได้เพื่อกรองคอลเลกชันของคุณตามชื่อคำขอ, URL หรือเมธอด สิ่งนี้มีประโยชน์เมื่อพื้นที่ทำงานของคุณมีคอลเลกชันจำนวนมาก

การสลับพื้นที่ทำงาน: หากบัญชี Apidog ของคุณเป็นส่วนหนึ่งของพื้นที่ทำงานหลายแห่ง (ส่วนตัว, ทีม หรือเฉพาะโปรเจกต์) ตัวเลือกพื้นที่ทำงานที่ด้านบนของแผงจะช่วยให้คุณสามารถสลับไปมาระหว่างกันได้

ขั้นตอนที่ 4: ส่งคำขอ

เมื่อคุณเปิดคำขอจากแถบด้านข้าง คำขอนั้นจะโหลดในพื้นที่โปรแกรมแก้ไขหลักเป็นแท็บ อินเทอร์เฟซคำขอมีการจัดวางที่คุ้นเคย:

แถบด้านบน: ตัวเลือกเมธอด (เมนูดรอปดาวน์ที่มี GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS), ช่อง URL และปุ่ม Send

แท็บใต้ URL: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings แต่ละแท็บจะเปิดส่วนการตั้งค่าที่เกี่ยวข้อง

วิธีส่งคำขอ:

1. ยืนยันเมธอดและ URL ในแถบด้านบน
2. เพิ่มส่วนหัวที่จำเป็นในแท็บ Headers
3. หากคำขอมีเนื้อหา (POST, PUT) ให้คลิก Body และเลือกประเภทเนื้อหา (JSON, form data, binary ฯลฯ)
4. คลิก Send

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

การใช้สภาพแวดล้อม: ตัวเลือกสภาพแวดล้อมที่ด้านบนของแผง Apidog จะตั้งค่าสภาพแวดล้อมที่ใช้งานอยู่ ตัวแปรเช่น {{base_url}} หรือ {{token}} จะถูกแก้ไขเป็นค่าที่กำหนดไว้ในสภาพแวดล้อมนั้น สลับสภาพแวดล้อมเพื่อเรียกใช้คำขอเดียวกันกับสภาพแวดล้อม dev, staging หรือ production โดยไม่ต้องแก้ไข URL

ขั้นตอนที่ 5: แก้ไขและสร้างคำขอ

คุณสามารถแก้ไขคำขอที่มีอยู่ได้โดยตรงใน VS Code การเปลี่ยนแปลงจะซิงค์กับพื้นที่ทำงาน Apidog ของคุณโดยอัตโนมัติ

วิธีสร้างคำขอใหม่:

1. คลิกขวาที่คอลเลกชันหรือโฟลเดอร์ในแถบด้านข้าง
2. เลือก “New Request”
3. แท็บคำขอว่างเปล่าจะเปิดขึ้น
4. ตั้งค่าเมธอด, URL, ส่วนหัว และเนื้อหา
5. กด Ctrl+S / Cmd+S เพื่อบันทึก

คำขอใหม่จะปรากฏในแถบด้านข้างและสามารถเข้าถึงได้ทันทีจากแอปเดสก์ท็อป Apidog, อินเทอร์เฟซเว็บ หรือ VS Code ของเพื่อนร่วมทีมคนใดก็ได้

การเปลี่ยนชื่อและการจัดระเบียบ: คลิกขวาที่คำขอหรือโฟลเดอร์ใดๆ ในแถบด้านข้างเพื่อเข้าถึงตัวเลือกเปลี่ยนชื่อ, ย้าย, ทำซ้ำ และลบ การจัดเรียงลำดับใหม่แบบลากแล้ววางจะทำงานภายในแถบด้านข้าง

ขั้นตอนที่ 6: เรียกใช้การทดสอบ

Apidog รองรับการยืนยันการทดสอบที่ทำงานหลังจากแต่ละการตอบกลับ ในแท็บ Tests ของคำขอที่เปิดอยู่ คุณสามารถเขียนการยืนยันที่ใช้ JavaScript ได้:

pm.test("Status is 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Response contains user id", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a('number');
});

หลังจากคลิก Send แท็บ Tests ในส่วนการตอบกลับจะแสดงว่าการยืนยันใดผ่านและใดล้มเหลว พร้อมจำนวนการผ่าน/ล้มเหลว และข้อความแสดงข้อผิดพลาดสำหรับความล้มเหลว

การเรียกใช้คอลเลกชัน: คลิกขวาที่คอลเลกชันหรือโฟลเดอร์ในแถบด้านข้างและเลือก “Run Collection” แผง runner จะเปิดขึ้น ซึ่งคุณสามารถตั้งค่าการวนซ้ำ, ความล่าช้าระหว่างคำขอ และสภาพแวดล้อมได้ คลิก Run เพื่อดำเนินการคำขอทั้งหมดตามลำดับ ผลลัพธ์จะแสดงสถานะผ่าน/ล้มเหลวสำหรับการยืนยันของแต่ละคำขอ

ขั้นตอนที่ 7: ใช้ส่วนขยาย VS Code และแอปเดสก์ท็อปร่วมกัน

ส่วนขยาย VS Code และแอปเดสก์ท็อปใช้พื้นที่ทำงานเดียวกันแบบเรียลไทม์ ไม่มีเวอร์ชัน “หลัก” – ทั้งสองเป็นมุมมองที่แตกต่างกันของข้อมูลชุดเดียวกัน

เวิร์กโฟลว์ทั่วไปที่ใช้ทั้งสอง:

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

การตรวจสอบ API ของทีม: นักพัฒนาแบ็กเอนด์อัปเดตเอนด์พอยต์ในแอปเดสก์ท็อป นักพัฒนาฟรอนต์เอนด์เปิด VS Code พร้อมส่วนขยาย Apidog และเห็นคำขอที่อัปเดตพร้อมพารามิเตอร์ใหม่ทันที ไม่มีคำขอพูล, ไม่มีไฟล์ JSON ให้ต้องนำเข้า

การเขียนการทดสอบในบริบท: คุณกำลังเขียนโค้ดใน VS Code เพื่อใช้งาน API โดยไม่ต้องสลับหน้าต่าง คุณสามารถเปิดแผง Apidog, ค้นหาเอนด์พอยต์ที่เกี่ยวข้อง, เรียกใช้, ตรวจสอบรูปแบบการตอบกลับ และกลับไปที่โค้ดของคุณได้ – โดยยังคงอยู่ในแอปพลิเคชันเดียวกันตลอดเวลา

สิ่งที่แอปเดสก์ท็อปทำได้ดีกว่า: การออกแบบสคีมา, การตั้งค่าเซิร์ฟเวอร์จำลอง, การเผยแพร่เอกสาร API และการจัดการสภาพแวดล้อมจำนวนมาก เหล่านี้เป็นคุณสมบัติที่เน้นแอปเดสก์ท็อปเป็นหลัก ซึ่งคุณสามารถอ้างอิงจาก VS Code ได้ แต่จะกำหนดค่าได้ง่ายกว่าในมุมมองเดสก์ท็อปแบบเต็มหน้าจอ

ขั้นตอนที่ 8: แชร์กับทีมของคุณ

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

เมื่อพวกเขายอมรับคำเชิญและติดตั้งส่วนขยาย VS Code แถบด้านข้างของพวกเขาจะแสดงคอลเลกชันเดียวกันกับที่คุณเห็น คำขอใดๆ ที่พวกเขาเพิ่มหรือแก้ไขจะปรากฏให้ทุกคนเห็นทันที

ระดับฟรีรองรับผู้ใช้สูงสุดสามคน การเปลี่ยนแปลงจะซิงค์ผ่านคลาวด์ของ Apidog – ไม่มี Git operations, ไม่มีไฟล์ส่งออก, ไม่มีข้อขัดแย้งในการรวม

คำถามที่พบบ่อย

ส่วนขยาย Apidog VS Code ทำงานได้โดยไม่ต้องใช้แอปเดสก์ท็อปหรือไม่?ใช่ ส่วนขยายนี้เป็นไคลเอนต์ที่สมบูรณ์สำหรับพื้นที่ทำงาน Apidog ของคุณ คุณไม่จำเป็นต้องติดตั้งแอปเดสก์ท็อปเพื่อใช้ส่วนขยาย

ฉันสามารถใช้ส่วนขยาย Apidog VS Code แบบออฟไลน์ได้หรือไม่?คุณสามารถดูและแก้ไขคอลเลกชันที่แคชไว้ขณะออฟไลน์ได้ การส่งคำขอไปยัง API ภายนอกต้องใช้การเชื่อมต่ออินเทอร์เน็ต (เช่นเดียวกับการซิงค์การเปลี่ยนแปลง) การสนับสนุนแบบออฟไลน์เต็มรูปแบบขึ้นอยู่กับสถานะแคชของพื้นที่ทำงาน Apidog ของคุณ

ฉันจะนำเข้าคอลเลกชัน Thunder Client หรือ Postman ที่มีอยู่ได้อย่างไร?ในแอปเดสก์ท็อป Apidog หรืออินเทอร์เฟซเว็บ ให้ไปที่ Import และเลือกรูปแบบที่เหมาะสม (Thunder Client JSON, Postman collection v2.1, OpenAPI ฯลฯ) คอลเลกชันที่นำเข้าจะปรากฏในพื้นที่ทำงานของคุณและสามารถเข้าถึงได้ทันทีจากส่วนขยาย VS Code

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

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

ส่วนขยายรองรับการเติมข้อความอัตโนมัติสำหรับตัวแปรสภาพแวดล้อมหรือไม่?ใช่ เมื่อพิมพ์ {{ ในช่อง URL หรือพารามิเตอร์ ส่วนขยายจะแนะนำตัวแปรที่มีอยู่ในสภาพแวดล้อมที่ใช้งานอยู่ สิ่งนี้ช่วยหลีกเลี่ยงข้อผิดพลาดในการสะกดชื่อตัวแปร

ส่วนขยาย Apidog VS Code ทำงานได้ดีที่สุดในฐานะเครื่องมือหลักของคุณเมื่อคุณกำลังพัฒนา API อยู่ภายใน VS Code ค่าใช้จ่ายในการตั้งค่าสองนาทีจะคืนทุนอย่างรวดเร็วเมื่อคอลเลกชัน, สภาพแวดล้อม และพื้นที่ทำงานของทีมของคุณสามารถเข้าถึงได้ทั้งหมดโดยไม่ต้องสลับหน้าต่าง