เตรียมเครื่องมือ: Arduino Cloud Editor

เขียนและอัปโหลดโค้ดผ่านเบราว์เซอร์ พร้อมวิธีแก้ปัญหาที่พบบ่อย

Author

ผศ.ดร.ศุภชัย วรพจน์พิศุทธิ์

Published

4 ตุลาคม 2569

โค้ดของกิจกรรมนี้เขียนและอัปโหลดผ่าน Arduino Cloud Editor (เว็บ) ได้โดยไม่ต้องติดตั้ง Arduino IDE แต่ต้องติดตั้งโปรแกรมเล็ก ๆ ชื่อ Arduino Cloud Agent บนคอมพิวเตอร์ เพราะเว็บเข้าถึงพอร์ต USB ของเครื่องโดยตรงไม่ได้ Agent ทำหน้าที่เป็นตัวกลางส่งโค้ดที่คอมไพล์แล้วจากเว็บไปยังบอร์ดผ่านสาย USB

flowchart LR
    W["Cloud Editor<br/>(เว็บ: เขียน + คอมไพล์)"] -- "อินเทอร์เน็ต" --> B["เบราว์เซอร์"]
    B -- "อนุญาตให้เชื่อมต่อ<br/>(ต้องกด Allow)" --> A["Arduino Cloud Agent<br/>(โปรแกรมในเครื่อง)"]
    A -- "สาย USB" --> D["UNO R4 WiFi"]

Note

ถ้าคอมพิวเตอร์ของคุณติดตั้ง Arduino IDE 2 อยู่แล้ว ใช้ IDE แทนได้เลย (ไม่ต้องใช้ Cloud Editor และ Agent) โค้ดชุดเดียวกัน

สิ่งที่ต้องมี

  • คอมพิวเตอร์ที่ต่ออินเทอร์เน็ตได้ (Cloud Editor คอมไพล์บนเซิร์ฟเวอร์ของ Arduino) และสิทธิ์ติดตั้งโปรแกรม
  • เบราว์เซอร์ Chrome หรือ Edge เวอร์ชันใหม่ (แนะนำ)
  • บัญชี Arduino (สมัครฟรีที่ arduino.cc) ถ้าไม่มี ให้ขอผู้สอน
  • สาย USB ที่ ส่งข้อมูลได้ (ไม่ใช่สายชาร์จอย่างเดียว)

ขั้นตอนครั้งแรก

  1. เปิด app.arduino.cc/sketches แล้วล็อกอิน
  2. เสียบบอร์ด UNO R4 WiFi เข้าคอมพิวเตอร์ด้วยสาย USB
  3. เมื่อเข้า Editor ครั้งแรก เว็บจะบอกว่าต้องติดตั้ง Arduino Cloud Agent ให้กดตามที่เว็บแนะนำเพื่อดาวน์โหลดตัวติดตั้งของระบบปฏิบัติการของคุณ (Windows / macOS / Linux) แล้วเปิดไฟล์ที่ดาวน์โหลดและติดตั้งตามขั้นตอนบนหน้าจอ
  4. ติดตั้งเสร็จ Agent จะรันอยู่เบื้องหลัง: ดูไอคอนที่ system tray (มุมขวาล่างของ Windows) หรือ menu bar (macOS)
  5. กลับไปที่เว็บ Editor แล้วรีเฟรชหน้า เว็บจะค้นหา Agent
  6. ถ้าเบราว์เซอร์ขึ้นหน้าต่างถามว่าอนุญาตให้เว็บไซต์เชื่อมต่อกับโปรแกรม/อุปกรณ์ในเครื่องหรือไม่ ให้กด Allow (อนุญาต) ดูหัวข้อถัดไป
  7. เลือกบอร์ดที่ช่องเลือกอุปกรณ์ด้านบน ควรเห็น Arduino UNO R4 WiFi พร้อมพอร์ต (เช่น COM5 บน Windows) ถ้าไม่เห็นให้เลือก Select other board and port แล้วเลือกเอง
Importantต้องกด Allow ทุกครั้งที่ถาม

ขั้นตอนที่คนติดบ่อยที่สุดคือหน้าต่างขออนุญาตเชื่อมต่อของเบราว์เซอร์ ถ้าไม่กด Allow เว็บจะมองไม่เห็น Agent และมองไม่เห็นบอร์ด

ถ้าไม่ได้กด Allow หรือเผลอกด Block: ให้ ปิดหน้าต่างเบราว์เซอร์ทั้งหมด แล้วเปิดใหม่ เข้า Editor อีกครั้ง หน้าต่างขออนุญาตมักขึ้นมาใหม่

ถ้าเปิดใหม่แล้วไม่ขึ้นอีก (เพราะเคยกด Block ไว้): คลิกไอคอนรูปแม่กุญแจหรือไอคอนตั้งค่าหน้าเว็บที่ช่องที่อยู่ (ด้านซ้ายของ URL) → ตั้งค่าไซต์ (Site settings) → เปลี่ยนสิทธิ์ที่เกี่ยวกับการเชื่อมต่อกับอุปกรณ์/เครือข่ายในเครื่อง ให้เป็น อนุญาต (Allow) แล้วรีเฟรชหน้า

ชื่อเมนูและข้อความในหน้าต่างอาจต่างกันตามเบราว์เซอร์และเวอร์ชัน

ใช้ Cloud Editor กับโค้ดของกิจกรรมนี้

นำโค้ดเข้ามา

  1. กด New Sketch (หรือเปิดสเก็ตช์ว่าง) ตั้งชื่ออะไรก็ได้
  2. ลบโค้ดตัวอย่างเดิม แล้ววางโค้ดจากไฟล์ในโฟลเดอร์ devices/ ที่ต้องการ (เช่น เปิดไฟล์ .ino บน GitHub แล้วกดปุ่ม Copy raw file)
  3. กด Verify (เครื่องหมายถูก) เพื่อคอมไพล์ก่อน ถ้าคอมไพล์ผ่านค่อยกด Upload (ลูกศร)

เพิ่มไลบรารี (ขั้นที่ 3 และ 4)

สเก็ตช์ขั้นที่ 3–4 ใช้ ArduinoJson

  1. เปิดแท็บ Libraries ทางซ้ายของ Editor
  2. ค้นหา ArduinoJson แล้วเลือกเวอร์ชัน 7.x กด Include (หรือเพิ่มเข้าสเก็ตช์)
  3. ถ้าคอมไพล์แล้วขึ้น error เกี่ยวกับ JsonDocument แปลว่าได้เวอร์ชันเก่า (6.x) ให้เปลี่ยนเป็น 7.x

ใส่ชื่อและรหัส Wi-Fi (ขั้นที่ 3 และ 4)

สเก็ตช์ใช้ #include "arduino_secrets.h" เพื่อแยกรหัสผ่านออกจากโค้ดหลัก

  1. ใน Cloud Editor ให้ใช้แท็บ Secret ของสเก็ตช์ (ถ้ายังไม่มี ให้สร้างแท็บใหม่ชื่อ arduino_secrets.h ผ่านเมนูที่แท็บของสเก็ตช์)
  2. ใส่ข้อมูลตามนี้ (ใส่ชื่อและรหัส Wi-Fi 2.4 GHz ที่ผู้สอนแจ้ง)
arduino_secrets.h
#define SECRET_SSID "ชื่อ Wi-Fi"
#define SECRET_PASS "รหัส Wi-Fi"
Warning

อย่าแคปหน้าจอหรือแชร์สเก็ตช์ที่มีรหัส Wi-Fi และห้ามเผยแพร่แท็บ Secret ออกไป

เปิด Serial Monitor

  1. เปิด Serial Monitor จากเมนูด้านซ้าย
  2. ตั้งความเร็ว (baud) เป็น 115200 ให้ตรงกับ Serial.begin(115200) ในโค้ด ถ้าเห็นตัวอักษรเพี้ยนเป็นสัญลักษณ์แปลก ๆ แปลว่าตั้งความเร็วไม่ตรง
  3. Serial Monitor ของ Cloud Editor อาจไม่มีกราฟแบบ Serial Plotter ให้อ่านค่าเป็นตัวเลขแทนได้

แก้ปัญหาที่พบบ่อย

ตรวจทีละข้อจากบนลงล่าง ส่วนใหญ่แก้ได้ภายใน 2 นาที

Agent และเบราว์เซอร์

อาการ สาเหตุที่พบบ่อย วิธีแก้
เว็บบอกว่าไม่พบ Agent / ให้ติดตั้ง Agent ทั้งที่ติดตั้งแล้ว ไม่ได้กด Allow ที่หน้าต่างขอเชื่อมต่อของเบราว์เซอร์ ปิดเบราว์เซอร์ทั้งหมดแล้วเปิดใหม่ แล้วกด Allow เมื่อถูกถาม; ถ้าไม่ขึ้นอีก ให้เปิดสิทธิ์ที่ไอคอนแม่กุญแจ (ดูกล่องด้านบน)
เหมือนข้างบน Agent ไม่ได้ทำงานอยู่ (ปิดไปหรือหยุดไว้) หาไอคอน Agent ใน system tray/menu bar ถ้าไม่มี ให้เปิดโปรแกรม Arduino Cloud Agent จาก Start menu (หรือ Applications) แล้วรีเฟรชหน้าเว็บ
เหมือนข้างบน ติดตั้งค้างหรือเสียหาย ถอนการติดตั้ง Arduino Cloud Agent แล้วติดตั้งใหม่ จากนั้นรีสตาร์ตเบราว์เซอร์
Windows ขึ้นหน้าต่าง firewall ตอน Agent เริ่มทำงาน firewall ถามสิทธิ์เครือข่าย เลือกอนุญาต (Private networks) ถ้าเผลอกดไม่อนุญาต ให้ขอผู้สอนช่วยเพิ่มข้อยกเว้นใน Windows Firewall
โปรแกรมป้องกันไวรัสหรือ firewall ขององค์กรบล็อก Agent นโยบายความปลอดภัยของเครื่อง/โรงเรียน แจ้งผู้สอน ขอให้อนุญาตโปรแกรม Arduino Cloud Agent
ใช้ Safari บน macOS แล้วไม่เจอ Agent ยังไม่ได้ติดตั้ง/เชื่อถือ HTTPS certificate ของ Agent เมนูของ Agent → จัดการ HTTPS certificate → ติดตั้งสำหรับ Safari หรือเปลี่ยนไปใช้ Chrome
ใช้ Brave แล้วไม่เจอ Agent Brave Shields บล็อกการเชื่อมต่อ ปิด Shields สำหรับเว็บ Arduino หรือใช้ Chrome/Edge
ใช้ Mac ชิป Apple Silicon (M1 ขึ้นไป) แล้วเปิด Agent ไม่ได้ ต้องมี Rosetta 2 ติดตั้ง Rosetta 2 (softwareupdate --install-rosetta) แล้วเปิด Agent ใหม่
ใช้โปรแกรมบล็อกโฆษณา/VPN/proxy แล้วเชื่อมไม่ได้ ส่วนขยายบล็อกการเชื่อมต่อไปที่เครื่องตัวเอง ปิดส่วนขยายสำหรับเว็บ Arduino ชั่วคราวหรือใช้หน้าต่างส่วนตัว (Incognito) ที่ปิดส่วนขยาย
ไม่ใช่ปัญหาข้างบน ยังไม่รู้สาเหตุ ปิดทุกอย่าง → ถอดสาย USB → เปิดเบราว์เซอร์ใหม่ → เสียบสาย USB ใหม่ → เข้า Editor

บอร์ดและพอร์ต

อาการ สาเหตุที่พบบ่อย วิธีแก้
Agent เจอแล้วแต่ไม่เห็นบอร์ด / ไม่มีพอร์ต สาย USB เป็นสายชาร์จ (ไม่มีสายข้อมูล) เปลี่ยนสาย USB (ลองสายที่เคยใช้โอนข้อมูลได้) บอร์ดควรมีไฟสว่าง
เหมือนข้างบน ช่อง USB หรือฮับมีปัญหา ลองช่อง USB อื่นบนตัวเครื่อง หลีกเลี่ยง USB hub
อัปโหลดแล้วขึ้น error เรื่องพอร์ตหรือ “ไม่พบอุปกรณ์” โปรแกรมอื่นกำลังใช้พอร์ตนั้นอยู่ (เช่น Arduino IDE, Serial Monitor อีกหน้าต่าง, PuTTY) ปิดโปรแกรมที่ใช้พอร์ต แล้วอัปโหลดใหม่
อัปโหลดค้าง หรือบอร์ดไม่ตอบ บอร์ดอยู่ในสถานะที่ต้องเข้า bootloader กดปุ่ม RESET สองครั้งติดกันเร็ว ๆ (ไฟ LED จะกะพริบช้า ๆ) แล้วอัปโหลดอีกครั้ง
เลือกบอร์ดผิดแล้วคอมไพล์ไม่ผ่าน Editor เลือกบอร์ดอื่นให้อัตโนมัติ เลือก Arduino UNO R4 WiFi เองจาก Select other board and port
พอร์ตหายไปหลังอัปโหลด หรือเปลี่ยนเลขพอร์ต บอร์ดรีเซ็ตตัวเองหลังอัปโหลด รอ 2–3 วินาที แล้วรีเฟรชรายการพอร์ต

คอมไพล์และอัปโหลด

อาการ สาเหตุที่พบบ่อย วิธีแก้
fatal error: ArduinoJson.h: No such file ยังไม่ได้เพิ่มไลบรารี เพิ่ม ArduinoJson 7.x ในแท็บ Libraries (ดูด้านบน)
error เกี่ยวกับ JsonDocument / deserializeJson ใช้ ArduinoJson เวอร์ชัน 6 เปลี่ยนเป็น 7.x
fatal error: arduino_secrets.h: No such file ยังไม่ได้สร้างไฟล์ Secret สร้างแท็บ arduino_secrets.h และใส่ SECRET_SSID/SECRET_PASS
'SECRET_SSID' was not declared ชื่อตัวแปรในไฟล์ Secret ไม่ตรงกับโค้ด ใช้ชื่อ SECRET_SSID และ SECRET_PASS ให้ตรงตัวอักษร
Verify ผ่านแต่ Upload ไม่ได้ ปัญหาที่ Agent/พอร์ต ดูตารางด้านบน
คอมไพล์ช้ามากหรือขึ้นว่าเกินโควตา โควตาเวลาคอมไพล์ของแผนฟรี หรือเครือข่ายห้องเรียนช้า รอสักครู่แล้วลองใหม่ ถ้าใช้ซ้ำบ่อยขอผู้สอนช่วยหรือใช้ Arduino IDE 2
อัปโหลดสำเร็จแต่ Serial Monitor ว่างเปล่า ยังไม่ได้เลือกพอร์ตใน Serial Monitor หรือบอร์ดเพิ่งรีเซ็ต เลือกพอร์ตถูกต้อง รอ 2–3 วินาที หรือกด RESET บนบอร์ด
ตัวอักษรใน Serial Monitor เพี้ยน baud ไม่ตรง ตั้งเป็น 115200
บอร์ดไม่เชื่อมต่อ Wi-Fi (Wi-Fi unavailable) ชื่อ/รหัส Wi-Fi ผิด หรือเป็น 5 GHz ตรวจแท็บ Secret; UNO R4 WiFi ใช้ได้เฉพาะ 2.4 GHz
Tipลำดับตรวจเมื่อมีอะไรผิดปกติ
  1. สาย USB เป็นสายข้อมูลและบอร์ดมีไฟ
  2. ไอคอน Agent ยังทำงานอยู่
  3. เบราว์เซอร์อนุญาตการเชื่อมต่อแล้ว (ถ้าไม่แน่ใจ ปิดแล้วเปิดใหม่)
  4. เลือกบอร์ดและพอร์ตถูกต้อง
  5. ไม่มีโปรแกรมอื่นแย่งพอร์ต
  6. ยังไม่หาย: ถามผู้สอนพร้อมบอกข้อความ error ที่เห็น (แคปเฉพาะข้อความ ไม่ต้องแคปแท็บ Secret)

ข้อมูลเพิ่มเติม