เปลี่ยน 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
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/1.png)
2. คลิกเลือกไฟล์ติดตั้งให้ตรงกับระบบปฏิบัติการในคอมพิวเตอรืที่ใช้งาน (ตัวอย่างใช้กับ windows)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/2.png)
3. คลิกขวาที่ไฟล์ที่ดาวน์โหลดสำเร็จ เลือก Run as administrator
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/3.png)
4. คลิกเลือก I accept...
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/4.png)
5. คลิกเลือกรายการติดตั้งที่ต้องการ (ในที่นี้เลือกทุกรายการ)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/5.png)
6. เมื่อติดตั้งเสร็จสิ้นคลิกที่ปุ่ม Finish
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/6.png)
ขั้นตอนที่ 2: ติดตั้ง Extension "PlatformIO IDE"
7. คลิกไอคอนดังรูปเพื่อติดตั้งตัวเสริม
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/7.png)
8. ตัวแรกติดตั้ง PlatformIO พิมพ์ช่องค้นหาด้วยคำว่า platform เลือกดังรูปแล้วคลิกติดตั้ง
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/8.png)
9. คลิกที่ปุ่มดังรูป
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/9.png)
ขั้นตอนที่ 3: ติดตั้ง Wokwi Simulator บน VS Code
10. ติดตั้งตัวเสริมตัวที่สอง ค้นหาด้วยคำว่า wokwi เลือกดังรูปแล้วคลิกติดตั้ง
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/10.png)
11. คลิกที่ปุ่มดังรูป
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/11.png)
12. สร้างโฟลเดอร์ใหม่เพื่อไว้สำหรับเก็บไฟล์งานในไดร์ฟอื่นที่ไม่ใช่ไดร์ฟ C (ในที่นี้ตั้งชื่อโฟลเดอร์ว่า PlatformIO)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/12.png)
13. คลิกที่ไอคอนรูปหัวมด (PlatformIO) คลิกที่ Open แล้วสร้างไฟล์งานใหม่โดยคลิกที่ New Project
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/13.png)
14. ตั้งชื่อไฟล์, เลือกบอร์ดที่จะใช้งาน, เลือกโฟลเดอร์ที่จะเก็บไฟล์ (เลือกโฟลเดอร์ที่ได้เตรียมไว้จากข้างต้น)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/14.png)
15. รอ...
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/15.png)
16. รอ..
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/16.png)
17. รอ..
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/17.png)
18. รอ..
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/18.png)
19. คลิกตามรูป
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/19.png)
20. เมื่อเสร็จจะแสดงข้อมูลในไฟล์ ini ดังรูป
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/20.png)
21. คลิกที่หัวมด คลิก Device เพื่อดูพอร์ตอนุกรมที่คอมพิวเตอร์กำลังเชื่อมต่อ
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/21.png)
22. เมื่อมีการเสียบบอร์ดมาภายหลัง ให้คลิกรูปบ้าน (Home) ก่อน 1 ครั้งแล้วกลับมาคลิกที่ไอคอน Device จะเห็นว่ามีพอร์ตอนุกรมเพิ่มขึ้นมา (จำพอร์ตที่จะใช้เชื่อมต่อไว้)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/22.png)
23. คลิกที่ไฟล์ platformio.ini เพื่อเพิ่มรายการที่จะใช้ดังรูป (จากขั้นตอน 22 พบว่าพอร์ตที่ใช้เชื่อมต่อกับบอร์คือ COM5 ดังนั้นเวลากำหนดในไฟล์ ini จึงใช้ COM5)
upload_port=COM5
upload_speed=115200
monitor_speed=9600
หมายเหตุ
-หากไม่ใส่ค่าดังกล่าวตัวโปรแกรมจะดำเนินการอัตโนมัติ อาจจะทำให้สามารถอัพโหลดได้เช่นกัน
24. ไอคอนบนจะปรากฏตัวเลขขึ้นบนไอคอน เป็นการแจ้งให้รู้ว่ามีไฟล์งานที่ยังไม่บันทึกจำนวนกี่ไฟล์
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/24.png)
25. ทำการบันทึก
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/25.png)
26. เขียนโค้ดโปรแกรมในไฟล์ main.cpp (จะต้องมี#include <Arduino.h> เมื่อใช้ VS-Code กับ PlatformIO)
#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]
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/27.png)
28. เมื่อต้องการอัพโหลดโค้ดลงบอร์ดคลิกที่หัวลูกศรด้านล่าง หากอัพโหลดผ่านจะแสดงผลดังรูป
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/28.png)
จำลองการทำงานด้วย wokwi ในโปรแกรม VSCode+PlatformIO
29. สร้างไฟล์ใหม่โดยคลิกขวาบริเวณว่าง เลือกคลิกที่ New File...
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/29.png)
30. ตั้งชื่อไฟล์ว่า "diagram.json" ตั้งชื่อเสร็จแล้วคลิกที่ไฟล์จะได้ดังรูป (อย่าเพิ่งคลิกที่ Get your License Key)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/30.png)
31. เปิดโปรแกรมบราวน์เซอร์เปิดเว็บ www.wokwi.com ทำการ sign in
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/31.png)
32. sign in ด้วย gmail (เปิดหน้าเว็บค้างไว้)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/32.png)
33. กลับมาที่โปรแกรม VSCode ทำการคลิกที่ Get your License Key
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/33.png)
34. คลิกที่ Open
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/34.png)
35. กลับไปที่เว็บบราวน์เซอร์จะปรากฏดังรูป ให้คลิกที่ GET YOUR LICENSE
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/35.png)
36. หน้าต่างจะปรากฏ key
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/36.png)
37. กลับไปที่โปรแกรม VSCode คลิกที่ Open
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/37.png)
38. คลิกที่ไฟล์ diagram.json จะยังคงขึ้นมุมขวาบนดังรูป ให้ทำการปิดโปรแกรมแล้วเปิดใหม่
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/38.png)
39. เมื่อเปิดโปรแกรมขึ้นมาใหม่แล้วคลิกที่ไฟล์ diagram.json มุมบนจะแสดงชื่อผู้ที่ใช้งานเว็บ wokwi
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/39.png)
40. กลับไปที่เว็บ wokwi ดำเนินการดังนี้
- วาดวงจรเพื่อใช้ทดลองตามต้องการ
- คลิกที่ไฟล์ diagram.json
- คลิกในบริเวณโค้ด json แล้วเลือกทั้งหมด (Ctrl+A)
- คลิกขวาบริเวณที่เลือกแล้วคัดลอก
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/40.png)
41. กลับมาที่โปรแกรม VSCode คลิกขวาที่ไฟล์ diagram.json แล้วคลิกตรงคำว่า Open With...
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/41.png)
42. คลิกเลือกตรงคำว่า Text Editor
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/42.png)
43. คลิกที่บริเวณพื้นที่ว่างแล้ววาง (Ctrl+V)
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/43.png)
44. บันทึกไฟล์งาน
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/44.png)
45. คลิกที่ไฟล์ diagram.json ตัววงจรจะปรากฏขึ้น
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/45.png)
46. ไปที่บราวน์เซอร์เปิดเว็บ https://docs.wokwi.com/vscode/project-config (https://docs.wokwi.com/vscode/project-config) คัดลอกโค้ด
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/46.png)
47. กลับมาที่โปรแกรม VSCode สร้างไฟล์ใหม่
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/47.png)
48. ตั้งชื่อว่า wokwi.toml แล้ววางโค้ดที่คัดลอกมา
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/48.png)
49. คลิกที่ไฟล์ main.cpp ดำเนินการคอมไพล์
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/49.png)
50. คลิกที่ไฟล์ wokwi.toml หาที่อยู่ของไฟล์ภาษาเครื่องจากหน้าต่างผลการคอมไพล์
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/50.png)
51. คัดลอกมาวางแทนค่าเดิม
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/51.png)
52. บันทึกไฟล์งาน
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/52.png)
53. คลิกที่ไฟล์ diagram.json คลิกที่ปุ่มเริ่มการจำลอง
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/53.png)
54. ผลการจำลอง
(https://www.praphas.com/PhotoForum/arduino/PlatformIO/54.png)