ทำ Web server เพื่อรับข้อมูลจาก Sensor และควบคุมอุปกรณ์ต่างๆ ตอนที่ 2 ส่งข้อมูลจากบอร์ด NodeMCU ขึ้น Web Server

บทความก่อนหน้าเราได้สร้าง Web Server และเรียนรู้การส่งข้อมูลผ่าน URL หรือลิงค์คำขอกันไปแล้ว วันนี้เราจะมาทำให้บอร์ด NodeMCU สามารถเชื่อมต่อ Wi-Fi และส่งข้อมูลไปยัง Web Server นะครับ

รูปที่ 1  บอร์ด NodeMCU เชื่อมต่อ WiFi และส่งข้อมูลไปยัง Web Server

สิ่งที่จำเป็นต้องใช้

• บอร์ด NodeMCU
• สายไมโคร USB ใช้สำหรับอัพโหลดโปรแกรม
• สัญญาน WiFi จากเร้าเตอร์คอมพิวเตอร์ หรือโทรศัพท์มือถือ
• เครื่องคอมพิวเตอร์ที่ติดตั้งโปรแกรม Xampp สำหรับให้บริการ Web Server
• ความรู้พื้นฐานการรับส่งข้อมูลผ่านหน้าเว็บจากบทความตอนที่ 1 คลิกที่นี่เพื่ออ่าน
• ความสนใจด้านโปรแกรมมิ่ง และ IoT

     Note สำหรับคนที่ยังไม่รู้ว่าจะใช้งานบอร์ด NodeMCU ได้ยังไง สามารถศึกษาเพิ่มเติมได้จากบทความนี้ครับ คลิ๊กที่นี่เพื่ออ่าน

สิ่งที่ต้องทำความเข้าใจก่อนที่เราจะลงมือทำ

        ก่อนอื่นเลย มาทบทวนกัน… การที่เราจะส่งข้อมูลผ่านเครือข่ายคอมพิวเตอร์ แน่นอนว่าอุปกรณ์ที่เราต้องการส่งข้อมูลหากันนั้นไม่ได้อยู่ที่จุดเดียวกัน สิ่งที่เชื่อมต่ออุปกรณ์ต่างๆ ให้สามารถส่งและรับข้อมูลถึงกันได้เราเรียกว่า ระบบเครือข่าย (Network) ซึ่งสิ่งที่เราจำเป็นต้องใช้เพื่อเป็นตัวกลางในการรับส่งข้อมูลระหว่าง NodeMCU กับ Web Server นั่นก็คือสัญญาน Wi-Fi เดี๋ยวเรามาทำให้คอมพิวเตอร์ของเราสามารถที่จะแชร์สัญญาน Wifi ให้กับบอร์ด NodeMUC กันนะครับ
       *** สำหรับใครที่มีสัญญาน Wi-Fi ที่แชร์จากเร้าเตอร์ที่บ้านหรือที่ทำงานอยู่แล้วไม่จำเป็นต้องทำตามขั้นตอนนี้ก็ได้นะครับ สามารถข้ามไปทำต่อขั้นตอนถัดไปด้านล่างได้เลย

วิธีแชร์สัญญาณ Wifi จากคอมพิวเตอร์ 

1. ก่อนอื่นให้เปิดหน้าต่าง Command Line ขึ้นมาก่อนนะครับ จากนั้นให้เราพิมพ์คำสั่งนี้ลงไปในหน้าต่าง Command Line

        netsh wlan set hostednetwork mode=allow ssid=Name key=Password

        Note: ในส่วนนี้เราสามารถที่จะเปลี่ยนชื่อและรหัส Wi-Fi ที่เราต้องการแชร์ได้ Name คือ Wi-Fi ที่เราต้องการแชร์ Password คือรหัสที่ใช้ในการเชื่อมต่อ Wi-Fi

2. พิมเสร็จก็กด Enter แล้วรอให้สร้างตัวแชร์เสร็จ จนขึ้นเคอร์เซอร์ให้ใส่คำสั่งนี้ต่อเลยนะครับ

         netsh wlan start hostednetwork   
         จากนั้นก็กด Enter อีกครั้ง

      

3. เราต้องเข้าไปตั้งค่านิดหน่อยเพื่อให้ตัวแชร์สัญญาน Wi-Fi ที่เราสร้างขึ้นสามารถใช้งานได้ 

โดยให้เราเข้าไปที่ Network and Sharing Center(1) จากนั้นคลิ๊กเลือกที่ Change adapter settings(2) จะมีหน้าต่างแสดงการเชื่อมต่อปรากฏขึ้นมาให้เราคลิ๊กขวาที่ไอคอนการเชื่อมต่อ Wi-Fi จากนั้นให้เลือก Properties(3)

รูปที่ 2 หน้าต่างแสดงการเชื่อมต่อ

        จากรูปที่ 2 เมื่อเราคลิกเลือก Properties จะมีหน้าต่างใหม่แสดงขึ้นมาดังแสดงในรูปที่ 3

รูปที่ 3 การตั้งค่าการแชร์สัญญาน WiFi

        จากรูปที่ 3 ให้เราเลือกที่ Sharing จากนั้นเลือกแชร์สัญญาน Wifi ให้กับตัวแชร์ที่เราสร้างขึ้นสร้างขึ้น ซึ่งของผู้เขียนเองได้ตั้งชื่อว่า ce56 (Local Area Connection 3) ให้ทำการเลือก แล้วกด OK

ทำให้บอร์ด NodeMCU เชื่อมต่อสัญญาน WiFi

รูปที่ 4 บอร์ด NodeMCU เชื่อมต่อสัญญาน Wi-Fi

        ให้เราเปิดโปรแกรม Aruino IDE ขึ้นมา จากนั้นให้ทำการตั้งค่าของบอร์ดและ COM Port ให้ถูกต้อง ในส่วนของโปรแกรมที่ใช้ในการเชื่อมต่อ Wifi ให้เราทำการ Copy โค้ดที่อยู่ด้านล่างไปใช้งานได้เลยนะครับ โดยให้เปลี่ยนข้อมูล 2 บรรทัดนี้

const char* ssid = "ชื่อ Wifi ที่ต้องการเชื่อมต่อ ";
const char* password = "รหัสผ่าน Wifi";

ให้ตรงกับชื่อและรหัส WiFi ที่เราสร้างขึ้น

        หลังจากแก้ไขเสร็จเรียบร้อยให้เราอัพโหลดโปรแกรมลงบอร์ด NodeMCU จากนั้นให้เราเปิดหน้าต่าง Serial Monitor ของโปรแกรม Ariduino IDE ขึ้นมาเราจะเห็นว่าบอร์ด NodeMCU กำลังเชื่อมต่อกับสัญญาณ Wi-Fi ที่เราสร้างขึ้นมา เมื่อเชื่อมต่อได้สำเร็จก็จะแสดงหมายเลข IP Address ขึ้นมา ซึ่งหมายเลข IP Address ก็เปรียบเสมือนบ้านเลขที่ของเราใช้อ้างอิงสำหรับการรับส่งสิ่งของต่างๆ ในที่นี้ก็ใช้สำหรับอ้างอิงการรับและส่งข้อมูล

รูปที่ 4 หน้าต่าง Serial Monitor แสดงการเชื่อมต่อ Wi-Fi

NodeMCU ส่งข่อมูลขึ้น Web Server

        ตอนนี้บอร์ด NodeMCU สามารถเชื่อมต่อสัญญาน WiFi ได้แล้ว เดี๋ยวเรามาทำให้บอร์ด NodeMCU ส่งข้อมูลคำร้องขอไปที่เซิฟเวอร์ โดยเราจะให้แนบข้อมูลที่เราต้องการส่งไปด้วย มาทำต่อกันเลยนะครับ

รูปที่ 5 บอร์ด NodeMCU ส่งข้อมูลคำร้องขอไปที่เซิฟเวอร์

        ก่อนอื่นเรามาทำความเข้าใจกับคำสั่ง ที่เราต้องใช้กันก่อน...  เราจะเริ่มต้นการติดต่อโดยสร้างช่องทางการเชื่อมต่อ (สร้าง socket) ไปยังพอร์ท 80 ของเซิฟเวอร์ โดยใช้คลาส WiFiServer

        WiFiServer server(SERVER_PORT);

        สิ่งที่เราต้องทำความรู้จักกันอีกนั่นก็คือคลาส WiFiClient ใช้สำหรับเริ่มการเชื่อมต่อไปยัง HTTP Server รวมไปถึงการร้องขอและรอตอบกลับการต่างๆ จากเซิฟเวอร์

        ในการเชื่อมต่อไปยัง Web Server เราต้องกำหนดชื่อ Server หรือหมายเลข IP Address ที่เราต้องการเชื่อมต่อก่อนนะครับ สำหรับใครที่ทำตามวิธีการแชร์สัญญาน Wi-Fi จากข้างบนให้ใช้หมายเลข IP Address 192.168.137.1 ได้เลย ส่วนคนที่เชื่อมต่อกับสัญญาน Wi-Fi จากที่เร้าเตอร์บ้านหรือที่ทำงานให้เปิดหน้าต่าง Command Line แล้วตรวจสอบหมายเลข IP Address ที่เราได้รับจากการเชื่อมต่อ โดยการพิมพ์คำสั่ง ipconfig ที่หน้าต่าง Command Line เมื่อพิมพ์เสร็จก็กด Enter ที่หน้าต่าง Command Line จะแสดงหมายเลข IP Address ที่เราได้รับมาจากเร้าเตอร์ ให้เราใส่หมายเลข IP Address นั้นลงไปแทนที่ 192.168.137.1 ในคำสั่งนี้ครับ

        const char* server_ip = "192.168.137.1";

        ข้างล่างนี้เป็นคำร้องขอ HTTP GET โดยที่เราจะส่งข้อมูลแนบไปกับ URL ด้วยซึ่งก็คือ data1 และ data2

        ฟังก์ชั่น http_request() ใช้สำหรับเชื่อมต่อและส่งคำร้องขอ HTTP request ไปยัง Web Server ถ้าพูดกันในภาษาชาวบ้านก็คือการเปิดหน้าเว็บไซต์นั่นเองครับ มาดูโค้ดโปรแกรมทั้งหมดที่เราต้องใช้กันดีกว่า ในส่วนนี้ให้ทำการก๊อปปี้และนำไปวางในโปรแกรม Arduino IDE ได้เลยนะครับ

        ตอนนี้โปรแกรมพร้อมแล้ว ให้เราอัพโหลดโปรแกรมลงบอร์ด NodeMCU กันเลยครับ จากนั้นให้เราเปิดหน้าต่าง Serial Monitor ของโปรแกรม Ariduino IDE ขึ้นมาเราจะเห็นว่าตอนนี้บอร์ด NodeMCU จะรอการเชื่อมต่อ Wi-Fi พอเชื่อมต่อได้ปุ๊บ ก็จะทำการส่งข้อมูลคำร้องขอแบบด้านล่างนี้ ไปที่เครื่องเซิฟเวอร์แบบรัวๆ เลย

 

     Note: ถ้าของใครยังไม่ขึ้นให้เช็คดูว่าเราได้เปิดบริการ Web Server ในโปรแกรม Xampp หรือยัง ที่สำคัญเราต้องปิดใช้งานไฟล์วอร์ด้วยนะครับเพราะมันจะบล็อกการเชื่อมต่อ

การแสดงผลข้อมูลบนเว็บแอพพลิเคชั่น

รูปที่ 6 นำข้อมูลที่ได้รับมาแสดงผลข้อมูลบนเว็บแอพพลิเคชั่น

        เราสามารถที่จะตรวจสอบข้อมูลที่ถูกส่งมาได้ผ่านหน้าเว็บแอพพลิเคชั่น แต่ก่อนอื่นเลยเราต้องมาแก้โปรแกรมฝั่ง Web Server กันนิดหน่อยเพื่อให้สามารถรับและแสดงผลข้อมูลที่ถูกส่งมาได้ โดยให้เราเปิดไฟล์ get_data.php ที่ได้สร้างขึ้นจากบทความตอนที่ 1 จากนั้นก๊อปปี้โค้ดด้านล่างนี้ ไปวางทับโค้ดเดิมเลยนะครับ วางเสร็จแล้วให้ Save File ด้วยนะครับ

        อธิบายการทำงานของโปรแกรมด้านบน เมื่อฝั่ง Web Server ได้รับข้อมูลจาก NodeMCU ก็จะบันทึกข้อมูลนั้นลงในไฟล์และทำการอ่านข้อมูลที่ถูกบันทึกมาแสดงผลบนหน้าเว็บ

        ในส่วนของการตรวจสอบข้อมูลที่ถูกส่งมา ให้เราเปิดเว็บบราวเซอร์ แล้วให้เข้า URL นี้ครับ localhost/get_data.php ที่หน้าเว็บจะแสดงข้อความที่เราส่งมาซึ่งก็คือคำว่า lovecoding และหมายเลขคำร้องขอ ดังแสดงในตัวอย่างด้านล่างครับ

เมื่อเรากดรีเฟรชหน้าเว็บหมายเลขคำร้องขอก็จะเปลี่ยนไปเรื่อยๆ นะครับ ข้อความที่ถูกส่งมาเราสามารถไปแก้ไขได้ในฝั่งบอร์ด NodeMCU ในส่วนคำร้องขอ (HTTP request) ซึ่งตรงนี้เราสามารถที่จะอ่านค่าจากเซนเซอร์ต่างๆ แล้วส่งค่าขึ้นมาแสดงผลได้ครับ ยกตัวอย่างเช่นการอ่านค่าความชื้นในดิน แล้วส่งค่าความชื้นมาแสดงผลบนเว็บแอพพลิเคชั่นดังแสดงในรูปที่ 7

รูปที่ 7 การวัดและอ่านค่าความชื้นในดิน

ที่มา https://netpie.io/projects/plant_sensor

         เราส่งข้อมูลไปที่ Server ได้แล้ว เดี๋ยวเราจะมาทำให้ฝั่ง Server ตอบอะไรบางอย่างกลับมาที่บอร์ด NodeMCU เมื่อได้รับข้อมูลที่ถูกส่งไปกันดีกว่า สามารถติดตามต่อได้ในบทความถัดไปนะครับ
         บทความนี้เขียนขึ้นมาโดยใช้ความรู้ความเข้าใจของผู้เขียน ที่เคยทำการศึกษาและทดลองใช้งานมา หากมีข้อเสนอแนะหรือข้อคิดเห็นอื่นๆ เพิ่มเติม สามารถเสนอแนะมาได้เลยนะครับ

แหล่งอ้างอิง

https://www.w3schools.com/tags/att_form_method.asp 
https://www.w3schools.com/html/
https://www.apachefriends.org/index.html 

Computer Networking: A Top Down Approach 6th edition Jim Kurose, Keith Ross Addison-Wesley March 2012 
https://staff.informatics.buu.ac.th/~nutthanon/887230/Chapter_2_V6.1_MIT9.pdf
https://netpie.io/projects/plant_sensor
https://drive.google.com/file/d/1OU8LLrJjVP-eIjclAkGsYPbexqHOLu5m/view
https://drive.google.com/file/d/1n349h-lz4rvY8i2igZB-0AgzYFtxS7Bl/view

บทความโดย รักการเขียนโค้ดดอทคอม lovecoding.com

สอบถามข้อมูลเพิ่มเติม
Facebook: รักการเขียนโค้ด ดอทคอม 
Tell: 091-4782789