การติดตั้งโปรแกรม Visual Studio Code+PlatformIO+Wokwi และการใช้งานเบื้องต้น

[admin]

เปลี่ยน VS Code ให้เป็นสุดยอดเครื่องมือเขียน Arduino พร้อมจำลองวงจรด้วย PlatformIO และ Wokwi

สำหรับนักพัฒนาสาย Embedded หรือผู้ที่เริ่มต้นเขียนโปรแกรม Arduino คงคุ้นเคยกับ Arduino IDE กันเป็นอย่างดี แม้ว่าในเวอร์ชันใหม่ๆ จะมีการพัฒนาขึ้นมาก แต่สำหรับงานโปรเจกต์ที่มีความซับซ้อน มีไฟล์โค้ดจำนวนมาก หรือต้องการระบบ Auto-complete (พิมพ์โค้ดอัจฉริยะ) ที่รวดเร็ว การเปลี่ยนมาใช้ Visual Studio Code (VS Code) ร่วมกับ PlatformIO ถือเป็นจุดเปลี่ยนที่ช่วยให้ชีวิตการเขียนโค้ดง่ายขึ้นแบบก้าวกระโดด

ยิ่งไปกว่านั้น วันนี้เราจะเพิ่มความสะดวกขึ้นไปอีกขั้นด้วย Wokwi ตัวจำลองการทำงาน (Simulator) ยอดนิยมที่จะช่วยให้เราทดสอบโค้ด Arduino ได้ทันทีบน VS Code โดยไม่ต้องต่อบอร์ดจริงหรือต่อสายไฟให้ยุ่งยาก!

ในบล็อกนี้เราจะพาไปดูขั้นตอนการติดตั้งและใช้งานแบบทีละสเต็ป (Step-by-Step) ตั้งแต่ศูนย์จนพร้อมใช้งานกันครับ
ขั้นตอนที่ 1: ติดตั้งโปรแกรม Visual Studio Code
1. พิมพ์คำค้นหาด้วยคำว่า vscode ด้วยกูเกิล แล้วคลิก Download


2. คลิกเลือกไฟล์ติดตั้งให้ตรงกับระบบปฏิบัติการในคอมพิวเตอรืที่ใช้งาน (ตัวอย่างใช้กับ windows)


3. คลิกขวาที่ไฟล์ที่ดาวน์โหลดสำเร็จ เลือก Run as administrator


4. คลิกเลือก I accept...


5. คลิกเลือกรายการติดตั้งที่ต้องการ (ในที่นี้เลือกทุกรายการ)


6. เมื่อติดตั้งเสร็จสิ้นคลิกที่ปุ่ม Finish


ขั้นตอนที่ 2: ติดตั้ง Extension "PlatformIO IDE"
7. คลิกไอคอนดังรูปเพื่อติดตั้งตัวเสริม


8. ตัวแรกติดตั้ง PlatformIO พิมพ์ช่องค้นหาด้วยคำว่า platform เลือกดังรูปแล้วคลิกติดตั้ง


9. คลิกที่ปุ่มดังรูป



ขั้นตอนที่ 3: ติดตั้ง Wokwi Simulator บน VS Code
10. ติดตั้งตัวเสริมตัวที่สอง ค้นหาด้วยคำว่า wokwi  เลือกดังรูปแล้วคลิกติดตั้ง


11.  คลิกที่ปุ่มดังรูป


12. สร้างโฟลเดอร์ใหม่เพื่อไว้สำหรับเก็บไฟล์งานในไดร์ฟอื่นที่ไม่ใช่ไดร์ฟ C (ในที่นี้ตั้งชื่อโฟลเดอร์ว่า PlatformIO)


13. คลิกที่ไอคอนรูปหัวมด (PlatformIO) คลิกที่ Open แล้วสร้างไฟล์งานใหม่โดยคลิกที่ New Project


14. ตั้งชื่อไฟล์, เลือกบอร์ดที่จะใช้งาน, เลือกโฟลเดอร์ที่จะเก็บไฟล์ (เลือกโฟลเดอร์ที่ได้เตรียมไว้จากข้างต้น)


15. รอ...


16. รอ..


17. รอ..


18. รอ..


19. คลิกตามรูป


20. เมื่อเสร็จจะแสดงข้อมูลในไฟล์ ini ดังรูป


21. คลิกที่หัวมด คลิก Device เพื่อดูพอร์ตอนุกรมที่คอมพิวเตอร์กำลังเชื่อมต่อ


22. เมื่อมีการเสียบบอร์ดมาภายหลัง ให้คลิกรูปบ้าน (Home) ก่อน 1 ครั้งแล้วกลับมาคลิกที่ไอคอน Device จะเห็นว่ามีพอร์ตอนุกรมเพิ่มขึ้นมา (จำพอร์ตที่จะใช้เชื่อมต่อไว้)


23. คลิกที่ไฟล์ platformio.ini เพื่อเพิ่มรายการที่จะใช้ดังรูป (จากขั้นตอน 22 พบว่าพอร์ตที่ใช้เชื่อมต่อกับบอร์คือ COM5 ดังนั้นเวลากำหนดในไฟล์ ini จึงใช้ COM5)

โค๊ด: [Select]

upload_port=COM5
upload_speed=115200
monitor_speed=9600

หมายเหตุ
-หากไม่ใส่ค่าดังกล่าวตัวโปรแกรมจะดำเนินการอัตโนมัติ อาจจะทำให้สามารถอัพโหลดได้เช่นกัน



24. ไอคอนบนจะปรากฏตัวเลขขึ้นบนไอคอน เป็นการแจ้งให้รู้ว่ามีไฟล์งานที่ยังไม่บันทึกจำนวนกี่ไฟล์


25. ทำการบันทึก


26. เขียนโค้ดโปรแกรมในไฟล์ main.cpp (จะต้องมี#include <Arduino.h> เมื่อใช้ VS-Code กับ PlatformIO)

โค๊ด: [Select]

#define LED 13
#include <Arduino.h>
void setup() {
  pinMode(LED,OUTPUT);
}
void loop() {
  digitalWrite(LED,HIGH);
  delay(1000);
  digitalWrite(LED,LOW);
  delay(1000);
}

27. เมื่อต้องการคอมไพล์ (แปลงภาษาซีเป็นภาษาเครื่อง) ให้คลิกเครื่องหมายถูกด้านล่าง หากโค้ดที่เขียนขึ้นถูกไวยกรณ์จะมีคำว่า [SUCCESS]


28. เมื่อต้องการอัพโหลดโค้ดลงบอร์ดคลิกที่หัวลูกศรด้านล่าง หากอัพโหลดผ่านจะแสดงผลดังรูป


จำลองการทำงานด้วย wokwi ในโปรแกรม VSCode+PlatformIO
29. สร้างไฟล์ใหม่โดยคลิกขวาบริเวณว่าง เลือกคลิกที่ New File...


30. ตั้งชื่อไฟล์ว่า "diagram.json" ตั้งชื่อเสร็จแล้วคลิกที่ไฟล์จะได้ดังรูป (อย่าเพิ่งคลิกที่ Get your License Key)


31. เปิดโปรแกรมบราวน์เซอร์เปิดเว็บ www.wokwi.com ทำการ sign in


32. sign in ด้วย gmail (เปิดหน้าเว็บค้างไว้)


33. กลับมาที่โปรแกรม VSCode ทำการคลิกที่  Get your License Key


34. คลิกที่ Open


35. กลับไปที่เว็บบราวน์เซอร์จะปรากฏดังรูป ให้คลิกที่ GET YOUR LICENSE


36. หน้าต่างจะปรากฏ key


37. กลับไปที่โปรแกรม VSCode คลิกที่ Open


38. คลิกที่ไฟล์ diagram.json จะยังคงขึ้นมุมขวาบนดังรูป ให้ทำการปิดโปรแกรมแล้วเปิดใหม่


39. เมื่อเปิดโปรแกรมขึ้นมาใหม่แล้วคลิกที่ไฟล์ diagram.json มุมบนจะแสดงชื่อผู้ที่ใช้งานเว็บ wokwi


40. กลับไปที่เว็บ wokwi ดำเนินการดังนี้
   - วาดวงจรเพื่อใช้ทดลองตามต้องการ
   - คลิกที่ไฟล์ diagram.json
   - คลิกในบริเวณโค้ด json แล้วเลือกทั้งหมด (Ctrl+A)
   - คลิกขวาบริเวณที่เลือกแล้วคัดลอก


41. กลับมาที่โปรแกรม VSCode คลิกขวาที่ไฟล์ diagram.json แล้วคลิกตรงคำว่า Open With...


42. คลิกเลือกตรงคำว่า Text Editor


43. คลิกที่บริเวณพื้นที่ว่างแล้ววาง (Ctrl+V)


44. บันทึกไฟล์งาน


45. คลิกที่ไฟล์ diagram.json ตัววงจรจะปรากฏขึ้น


46. ไปที่บราวน์เซอร์เปิดเว็บ https://docs.wokwi.com/vscode/project-config คัดลอกโค้ด


47. กลับมาที่โปรแกรม VSCode สร้างไฟล์ใหม่


48. ตั้งชื่อว่า wokwi.toml แล้ววางโค้ดที่คัดลอกมา


49. คลิกที่ไฟล์ main.cpp ดำเนินการคอมไพล์


50. คลิกที่ไฟล์ wokwi.toml หาที่อยู่ของไฟล์ภาษาเครื่องจากหน้าต่างผลการคอมไพล์


51. คัดลอกมาวางแทนค่าเดิม


52. บันทึกไฟล์งาน


53. คลิกที่ไฟล์ diagram.json คลิกที่ปุ่มเริ่มการจำลอง


54. ผลการจำลอง