แนะนำการใช้งาน VS Code IDE + Wokwi#

▷ Wokwi#

Wokwi คืออะไร?

  • เป็นซอฟต์แวร์ประเภท Web Application สำหรับการเขียนโค้ดและจำลองการทำงานของไมโครคอนโทรลเลอร์
  • ทำงานแบบออนไลน์ (Online Simulator) ทำงานผ่าน เว็บเบราว์เซอร์โดยตรง ผู้ใช้ไม่จำเป็นต้องติดตั้งโปรแกรม ลงในเครื่อง
  • พัฒนาเพื่อช่วยให้ผู้ใช้สามารถ ทดสอบและพัฒนาโค้ดได้โดยไม่ต้องมีฮาร์ดแวร์จริง เหมาะสำหรับการเรียนรู้และฝึกเขียนโปรแกรมไมโครคอนโทรลเลอร์ในเบื้องต้น
  • เริ่มต้นพัฒนาในปี ค.ศ. 2019
  • ผู้พัฒนาหลักคือ Uri Shaked นักพัฒนาซอฟต์แวร์ชาวอิสราเอล
  • รองรับการเขียนโปรแกรมหลายภาษาและแพลตฟอร์ม เช่น
    • Arduino (C/C++)
    • MicroPython
    • Rust
    • C/C++
    • Verilog (Digital Logic Design)
  • รองรับบอร์ดไมโครคอนโทรลเลอร์ยอดนิยม เช่น
  • จำลองการทำงานของไมโครคอนโทรลเลอร์ ร่วมกับอุปกรณ์รอบข้าง (Peripherals) เช่น
    • LED, Button, LCD 16x2 I2C, OLED I2C
    • ดูรายการ Wokwi Element ได้จาก elements.wokwi.com/
  • มี Serial Monitor สำหรับตรวจสอบผลลัพธ์การทำงานของโปรแกรม
  • มี wokwi-cli สำหรับใช้งานในรูปแบบ Command Line
  • มี Wokwi for VS Code ให้ใช้งานแบบ Offline ได้

คำเตือน: Wokwi Simulator สามารถใช้สำหรับทดสอบโค้ดด้วยการจำลองการทำงานของไมโครคอนโทรลเลอร์ได้ อย่างไรก็ตาม ฟังก์ชันการทำงานของฮาร์ดแวร์บางส่วนอาจยังไม่รองรับหรือไม่ครอบคลุมทั้งหมด

Wokwi เปิดบริการให้ใช้งาน มีทั้งแบบฟรี และแบบมีค่าใช้จ่ายรายเดือน จำแนกได้ดังนี้ โดยอ้างอิงจากเว็บ wokwi.com/pricing

  • Community plan (ฟรี)
    • ฟรีสำหรับ งานส่วนตัว / โครงการเปิดเผย (open-source)
    • สามารถสร้างโปรเจกต์สาธารณะไม่จำกัด
  • Hobby & Hobby+ plan
    • เหมาะสำหรับผู้ใช้งาน งานส่วนตัวขั้นสูงขึ้น แต่มีค่าใช้จ่ายรายเดือน
  • Pro
    • สำหรับโปรเจกต์เชิงพาณิชย์หรือผู้ใช้ที่ต้องการสมรรถนะสูงขึ้น
  • University Classroom (สำหรับการศึกษา / สถาบัน)

รูป: Wokwi Pricing (2025)

▷ การติดตั้ง Wokwi Extension สำหรับ VS Code IDE#

ขั้นตอนมีดังนี้

  1. ในการติดตั้ง VS Code IDE หากยังไม่เคยใช้งาน ให้ดาวน์โหลดและติดตั้ง Visual Studio Code ให้เรียบร้อยก่อน โดยสามารถดาวน์โหลดได้จากเว็บไซต์ทางการของ Microsoft
  2. เปิดใช้งาน VS Code IDE หลังจากติดตั้งเสร็จ ให้เปิดโปรแกรม Visual Studio Code (VS Code IDE)
    • กรณีใช้งานบน Ubuntu โดยตรง เปิด VS Code จากเมนูแอปพลิเคชันของระบบ หรือพิมพ์คำสั่ง code ใน Terminal
  3. ในกรณีที่ใช้ WSL2 Ubuntu สำหรับ Windows จะมีการเปิดใข้งาน VS Code ในโหมด Remote - WSL และเชื่อมต่อกับสภาพแวดล้อม Ubuntu
  4. ค้นหาและติดตั้ง Wokwi Extension
  5. ไปยังหน้าเว็บ Wokwi License สมัครเข้าใช้งาน และขอ Wokwi License Key (one-year license) ได้ฟรี เพื่อนำมาใช้กับ Wokwi Simulator ใน VS Code IDE

รูป: การค้นหาและติดตั้ง Wokwi Extension

รูป: การขอ Wokwi License Key

รูป: การนำ Wokwi License Key มาใช้กับ Wokwi Simulator

ข้อสังเกต: Wokwi Simulator + VS Code IDE สามารถใช้กับระบบปฏิบัติการอื่นได้ เช่น Windows และ MacOS X

 

▷ การติดตั้งและใช้งาน Arduino CLI#

การใช้งาน Wokwi Simulator ร่วมกับ VS Code จำเป็นต้องมีเครื่องมือสำหรับคอมไพล์โค้ด เช่น Arduino CLI และ PlatformIO (PIO) CLI เป็นต้น สำหรับ Arduino Project แนะนำให้ติดตั้ง arduino-cli โดยมีขั้นตอนดังนี้

Arduino CLI เป็นเครื่องมือแบบ Command Line (ใช้ได้กับหลายระบบปฏิบัติการ) และใช้ในการคอมไพล์โค้ด Arduino Sketch ถัดไปเป็นขั้นตอนการติดตั้ง arduino-cli สำหรับ Ubuntu / WSL2 Ubuntu 

## Arduino CLI Installation on Ubuntu / WSL2 Ubuntu

# Step 1) Install Arduino CLI 

# Download and install Arduino CLI using the official install script
# The script downloads the latest arduino-cli binary into ./bin
$ curl -fsSL \
  https://raw.githubusercontent.com/arduino/arduino-cli/master/install.sh | sh

$ mkdir -p $HOME/bin/
$ mv bin/arduino-cli $HOME/bin/

# Add $HOME/bin to PATH so the shell can find arduino-cli
$ echo 'export PATH="$PATH:$HOME/bin"' >> $HOME/.bashrc
$ source $HOME/.bashrc

# Verify Arduino CLI installation and display version information
$ arduino-cli version
# Output: arduino-cli Version: 1.4.0: b7000970f Date: 2025-12-09T15:55:00Z

# Generate a config file (if not existing): $HOME/.arduino15/arduino-cli.yaml
$ arduino-cli config init

# Download and update the list of available Arduino cores (board packages)
$ arduino-cli core update-index

# Install the Arduino AVR core (for boards like Arduino Uno, Nano, Mega)
$ arduino-cli core install arduino:avr

# List all installed Arduino cores 
$ arduino-cli core list

หากต้องการใช้งาน Arduino Library ซึ่งมีให้เลือกใช้จำนวนมาก ก็มีคำสั่งของ arduino-cli เพื่อติดตั้งไลบรารีที่ต้องการใช้งาน เช่น

# Update Arduino library index
$ arduino-cli lib update-index

# Add some Arduino libraries as examples
$ arduino-cli lib install "LiquidCrystal I2C"
$ arduino-cli lib install "Adafruit SSD1306"
$ arduino-cli lib install "Adafruit GFX Library"
$ arduino-cli lib install "Adafruit SH110X"

 

ดาวน์โหลดโปรเจกต์ตัวอย่างของ Wokwi สำหรับ Arduino จาก GitHub ดังต่อไปนี้ แล้วเปิดFolder /arduino-lcd-helloworld ใน VS Code IDE

# Clone an example Arduino project (LCD Hello World) from Wokwi
$ git clone https://github.com/wokwi/arduino-lcd-helloworld

รูป: ตัวอย่างโปรเจกต์ arduino-lcd-helloworld และเปิดดูไฟล์ diagram.json

รูป: ไฟล์ .ino ในโปรเจกต์ arduino-lcd-helloworld

ไฟล์ wokwi.yaml ใช้สำหรับการตั้งค่าเพื่อใช้งานร่วมกับ Wokwi Simulator เช่น การระบุชื่อไฟล์สำหรับ .hex และ .bin ที่ได้จากการคอมไพล์โค้ด Arduino Sketch

[wokwi]
version=1
firmware='build/arduino.avr.uno/arduino-lcd-helloworld.ino.hex'
elf='build/arduino.avr.uno/arduino-lcd-helloworld.ino.elf'

เปิดใช้งาน Terminal แล้วคอมไพล์โค้ดในโปรเจกต์ โดยใช้ arduino-cli สำหรับบอร์ด Arduino Uno ตามตัวอย่าง และจะได้ไฟล์เอาต์พุตภายใต้ ./build/arduino.avr.uno/

$ arduino-cli compile \
  --fqbn arduino:avr:uno \
  --output-dir ./build/arduino.avr.uno/ .

รูป: การทำคำสั่ง arduino-cli เพื่อคอมไพล์โค้ด

รูป: การจำลองการทำงานของโค้ดตัวอย่าง

ลองแก้ไขโค้ด เพื่อให้ส่งข้อความผ่านทาง Serial และคอมไพล์โค้ดใหม่อีกครั้งด้วย arduino-cli

#include "LiquidCrystal_I2C.h"

LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address = 0x27, 16x2 LCD I2C Module

uint32_t ts = 0; // timestamp (in msec)

void setup() {
  Serial.begin(115200);
  lcd.init();
  lcd.backlight();
  lcd.setCursor(1, 0);
  lcd.print("Hello, Wokwi!");
}

void loop() {
  static int ticks = 0;
  uint32_t now = millis();
  if ( now - ts >= 1000 ) {
    ts = now;
    Serial.println( String("Ticks: ") + (++ticks) );
    lcd.setCursor(7, 1);
    lcd.print(millis() / 1000);
  }
  delay(10);
}

รูป: การจำลองการทำงานหลักจากแก้ไขโค้ด เพื่อให้ส่งข้อความออกทางพอร์ต Serial

การเพิ่มไฟล์ .vscode/tasks.json สำหรับโปรเจกต์ ตามตัวอย่างต่อไปนี้ จะช่วยให้ทำคำสั่ง arduino-cli ได้สะดวกขึ้น โดยกดคีย์ Ctrl+Shift+B ใน VS Code IDE เพื่อทำคำสั่ง

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Arduino: Compile (Uno)",
      "type": "shell",
      "command": "arduino-cli",
      "args": [
        "compile",
        "--verbose",
        "--fqbn",
        "arduino:avr:uno",
        "--output-dir",
        "${workspaceFolder}/build/arduino.avr.uno",
        "."
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": [
      ]
    }
  ]
}

รูป: ตัวอย่างไฟล์ .vscode/tasks.json

 

▷ การติดตั้งและใช้งาน PlatformIO (PIO) CLI#

นอกเหนือจาก arduino-cli อีกตัวเลือกหนึ่งคือ pio ซึ่งเป็นคำสั่งที่ทำงานแบบ CLI ของโครงการ PlatformIO

  • PlatformIO เป็นเครื่องมือสำหรับการพัฒนาซอฟต์แวร์ฝังตัว ที่ช่วยในการเขียนโปรแกรมสำหรับไมโครคอนโทรลเลอร์ได้ง่ายขึ้น โดยรองรับบอร์ดหลายรุ่น และรูปแบบการเขียนโค้ด (Framework) เช่น Arduino, ESP-IDF, STM32Cube
  • PlatformIO Core คือ ส่วนประกอบหลักที่ทำงานในรูปแบบ Command Line Interface (CLI) ของ PlatformIO

ขั้นตอนการติดตั้ง platformio-core สำหรับ Ubuntu / WSL2 Ubuntu มีดังนี้

$ sudo apt update
$ sudo apt install -y python3 python3-venv python3-pip curl
$ PIO_URL="https://raw.githubusercontent.com/platformio/platformio-core-installer"
$ curl -fsSL -o get-platformio.py ${PIO_URL}/master/get-platformio.py
$ python3 get-platformio.py

$ echo 'export PATH="$PATH:$HOME/.platformio/penv/bin"' >> ~/.bashrc
$ source ~/.bashrc

# Check the version of the pio program
$ pio --version
# output: PlatformIO Core, version 6.1.18

ตัวอย่างการใช้งานงาน pio สำหรับโปรเกจต์ Arduino

1) สร้างโปรเจกต์ใหม่ โดยมีโครงการในไดเรกทอรี ตามรูปแบบต่อไปนี้

./arduino-lcd-helloworld-pio
├── platformio.ini
├── diagram.json
├── lib
│   └── LiquidCrystal_I2C
│       ├── LiquidCrystal_I2C.cpp
│       └── LiquidCrystal_I2C.h
├── src
│   └── arduino-lcd-helloworld.ino
└── wokwi.toml

2) สร้างไฟล์ platformio.ini ภายในโปรเจกต์ เพื่อใช้กับ pio และมีเนื้อหาภายใน ดังนี้

[env:uno]
platform = atmelavr
board = uno
framework = arduino

3) สร้างหรือแก้ไขไฟล์ wokwi.toml ภายในโปรเจกต์ สำหรับการทำงานของ Wokwi Simulator

[wokwi]
version=1
firmware='.pio/build/uno/firmware.hex'
elf='.pio/build/uno/firmware.elf'

4) ทำคำสั่ง pio run เพื่อทำขั้นตอน Build และไฟล์เอาต์พุตที่ได้จะถูกจัดเก็บไว้ภายใต้ .pio/build

5) เปิดโปรเจกต์ใน VS Code IDE และจำลองการทำงานของโค้ด

รูป: ตัวอย่างการทำคำสั่ง pio run

รูป: ไฟล์เอาต์พุตที่ได้จากขั้นตอน Build ซึ่งถูกจัดเก็บไว้ภายใต้ .pio/build

รูป: ตัวอย่างการจำลองการทำงานสำหรับไฟล์เฟิร์มแวร์ที่ได้จากการคอมไพล์ด้วย pio

 

▷ ตัวอย่างการใช้งานและเขียนโค้ด AVR LibC สำหรับบอร์ด Arduino Uno#

เริ่มต้นด้วยการติดตั้งโปรแกรมที่เกี่ยวข้องกับการคอมไพล์โค้ดสำหรับ AVR เช่น GCC-AVR Toolchain และ AVRdude

$ sudo apt install -y gcc-avr binutils-avr avr-libc avrdude

สร้างไดเรกทอรีสำหรับโปรเจกต์ ในตัวอย่างนี้ตั้งชื่อว่า uno_adc_pwm

# Create a new directory for the project
$ mkdir -p uno_adc_pwm && cd uno_adc_pwm

สร้างไฟล์ ./src/main.c ตามโค้ดตัวอย่างต่อไปนี้ ซึ่งสาธิตการใช้งานวงจร Timer1 เพื่อสร้างสัญญาณ PWM จำนวน 1 ช่อง ที่ขา Arduino D9 pin และนำไปใช้ในกับวงจร LED สามารถปรับความสว่างของ LED ได้

นอกจากนั้นแล้วยังมีการอ่านค่าจากสัญญาณแอนะล็อก ที่ช่องอินพุต A0 และแปลงให้เป็นข้อมูลดิจิทัล ขนาด 10 บิต โดยใช้วงจร ADC ภายในชิป ATmega328P ค่าอินพุตแบบแอนะล็อกในช่วง 0V ถึง 5V ซึ่งได้จากวงจรแบ่งแรงดัน (Potentiometer) จะใช้ในการกำหนดค่า Duty Cycle ของสัญญาณ PWM เพื่อปรับความสว่างของ LED 

# Create a ./build subdirectory for output files.
$ mkdir -p build

# Compile the source code.
$ avr-gcc -mmcu=atmega328p -DF_CPU=16000000UL \
  -Os -Wall \
  -o ./build/main.elf src/main.c

# Generate a .hex file from the main.elf file. 
$ avr-objcopy -O ihex -R .eeprom \
  ./build/main.elf ./build/main.hex

สร้างไฟล์ wokwi.toml Wokwi Simulator

[wokwi]
version=1
firmware='build/main.hex'
elf='build/main.elf'

สร้างไฟล์ diagram.json สำหรับ Wokwi Simulator

{
  "version": 1,
  "author": "Anonymous",
  "editor": "wokwi",
  "parts": [
    { "type": "wokwi-arduino-uno", "id": "uno", 
     "top": 0, "left": 0, "attrs": {} },
    { "type": "wokwi-led", "id": "led1", 
     "top": -100, "left": 140, "attrs": { "color": "red" } },
    {
      "type": "wokwi-resistor",
      "id": "r1",
      "top": -32,
      "left": 96,
      "attrs": { "value": "1000" }
    },
    { "type": "wokwi-potentiometer", "id": "pot1", 
     "top": 100, "left": 300, "attrs": {} },
    { "type": "wokwi-logic-analyzer", "id": "logic1", 
     "top": -100, "left": 300, "attrs": {} }
  ],
  "connections": [
    [ "uno:9", "led1:A", "green", [ "v-30", "h-30" ] ],
    [ "led1:C", "r1:2", "green", [ "v0" ] ],
    [ "uno:GND.1", "r1:1", "black", [ "v-20", "h-20" ] ],
    [ "uno:5V", "pot1:VCC", "red", [ "v50", "h-20" ] ],
    [ "uno:GND.3", "pot1:GND", "black", [ "v30", "h100" ] ],
    [ "uno:A0", "pot1:SIG", "gold", [ "v40", "h130", "v-20" ] ],
    [ "logic1:GND", "uno:GND.1", "black", [ "h-100" ] ],
    [ "logic1:D0", "led1:A", "green", [ "h-30", "v30" ] ]
  ],
  "dependencies": {}
}

รูป: การคอมไพล์โค้ดด้วยคำสั่ง avr-gcc

รูป: การจำลองการทำงานด้วย Wokwi Simulator

รูป: การแสดงรูปคลื่นสัญญาณจากข้อมูลไฟล์ VCD Waveform File (wokwi-logic.vcd) โดยใช้โปรแกรม GTKWave

 

▷ ตัวอย่างการใช้งานและเขียนโค้ด Arduino สำหรับบอร์ด ESP32#

สำหรับการเขียนโปรแกรมสำหรับ ESP32 โดยใช้ Arduino Framework จะต้องติดตั้งซอฟต์แวร์สำหรับการคอมไพล์โค้ด ในตัวอย่างนี้ เป็นการสาธิตการใช้งาน pio

เริ่มต้นด้วยการสร้างโปรเจกต์ใหม่ (ในตัวอย่างนี้ใช้ชื่อว่า esp32-lcd-i2c) โดยใช้คำสั่ง pio project init เลือก esp32dev สำหรับบอร์ด ESP32 Dev. Kit ที่ต้องการใช้งาน

# Check the version of the installed pio program.
$ pio --version
PlatformIO Core, version 6.1.18

# Create a directory for the new project.
$ mkdir -p esp32-lcd-i2c && cd esp32-lcd-i2c

# Create a new Platformio project using the ESP32 Dev. Kit board.
$ pio project init --board esp32dev

# Clean up unused PlatformIO system resources
$ pio system prune --dry-run

การสร้างไฟล์ในไดเรกทอรีของโปรเจกต์ มีลักษณะดังนี้

.
├── diagram.json
├── platformio.ini
├── include
├── lib
├── test
├── src
│   └── main.cpp
└── wokwi.toml

ตัวอย่างไฟล์ platformio.ini

[env:esp32dev]
platform = espressif32
board = esp32dev
framework = arduino
monitor_speed = 115200

lib_deps =
    marcoschwartz/LiquidCrystal_I2C@^1.1.4

ตัวอย่างไฟล์ src/main.cpp ซึ่งสาธิตการใช้งาน FreeRTOS มีการสร้างทาสก์ (Task) เพื่อทำให้ LED กระพริบ และแสดงข้อความบนโมดูลแสดงผล LCD 16x2 ที่เชื่อมต่อด้วยบัส I2C และมีการใช้งานไลบรารี LiquidCrystal_I2C

#include <Arduino.h>
#include <Wire.h>
#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address 0x27 for LCD 16x2

// Onboard LED is usually GPIO 2 on most ESP32 DevKits
#define LED_PIN 2

// Task Handles (Optional)
TaskHandle_t TaskLEDHandle = NULL, TaskLCDHandle = NULL;

// Task 1: Blink the LED
void TaskBlink(void *pvParameters) {
  pinMode(LED_PIN, OUTPUT);
  int state = 0;
  for (;;) { // Infinite loop for the task
    digitalWrite(LED_PIN, state ^=1 );
    vTaskDelay(500 / portTICK_PERIOD_MS); // 500ms
  }
}

//Task 2: Update the LCD
void TaskUpdateLCD(void *pvParameters) {
  int counter = 0;
  for (;;) {
    lcd.setCursor(0, 1); // Move to the second row
    lcd.print("Count: ");
    lcd.print(counter++);
    vTaskDelay(1000 / portTICK_PERIOD_MS); // Wait 1 second
  }
}

void setup() {
  Serial.begin(115200);
  Serial.println("\n\nWokwi ESP32 Demo...");
  Wire.begin(21, 22);
  lcd.init();
  lcd.backlight();
  lcd.setCursor(0, 0);
  lcd.print("FreeRTOS Running");

  // Create Tasks
  xTaskCreatePinnedToCore(
    TaskBlink,      // Task entry function
    "BlinkTask",    // Task name
    1024,           // Task stack size   
    NULL,        
    1,              // Task priority       
    &TaskLEDHandle, // Task handle
    0               // Run on Core 0
  );

  xTaskCreatePinnedToCore(
    TaskUpdateLCD,  // Task entry function
    "LCDTask",      // Task name
    2048,           // Task stack size
    NULL,
    1,              // Task priority 
    &TaskLCDHandle, // Tass handle
    1               // Run on Core 1
  );
}

void loop() {
}

ตัวอย่างไฟล์ diagram.json

{
  "version": 1,
  "author": "Anonymous",
  "editor": "wokwi",
  "parts": [
    { "type": "wokwi-esp32-devkit-v1", "id": "esp", 
       "top": 0, "left": -150, "attrs": {} },
    {
      "type": "wokwi-lcd1602",
      "id": "lcd1",
      "top": 10,
      "left": 40,
      "attrs": { "pins": "i2c" }
    },
    { "type": "wokwi-vcc", "id": "vcc1", 
      "top": -30, "left": 0, "attrs": {} }
  ],
  "connections": [
    [ "esp:TX0", "$serialMonitor:RX", "", [] ],
    [ "esp:RX0", "$serialMonitor:TX", "", [] ],
    [ "esp:GND.1", "lcd1:GND", "black", [ "h20", "v-105", "h0" ] ],
    [ "vcc1:VCC", "lcd1:VCC", "red", [ "v55", "h0" ] ],
    [ "esp:D22", "lcd1:SCL", "green", [ "h10", "v30" ] ],
    [ "esp:D21", "lcd1:SDA", "magenta", [ "h0" ] ]
  ],
  "dependencies": {}
}

ตัวอย่างไฟล์ wokwi.toml

[wokwi]
version = 1
firmware = '.pio/build/esp32dev/firmware.bin'
elf = '.pio/build/esp32dev/firmware.elf'

เมื่อได้ไฟล์ของโปรเจกต์ครบแล้ว ให้ทำขั้นตอน Build ด้วยคำสั่ง pio run และเอาต์พุตไฟล์ .bin และ .elf จะถูกเก็บไว้ภายใต้ .pio/build/esp32dev/

รูป: ตัวอย่างการทำคำสั่ง pio run

รูป: การจำลองการทำงานสำหรับบอร์ด ESP32 ด้วย Wokwi Simulator

 

▷ กล่าวสรุป#

บทความนี้นำเสนอตัวอย่างการใช้งาน Wokwi ร่วมกับ VS Code IDE เพื่อเขียนโค้ด Arduino Sketch โดยใช้บอร์ด Arduino Uno เป็นตัวอย่าง และจำลองการทำงานของระบบ โดยใช้ Wokwi Simulator

บทความที่เกี่ยวข้อง

 

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Created: 2026-01-07 | Last Updated: 2026-01-08