webserver ง่ายๆด้วย ESP8266

ผมยังคงใช้ตัวอย่าง Code จาก Example ของ Arduino IDE มาให้อธิบายนะครับเพราะ Code ค่อนข้างเข้าใจง่ายเนื่องด้วยตัว ESP8266 มีความสามารถในการเชื่อมต่อ WiFi ฉะนั้นขอให้เตรียม SSID ของ Password ของ WiFi คุณให้พร้อมว่าแล้วมาดู Code กันครับ

จาก Code ให้แก้ไขค่า SSID กับ Password ให้ตรงกับ Network ของคุณนะครับ ผมพยายามเขียน Comment อธิบายให้ละเอียดเพราะเข้าใจว่าพื้นฐานของคนอ่านแต่ละคนไม่เท่ากันใครที่เข้าใจอยู่แล้วก็ถือเป็นการทวนความรู้ไปในตัวนะครับ ให้เราลองเอา Arduino IDE Flash ตัว Code ข้างบนลงไปใน ESP-01 ดูนะครับ เมื่อ Flash เสร็จแล้วไม่ต้องถอดออกให้เสียบค้างไว้แล้วลองคลิก Serial Monitor ที่ไอคอนดูแว่นขยายขวาบนดูนะครับ

แสดงไอคอนรูปแว่นขยายเพื่อเปิด Serial Monitor
แสดงไอคอนรูปแว่นขยายเพื่อเปิด Serial Monitor

เจ้า Serial Monitor เอาไว้สำหรับดูค่าต่างๆที่ทาง ESP-01 พ่นออกมาผ่านทาง Serial นั่นเองครับ เราสามารถใช้มันเพื่อขอดูตัวแปรค่าต่างๆใช้สำหรับ Debug Program นั่นแหล่ะครับ ในกรณีนี้ตาม Code ESP-01 เมื่อติดต่อ WiFi ได้มันจะพ่นบอกว่าตัวมันต่ออยู่ที่ IP Address อะไรนั่นเองครับ

Serial Monitor พ่นแจ้ง IP Address ของ Web Server ตัวนี้
Serial Monitor พ่นแจ้ง IP Address ของ Web Server ตัวนี้

จากรูปนั่นคือ 192.168.100.5 เราก็สามารถไปเปิด Browser เพื่อดูหน้าจอได้เลยครับ

ผลงานเมื่อเปิดดูผ่าน Browser

ลองเปิดดูด้วย Browser ที่ IP Address ดังกล่าวจะได้หน้าแรกของ Web ออกมา
ลองเปิดดูด้วย Browser ที่ IP Address ดังกล่าวจะได้หน้าแรกของ Web ออกมา
ถ้าเปิด URL /inline ก็จะเจอหน้าที่เตรียมเอาไว้
ถ้าเปิด URL /inline ก็จะเจอหน้าที่เตรียมเอาไว้
ถ้าไปเปิด URL ที่ไม่มีอยู่จริงก็จะส่งหน้า Error ออกมาให้
ถ้าไปเปิด URL ที่ไม่มีอยู่จริงก็จะส่งหน้า Error ออกมาให้

จากที่เห็นมันคือ Web Server ที่ทำงานแบบดื้อๆตรงๆตาม Code ที่ออกแบบเอาไว้ มันไม่ได้ความสามารถอะไรเท่ากับ Apache ตัวใหญ่ๆ ก็นะก็ตัวแค่นี้ Memory ก็น้อยนิดเดียว เป้าหมายคือๆเราจะเอามันไว้รับ Request สั่งการทำงานมันมากกว่า เพราะพอมันเป็น Web Server แล้วเราก็สั่งอะไรมันผ่าน Website ได้เลยสะดวกทั้งผ่านหน้า Web โดยตรงเลยหรือจะเขียน App บนมือถือมาครอบอีกทีก็ได้

ดัดแปลง Code ซักหน่อยเพื่อความสะดวก

Code ข้างบนคือ Code ที่ผมยกมาจากตัวอย่างของ Arduino IDE เลยซึ่งหลายๆจุดยังไม่เหมาะเอาไปใช้งานจริง อันดับแรกต้องกำหนด IP ของ Server ตัวนี้แบบ Fixed IP ซะก่อน

ในเมื่อเรา Fixed IP ลงไปแล้วฉะนั้นพวก #include <ESP8266mDNS.h> เราก็ไม่ได้ใช้แล้วฉะนั้นก็ลบทิ้งออกได้ Code จะได้สั้นๆลง

ใครที่อ่าน Code แล้วเจอ const int led = 13; จริงๆมันก็คือ LED_BUILTIN ตัวเดียวกับบทความที่แล้วน่ะครับพวก Board Arduino ปกติจะใช้ LED_BUILTIN เป็นขา GPIO 13 ทุก Board แต่ถ้าสังเกตจริงๆเวลา webserver ทำงานตาม Code มันต้องแสดง LED สว่างแล้วดับไป แต่ถ้าใครลองต่อดูจะพบว่า LED ไม่ยอมสว่างไม่ว่าจะแก้ Code ยังไงก็ตาม

สาเหตุมาจากว่าใน Code ของเรามีการใช้ Serial Monitor ซึ่งไอ้ตัวนี้แหล่ะมันไปทะเลาะกับ LED_BUILTIN ของเรา ถ้าเราอยากใช้ก็ง่ายๆ เอา Code ตรง Serial Monitor ออกให้หมด ตัว LED ก็จะสว่างได้ตาม Code ครับ

ลองตั้งโจทย์กันหน่อย

ผมลองคิดโจทย์จากความรู้ 2 บทความที่ผ่านมาให้ละกันดังนี้

  • ทำ Webserver ง่ายๆ ให้รับ URL ดังนี้
  • หน้าแรก / ให้แสดงปุ่มให้กด ON และ กด OFF
  • ถ้ากด ON ให้หน้า Webserver แสดงสถานะหน้าจอว่า LED : ON และ LED_BUILTIN บน Board ก็ให้สว่าง
  • ถ้ากด OFF ให้หน้า Webserver แสดงสถานะหน้าจอว่า LED : OFF และ LED_BUILTIN บน Board ดับ

ง่ายๆแบบนี้ลองมา Code กันดูครับ ใครจะลองทำตามลองเขียนดูก่อนแล้วค่อยมาแกะ Code ด้านล่างก็ได้ครับ

หน้าจอของ ESP8266 LED Control
หน้าจอของ ESP8266 LED Control

กด ON จากหน้า Web แล้ว LED สว่างแล้วเย้
กด ON จากหน้า Web แล้ว LED สว่างแล้วเย้
กด OFF จากหน้า Web แล้ว LED ก็จะดับ
กด OFF จากหน้า Web แล้ว LED ก็จะดับ

อาจจะแปลกๆตรง digitalWrite(LED_BUILTIN, LOW); แล้ว LED ติดนะครับ เค้าเรียกว่า Active LOW คือสว่างเมื่อแทงต่ำ ก็ไม่ต้องไปสนใจเอาว่ามันทำงาน State ไหนก็ให้มันไปตามนั้น

จบล่ะตอนนี้คิดว่าน่าจะทำได้กันทุกคนลองค่อยๆแก้ Code โมไปทีละนิดพวกโครงสร้างภาษาของ Arduino นี้ก็คล้ายๆกับ PHP นั่นแหล่ะ (รากมาจาก C มันก็คล้ายๆกันหมดแหล่ะ) จากตอนนี้จะเห็นแล้วเราสามารถ Control LED ให้สว่างหรือดับจากหน้า Website ได้แล้วตอนต่อๆไปเราจะต่อยอดจากตรงนี้เพื่อนำไปควบคุมอะไรอื่นๆอีกมายมาย รอชมฮะ

ความคิดเห็น