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

พี่สังเกตเห็นว่าสายไฟหลายเส้นที่ต่อเข้าไปนั้นมาจากเซ็นเซอร์ ฮีตเตอร์ และปั๊ม หลังจากหาข้อมูลเพิ่มนิดหน่อย พี่ก็ตาสว่างว่าเมนบอร์ดนี้มันคือไมโครคอนโทรลเลอร์ (Microcontroller) ที่คอยควบคุมระบบอัตโนมัติของเครื่องใช้ไฟฟ้านี่เอง นี่แหละคือช่วงเวลา "อ๋อ!" ครั้งแรกของพี่ ที่ตัดสินใจว่าต้องเรียนรู้เรื่องเจ้าไมโครคอนโทรลเลอร์พวกนี้ให้มากขึ้น เพราะดูเหมือนมันจะถูกติดตั้งอยู่ในเกือบทุกสิ่งสำคัญที่พี่ใช้ในชีวิตประจำวัน

พี่ก็เลยเริ่มต้นค้นหาข้อมูลในเน็ต เรียนรู้จากโปรเจกต์ต่างๆ (หลายอันก็จากเว็บนี้แหละ) แม้จะได้ความรู้ แต่พี่อยากได้มากกว่าแค่ทำให้ LED กะพริบบนเบรดบอร์ด นี่คือช่วงเวลา "อ๋อ!" ครั้งที่สองของพี่ ที่บังเอิญมาเจอกับโปรเจกต์/คอร์สนี้ พอลงทะเบียนแล้ว คำนำโปรเจกต์บอกไว้ว่า เราจะสามารถใช้ Arduino Uno เป็นเว็บเซิร์ฟเวอร์ได้ ซึ่งจะโฮสต์หน้าเว็บแบบอินเทอร์แอคทีฟเต็มรูปแบบ แสดงค่าจากเซ็นเซอร์บนเกจ และให้เราควบคุมสวิตช์ด้วยมือจากที่ไหนในโลกก็ได้ หรือแม้แต่ตั้งให้มันทำงานอัตโนมัติตามค่าจากเซ็นเซอร์ ฟังดูดีเกินจริงใช่ไหม? หลังจากทำโปรเจกต์เสร็จ สิ่งที่พี่บอกได้คือ พี่ไม่เคยรู้มาก่อนเลยว่าเราทำอะไรได้เยอะแยะขนาดนี้ด้วยไมโครคอนโทรลเลอร์ Arduino ราคาแค่ 28 ดอลลาร์ ในโปรเจกต์นี้ พี่ไม่ได้เรียนรู้แค่เรื่อง Arduino เท่านั้น แต่ยังได้เรียนรู้เกี่ยวกับ HTML, CSS, JavaScript และ Ajax (หรือ Asynchronous JavaScript and XML) ด้วย พี่ยังได้เรียนรู้พื้นฐานการใช้งานเซ็นเซอร์หลากหลายประเภท (วัดอุณหภูมิ, อัลตราโซนิก, ตัวแบ่งแรงดัน, อินฟราเรด), อีเธอร์เน็ตชีลด์ (Ethernet Shield) และบอร์ดรีเลย์ รวมถึงหัวข้ออื่นๆ อีกเพียบ

นี่คือภาพบอร์ดโปรเจกต์ที่เสร็จสมบูรณ์และใช้งานได้ ซึ่งทำให้เราทดสอบและจำลองสถานการณ์ต่างๆ ได้:

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

เกจบนหน้าเว็บถูกเรนเดอร์โดยใช้ canvas-gauges ที่สร้างโดยนักพัฒนาชื่อ Mykhailo Stadnyk จากยูเครน โค้ด CSS ที่ใช้เรนเดอร์เกจเหล่านี้โฮสต์อยู่บน JsDelivr CDN และอยู่ภายใต้สัญญาอนุญาตโอเพนซอร์สแบบ MIT ที่ค่อนข้างเปิดกว้าง พี่พยายามใส่ข้อมูลเกี่ยวกับโปรเจกต์ให้มากที่สุดเท่าที่จะทำได้ แต่ถ้าใครอยากเจาะลึกมากขึ้น พี่แนะนำให้ไปดูรายละเอียดเพิ่มเติมเกี่ยวกับการทำโปรเจกต์นี้ได้

นี่คือวิดีโอจากโปรเจกต์ที่จำลองสถานการณ์ เช่น เมื่อระดับน้ำถึงระดับหนึ่ง (โดยการเอามือไปขวางหน้าเซ็นเซอร์อัลตราโซนิก) ปั๊มน้ำจะเริ่มทำงานโดยอัตโนมัติ โดยไม่ต้องกดสวิตช์บนแดชบอร์ด

ควบคุมเองได้เลยเว้ย: Asynchronous Webserver

พึ่ง Blynk หรือ ThingSpeak ไปก็ดีอยู่หรอก จนกระทั่งเซิร์ฟเวอร์มันล่ม หรือเริ่มเก็บตังค์รายเดือนนั่นแหละ Embedded IoT Dashboard Webserver เนี่ยมันพึ่งพาตัวเองได้ทั้งหมดเลย ESP32 เนี่ยเป็นเจ้าภาพเก็บไฟล์ HTML เว็บไซต์ไว้ในชิปของมันเลย พอเราเอา IP ของมันมากรอกในเบราว์เซอร์ ESP32 ก็จะเสิร์ฟแดชบอร์ดให้เราโดยตรง!

SPIFFS และการเก็บไฟล์ HTML

จะให้มานั่งพิมพ์โค้ด HTML เป็นร้อยๆ บรรทัดลงในตัวแปร String ใน Arduino IDE โดยตรงเนี่ย มันฝืนธรรมชาติ ยุ่งยากเรื่องเครื่องหมายคำพูดสุดๆ

1. ESP32 มีพื้นที่ Flash 4MB เราแย่งมา 1MB เพื่อใช้เป็นฮาร์ดดิสก์จำลองที่เรียกว่า SPIFFS (Serial Peripheral Interface Flash File System)
2. เราสร้างไฟล์ index.html ด้วยเครื่องมือทำเว็บปกติเลย (จะตกแต่งให้สวยด้วย CSS, Javascript ก็จัดไป)
3. อัพโหลดไฟล์ HTML นั้นเข้าไปในหน่วยความจำ SPIFFS ของ ESP32 โดยตรง
4. โค้ด C++ ใช้ไลบรารี่ <ESPAsyncWebServer.h> server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html", "text/html"); });
5. พอมือถือเข้าไปที่ 192.168.1.50 ESP32 ก็จะควานหาในหน่วยความจำของมัน หยิบไฟล์ HTML มา แล้วโยนให้เบราว์เซอร์ในมือถือเลย!

AJAX/WebSockets สำหรับอัพเดทเรียลไทม์

เว็บไซต์ปกติต้องกด "รีเฟรช" ถึงจะเห็นข้อมูลใหม่ แต่นี่ไม่ใช่

• ไฟล์ HTML มี Javascript (AJAX หรือ WebSockets) แฝงอยู่
• ในพื้นหลัง โดยไม่ต้องรีโหลดหน้า เบราว์เซอร์จะส่งคำขอไปหา ESP32 เงียบๆ ทุกๆ 2 วินาที เพื่อถามค่าอุณหภูมิใหม่จาก DHT22
• ESP ตอบกลับมาเป็นตัวเลข 24.5 แล้ว Javascript ก็จะทำให้เกจบนแดชบอร์ดขยับไปที่ค่านั้นอย่างลื่นไหล!

อุปกรณ์และความรู้ที่ต้องมี

• ESP32 NodeMCU Dev Board: (ไม่แนะนำ Arduino Uno หรือ ESP8266 นะ RAM มันน้อย เวอชั่น Async หนักไป)
• เซ็นเซอร์วัดสภาพแวดล้อม (BME280 / DHT22)
• รีเลย์โมดูล (เพื่อเอาไว้เปิด-ปิดสวิตช์ผ่านเว็บไซต์)
• ความรู้ HTML, CSS และ Javascript AJAX พื้นฐาน ต้องแน่นๆ หน่อยนะน้อง สู้งาน!