กลับไปหน้ารวมไฟล์
getting-started-with-arduino-web-editor-on-various-platforms-2cc31c.md

หมายเหตุ: บทสอนนี้เป็นเวอร์ชั่นเก่าแล้วนะน้อง ไปหาบทสอนใหม่สำหรับ Web Editor ได้ที่เว็บหลักของ Arduino เลยจ้า

Arduino Web Editor กับ Create Platform

Arduino Web Editor นี้มันคือเครื่องมือให้เราเขียนโค้ดและอัปโหลดสเก็ตช์ไปยัง บอร์ด Arduino รุ่นทางการทุกแบบ ได้เลยผ่านเว็บเบราว์เซอร์ (Chrome, Firefox, Safari และ Edge) แต่รุ่นพี่แนะนำให้ใช้ Google Chrome นะ งานเข้าแน่นอน

เจ้า IDE (Integrated Development Environment) ตัวนี้เป็นส่วนหนึ่งของ Arduino Create ซึ่งเป็นแพลตฟอร์มออนไลน์ที่ให้เราสามารถเขียนโค้ด เข้าถึงบทสอน คอนฟิกบอร์ด และแชร์โปรเจกต์ได้หมด มันถูกออกแบบมาเพื่อให้เราทำงานต่อเนื่องแบบไม่สะดุด ตั้งแต่เริ่มคิดจนถึงลงมือทำเลยล่ะ นั่นหมายความว่า เราจัดการทุกอย่างในโปรเจกต์ได้จากแดชบอร์ดเดียว งานนี้ห้ามช็อตนะตัวนี้!

เพราะ Arduino Web Editor อยู่บนคลาวด์ มันจึงอัพเดทฟีเจอร์ใหม่และรองรับบอร์ดใหม่ๆ ตลอดเวลา ไม่ต้องมานั่งอัพเดทให้เมื่อยมือ

เจ้า IDE นี้ให้เราเขียนโค้ดและเซฟขึ้นคลาวด์ได้ด้วย มันจะแบ็กอัพให้อัตโนมัติและเราก็เข้าไปแก้จากอุปกรณ์ไหนก็ได้ แถมยังจับคู่บอร์ด Arduino / Genuino ที่ต่อกับคอมเราได้เองอีกต่างหาก สะดวกสุดๆ

แค่มีบัญชี Arduino อันเดียวก็เริ่มงานได้แล้ว จัดไปวัยรุ่น!

สมัครบัญชี Arduino

ไปที่หน้าเว็บหลักของ Arduino เพื่อสร้างบัญชีใหม่เลย กรอกข้อมูลในฟอร์มให้ครบ แล้วกดปุ่ม ‘Create Account’ จากนั้นรออีเมลยืนยันทางอีเมลที่สมัครไว้ กดลิงก์ในอีเมลเพื่อเปิดหน้าเว็บที่บอกว่าบัญชีเราพร้อมใช้งานแล้ว

บัญชีนี้เอาไว้ใช้ได้หลายอย่างเลยนะ เช่น เขียนโพสต์ในฟอรั่มทางการของ Arduino ซื้อของในร้านค้าออนไลน์ คอมเมนต์ในบล็อก หรือแม้แต่เขียนบทสอนใน Arduino Project Hub (เย่!)

ล็อกอินเข้า Arduino Web Editor

พอสมัครบัญชี Arduino เสร็จแล้ว ก็ไปที่ create.arduino.cc/editor ได้เลย หลังจากยอมรับข้อตกลงต่างๆ แล้ว คุณควรได้รับอีเมลที่มีลิงก์ไปยังฟอรั่ม ซึ่งเป็นที่ที่คุณสามารถรายงานบั๊กหรือแชร์ฟีดแบ็กได้

เลือกแพลตฟอร์มที่ใช้: Windows, Mac หรือ Linux

Arduino Web Editor นี้รันได้บนหลายแพลตฟอร์ม ถ้าใช้ Windows, Mac หรือ Linux ก็แค่ทำตามขั้นตอนง่ายๆ เพื่อติดตั้ง Arduino Web Editor plugin ซึ่งจะทำให้เราอัปโหลดสเก็ตช์จากเบราว์เซอร์ไปยังบอร์ดได้

ติดตั้ง Plugin ไม่ได้หรือมีปัญหา? ลองไปเปิดกระทู้ถามในฟอรั่มทางการดู มีคนคอยช่วยแก้ปัญหาให้เราลุยงานต่อได้แน่นอน!

พอติดตั้งปลั๊กอินเสร็จแล้ว เจ้าตัวเบราว์เซอร์จะพาน้องไปที่หน้า Login ของ Arduino เองแหละ ถึงเวลายกบัตรประจำตัวมาใช้แล้ววว!

เจ้า Arduino Create Agent

เบราว์เซอร์ของน้อง (ไม่ว่าจะเป็น Chrome หรือ Edge) มันไม่สามารถเข้าไปยุ่งกับพอร์ต USB จริงๆ ของคอมได้โดยตรงหรอก ด้วยเหตุผลเรื่องความปลอดภัยน่ะแหละ นี่แหละคือที่มาของ Arduino Create Agent

  1. สะพานเชื่อม: Agent ตัวนี้คือโปรแกรมเล็กๆ ที่จะติดตั้งลงในคอมของน้อง แล้วมันจะรันอยู่เบื้องหลัง
  2. เจ้า mini-server ตัวนี้จะทำงานเงียบๆ ใน system tray ของน้อง มันคอยฟังคำสั่งจาก Arduino Web Editor ในเบราว์เซอร์ แล้วทำหน้าที่เป็นสะพานเชื่อมที่ปลอดภัยไปยังพอร์ต COM บน USB จริงๆ ที่น้องเสียบบอร์ด Arduino ไว้
  3. หน้าตา Web UI: หน้าตามันเหมือนกับ IDE แบบลงเครื่องเป๊ะๆ สเก็ตช์ (`.ino` files) ทั้งหมดของน้องจะเซฟลงคลาวด์โดยตรง หมายความว่าน้องสามารถเริ่มเขียนโค้ดบนคอมที่ห้องสมุด แล้วกลับไปเขียนต่อบนโน๊ตบุ๊คที่บ้านได้เลย ไม่ต้องโยกไฟล์ให้วุ่นวาย!

เลือก Platform ของน้อง: Chrome OS

แต่ก่อน Create App สำหรับ Chrome OS ต้องจ่ายตังค์นะ แต่ตอนนี้ฟรีแล้วจ้าา

การจะใช้ Arduino Web Editor บน Chrome OS ได้ ต้องมี Arduino Create App ก่อน ถึงจะอัปโหลดสเก็ตช์ไปยังบอร์ดได้

ถ้ามีคำถามเกี่ยวกับการใช้ Chrome App ลองไปถามในฟอรั่มดูได้

โครงสร้างของ Arduino Web Editor

หลังจากล็อกอินแล้ว น้องก็พร้อมจะใช้ Arduino Web Editor แล้ว แอปเว็บนี้แบ่งออกเป็นสามคอลัมน์หลัก

คอลัมน์แรก เอาไว้ให้น้องสลับไปมาระหว่าง:

  • Your Sketchbook: ที่เก็บสเก็ตช์ทั้งหมดของน้อง (’sketch ’ คือชื่อเรียกโปรแกรมที่น้องอัปโหลดลงบอร์ดนั่นแหละ)
  • Examples: สเก็ตช์แบบอ่านอย่างเดียว ที่โชว์คำสั่งพื้นฐานทั้งหมดของ Arduino (แท็บ built-in) และการทำงานของไลบรารี่ต่างๆ (จากแท็บ libraries)
  • Libraries: แพ็คเกจที่สามารถ include เข้ามาในสเก็ตช์เพื่อเพิ่มฟังก์ชันพิเศษ
  • Serial monitor: ฟีเจอร์ที่ทำให้น้องรับและส่งข้อมูลไปยังบอร์ดผ่านสาย USB ได้
  • Help: ลิงก์ช่วยเหลือและคำศัพท์เกี่ยวกับ Arduino
  • Preferences: ตัวเลือกสำหรับปรับแต่งหน้าตาและการทำงานของเอดีเตอร์ เช่น ขนาดตัวอักษรและธีมสี

พอเลือกเมนูไหนแล้ว ตัวเลือกของเมนูนั้นจะโผล่มาในแผงด้านข้าง (คอลัมน์ที่สอง)

คอลัมน์ที่สาม คือพื้นที่เขียนโค้ด ที่น้องจะใช้บ่อยที่สุด ที่นี่แหละที่น้องจะเขียนโค้ด, ตรวจสอบโค้ด, อัปโหลดโค้ดไปยังบอร์ด, บันทึกสเก็ตช์ลงคลาวด์ และแชร์ให้ใครก็ได้ที่น้องอยากแชร์

ทำให้บอร์ดกระพริบจากในเบราว์เซอร์เลย

ตอนนี้เราตั้งค่า online IDE กันเสร็จแล้ว มาลองเช็คให้แน่ใจว่าคอมของน้องคุยกับบอร์ดรู้เรื่องกันดีมั้ย ถึงเวลาทดสอบว่าอัปโหลดโปรแกรมได้จริงรึเปล่าแล้ว

  • ลองเช็คดูอีกทีว่า Web Editor แสดงผลแบบที่น้องชอบมั้ย ลองเข้าไปดูใน Preferences panel มีตัวเลือกให้ปรับนิดหน่อย
  • เสียบบอร์ด Arduino หรือ Genuino ของน้องเข้ากับคอม บอร์ดและพอร์ตอนุกรมจะถูกค้นหาและเลือกได้อัตโนมัติในเมนู dropdown เดียว เลือกบอร์ด Arduino/Genuino ที่น้องอยากอัปโหลดโปรแกรมลงไปจากลิสต์ได้เลย
  • มาลองตัวอย่างกันดีกว่า: เลือก 'Examples ' ในเมนูด้านซ้าย จากนั้นเลือก 'Basic ' และ 'Blink ' โค้ดสเก็ตช์ Blink จะปรากฏขึ้นในพื้นที่เขียนโค้ด
  • เพื่ออัปโหลดโค้ดลงบอร์ด ให้กดปุ่ม 'Upload ' (ลูกศรชี้ขวา) ใกล้ๆ เมนูแบบเลื่อนลง ขณะที่ระบบกำลังตรวจสอบและอัปโหลดโค้ด ปุ่มจะถูกแทนที่ด้วยป้าย 'BUSY ' ถ้าอัปโหลดสำเร็จ จะมีข้อความ "Success: Done uploading " โผล่มาในพื้นที่แสดงผลด้านล่าง
  • เมื่ออัปโหลดเสร็จสิ้น น้องควรจะเห็นไฟ LED สีเหลืองที่มีตัว L อยู่ข้างๆ บนบอร์ดเริ่มกระพริบ ถ้าเห็นแบบนั้น... ยินดีด้วย! น้องได้โปรแกรมบอร์ดให้กระพริบไฟ LED บนบอร์ดสำเร็จแล้ว!
    • บางครั้ง Arduino/Genuino ตัวใหม่แกะกล่องอาจจะถูกโปรแกรม Blink ไว้แล้ว ทำให้เรางงว่าเราควบคุมมันจริงๆ หรือเปล่า ถ้าเป็นแบบนั้น ให้ลองเปลี่ยนเวลาหน่วง (delay) โดยเปลี่ยนตัวเลขในวงเล็บเป็น 100 แล้วอัปโหลดโค้ด Blink อีกครั้ง ไฟ LED ควรจะกระพริบเร็วขึ้นมากเลยล่ะ ยินดีด้วย! ตอนนี้เราควบคุมมันได้จริงๆ แล้ว!

    บอร์ดรุ่นไหนบ้างที่รองรับ?

    ใน online IDE นี้ เราสามารถตรวจจับประเภทของบอร์ดและพอร์ตที่เชื่อมต่อได้อัตโนมัติ โดยที่น้องไม่ต้องมานั่งเลือกเอง

    ตอนนี้เรารองรับเฉพาะบอร์ด Official Arduino/Genuino และบอร์ด Certified กับ AtHeart บางรุ่นเท่านั้น น้องสามารถดูรายชื่อบอร์ดที่รองรับทั้งหมดได้โดยคลิกที่เมนูแบบเลื่อนลงของบอร์ด แล้วกด 'Select Other Board and Port '

    ในหน้าต่างป๊อปอัพนี้ น้องยังสามารถเลือกบอร์ดใดก็ได้เพื่อทดสอบโค้ดสำหรับผลิตภัณฑ์เฉพาะรุ่น แม้ว่าจะยังไม่มีบอร์ดนั้นอยู่ในมือก็ตาม ถ้าบอร์ดที่เชื่อมต่ออยู่ไม่ถูกตรวจจับอัตโนมัติ น้องก็สามารถเลือกมันด้วยมือที่นี่ได้เลย อย่าลืมเลือกพอร์ตที่ถูกต้องด้วยล่ะ

    รายชื่อฮาร์ดแวร์ที่รองรับทั้งหมดจะแสดงในหน้าต่างป๊อปอัพ พวกเรากำลังพยายามเพิ่มรายชื่อให้มากขึ้นเรื่อยๆ

    Serial Monitor

    ใน Arduino Web Editor ตัว Serial Monitor จะอยู่ที่แถบด้านข้าง พอกดเข้าไป แผงควบคุมก็จะโผล่มา

    Serial Monitor จะอ่านค่าจากบอร์ดที่ถูกเลือกไว้ในเมนู Board ตอนนั้น ถ้าน้องต้องการเปลี่ยนบอร์ด (เช่น เชื่อมต่อบอร์ดไว้หลายตัวกับ PC) ก็แค่เลือกบอร์ดที่ต้องการอ่านค่าในเมนูแบบเลื่อนลง ข้อมูล PORT ในแผงควบคุมก็จะอัปเดตตาม

    ถ้าอยากลองพิมพ์ข้อความอะไรออกมาและทำความคุ้นเคยกับ Serial Monitor ลองไปที่ Examples > 03.Analog > AnalogInOutSerial ดูสิ กด Upload แล้วดูค่าที่ถูกพิมพ์ออกมาในแผงควบคุม

    ขณะที่โค้ดกำลังอัปโหลด แผงควบคุมจะกลายเป็นสีเทาแบบในภาพด้านบนนั่นแหละ

    ถ้าไม่มีบอร์ดต่ออยู่ตอนนั้นล่ะก็ หน้าต่าง Serial Monitor จะเป็นสีเทาและกดไม่ได้เลยจ้า อย่าเพิ่งงงนะน้อง!

    ถ้าน้องกำลังใช้โปรแกรมอื่นที่คุยผ่านพอร์ตเดียวกันอยู่ (เช่น Processing หรือ Desktop IDE) มันจะขึ้นข้อความเตือนว่าพอร์ตนี้ถูกใช้ไปแล้ว งานเข้าแล้วไง!

    ถ้าอยากใช้พอร์ตกับโปรแกรมอื่น หรือแค่อยากหยุดดูค่าที่วิ่งออกมา ก็กดปุ่ม Disconnect บนแผงได้เลย ง่ายๆ

    จัดเต็ม! เอกสารประกอบโปรเจค

    การเขียนเอกสารประกอบโปรเจคเป็นเรื่องที่ดีมากๆ ไปที่ Examples panel แล้วเลือก Fade sketch ไปดูเป็นตัวอย่าง

    เปิดแท็บ ‘layout.png ’ กับ ‘schematic.png ’ สิ รูปพวกนี้จะบอกน้องว่าต้องต่อวงจรยังไง เวลาทำโปรเจคของตัวเอง น้องก็เพิ่มรูปเอกสารของตัวเองได้ โดยคลิกที่แท็บสุดท้ายในพื้นที่เขียนโค้ด แล้วเลือก ‘Import File into Sketch ’

    โชว์ฝีมือ! แชร์สเก็ตช์ของน้อง

    ทุกสเก็ตช์ที่น้องสร้างจะมี URL เป็นของตัวเอง เหมือน Google Docs เลย กดปุ่ม ‘Share ’ แล้วก็อปปี้ URL ที่ได้ ไปเปิดในแท็บใหม่ของบราวเซอร์ดูสิ งานเทพแน่นอน

    ถ้าน้องส่ง URL นี้ให้ใคร เขาก็จะสามารถเห็นโค้ดของน้องได้เลย แถมยังสามารถเพิ่มสำเนาเข้า Sketchbook ในคลาวด์ของเขา หรือดาวน์โหลดไปเล่นเองก็ได้ ถ้าน้องเขียนบทสอนใน Project Hub และใส่ลิงก์นี้ในส่วน Software โค้ดของน้องก็จะถูกฝังไว้และอัพเดทตลอด งานนี้จัดไปวัยรุ่น!

    ข้อมูล Frontmatter ดั้งเดิม 

    apps:
  - "1x Arduino Web Editor"
author: "Arduino_Genuino"
category: "Tools & Equipment"
components: []
description: "Code in the cloud! Ditch the desktop software installations and learn how to compile, verify, and upload embedded C++ code directly from a Chrome browser on any PC or Chromebook."
difficulty: "Easy"
documentationLinks: []
downloadableFiles:
  - "https://create.arduino.cc/editor/Arduino_Genuino/98910d1c-8e1e-4730-8ff8-d2cf5075acf7/preview"
  - "https://create.arduino.cc/editor/Arduino_Genuino/98910d1c-8e1e-4730-8ff8-d2cf5075acf7/preview"
  - "https://create.arduino.cc/editor/Arduino_Genuino/e999b8d5-e170-4982-a21c-7d1a264d7eac/preview"
encryptedPayload: "U2FsdGVkX1+ckkIxaTQ4tLKjwlKAkLOLvb626fsl3+1FYKPOynyC2Am1LVVvMVRMumpRxScYcJmErLCPBLtxvWm4yjRgaxVvhSLrnD+Pebg="
heroImage: "https://cdn.jsdelivr.net/gh/bigboxthailand/arduino-assets@main/images/projects/getting-started-with-arduino-web-editor-on-various-platforms-2cc31c_cover.png"
lang: "en"
likes: 8259
passwordHash: "86fc71b9f7bea7a20af827eafdc8c4d742b57acc0701b5f92b6cc4ff27d524d7"
price: 79
seoDescription: "Learn how to use Arduino Web Editor to code online, save sketches to the cloud, and access the latest IDE version on any platform."
tags:
  - "software"
  - "sharing"
  - "coding"
title: "เริ่มต้นกับ Arduino Web Editor งานง่ายแต่หล่อ ทุกแพลตฟอร์มจัดไป!"
tools: []
videoLinks:
  - "https://www.youtube.com/embed/6cRFf4qkcTw"
views: 5450537