eBook: บทที่ 2 เรียนรู้และใช้งาน Visual Studio Code (vSCode) และ PlatformIO

UTEN BOONLIAM Avatar
บทที่ 2

💻

เรียนรู้และใช้งาน Visual Studio Code (vSCode) และ PlatformIO

A close-up of a logo AI-generated content may be incorrect.

รูปที่ 2.1 PlatformIO และ Visual Studio Code (VsCode)

💻2.1 บทนำ

จากการที่ได้แนะนำไปแล้วในบทที่ 1 เราเลือกใช้ PlatformIO บน VsCode
เป็นเครื่องมือหลักสำหรับการพัฒนา เนื่องจากเป็นเครื่องมือที่ทันสมัยและมีประสิทธิภาพ
ช่วยให้ผู้เรียนได้สัมผัสกับเทคโนโลยีที่นิยมใช้ในวงการพัฒนาระบบสมองกลฝังตัว (Embedded
Systems) และ IoT การใช้งาน PlatformIO
ไม่เพียงช่วยให้เข้าใจกระบวนการเขียนโปรแกรมอย่างลึกซึ้ง
แต่ยังเปิดโอกาสให้ผู้เรียนได้ฝึกฝนการจัดการโปรเจกต์ การแก้ไขข้อผิดพลาด (Debugging)
และการทำงานร่วมกับไลบรารีต่างๆ อย่างเชี่ยวชาญ
ซึ่งเป็นทักษะที่จำเป็นสำหรับการก้าวสู่การเป็นนักพัฒนามืออาชีพ

Visual Studio Code (VsCode) เป็นโปรแกรมแก้ไขโค้ด (Code Editor) ที่พัฒนาโดย
Microsoft โดยเปิดตัวครั้งแรกในปี 2015 เป็นเครื่องมือที่ได้รับความนิยมสูงเนื่องจากมีความเร็ว
ความยืดหยุ่น และรองรับการทำงานกับภาษาการเขียนโปรแกรมที่หลากหลาย เช่น JavaScript,
Python, C++, และอื่นๆ VsCode มาพร้อมกับระบบ Extension
ที่ช่วยเพิ่มฟังก์ชันการทำงานได้ตามความต้องการของผู้ใช้งาน

PlatformIO เป็นเครื่องมือพัฒนาโปรแกรมสำหรับระบบสมองกลฝังตัว (Embedded
Systems) และ IoT ที่ทำงานบน VsCode โดยเป็น Extension
ที่ช่วยให้ผู้พัฒนาสามารถเขียนโปรแกรม, อัปโหลดโค้ด, และDebuggingได้อย่างสะดวก
PlatformIO รองรับการทำงานกับบอร์ดและแพลตฟอร์มต่างๆ มากมาย เช่น Arduino, ESP32,
Raspberry Pi, และ STM32

ในบทที่ 2 นี้ เราจะมาศึกษาเกี่ยวกับ การติดตั้งและการใช้งาน PlatformIO บน VsCode
ตั้งแต่ขั้นตอนการติดตั้งโปรแกรม ตั้งค่าเบื้องต้น การใช้งานฟังก์ชันต่างๆ ของ PlatformIO
รวมถึงการนำไปประยุกต์ใช้ในการพัฒนาโปรเจกต์จริง
เพื่อให้ผู้เรียนสามารถเริ่มต้นการพัฒนาได้อย่างมีประสิทธิภาพและคล่องตัว

💻2.2 ขั้นตอนการติดตั้งและใช้งานเครื่องมือ

2.2.1. ติดตั้ง Visual Studio Code

1 เข้าไปที่เว็บไซต์ https://code.visualstudio.com/
และดาวน์โหลดโปรแกรมตามระบบปฏิบัติการที่ใช้งาน (Windows / macOS / Linux)
ดำเนินการติดตั้งตามขั้นตอน และเปิดใช้งานโปรแกรม

A screenshot of a computer AI-generated content may be incorrect.

รูปที่ 2.2 หน้าเว็บไซต์สำหรับดาวน์โหลดโปรแกรม VsCode ตามระบบปฏิบัติการของผู้ใช้

2 ดาวน์โหลดและติดตั้งตามขั้นตอนที่ปรากฏบนหน้าจอ

A screenshot of a computer AI-generated content may be incorrect.A screenshot of a computer AI-generated content may be incorrect.
A screenshot of a computer AI-generated content may be incorrect.A screenshot of a computer program AI-generated content may be incorrect.

รูปที่ 2.3 ขั้นตอนการติดตั้งโปรแกรม VsCode จนเสร็จสมบูรณ์

3 หลังการติดตั้งเสร็จสิ้น ให้เปิดโปรแกรม VsCode ขึ้นมา

A screenshot of a computer AI-generated content may be incorrect.

รูปที่ 2.4 หน้าต่างหลักของโปรแกรม VsCode หลังติดตั้งเสร็จสมบูรณ์

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

1 เปิด VsCode แล้วคลิกไอคอน Extensions (หรือกด Ctrl+Shift+X)

2 ค้นหาคำว่า PlatformIO IDE แล้วกดปุ่ม Install

A screenshot of a computer AI-generated content may be incorrect.

รูปที่ 2.5 ค้นหาและติดตั้งส่วนขยาย PlatformIO IDE ในโปรแกรม VsCode ผ่านเมนู
Extensions

3 เมื่อติดตั้งเสร็จ ให้คลิก Reload เพื่อเริ่มต้นการใช้งาน PlatformIO

💻2.3 สร้างโปรเจกต์ใหม่สำหรับ ESP32

1 คลิกไอคอน PlatformIO Home ทางด้านซ้าย และเลือก + New Project

2 ตั้งชื่อโปรเจกต์ (เช่น ESP32_Test)

3 เลือกบอร์ดเป็น Espressif ESP32 Dev Module และ Framework เป็น
Arduino

4 กด Finish เพื่อสร้างโครงสร้างโปรเจกต์

รูปที่ 2.6 สร้างโปรเจกต์ใหม่ใน PlatformIO และกด Finish

5 โครงสร้างโปรเจกต์จะประกอบด้วย:

  • src/ = สำหรับเก็บโค้ดหลัก เช่น main.cpp

  • lib/ = สำหรับไลบรารีเพิ่มเติม

  • platformio.ini = สำหรับตั้งค่าพื้นฐานของโปรเจกต์

A screenshot of a computer AI-generated content may be incorrect.

รูปที่ 2.7 โครงสร้างโปรเจกต์พื้นฐานใน PlatformIO

💻2.4 เขียนโปรแกรมตัวอย่าง (เช่น ไฟกระพริบ)

1 เปิดไฟล์ main.cpp แล้วเขียนโค้ดตัวอย่าง:

A computer code with text AI-generated content may be incorrect.

รูปที่ 2.8 ตัวอย่างโค้ดควบคุมไฟกระพริบบนขา GPIO ด้วยภาษา Arduino C++

A qr code with black squares AI-generated content may be incorrect.

2 บันทึกไฟล์ (Ctrl+S)

3 ให้กดปุ่มเครื่องหมายถูก (✓) เพื่อทำการคอมไพล์โค้ดที่เขียนไว้
ซึ่งเป็นการตรวจสอบความถูกต้องของไวยากรณ์ในโปรแกรม หากโค้ดไม่มีข้อผิดพลาด
ระบบจะทำการคอมไพล์สำเร็จและแสดงข้อความว่า “SUCCESS” บนหน้าต่าง Terminal

หากพบข้อความดังกล่าว
แสดงว่าโค้ดสามารถผ่านการตรวจสอบโดยคอมไพลเลอร์ได้อย่างถูกต้อง
พร้อมสำหรับการอัปโหลดลงบอร์ด

A screenshot of a computer AI-generated content may be incorrect.

รูปที่ 2.9 แสดงผลลัพธ์เมื่อคอมไพล์โค้ดผ่าน โดยขึ้นข้อความ “SUCCESS” บนหน้าต่าง
Terminal

2.5. เชื่อมต่อบอร์ดและอัปโหลดโค้ด

1 เชื่อมต่อบอร์ด ESP32 เข้ากับคอมพิวเตอร์ด้วยสาย USB ที่สามารถรับส่งข้อมูล

2 ตรวจสอบการเชื่อมต่อ (Windows ใช้ Device Manager)

A screenshot of a computer AI-generated content may be incorrect.

รูปที่ 2.10 ตรวจสอบการเชื่อมต่อบอร์ด ESP32 ผ่านพอร์ต COM ใน Device Manager
บนระบบ Windows

3 เปิดไฟล์ platformio.ini และตั้งค่าดังนี้ (ตัวอย่าง):

A screenshot of a computer AI-generated content may be incorrect.

รูปที่ 2.11 ตัวอย่างไฟล์ platformio.ini สำหรับตั้งค่าบอร์ดและพอร์ต

4 คลิกปุ่ม Upload (ไอคอนลูกศรชี้ขวา) เพื่ออัปโหลดโค้ดไปยังบอร์ด

5 หากสำเร็จจะปรากฏข้อความ SUCCESS

A screenshot of a computer program AI-generated content may be incorrect.

รูปที่ 2.12 หน้าต่าง Terminal แสดงข้อความ “SUCCESS”
เมื่อคอมไพล์และอัปโหลดโค้ดสำเร็จ

💻2.6 ทดสอบผลลัพธ์

สังเกตว่า LED บนบอร์ดกระพริบทุก 1 วินาที

หากทำงานตามคาด แสดงว่าโค้ดทำงานถูกต้อง

💻2.7 ปัญหาที่พบบ่อยและแนวทางแก้ไข

  • หากอัปโหลดไม่สำเร็จ:

  • ตรวจสอบสาย USB ว่าเป็นแบบรับส่งข้อมูล

  • ติดตั้งไดรเวอร์บอร์ด (เช่น CP210x หรือ CH340)

  • ตรวจสอบว่าเลือกบอร์ดถูกต้องใน platformio.ini

✅ คำถามท้ายใบงาน 💡

1.ขั้นตอนการติดตั้งส่วนขยาย PlatformIO บน VsCode ต้องทำอย่างไรบ้าง?

…………………………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………

2.ในไฟล์ platformio.ini มีการตั้งค่าอะไรบ้างที่สำคัญสำหรับการใช้งานบอร์ด
ESP32?

…………………………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………

3.ถ้าการคอมไพล์โค้ดไม่สำเร็จ ระบบจะแสดงผลลัพธ์อย่างไร
และควรตรวจสอบสิ่งใดก่อนเป็นอันดับแรก?

…………………………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………

📝 พื้นที่สรุปผลการเรียนรู้

🔹 หลังจากทำกิจกรรมและศึกษาข้อมูลจากชุดฝึกนี้ ฉันได้เรียนรู้ว่า…

…………………………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………

🔹 ความเข้าใจเพิ่มเติมที่ได้รับจากใบงานนี้คือ…

…………………………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………

🔹 ข้อเสนอแนะ/ข้อสงสัยเพิ่มเติม

…………………………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………

“เครื่องมือที่ดี คือครึ่งหนึ่งของความสำเร็จ”

“The right tools are half the journey to
success.”

Leave a Reply

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