Tải trang web cấu hình Arduino / ESP của bạn từ đám mây: 7 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:35

Khi tạo một dự án Arduino / ESP (ESP8266 / ESP32), bạn có thể mã hóa mọi thứ. Nhưng thường xuyên hơn là không có thứ gì đó xuất hiện và bạn sẽ kết thúc việc gắn lại thiết bị IoT vào IDE của mình một lần nữa. Hoặc bạn vừa có thêm nhiều người truy cập vào cấu hình và bạn muốn cung cấp giao diện người dùng thay vì mong họ hiểu hoạt động bên trong.

Tài liệu hướng dẫn này sẽ cho bạn biết cách đặt hầu hết giao diện người dùng trên đám mây thay vì trên Arduino / ESP. Làm theo cách này sẽ giúp bạn tiết kiệm dung lượng và bộ nhớ sử dụng. Một dịch vụ cung cấp các trang web tĩnh miễn phí đặc biệt thích hợp làm "đám mây", như GitHub Pages, nhưng các tùy chọn khác cũng có thể hoạt động.

Việc xây dựng trang web theo cách này yêu cầu trình duyệt của người dùng phải trải qua 4 bước:

1. Yêu cầu url gốc từ Arduino / ESP
2. Nhận một trang web rất đơn giản, nói với:
3. Yêu cầu tệp JavaScript từ đám mây
4. Nhận mã xây dựng trang thực tế

Có thể hướng dẫn này cũng sẽ giải thích cách tương tác với Arduino / ESP khi trang đã sẵn sàng theo các bước trên.

Mã được tạo trên hướng dẫn này cũng có thể được tìm thấy trên GitHub.

Điều kiện tiên quyết

Hướng dẫn này giả định rằng bạn có quyền truy cập vào một số tài liệu nhất định và một số kiến thức trước đây:

• Arduino (với tài khoản mạng) / ESP
• Một máy tính để đính kèm những thứ trên vào
• Truy cập WiFi được kết nối với internet
• IDE Arduino đã được cài đặt (cũng cho ESP32)
• Bạn biết cách tải bản phác thảo lên thiết bị IoT của mình
• Bạn biết cách sử dụng Git & GitHub

Bước 1: Bắt đầu với một bản phác thảo máy chủ trang web đơn giản

Chúng tôi sẽ bắt đầu đơn giản nhất có thể và để nó phát triển từ đây.

#bao gồm

const char * ssid = "yoursid"; const char * password = "yourpasswd"; Máy chủ WiFiServer (80); void setup () {// Khởi tạo nối tiếp và đợi cổng mở: Serial.begin (115200); while (! nối tiếp) {; // đợi cổng nối tiếp kết nối. Chỉ cần cho cổng USB gốc} WiFi.begin (ssid, mật khẩu); while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serial.print ("."); } Serial.println ("Đã kết nối WiFi."); Serial.println ("Địa chỉ IP:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// lắng nghe các máy khách đến WiFiClient client = server.available (); // lắng nghe các khách hàng đến bool sendResponse = false; // đặt thành true nếu chúng ta muốn gửi phản hồi String urlLine = ""; // tạo một Chuỗi để giữ URL được yêu cầu if (client) // nếu bạn có một khách hàng, {Serial.println ("New Client."); // in thông báo ra cổng nối tiếp String currentLine = ""; // tạo một Chuỗi để giữ dữ liệu đến từ máy khách trong khi (client.connected ()) // lặp lại trong khi máy khách được kết nối {if (client.available ()) // nếu có byte để đọc từ máy khách, {char c = client.read (); // đọc một byte, sau đó if (c == '\ n') // nếu byte là ký tự dòng mới {// nếu dòng hiện tại trống, bạn có hai ký tự dòng mới liên tiếp. // đó là phần cuối của yêu cầu HTTP máy khách, vì vậy hãy gửi phản hồi: if (currentLine.length () == 0) {sendResponse = true; // mọi thứ đều ổn! nghỉ; // thoát khỏi vòng lặp while} else // nếu bạn có dòng mới, hãy xóa currentLine: {if (currentLine.indexOf ("GET /")> = 0) // đây phải là dòng URL {urlLine = currentLine; // lưu lại để sử dụng sau} currentLine = ""; // đặt lại chuỗi currentLine}} else if (c! = '\ r') // nếu bạn có bất kỳ thứ gì khác ngoài ký tự xuống dòng, {currentLine + = c; // thêm nó vào cuối dòng currentLine}}} if (sendResponse) {Serial.print ("Khách hàng yêu cầu"); Serial.println (urlLine); // Tiêu đề HTTP luôn bắt đầu bằng mã phản hồi (ví dụ: HTTP / 1.1 200 OK) // và kiểu nội dung để máy khách biết điều gì sắp xảy ra, sau đó là dòng trống: client.println ("HTTP / 1.1 200 OK"); client.println ("Kiểu nội dung: text / html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // nếu URL chỉ là "/" {// nội dung của phản hồi HTTP theo sau tiêu đề: client.println ("Hello world!"); } // Phản hồi HTTP kết thúc bằng một dòng trống khác: client.println (); } // đóng kết nối: client.stop (); Serial.println ("Máy khách đã ngắt kết nối."); }}

Sao chép mã trên hoặc tải xuống từ cam kết trên GitHub.

Đừng quên thay đổi SSID và mật khẩu để phù hợp với mạng của bạn.

Bản phác thảo này sử dụng Arduino nổi tiếng

cài đặt()

và

vòng()

chức năng. bên trong

cài đặt()

chức năng kết nối nối tiếp với IDE được khởi tạo và WiFi cũng vậy. Khi WiFi được kết nối với SSID nói trên, IP sẽ được in và máy chủ web khởi động. Trong mỗi lần lặp lại

vòng()

chức năng máy chủ web được kiểm tra cho các máy khách được kết nối. Nếu một máy khách được kết nối, yêu cầu sẽ được đọc và URL được yêu cầu được lưu trong một biến. Nếu mọi thứ có vẻ ổn, phản hồi từ máy chủ đến máy khách sẽ được thực hiện dựa trên URL được yêu cầu.

CẢNH BÁO! Mã này sử dụng lớp Chuỗi Arduino để giữ cho nó đơn giản. Tối ưu hóa chuỗi không nằm trong phạm vi của hướng dẫn này. Đọc thêm về điều này trong hướng dẫn về Thao tác chuỗi Arduino sử dụng Ram tối thiểu.

Bước 2: Tạo JavaScript từ xa

Arduino / ESP sẽ yêu cầu trình duyệt của khách truy cập tải một tệp này. Tất cả phần còn lại sẽ được thực hiện bởi mã JavaScript này.

Trong Có thể hướng dẫn này, chúng tôi sẽ sử dụng jQuery, điều này không hoàn toàn cần thiết, nhưng sẽ giúp mọi thứ dễ dàng hơn.

Tệp này cần có thể truy cập được từ web, một máy chủ trang tĩnh là đủ để làm cho việc này hoạt động, ví dụ như các trang GitHub. Vì vậy, có thể bạn sẽ muốn tạo một kho lưu trữ GitHub mới và tạo

trang gh

chi nhánh. Đặt mã sau vào bên trong

.js

tập tin trong kho lưu trữ theo đúng nhánh.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // tạo phần tử script.src = cdnjsURL + 'jquery / 3.2.1 / jquery.min.js'; // đặt src = "" thuộc tính script.onload = function () // hàm gọi lại, được gọi khi tệp jquery được tải {$ = window.jQuery; // làm cho jQuery có thể truy cập được dưới dạng biến tổng thể $ init (); // gọi hàm init}; document. getElementsByTagName ('head') [0].appendChild (script); // thêm thẻ đã tạo vào tài liệu, thẻ này sẽ bắt đầu tải jQuery lib}) (); function init () {// Tải xong jQuery, sẽ thêm mã vào đây sau…}

Sao chép mã trên hoặc tải xuống từ cam kết trên GitHub.

Kiểm tra xem tệp của bạn có thể truy cập được không. Trong trường hợp các trang GitHub, hãy truy cập https://username.github.io/repository/your-file.j… (thay thế

tên tài khoản

,

kho

và

your-file.js

cho các thông số chính xác).

Bước 3: Tải tệp JavaScript từ xa vào trình duyệt khách truy cập

Bây giờ chúng ta đã thiết lập xong mọi thứ, đã đến lúc làm cho trang web tải tệp JavaScript từ xa.

Bạn có thể làm điều này bằng cách thay đổi dòng 88 của bản phác thảo từ

client.println ("Xin chào thế giới!"); NS

client.println ("");

(thay đổi

src

thuộc tính trỏ đến tệp JavaScript của riêng bạn) Đây là một trang web html nhỏ, tất cả những gì nó làm là tải tệp JavaScript vào trình duyệt của khách truy cập.

Tệp đã thay đổi cũng có thể được tìm thấy trong cam kết tương ứng trên GitHub.

Tải bản phác thảo đã điều chỉnh lên Arduino / ESP của bạn.

Bước 4: Thêm các phần tử mới vào trang

Một trang trống là vô dụng, vì vậy bây giờ là lúc để thêm một phần tử mới vào trang web. Bây giờ, đây sẽ là một video YouTube, trong ví dụ này, một số mã jQuery sẽ được sử dụng để thực hiện điều này.

Thêm dòng mã sau vào

trong đó()

hàm số:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({width: '608px', height: '342px'}). AppendTo ('body');

Điều này sẽ tạo ra một

iframe

phần tử, đặt chính xác

src

và đặt kích thước bằng cách sử dụng css và thêm phần tử vào phần nội dung của trang.

jQuery giúp chúng ta dễ dàng chọn và thay đổi các phần tử trong trang web, một số điều cơ bản cần biết:

• $ ('body')

• chọn bất kỳ phần tử nào đã tồn tại, các bộ chọn css khác cũng có thể được sử dụng

• $(' ')

  tạo ra một cái mới

• phần tử (nhưng không thêm nó vào tài liệu)

• .appendTo ('. main')

• nối phần tử đã chọn / đã tạo vào một phần tử có lớp css 'main'

• Chức năng khác để thêm các phần tử là

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .chèn()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .sau()

  ,

  .trước()

Hãy xem cam kết tương ứng trên GitHub nếu có gì chưa rõ ràng.

Bước 5: Yếu tố tương tác

Một video rất thú vị, nhưng mục đích của hướng dẫn này là tương tác với Arduino / ESP. Hãy thay thế video bằng một nút gửi thông tin đến Arduino / ESP và cũng chờ phản hồi.

Chúng tôi sẽ cần một

$('')

để thêm vào trang và đính kèm một công cụ tạo sự kiện vào trang đó. Eventlistener sẽ gọi hàm gọi lại khi sự kiện được chỉ định xảy ra:

$ (''). text ('a button'). on ('click', function ()

{// mã ở đây sẽ được thực thi khi nút được nhấp vào}). appendTo ('body');

Và thêm một yêu cầu AJAX vào hàm gọi lại:

$.get ('/ ajax', hàm (dữ liệu)

{// mã ở đây sẽ được thực thi khi yêu cầu AJAX kết thúc});

Khi yêu cầu kết thúc, dữ liệu trả về sẽ được thêm vào trang:

$('

').text (dữ liệu).appendTo (' body ');

Tóm lại, đoạn mã trên tạo một nút, thêm nó vào trang web, khi nút được nhấp, một yêu cầu sẽ được gửi đi và phản hồi cũng sẽ được thêm vào trang web.

Nếu đây là lần đầu tiên bạn sử dụng lệnh gọi lại, bạn có thể muốn kiểm tra cam kết trên GitHub để xem mọi thứ được lồng vào nhau như thế nào.

Bước 6: Phản hồi phần tử tương tác

Tất nhiên, yêu cầu AJAX yêu cầu một phản hồi.

Để tạo câu trả lời chính xác cho

/ ajax

url chúng tôi sẽ cần thêm một

khác nếu ()

ngay sau dấu ngoặc đóng của câu lệnh if kiểm tra

/

url.

else if (urlLine.indexOf ("GET / ajax")> = 0)

{client.print ("Xin chào!"); }

Trong cam kết trên GitHub, tôi cũng đã thêm một bộ đếm để hiển thị cho trình duyệt rằng mọi yêu cầu là duy nhất.

Bước 7: Kết luận

Đây là phần cuối của hướng dẫn này. Bây giờ bạn có Arduino / ESP phục vụ một trang web nhỏ cho trình duyệt của khách truy cập tải tệp JavaScript từ đám mây. Sau khi JavaScript được tải, nó sẽ xây dựng phần còn lại của nội dung trang web cung cấp giao diện người dùng để người dùng giao tiếp với Arduino / ESP.

Bây giờ, tùy theo trí tưởng tượng của bạn để tạo thêm các phần tử trên trang web và lưu cài đặt cục bộ trên một số loại ROM (EEPROM / NVS / etc).

Cảm ơn bạn đã đọc, và vui lòng đưa ra một số phản hồi!