[ESP8266 ตอน 3] เริ่มต้นใช้งาน Part 2 - Web Server
6 ปีที่ผ่านมา
จากบทความที่แล้ว (คลิกอ่านได้ที่นี่) เจ้า ESP8266 ของเราสามารถเข้าไปแจมกับเครือข่าย WIFI ได้แล้ว แต่ยังไม่ได้ทำงานใดๆ ในตอนนี้เราจะมาเขียนคำสั่งให้มันทำงานกันครับ โดนเน้นไปที่ใช้งานเลย ก็เหมือนเดิมนะครับคือจะอธิบายง่ายๆเพื่อนำไปใช้งาน แล้วแต่ละท่านก็นำไปประยุกต์ ไปศึกษาเบื้องลึกเพิ่มเติม อย่าเสียเวลาให้ยืดยาว เราไปต่อกันเลยครับ
ควบคุม ESP8266 ด้วย Smartphone โดยการทำ Web Server
ในการใช้งานจริงนั้นหากจะใช้การควบคุมโดยการใส่โค้ดลงไปคงไม่ดีนัก ลองคิดดูสิครับว่าเราทำระบบ Smart Home มาขาย แล้วต้องสั่งงานโดยการพิมพ์ "LED1 HIGH" ลูกค้าคงไม่แฮปปี้กับเราเท่าไร ฉะนั้น GUI (Graphic User Interface) แบบง่ายๆ(ตามความคิดของเจ้าของร้าน) คือการทำหน้าเว็บขึ้นมานั่นเอง
แต่ก่อนที่จะไปไหนกันขออธิบายกันก่อน เมื่อเราทำหน้าเว็บขึ้นมาซักอันหนึ่ง เราต้องมีเครื่องคอมพิวเตอร์หนึ่งเครื่องเพื่อใช้เก็บหน้าเว็บนี้ ซึ่งเจ้าเครื่องที่เก็บหน้าเว็บนี้แหละที่เราเรียกว่า "Server - เซิฟเวอร์" หน้าที่ของมันคือเก็บหน้าเว็บและข้อมูลอื่นๆที่จำเป็นเชื่อมต่อกับเครือข่าย เมื่อมีอุปกรณ์ใดๆที่อยู่ในเครือข่ายมาสะกิดขอข้อมูล Server ก็จะส่งออกไปให้ โดยจะเรียกอุปกรณ์ที่มาขอดูข้อมูลนี้ว่า "Client - ไคเอน" เอาให้เห็นกันง่ายๆคือหน้าเว็บนี้แหละครับ เมื่อทางร้านสร้างหน้าเว็บนี้ขึ้นมาก็จะถูกเก็บไว้ในเครื่อง Server ของทางเว็บ lnwshop ที่เรามาขอใช้บริการ ซึ่งตั้งอยู่ในที่แห่งหนึ่ง เมื่อท่านคลิกคอมหรือแตะหน้าจอมือถือเพื่อจะอ่านบทความนี้ คอมหรือมือถือของท่านก็คือ Client จะส่งข้อมูลมาหา Server ว่าฉันขอเปิดหน้านี้หน่อย จากนั้น Server ก็ส่งข้อมูลกลับมาเป็นหน้าเว็บนี้นั่นเอง
สิ้นสุดการอธิบายก่อนที่ทุกท่านจะเบื่อ ทีนี้เนื่อหาเราก็จะใช้หลักการที่ได้อธิบายนี้แหละครับ แต่เปลี่ยนจากเอาหน้าเว็บไปเก็บไว้ใน Server เครื่องใหญ่ๆราคาหลักแสน เป็นการเอามาเก็บไว้ใน ESP8266 ราคาหลักร้อยแทน ไปดูโค้ดกันเลยครับ
หากตรงไหนเป็นภาษาแปลกๆก็อย่าตกใจนะครับ มันคือภาษา HTML ที่เอาไว้เขียนเว็บ เราแสดงหน้าเว็บก็ต้องใช้ภาษาของเว็บ ตรงนี้เดี๋ยวจะอธิบายเป็นตอนแทรกเมื่อจบซีรีส์(อีกไม่นานครับ) หรือใครอยากลองเล่นแบบง่ายๆดูก็ไปพิมพ์ๆแก้ๆได้ที่นี่ครับ >>> https://html-online.com/editor/
คำอธิบายได้ใส่ไว้ในโค้ดแล้วก็คงไม่ต้องอธิบายซ้ำนะครับ เรามาดูขั้นตอนการทำงานของมันดีกว่า เตรียมต่อวงจรไว้ก่อน รอเลยๆเตรียมใช้งาน
จากนั้นอัพโหลดโค้ดเข้าสู่เจ้า NodeMCU (หรือ ESP8266 ตัวอื่นๆ) แล้วให้เปิด Serial Monitor มาก่อนครับ กด Reset ที่บอร์ดหนึ่งครั้ง ให้มันเริ่มทำงานใหม่ บอร์ดจะเชื่อมต่อเครือข่ายใหม่และใน Seial Monitor จะแสดง IP Address ตัว ESP8266 Server ของเรานี้ จดหรือก็อปปี้เลขนี้ไว้เลยครับ สำคัญมาก เพราะจะเข้าหน้าเว็บเราต้องเรียกข้อมูลจาก Server ใช่มั๊ยครับ เจ้า IP Address นี้ก็เหมือนที่อยู่แหละครับ เราจะไปซื้อของซักอย่างแต่ไม่รู้ที่อยู่ร้านที่ขายก็ไม่รู้จะไปซื้อกับใคร แนวๆนั้นแหละครับ อ่อ ตลอดการลองทำนี้เปิด Serial Monitor ค้างไว้เลยครับ มันจะคอยบอกสถานะของ Server จะได้ดูเข้าใจกันง่ายๆ
ทีนี้มาใช้ Smartphone, Tablet คอมพิวเตอร์ ได้หมดครับ เชื่อมต่ออินเตอร์เน็ตวงเดียวกับ ESP8266 ถ้า ESP8266 ตั้งให้เชื่อมต่อ SSID ไหนอุปกรณ์ที่จะควบคุมก็ต้องต่อ SSID เดียวกันด้วย จากนั้นให้เปิด Browser ขึ้นมา (IE, Chrome, Firefox, Safari หรืออะไรก็แล้วแต่ได้หมด) จากนั้นในช่อง Address Bar ให้ใส่ IP Address ที่จดไว้เมื่อกี๊ลงไป เคาะ Enter หรือ Go เบาๆซักครั้ง พอกดเรียก Address ของ Server ไป Client ของเราได้ส่งไปขอข้อมูลจาก Server แล้วหล่ะครับ ใน Serial Monitor จะบอกเลยว่ามี Client ใหม่มาเชื่อมต่อกับ Server ขณะเดียวกันในฝั่ง Client ก็จะแสดงหน้าเว็บที่ Server ส่งมาให้เรียบร้อยแล้ว
จะสังเกตว่าเมื่อทุกอย่างรับส่งข้อมูลกันหมดแล้ว Server ก็จะ Disconnect ไป เป็นปกติปกติของการเชื่อมต่อเนื่องจากฝั่ง Client ได้ข้อมูลทั้งหมดไปแล้ว ไม่มีการรับส่งข้อมูลเพิ่มเติมก็ตัดออกเพื่อตัดภาระของ Server เปิดให้ Client อื่นเชื่อมต่อแทน
ลองกดปุ่ม GPIO0 GPIO2 เล่นดูครับ จะมีการ Connect รับส่งข้อมูลกับ Server อีกครั้ง หน้าเว็บก็จะแสดง ON และ LED บนบอร์ดเราก็ติดขึ้นมา กดอีกทีมันก็ดับลงไป เห็นมั๊ยครับง่ายๆเลย ทีนี้เราก็ควบคุมอะไรก็ได้ในโลกให้เปิดปิดผ่านมือถือเราได้แล้ว การเขียนโค้ดมันก็เหมือนเราเขียน Arduino เปิดปิดตามที่เรากดสวิตช์นั่นแหละ เพียงแค่เราเปลี่ยนสวิตช์บนบอร์ดทดลองมาอยู่บนหน้าจอมือถือ และมีเรื่องของเครือข่ายพวก IP Address กับเรื่องของภาษาเขียนเว็บ HTML เข้ามายุ่งนิดหน่อย (ตรงนี้ใครไม่รู้ ไม่เข้าใจไม่ต้องห่วงครับ จบทุกตอนแล้วจะมีตอนแทรกอธิบายอย่างละเอียดอีกที)
กว่าจะจบลงบทความนี้ก็ยาวพอสมควรแล้ว ตอนนี้คิดว่าทุกท่านคงมีไอเดียไปทำอะไรได้หลายอย่างแล้วหล่ะครับ เปลี่ยนจาก LED เป็น Relay ควบคุมเปิดปิดไฟในบ้าน? หรือควบคุมมอเตอร์ให้เลื่อนเปิดปิดประตู? แค่ Web Server ก็ประยุกต์ใช้งานได้เยอะมากแล้ว แต่นี่มันแค่ตัวเดียว NodeMCU มีแค่ 13GPIO ควบคุมอุปกรณ์ได้สูงสุดแค่ 13 อย่าง(แค่?) บอร์ดตัวอื่นๆก็มี GPIO ลดหลั่นต่างกันไป มันยังทำอะไรไม่ค่อยสะใจ ในบทความต่อไป หากพวกมันมาเป็นทีมเป็นแก๊งค์ มันจะเป็นยังไง ต้องคอยติดตามกันครับ
ดาวน์โหลดโค้ดตัวอย่างที่นี่
คลิกที่นี่เพื่ออ่านบทความต่อไป
ควบคุม ESP8266 ด้วย Smartphone โดยการทำ Web Server
ในการใช้งานจริงนั้นหากจะใช้การควบคุมโดยการใส่โค้ดลงไปคงไม่ดีนัก ลองคิดดูสิครับว่าเราทำระบบ Smart Home มาขาย แล้วต้องสั่งงานโดยการพิมพ์ "LED1 HIGH" ลูกค้าคงไม่แฮปปี้กับเราเท่าไร ฉะนั้น GUI (Graphic User Interface) แบบง่ายๆ(ตามความคิดของเจ้าของร้าน) คือการทำหน้าเว็บขึ้นมานั่นเอง
แต่ก่อนที่จะไปไหนกันขออธิบายกันก่อน เมื่อเราทำหน้าเว็บขึ้นมาซักอันหนึ่ง เราต้องมีเครื่องคอมพิวเตอร์หนึ่งเครื่องเพื่อใช้เก็บหน้าเว็บนี้ ซึ่งเจ้าเครื่องที่เก็บหน้าเว็บนี้แหละที่เราเรียกว่า "Server - เซิฟเวอร์" หน้าที่ของมันคือเก็บหน้าเว็บและข้อมูลอื่นๆที่จำเป็นเชื่อมต่อกับเครือข่าย เมื่อมีอุปกรณ์ใดๆที่อยู่ในเครือข่ายมาสะกิดขอข้อมูล Server ก็จะส่งออกไปให้ โดยจะเรียกอุปกรณ์ที่มาขอดูข้อมูลนี้ว่า "Client - ไคเอน" เอาให้เห็นกันง่ายๆคือหน้าเว็บนี้แหละครับ เมื่อทางร้านสร้างหน้าเว็บนี้ขึ้นมาก็จะถูกเก็บไว้ในเครื่อง Server ของทางเว็บ lnwshop ที่เรามาขอใช้บริการ ซึ่งตั้งอยู่ในที่แห่งหนึ่ง เมื่อท่านคลิกคอมหรือแตะหน้าจอมือถือเพื่อจะอ่านบทความนี้ คอมหรือมือถือของท่านก็คือ Client จะส่งข้อมูลมาหา Server ว่าฉันขอเปิดหน้านี้หน่อย จากนั้น Server ก็ส่งข้อมูลกลับมาเป็นหน้าเว็บนี้นั่นเอง
สิ้นสุดการอธิบายก่อนที่ทุกท่านจะเบื่อ ทีนี้เนื่อหาเราก็จะใช้หลักการที่ได้อธิบายนี้แหละครับ แต่เปลี่ยนจากเอาหน้าเว็บไปเก็บไว้ใน Server เครื่องใหญ่ๆราคาหลักแสน เป็นการเอามาเก็บไว้ใน ESP8266 ราคาหลักร้อยแทน ไปดูโค้ดกันเลยครับ
หากตรงไหนเป็นภาษาแปลกๆก็อย่าตกใจนะครับ มันคือภาษา HTML ที่เอาไว้เขียนเว็บ เราแสดงหน้าเว็บก็ต้องใช้ภาษาของเว็บ ตรงนี้เดี๋ยวจะอธิบายเป็นตอนแทรกเมื่อจบซีรีส์(อีกไม่นานครับ) หรือใครอยากลองเล่นแบบง่ายๆดูก็ไปพิมพ์ๆแก้ๆได้ที่นี่ครับ >>> https://html-online.com/editor/
คำอธิบายได้ใส่ไว้ในโค้ดแล้วก็คงไม่ต้องอธิบายซ้ำนะครับ เรามาดูขั้นตอนการทำงานของมันดีกว่า เตรียมต่อวงจรไว้ก่อน รอเลยๆเตรียมใช้งาน
จากนั้นอัพโหลดโค้ดเข้าสู่เจ้า NodeMCU (หรือ ESP8266 ตัวอื่นๆ) แล้วให้เปิด Serial Monitor มาก่อนครับ กด Reset ที่บอร์ดหนึ่งครั้ง ให้มันเริ่มทำงานใหม่ บอร์ดจะเชื่อมต่อเครือข่ายใหม่และใน Seial Monitor จะแสดง IP Address ตัว ESP8266 Server ของเรานี้ จดหรือก็อปปี้เลขนี้ไว้เลยครับ สำคัญมาก เพราะจะเข้าหน้าเว็บเราต้องเรียกข้อมูลจาก Server ใช่มั๊ยครับ เจ้า IP Address นี้ก็เหมือนที่อยู่แหละครับ เราจะไปซื้อของซักอย่างแต่ไม่รู้ที่อยู่ร้านที่ขายก็ไม่รู้จะไปซื้อกับใคร แนวๆนั้นแหละครับ อ่อ ตลอดการลองทำนี้เปิด Serial Monitor ค้างไว้เลยครับ มันจะคอยบอกสถานะของ Server จะได้ดูเข้าใจกันง่ายๆ
ทีนี้มาใช้ Smartphone, Tablet คอมพิวเตอร์ ได้หมดครับ เชื่อมต่ออินเตอร์เน็ตวงเดียวกับ ESP8266 ถ้า ESP8266 ตั้งให้เชื่อมต่อ SSID ไหนอุปกรณ์ที่จะควบคุมก็ต้องต่อ SSID เดียวกันด้วย จากนั้นให้เปิด Browser ขึ้นมา (IE, Chrome, Firefox, Safari หรืออะไรก็แล้วแต่ได้หมด) จากนั้นในช่อง Address Bar ให้ใส่ IP Address ที่จดไว้เมื่อกี๊ลงไป เคาะ Enter หรือ Go เบาๆซักครั้ง พอกดเรียก Address ของ Server ไป Client ของเราได้ส่งไปขอข้อมูลจาก Server แล้วหล่ะครับ ใน Serial Monitor จะบอกเลยว่ามี Client ใหม่มาเชื่อมต่อกับ Server ขณะเดียวกันในฝั่ง Client ก็จะแสดงหน้าเว็บที่ Server ส่งมาให้เรียบร้อยแล้ว
จะสังเกตว่าเมื่อทุกอย่างรับส่งข้อมูลกันหมดแล้ว Server ก็จะ Disconnect ไป เป็นปกติปกติของการเชื่อมต่อเนื่องจากฝั่ง Client ได้ข้อมูลทั้งหมดไปแล้ว ไม่มีการรับส่งข้อมูลเพิ่มเติมก็ตัดออกเพื่อตัดภาระของ Server เปิดให้ Client อื่นเชื่อมต่อแทน
ลองกดปุ่ม GPIO0 GPIO2 เล่นดูครับ จะมีการ Connect รับส่งข้อมูลกับ Server อีกครั้ง หน้าเว็บก็จะแสดง ON และ LED บนบอร์ดเราก็ติดขึ้นมา กดอีกทีมันก็ดับลงไป เห็นมั๊ยครับง่ายๆเลย ทีนี้เราก็ควบคุมอะไรก็ได้ในโลกให้เปิดปิดผ่านมือถือเราได้แล้ว การเขียนโค้ดมันก็เหมือนเราเขียน Arduino เปิดปิดตามที่เรากดสวิตช์นั่นแหละ เพียงแค่เราเปลี่ยนสวิตช์บนบอร์ดทดลองมาอยู่บนหน้าจอมือถือ และมีเรื่องของเครือข่ายพวก IP Address กับเรื่องของภาษาเขียนเว็บ HTML เข้ามายุ่งนิดหน่อย (ตรงนี้ใครไม่รู้ ไม่เข้าใจไม่ต้องห่วงครับ จบทุกตอนแล้วจะมีตอนแทรกอธิบายอย่างละเอียดอีกที)
กว่าจะจบลงบทความนี้ก็ยาวพอสมควรแล้ว ตอนนี้คิดว่าทุกท่านคงมีไอเดียไปทำอะไรได้หลายอย่างแล้วหล่ะครับ เปลี่ยนจาก LED เป็น Relay ควบคุมเปิดปิดไฟในบ้าน? หรือควบคุมมอเตอร์ให้เลื่อนเปิดปิดประตู? แค่ Web Server ก็ประยุกต์ใช้งานได้เยอะมากแล้ว แต่นี่มันแค่ตัวเดียว NodeMCU มีแค่ 13GPIO ควบคุมอุปกรณ์ได้สูงสุดแค่ 13 อย่าง(แค่?) บอร์ดตัวอื่นๆก็มี GPIO ลดหลั่นต่างกันไป มันยังทำอะไรไม่ค่อยสะใจ ในบทความต่อไป หากพวกมันมาเป็นทีมเป็นแก๊งค์ มันจะเป็นยังไง ต้องคอยติดตามกันครับ
ดาวน์โหลดโค้ดตัวอย่างที่นี่
คลิกที่นี่เพื่ออ่านบทความต่อไป
▲
▼
รายการสั่งซื้อของฉัน
รายการสั่งซื้อของฉัน
ข้อมูลร้านค้านี้
Fitrox Electronics
ไฟทร็อก อิเล็กทรอนิกส์ จำหน่ายอุปกรณ์อิเล็กทรอนิกส์ บอร์ดไมโครคอนโทรลเลอร์ และอุปกรณ์สำหรับโปรเจคต่างๆ อ.เมือง จ.เชียงใหม่ (หลัง มช.)
เบอร์โทร : 0897245633
อีเมล : fitrox.electronics@gmail.com
อีเมล : fitrox.electronics@gmail.com
ส่งข้อความติดต่อร้าน
เกี่ยวกับร้านค้านี้
ค้นหาสินค้าในร้านนี้
ค้นหาสินค้า
สินค้าที่ดูล่าสุด
บันทึกเป็นร้านโปรด
Join เป็นสมาชิกร้าน
แชร์หน้านี้
แชร์หน้านี้
↑
TOP เลื่อนขึ้นบนสุด
TOP เลื่อนขึ้นบนสุด
สินค้าในตะกร้า ({{total_num}} รายการ)
ขออภัย ขณะนี้ยังไม่มีสินค้าในตะกร้า
ราคาสินค้าทั้งหมด
฿ {{price_format(total_price)}}
- ฿ {{price_format(discount.price)}}
ราคาสินค้าทั้งหมด
{{total_quantity}} ชิ้น
฿ {{price_format(after_product_price)}}
ราคาไม่รวมค่าจัดส่ง
➜ เลือกซื้อสินค้าเพิ่ม