blog-details

Arduino IDE là một môi trường lập trình với hệ thống thư viện đồ sộ, công đồng cực kì lớn mạnh ! Và đương nhiên Arduino IDE cũng hỗ trợ chúng ta lập trình cho esp8266, ngoài arduino ide còn rất nhiều môi trường khác nữa để lập trình cho esp8266, tuy nhiên cộng đồng và thư viện của nó không được mạnh. Do đó, mình sẽ chọn Arduino IDE để viết code

Về việc cài dặt arduino IDE, các bạn tham khảo trên google nhé vì nó quá cơ bản rồi. Sau khi cài xong, chúng ta tích hợp thư viện esp8266 để vào arduino ide như sau: (phần này mình tham khảo tại đây)

Vào File→ Preferences, vào textbox Additional Board Manager URLs thêm đường link này vào:

http://arduino.esp8266.com/stable/package_esp8266com_index.json

 

cài đặt thư viện esp8266 cho arduino

Click OK để chấp nhận

Tiếp theo vào ToolBoardBoards Manager

cài đặt thư viện esp8266 cho arduino

Đợi một lát để chương trình kiếm tìm. Ta kéo xuống và click vào ESP8266 by ESP8266 Community, click vào Install. Chờ phần mềm tự động download và cài đặt.

cài đặt thư viện esp8266 cho arduino

Chọn Board để lập trình cho ESP8266:

Kết nối mudule USB-to-UART vào máy tính. Vào ToolBoardGeneric ESP8266 Module, chọn cổng COM tương ứng với module USB-to-UART tương ứng.

cài đặt thư viện esp8266 cho arduino

Chọn chế độ nạp Arduino as ISP. Vậy là ta đã có môi trường lập trình cho esp8266 rất thân thiện.

Thiết kế webserver

Ngôn ngữ HTML

HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes …

Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên trang web. Thí dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p>

Các bạn tự tìm hiểu thêm nhé,

  • https://vi.wikipedia.org/wiki/HTML

Trước khi đi vào lập trình, chúng ta sẽ viết mã html cho server web bằng máy tính trước, giới thiệu với những bạn phần mềm Sublime Text đây là 1 công cụ text editer mà mình rất thích, giao diện đẹp, chuyên nghiệp, hệ thống nhắc lệnh rất ok ! Mình sẽ viết demo mã html trên phần mềm này !

Các bạn vào File -> New tạo 1 file mới và lưu với đuôi .html, ở đây mình lưu file với tên index.html

Tiến hành viết mã code html

<!DOCTYPE html>
<html>
<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Điều khiển thiết bị</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		.b{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#4caf50;border-radius: 10px;}
		.t{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#f44336;border-radius: 10px;}
	</style>
</head>
<body>
<div style="width: 330px;height: auto;margin: 0 auto;margin-top: 70px">
<h1 align="center">Điều khiển thiết bị qua WIFI</h1>
	<table align="center">
		<tr>
			<td><a href='/bat1'><button class='b'>Bật 1</button></a><td>
			<td><a href='/tat1'><button class='t'>Tắt 1</button></a><td>
	    <tr>
	    <tr>
			<td><a href='/bat2'><button class='b'>Bật 2</button></a><td>
			<td><a href='/tat2'><button class='t'>Tắt 2</button></a><td>
	    <tr>
	    <tr>
			<td><a href='/bat3'><button class='b'>Bật 3</button></a><td>
			<td><a href='/tat3'><button class='t'>Tắt 3</button></a><td>
	    <tr>
	    <tr>
			<td><a href='/bat4'><button class='b'>Bật 4</button></a><td>
			<td><a href='/tat4'><button class='t'>Tắt 4</button></a><td>
	    <tr>	
	</table>
</div>
</body>
</html>

Sau đó lưu lại và mở file đó lên bằng trình duyệt WEB nhé, ở đây mình sử dụng Chrome

 

Và đây là kết quả:

webserver với esp8266

Giải thích:

Cấu trúc của 1 file html như sau:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> là tiêu đề bắt buộc mở đầu file

Cặp thẻ <html> </html> cũng là cặp thẻ bắt buộc. Tiếp đến là cặp thẻ <head> </head> nơi chứa nhưng khai báo mở dầu của trang, ví dụ thêm thư viện, …
Thẻ <title> </title> chính là phân nội dung in trên tab của trinh duyệt web (cạnh favicon)
Và cặp thẻ <body> </body> nơi chứa nội dung của trang web

Tiếp đến

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> khai báo định dạng text – kiểu utf-8
<title>Điều khiển thiết bị</title> Khai báo phần title trên tab của trình duyệt web
<meta name=”viewport” content=”width=device-width, initial-scale=1″> đây là đoạn mã để trình duyệt web tự động căn chỉnh trang cho vừa nhìn với màn hình (để vừa đẹp với cả điện thoại lẫn máy tính)
<style>
.b{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#4caf50;border-radius: 10px;}
.t{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#f44336;border-radius: 10px;}
</style>
Trong cặp thẻ style mình khai báo 2 class “b” và “t” và viết các thuộc tính như chiều dài, chiều rộng, màu sắc cho nút nhấn
Và ở phần thẻ body chính là nội dung chính của trang web với các button

Sau khi đã biên tập file html xong, chúng ta tiến hành viết code trên arduino và nhúng mã html vào esp8266

Server web ở chế độ Access Point

Ở chế độ Access Point, mình sẽ cho wifi tự thân phát ra wifi để các thiết bị khác kết nối tới

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

String webPage =
{
  "<!DOCTYPE html>"
  "<html>"
  "<head>"
  "   <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"
  "  <title>Điều khiển thiết bị</title>"
  "  <meta name='viewport' content='width=device-width, initial-scale=1'>"
  "  <style>"
  "    .b{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#4caf50;border-radius: 10px;}"
  "    .t{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#f44336;border-radius: 10px;}"
  "  </style>"
  "</head>"
  "<body>"
  "<div style='width: 330px;height: auto;margin: 0 auto;margin-top: 70px'>"
  "<h1 align='center'>Điều khiển thiết bị qua WIFI</h1>"
  "  <table align='center'>"
  "    <tr>"
  "    <td><a href='/bat1'><button class='b'>Bật 1</button></a><td>"
  "    <td><a href='/tat1'><button class='t'>Tắt 1</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat2'><button class='b'>Bật 2</button></a><td>"
  "    <td><a href='/tat2'><button class='t'>Tắt 2</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat3'><button class='b'>Bật 3</button></a><td>"
  "    <td><a href='/tat3'><button class='t'>Tắt 3</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat4'><button class='b'>Bật 4</button></a><td>"
  "    <td><a href='/tat4'><button class='t'>Tắt 4</button></a><td>"
  "      <tr>"
  "  </table>"
  "</div>"
  "</body>"
  "</html>"
};
void TrangChu()
{
  server.send(200, "text/html", webPage);
}
void setup()
{
  Serial.begin(9600);
  while (WiFi.softAP("ESP8266 WiFI", "12345678") == false) 
   {
     Serial.print(".");
     delay(300);
   }
  IPAddress myIP = WiFi.softAPIP();
  server.on("/", TrangChu);
  server.begin();
}
void loop()
{
  server.handleClient();
}

Sau khi include các file thư viện cần thiết, ở dòng số 3, mình khởi tạo 1 đối tượng server hoạt động ở cổng 80.
Tiếp đến nhúng toàn bộ đoạn code web đã viết vài biến String webPage

Lưu ý: Ở đầu và cuối mỗi dòng chúng ta nhé thêm 1 dấu nháy đôi và tất cả các dấu nháy đôi phía trong phải sửa thành dấu nháy đơn

Bạn cũng có thể thêm dấu xổ \ trước nháy đôi thay vì sửa thành nháy đơn

Trong hàm setup chúng ta khởi tạo cổng serial với tốc độ baud 9600 và cho esp8266 phát ra wifi với tên ESP8266 WiFI và password 12345678

Hàm server.on(“/”, TrangChu); yêu cầu esp tạo được 1 callback tới hàm tên là TrangChu khi đã có thiết bị truy cập tới, và ở hàm TrangChu , mình sẽ cho esp8266 trả lời lại mã html với code reponse là 200 (http code 200 báo truy vấn thành công – mình đã phát biểu ở bài 4 )

Nạp chương trình:

Cách nạp chương trình giống như nạp firmwave mà mình đã hướng dẫn ở bài 2. Thế nhưng chúng ta sẽ nạp trực tiếp bằng phần mềm arduino luôn !

Các bạn chuẩn bị 1 module UART-USB như pl2303, hc340 rồi kết nối như sau:

ESP8266 PL2303 (hoặc module uart bất kì)
3.3V 3.3V
GND GND
RX TX
TX RX
CH_PD 3.3V
GPIO0 GND

Sau khi kết nối như trên xong thì chúng ta mới cắm module uart vào máy tính

Các bạn vào Tool -> Port để chọn cổng COM tương ứng:

tạo webserver esp8266

Sau đó ấn nút nạp xuống:

tạo webserver esp8266

Sau khi nạp code xong thì gỡ GPIO0 ra khỏi mass và reset esp8266 (cấp lại nguồn hoặc kích GND vào chân reset)

Bây giờ lấy máy tính ra, cho nó kết nối vào wifi ESP8266 WiFI với mật khẩu 12345678
Sau đó mở trình duyệt gõ địa chỉ mặc định của server là 192.168.4.1

Chún ta có kết quả

tạo webserver esp8266

Server web ở chế độ Station

Ở chế độ station, esp8266 sẽ không phát wifi nữa mà truy cập vào wifi ở nhà

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

MDNSResponder mdns;
ESP8266WebServer server(80);

String webPage =
{
  "<!DOCTYPE html>"
  "<html>"
  "<head>"
  "   <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"
  "  <title>Điều khiển thiết bị</title>"
  "  <meta name='viewport' content='width=device-width, initial-scale=1'>"
  "  <style>"
  "    .b{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#4caf50;border-radius: 10px;}"
  "    .t{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#f44336;border-radius: 10px;}"
  "  </style>"
  "</head>"
  "<body>"
  "<div style='width: 330px;height: auto;margin: 0 auto;margin-top: 70px'>"
  "<h1 align='center'>Điều khiển thiết bị qua WIFI</h1>"
  "  <table align='center'>"
  "    <tr>"
  "    <td><a href='/bat1'><button class='b'>Bật 1</button></a><td>"
  "    <td><a href='/tat1'><button class='t'>Tắt 1</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat2'><button class='b'>Bật 2</button></a><td>"
  "    <td><a href='/tat2'><button class='t'>Tắt 2</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat3'><button class='b'>Bật 3</button></a><td>"
  "    <td><a href='/tat3'><button class='t'>Tắt 3</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat4'><button class='b'>Bật 4</button></a><td>"
  "    <td><a href='/tat4'><button class='t'>Tắt 4</button></a><td>"
  "      <tr>"
  "  </table>"
  "</div>"
  "</body>"
  "</html>"
};
void TrangChu()
{
  server.send(200, "text/html", webPage);
}
void setup()
{
  Serial.begin(9600);
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  WiFi.begin("Tang5", "12345678");
  
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected"); 
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  if (mdns.begin("esp8266", WiFi.localIP()))
  Serial.println("MDNS responder started");
  
  server.on("/", TrangChu);
  server.on("/bat1", bat1);
  server.on("/tat1", tat1);
  server.on("/bat2", bat2);
  server.on("/tat2", tat2);
  server.begin();
}
void loop()
{
  server.handleClient();
}

Trong đó yourSSID YourPass là tài khoản và mật khẩu wifi nhà bạn !

OK bây giờ esp8266 sẽ tự kết nói vào wifi nhà bạn và in ra địa chỉ IP có dạng 192.168.1.xxx Đây là địa chỉ IP mà modem mạng của bạn cấp phát cho nó, bạn chỉ việc gõ địa chỉ ip vào trinh duyệt web là trang web như trên sẽ hiện ra

Bật cổng Serial Monitor lên để xem Log nhé

ESP8266 và thiết bị truy cập phải cùng kết nối tới 1 mạng wifi nhé

tạo webserver esp8266

Kết quả

Code chức năng bật tắt LED

Tiếp tục, chúng ta sẽ code thêm chức năng bật tắt led, do ở đây mình sử dụng esp8266v1 nó chỉ có 2 chân GPIO nên mình sẽ chỉ code chức năng bật tắt cho kênh 1,2. Kênh 3,4 tạm để trạng trí vậy

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

MDNSResponder mdns;
ESP8266WebServer server(80);

String webPage =
{
  "<!DOCTYPE html>"
  "<html>"
  "<head>"
  "   <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"
  "  <title>Điều khiển thiết bị</title>"
  "  <meta name='viewport' content='width=device-width, initial-scale=1'>"
  "  <style>"
  "    .b{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#4caf50;border-radius: 10px;}"
  "    .t{width: 100px;height: 40px;font-size: 21px;color: #FFF;background-color:#f44336;border-radius: 10px;}"
  "  </style>"
  "</head>"
  "<body>"
  "<div style='width: 330px;height: auto;margin: 0 auto;margin-top: 70px'>"
  "<h1 align='center'>Điều khiển thiết bị qua WIFI</h1>"
  "  <table align='center'>"
  "    <tr>"
  "    <td><a href='/bat1'><button class='b'>Bật 1</button></a><td>"
  "    <td><a href='/tat1'><button class='t'>Tắt 1</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat2'><button class='b'>Bật 2</button></a><td>"
  "    <td><a href='/tat2'><button class='t'>Tắt 2</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat3'><button class='b'>Bật 3</button></a><td>"
  "    <td><a href='/tat3'><button class='t'>Tắt 3</button></a><td>"
  "    <tr>"
  "    <tr>"
  "    <td><a href='/bat4'><button class='b'>Bật 4</button></a><td>"
  "    <td><a href='/tat4'><button class='t'>Tắt 4</button></a><td>"
  "      <tr>"
  "  </table>"
  "</div>"
  "</body>"
  "</html>"
};
void TrangChu()
{
  server.send(200, "text/html", webPage);
}
void bat1()
{
  digitalWrite(0, HIGH); 
  Serial.println("Bật LED 1");
  server.send(200, "text/html", webPage);
}
void tat1()
{
  digitalWrite(0, LOW); 
  Serial.println("Tắt LED 1");
  server.send(200, "text/html", webPage);
}
void bat2()
{
  digitalWrite(2, HIGH); 
  Serial.println("Bật LED 2");
  server.send(200, "text/html", webPage);
}
void tat2()
{
  digitalWrite(2, LOW); 
  Serial.println("Tắt LED 2");
  server.send(200, "text/html", webPage);
}
void setup()
{
  pinMode(0, OUTPUT);
  pinMode(2, OUTPUT);
  
  Serial.begin(9600);
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  WiFi.begin("Tang5", "12345678");
  
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected"); 
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  if (mdns.begin("esp8266", WiFi.localIP()))
  Serial.println("MDNS responder started");
  
  server.on("/", TrangChu);
  server.on("/bat1", bat1);
  server.on("/tat1", tat1);
  server.on("/bat2", bat2);
  server.on("/tat2", tat2);
  server.begin();
}
void loop()
{
  server.handleClient();
}

Code trên mình thêm dòng cấu hình ngõ ra cho GPIO0 và GPIO2, sau đó thêm hàm callback nhận lệnh bặt tắt từ trình duyệt và xuất tin hiệu HIGH LOW ra chân GPIO và in log ra màn hình Serial

Đánh giá bài viết