Getting Started with VS Code และ PlatformIO IDE สำหรับ ESP32 และ ESP8266

UTEN BOONLIAM Avatar
Getting Started with VS Code และ PlatformIO IDE สำหรับ ESP32 และ ESP8266

บทความนี้สรุปวิธีเขียนโปรแกรมบอร์ด ESP32 และ ESP8266 NodeMCU ด้วย VS Code (Microsoft Visual Studio Code) ร่วมกับส่วนขยาย PlatformIO IDE ครอบคลุมการติดตั้งบน Windows, Mac OS X และ Linux Ubuntu (ที่มา: Random Nerd Tutorials)

Getting Started Visual Studio VS Code PlatformIO IDE ESP32 ESP8266 NodeMCU Windows Mac OS X Linux Ubuntu

1. ภาพรวมบทความ

Arduino IDE เหมาะกับงานเล็ก แต่โปรเจกต์ที่โค้ดเกิน 200 บรรทัด มีหลายไฟล์ หรือต้องการ auto completion และการตรวจจับข้อผิดพลาด VS Code + PlatformIO เป็นทางเลือกที่ดีที่สุด

หัวข้อที่ครอบคลุม

  1. ติดตั้ง VS Code (Windows / Mac OS X / Linux Ubuntu) พร้อมติดตั้ง Python
  2. ติดตั้งส่วนขยาย PlatformIO IDE บน VS Code
  3. ภาพรวมหน้าตา VS Code
  4. ภาพรวม PlatformIO IDE และการสร้างโปรเจกต์
  5. อัปโหลดโค้ดขึ้น ESP32/ESP8266
  6. เปลี่ยน baud rate ของ Serial Monitor
  7. ติดตั้งไลบรารีบน PlatformIO

2. ติดตั้ง VS Code และ Python

ทุกระบบปฏิบัติการเริ่มจากดาวน์โหลด build แบบ stable จาก code.visualstudio.com ตามระบบของเครื่อง และต้องมี Python 3.5 ขึ้นไป (บทความใช้ Python 3.8.5) เพราะ PlatformIO ต้องใช้โปรแกรมบอร์ด

ระบบขั้นตอน VS Codeขั้นตอน Python
Windowsเปิดตัวติดตั้ง ยอมรับข้อตกลง กด Next เลือกตัวเลือกที่แนะนำ กด Install แล้ว Finish เมื่อเปิดจะเห็นแท็บ Welcome พร้อมบันทึกการออกรุ่นดาวน์โหลดจาก python.org รันตัวติดตั้ง และต้องติ๊ก “Add Python 3.8 to PATH” ก่อนกด Install Now แล้วรอข้อความติดตั้งสำเร็จ กด Close
Mac OS Xเปิดไฟล์ที่ดาวน์โหลด กด Open เมื่อมีข้อความเตือน หรือเปิดจากโฟลเดอร์ Downloadsใช้ Homebrew: ถ้ายังไม่มีคำสั่ง brew ให้ติดตั้งก่อน แล้วรัน brew install python3
Linux Ubuntuดาวน์โหลดไฟล์ .deb แล้วที่ Terminal เข้าโฟลเดอร์ Downloads ติดตั้งด้วย sudo apt install ./ชื่อไฟล์.deb จากนั้นเปิดจากเมนูแอปพลิเคชันตรวจด้วย python3 --version ถ้ายังไม่มีรัน sudo apt install python3 และติดตั้งยูทิลิตี้ด้วย sudo apt install python3-distutils

Windows

1 Download VS Studio Code
2 Install VS Code
3 Install VS Code
4 Install VS Code
5 Install VS Code
VS Code Welcome Screen
2 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 install Python3
Install Python Add to path
Python Installation successful

Mac OS X

3 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 download Mac OS X
4 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 file downloaded Mac OS X
1 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 install brew

Linux Ubuntu

3 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 downloading VS Code Linux Ubuntu
4 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 downloading VS Code Linux Ubuntu
5 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 run VS Code Linux Ubuntu
6 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 downloading VS Code Linux Ubuntu Testing
1 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 Python3 installed
2 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 Python3 installed distutils

3. ติดตั้งส่วนขยาย PlatformIO IDE

  1. เปิด VS Code
  2. คลิกไอคอน Extensions หรือกด Ctrl+Shift+X
  3. ค้นหา “PlatformIO IDE” แล้วเลือกรายการแรก
  4. กดปุ่ม Install (อาจใช้เวลาสองสามนาที)

หลังติดตั้งให้ตรวจว่าเปิดใช้งาน (enabled) แล้ว ไอคอน PlatformIO และไอคอน Home จะปรากฏที่แถบด้านซ้าย หากไม่เห็นไอคอน PIO หรือแถบเครื่องมือด่วนด้านล่าง ให้ restart VS Code ซึ่งบทความแนะนำให้ทำทุกครั้งก่อนไปขั้นตอนต่อไป

Install Platformio Extension VS Code
Platformioextension enabled
PlatformIO extension installed successfully

4. ภาพรวมหน้าตา VS Code

แถบด้านซ้าย

  • File explorer
  • ค้นหาข้ามไฟล์ (Search)
  • Source code management
  • Launch and debug
  • จัดการ Extensions

กด Ctrl+Shift+P หรือไปที่ View > Command Palette เพื่อค้นหาคำสั่งทั้งหมดและดูคีย์ลัด

VS Code Interface Overview

แถบสีน้ำเงินด้านล่าง (PlatformIO commands)

เรียงจากซ้ายไปขวา: PlatformIO Home, Build/Compile, Upload, Clean, Serial Monitor และ New Terminal นำเมาส์ไปชี้เพื่อดูหน้าที่ หรือคลิกไอคอน PIO เพื่อดูงานทั้งหมด ถ้าไม่แสดงให้กดจุดสามจุดด้านบนแล้วเปิด PlatformIO tasks

PlatformIO Quick Tools Icons
PlatformIO Tasks
Enable PlatformIO Tasks

5. สร้างโปรเจกต์ Blink LED ด้วย PlatformIO

  1. คลิกไอคอน PlatformIO Home แล้วกด + New Project
  2. ตั้งชื่อโปรเจกต์ (เช่น Blink_LED) เลือกบอร์ด (บทความใช้ DOIT ESP32 DEVKIT V1; ถ้าใช้ ESP8266 NodeMCU ก็เลือกบอร์ดนั้นแทน) และเลือก Framework เป็น Arduino
  3. ใช้ตำแหน่งเริ่มต้นหรือกำหนดเอง (ค่าเริ่มต้นคือ Documents > PlatformIO > Projects) แล้วกด Finish
PlatformIO Create New Project
PlatformIO Create New Project ESP32
PlatformIO Create New Project ESP8266
PlatfomIO project created folder structure

โปรเจกต์จะปรากฏในแท็บ Explorer โครงสร้างโฟลเดอร์ต่างจากโปรเจกต์ .ino แบบเดิม มีหลายไฟล์ แต่ปกติแก้เพียงหนึ่งหรือสองไฟล์

คำเตือน: ห้ามลบ แก้ไข หรือย้ายโฟลเดอร์และไฟล์ platformio.ini มิฉะนั้นจะคอมไพล์ด้วย PlatformIO ไม่ได้

ไฟล์ platformio.ini

เป็นไฟล์ตั้งค่าโปรเจกต์ แสดง platform (SoC ของบอร์ด), board (บอร์ดที่ใช้) และ framework (สภาพแวดล้อมที่รันโค้ด) และใช้เพิ่มการตั้งค่าอื่น เช่น ไลบรารี ตัวเลือกอัปโหลด และ baud rate ของ Serial Monitor ถ้าต้องการ baud rate 115200 ให้เพิ่มบรรทัดต่อไปนี้ แล้วกด Ctrl+S เพื่อบันทึก:

monitor_speed = 115200
PlatformIO Config init file ESP32

โฟลเดอร์ src

เป็นโฟลเดอร์ทำงานหลัก ภายในมี main.cpp สำหรับเขียนโค้ด โครงสร้างโปรแกรมแบบ Arduino ยังมีฟังก์ชัน setup() และ loop() และโค้ดสเก็ตช์แบบ Arduino ต้องขึ้นต้นด้วย #include <Arduino.h>

PlatformIO scr folder main file

6. อัปโหลดโค้ดขึ้น ESP32/ESP8266

โค้ดตัวอย่างทำให้ไฟ LED บนบอร์ดกะพริบทุกหนึ่งวินาที ใช้ได้ทั้ง ESP32 และ ESP8266 เพราะ LED ออนบอร์ดต่อกับ GPIO 2 เหมือนกัน หลักการทำงานของโค้ด:

  • กำหนด LED เป็นขา 2 (#define LED 2)
  • ใน setup() เปิด Serial ที่ 115200 และตั้ง pinMode ของ LED เป็น OUTPUT
  • ใน loop() สั่ง digitalWrite เป็น HIGH พิมพ์ “LED is on” หน่วงหนึ่งวินาที แล้วสั่ง LOW พิมพ์ “LED is off” หน่วงอีกหนึ่งวินาที
#include <Arduino.h>

#define LED 2

void setup() {
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
}

void loop() {
  digitalWrite(LED, HIGH);
  Serial.println("LED is on");
  delay(1000);
  digitalWrite(LED, LOW);
  Serial.println("LED is off");
  delay(1000);
}

แนะนำให้พิมพ์โค้ดเองเพื่อเห็นการเติมโค้ดอัตโนมัติ (autocompletion) และเส้นขีดแดงใต้ข้อผิดพลาดก่อนคอมไพล์

ขั้นตอน

  1. วางหรือพิมพ์โค้ดใน main.cpp แล้วกด Ctrl+S หรือ File > Save
  2. กดไอคอน Upload เพื่อคอมไพล์และอัปโหลด (หรือเลือก Upload จากเมนู PIO Project Tasks)
  3. เมื่ออัปโหลดสำเร็จจะมีข้อความแจ้ง และ LED บนบอร์ดจะกะพริบทุกวินาที
  4. กดไอคอน Serial Monitor จะเห็นสถานะ LED ที่พิมพ์ออกมา (ถ้าไม่เห็นหน้าต่าง Terminal ให้ไปที่ Terminal > New Terminal)
5 Getting Started VS Code PlatformIO IDE ESP32 ESP8266 save file
Upload Code ESP32 PlatformIO VS Code
Upload Code ESP32 PlatformIO VS Code Success
ESP32 board Built in LED turned on HIGH
Platformio VS Code Serial Monitor ESP32

การตรวจจับพอร์ต COM

PlatformIO ตรวจจับพอร์ตที่บอร์ดเชื่อมต่ออยู่ให้อัตโนมัติ ดูอุปกรณ์ที่เชื่อมต่อได้โดยเข้า PIO Home แล้วคลิกไอคอน Devices

PlatformIO VS Code Devices COM port

การแก้ปัญหา

  • ข้อผิดพลาดหมดเวลา: ถ้าขึ้นข้อความ “Failed to connect to ESP32: Timed out… Connecting…” แปลว่าบอร์ดไม่ได้อยู่ในโหมดแฟลช (เมื่อเลือกชื่อบอร์ดและพอร์ตถูกต้องแล้ว) ให้กดปุ่ม BOOT ค้างไว้ กด Upload รอจนเห็นข้อความ Connecting… แล้วปล่อยปุ่ม BOOT จนเห็น “Done uploading” ต้องทำซ้ำทุกครั้งที่อัปโหลดใหม่
  • ไม่พบพอร์ต COM: อาจต้องติดตั้งไดรเวอร์ CP210x USB to UART Bridge (มีคู่มือแยกสำหรับ Windows และ Mac OS X)
  • ปัญหาอื่นของ ESP32: ดู ESP32 Troubleshooting Guide

7. เปลี่ยน baud rate ของ Serial Monitor

ค่าเริ่มต้นของ PlatformIO คือ 9600 แก้ได้โดยเปิด platformio.ini ในโฟลเดอร์โปรเจกต์ เพิ่มบรรทัด monitor_speed = baud_rate (เช่น monitor_speed = 115200) แล้วบันทึกไฟล์

PlatformIO change serial monitor baud rate

8. ติดตั้งไลบรารีบน PlatformIO

  1. คลิก Home ไปที่ PlatformIO Home แล้วเลือกไอคอน Libraries ที่แถบซ้าย
  2. ค้นหาไลบรารีที่ต้องการ (ตัวอย่างคือ Adafruit_BME280)
  3. คลิกไลบรารีนั้น แล้วกด Add to Project
  4. เลือกโปรเจกต์ที่จะใช้ไลบรารี

ระบบจะเพิ่มตัวระบุไลบรารีใต้ lib_deps ใน platformio.ini ให้อัตโนมัติ หรือจะเปิดแท็บ Installation ในหน้าไลบรารีเพื่อคัดลอกตัวระบุแล้ววางเองก็ได้ ตัวอย่าง:

lib_deps = adafruit/Adafruit BME280 Library@^2.1.0

ถ้าต้องการหลายไลบรารีให้คั่นด้วยเครื่องหมายจุลภาคหรือขึ้นบรรทัดใหม่ เช่น Arduino_JSON @ 0.1.0, Adafruit BME280 Library @ ^2.1.0 และ Adafruit Unified Sensor @ ^1.1.4 ตัวจัดการไลบรารีในตัวของ PlatformIO จะดาวน์โหลดไลบรารีและ dependency ทั้งหมดให้เมื่อบันทึกการตั้งค่าหรือคอมไพล์

PlatformIO Library registry
PlatformIO VS Code Search BME280 library
PlatformIO add library to project
PlatformIO VS Code Add Library to Project Choose Project
PIO Configuration File Add Library

9. หัวข้อเสริม

  • เปิดโปรเจกต์ที่มีอยู่: ใน PlatformIO Home กด Open Project แล้วเลือกโฟลเดอร์โปรเจกต์ PlatformIO จะเปิดไฟล์ทั้งหมดในโฟลเดอร์นั้น
  • ธีมสี VS Code: ไปที่ไอคอน Manage แล้วเลือก Color Theme เลือกได้ทั้งธีมสว่างและมืดหลายแบบ
  • รายการคีย์ลัด: ดู VS Code Keyboard Shortcuts Reference สำหรับ Windows, Mac OS X และ Linux
PlatformIO open project folder
VS Code Change Color Theme

10. ข้อดีของ VS Code + PlatformIO เทียบกับ Arduino IDE

  • ตรวจจับพอร์ต COM ที่บอร์ดเชื่อมต่ออยู่โดยอัตโนมัติ
  • IntelliSense ช่วยเดาและเติมโค้ด พร้อมแสดงพารามิเตอร์ที่ฟังก์ชันต้องการ
  • ขีดเส้นใต้ข้อผิดพลาดก่อนคอมไพล์ (Error Highlights)
  • เปิดหลายแท็บโค้ดพร้อมกันได้
  • ซ่อนบางส่วนของโค้ดได้
  • การนำทางในโค้ดขั้นสูง และอื่น ๆ

สรุป: VS Code ร่วมกับ PlatformIO เป็นตัวเลือกที่ดีมากสำหรับผู้ที่ต้องการ IDE ขั้นสูงเขียนแอปพลิเคชันขนาดใหญ่บน ESP32 และ ESP8266

11. ข้อสังเกตเชิงปฏิบัติ

  • บนเครื่อง Windows อย่าลืมติ๊ก Add Python to PATH ตอนติดตั้ง Python เพราะเป็นข้อกำหนดสำคัญ
  • หลังติดตั้งส่วนขยาย ให้ restart VS Code เสมอ เพื่อให้ไอคอน PIO และแถบเครื่องมือขึ้นครบ
  • อย่าแก้ไขโครงสร้างโฟลเดอร์หรือลบ platformio.ini
  • ถ้าต้องการ Serial Monitor ที่ 115200 ต้องตั้ง monitor_speed เองเพราะค่าเริ่มต้นคือ 9600
  • บทความต้นฉบับเขียนจากเวอร์ชันเก่า (เช่น Python 3.8 และไฟล์ .deb รุ่นปี 2020) ชื่อเมนูและเวอร์ชันอาจต่างจากปัจจุบัน

ที่มา: Random Nerd Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *