Trạm thời tiết ESP8266 hiển thị dữ liệu trên trang web: 7 bước

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

Lưu ý: Các phần của hướng dẫn này có thể có ở định dạng video trên Kênh YouTube của tôi - Bộ lạc Công nghệ

Trong hướng dẫn này, tôi sẽ chỉ cách tạo một trạm thời tiết gửi trực tiếp dữ liệu đến trang web của bạn. Do đó, bạn sẽ cần tên miền của riêng mình (Ví dụ: msolonko.net). Để bắt đầu, đây là những tài liệu bạn sẽ cần:

Vật phẩm:

Feather Huzzah ($ 16,95)

Cáp micro USB có dữ liệu ($ 1,99)

Bộ pin ($ 25): Sau đây tôi sẽ thảo luận về dung lượng bạn cần trong khoảng thời gian nào mà không cần sạc lại, vì vậy bạn có thể chọn dung lượng mình muốn. Đây là một liên kết đến một trong những tôi đã sử dụng. Bạn cũng có thể chỉ cần cấp nguồn cho nó từ ổ cắm.

1 điện trở quang

Một số điện trở khác - sẽ thảo luận ở phần sau

Dây điện

Perf Board ($ 5,59) - Gói 20

Cảm biến nhiệt độ, áp suất và độ ẩm BME280 ($ 9,99)

Một số loại hộp; bạn có thể in 3D một cái, và tôi sẽ cho bạn xem thiết kế của tôi.

Webhosting và miền, nếu bạn muốn làm theo hoàn toàn hướng dẫn

Công cụ:

Kìm cắt dây

Hàn sắt

Bước 1: Mã lông Huzzah

Mã sẽ được viết bằng Arduino IDE, có thể tải xuống tại đây. Trước khi bắt đầu, vui lòng làm theo hướng dẫn tại đây để thiết lập Arduino IDE hoạt động với Feather Huzzah của bạn. Ngoài ra, hãy làm theo các hướng dẫn sau để tải xuống các thư viện cần thiết để cảm biến BME hoạt động. Tệp mã được đính kèm và tất cả mã được chú thích để bạn có thể hiểu được. Sau khi bạn nhìn vào nó, hãy chuyển sang bước tiếp theo, nơi chúng ta sẽ xem xét mã nhận dữ liệu cảm biến.

Bước 2: Nhận dữ liệu từ Feather Huzzah

Đến đây, hy vọng bạn đã hiểu cách hoạt động của mã Arduino. Nếu không, hãy quay lại mã và đọc bình luận của tôi (tôi đã bình luận gần như mọi dòng). Bây giờ chúng ta sẽ viết mã nhận dữ liệu. Giống như trước đây, tất cả đều được bình luận. Ngôn ngữ lập trình được sử dụng cho việc này là PHP, bạn có thể đọc thêm tại đây.

Dữ liệu của chúng tôi sẽ được lưu trữ trong Cơ sở dữ liệu MySQL, bạn có thể đọc thêm tại đây. Dữ liệu được lưu trữ trong các bảng có hàng và cột. Trước khi viết mã, chúng ta nên tạo cấu trúc bảng trên cPanel lưu trữ của mình. Tôi đang sử dụng Arvixe Hosting, vì vậy cPanel của bạn có thể trông khác. Tham khảo một trong những hình ảnh để xem phần của tôi trông như thế nào. Đầu tiên, bạn muốn tạo một cơ sở dữ liệu MySQL mới nếu bạn chưa có. Bạn có thể sử dụng trình hướng dẫn cho điều đó. Có rất nhiều tài nguyên trực tuyến về vấn đề này nếu bạn cần trợ giúp.

Khi bạn đã thiết lập cơ sở dữ liệu, hãy truy cập phpMyAdmin và chọn cơ sở dữ liệu của bạn. Tạo một bảng có tên là weather_data với 9 cột. Tham khảo một trong những hình ảnh của tôi ở trên để xem mỗi cột nên là gì (sao chép chính xác tên, kiểu dữ liệu và mọi thứ khác nếu bạn muốn sử dụng mã của tôi). Bộ đếm sẽ là khóa chính của chúng tôi và id sẽ giúp chúng tôi xác định ngày dữ liệu hoạt động (1: hôm nay, 2: hôm qua, 3: mọi thứ khác). Vì chúng tôi sẽ có rất nhiều dữ liệu, chúng tôi sẽ xóa một số dữ liệu trong số đó khi nó trở nên cũ hơn. Đó là lý do tại sao chúng ta cần cột id. Phần còn lại của các cột khá tự giải thích. Ngay bây giờ, bảng của bạn trong cơ sở dữ liệu của bạn sẽ giống hệt như bảng của tôi.

Bây giờ, hãy tải xuống mã đính kèm và đọc qua nó và nhận xét của tôi. Khi hoàn tất, hãy chuyển sang bước tiếp theo.

Lưu ý: khi bạn tải xuống mã, hãy đổi tên nó thành esp.php. Vì một số lý do, tôi đã gặp lỗi khi tải lên tệp PHP.

Về cơ bản đây là cách mã sẽ hoạt động.

1. Thu thập dữ liệu 10 phút một lần và hiển thị nó

2. Mỗi ngày trôi qua, hãy tính trung bình mỗi 6 giá trị (để tiết kiệm dung lượng DB) để có một điểm dữ liệu cho mỗi giờ

3. Khi một ngày khác trôi qua, hãy tính trung bình tất cả dữ liệu còn lại cho ngày đó và lưu trữ nó dưới dạng một điểm dữ liệu duy nhất

Bằng cách này, chúng ta sẽ có thể thấy những dao động về ánh sáng, nhiệt độ, v.v. trong khoảng thời gian hàng tháng mà không bị phân tâm bởi những biến động hàng ngày về nhiệt độ, ánh sáng, v.v.

Bước 3: Lấy dữ liệu từ cơ sở dữ liệu để hiển thị

Vì vậy, bây giờ chúng tôi đã tìm ra cách thu thập dữ liệu thời tiết và tải nó lên cơ sở dữ liệu của chúng tôi. Bây giờ chúng ta phải có thể truy xuất nó ở dạng có thể sử dụng được. Như trước đây, tôi đã đính kèm tệp PHP getWeatherData.txt mà bạn nên lưu vào máy chủ của mình và thay đổi phần mở rộng tên tệp thành.php thay vì.txt. Tất cả các mã được nhận xét. Đọc qua nó để hiểu nó và tiếp tục khi bạn nghĩ rằng bạn đã có nó. Nếu bạn có thắc mắc, hãy hỏi bên dưới.

Bước 4: Thiết lập thư viện và một số thứ khác

Đối với dự án này, một trong những khung công tác mà chúng tôi sẽ sử dụng là AngularJS, sẽ giúp chúng tôi giao tiếp với cơ sở dữ liệu và xây dựng một SPA (Ứng dụng trang đơn). Để tải thư viện, hãy truy cập liên kết này và tải xuống phiên bản 1.64 trở lên. Đối với hướng dẫn này, tôi đã sử dụng 1.64 nhưng các phiên bản mới thường được phát hành nên bạn có thể sử dụng một phiên bản khác. Tìm một liên kết trên trang đó có kết thúc như sau: /VERSION/angular.min.js

Sao chép liên kết và lưu nó ở nơi an toàn. Chúng tôi vừa có một liên kết cho thư viện AngularJS. Bạn sẽ cần nó cho bước tiếp theo. Bây giờ, trên cùng một trang, hãy tìm một liên kết giống như thế này và sao chép nó: /VERSION/angular-route.min.js

Tuyến góc sẽ giúp chúng tôi quản lý SPA của mình và xử lý việc chuyển đổi các chế độ xem trong trang.

Chúng tôi muốn có thể hiển thị độc đáo các biểu đồ dữ liệu của chúng tôi. Đối với điều này, chúng tôi sẽ sử dụng một thư viện có tên là ChartJS. Vào đây, chọn phiên bản mới nhất và lưu một liên kết kết thúc như sau: VERSION / Chart.bundle.min.js

Cuối cùng, chúng ta sẽ sử dụng một thư viện để sắp xếp các trang có tên là Bootstrap. Đi tới liên kết này để Bắt đầu nhanh và để nó mở ngay bây giờ. Khi chúng tôi bắt đầu viết mã khách hàng, bạn sẽ có thể thay thế các liên kết cũ của tôi bằng phiên bản mới hơn.

Bây giờ, chúng ta nên thiết lập các chế độ xem khác nhau cho ứng dụng của mình. Trong thư mục trên máy chủ lưu trữ của bạn nơi bạn có hai tệp trước đó (esp.php và getWeatherData.php), hãy tạo một thư mục mới có tên là weather_views. Tại đây, chúng tôi sẽ đặt tất cả các trang của chúng tôi mà mỗi trang sẽ tương ứng với một id từ cơ sở dữ liệu của chúng tôi (1, 2 hoặc 3).

Trong thư mục, hãy tạo 3 tệp (day.html, old.html và hôm qua.html). Tải xuống mã đính kèm và đặt nó vào các tệp đó. Mã cho DAY. HTML được nhận xét để bạn có thể hiểu điều gì đang xảy ra. Mã cho 2 trang còn lại về cơ bản là giống nhau (phần khác ở old.html được chú thích).

Khi bạn đã hoàn thành bước này, hãy chuyển sang bước tiếp theo, đây là bước lập trình khó nhất.

Bước 5: Tệp HTML chính

Trong bước này, bạn sẽ tạo / chỉnh sửa / đọc tệp HTML chính, nơi bạn sẽ hiển thị mọi thứ. Lưu tệp đính kèm (như mọi khi, được chú thích) dưới dạng espdata.html trong cùng thư mục với esp.php. Tôi hy vọng bạn có thể thực hiện một số thay đổi đối với nó và hiểu điều gì đang thực sự xảy ra.

Đây là phần lớn mã của bạn, vì vậy điều quan trọng là phải hiểu những gì đang xảy ra.

Bước 6: Kiểm tra dây trên Breadboard

Bây giờ chúng tôi sẽ kiểm tra xem tất cả mã hoạt động với phần cứng của chúng tôi. Nếu bạn chưa có, hãy hàn các chân cắm đầu cắm trên Feather Huzzah và cảm biến BME280. Đối với mỗi bước, một bức ảnh được đính kèm.

1. Đặt lông trên breadboard. Kết nối 3V với + rail và GND với - rail.

2. Kết nối VIN cảm biến với + rail và GND với - rail.

3. Kết nối cảm biến SDA với chân 4 trên lông. Kết nối SCL với chân 5.

4. Đặt điện trở quang trên bảng mạch với một dây dẫn đến + thanh ray.

5. Kết nối một điện trở 4,7k với dây dẫn không kết nối của điện trở quang. Nối dây dẫn chưa được kết nối của 4,7k với một điện trở 2k. Nối đầu chưa kết nối của điện trở 2k với - rail (GND).

6. Kết nối khớp của điện trở 4,7k và 2k vào chân ADC (chân tương tự). Chúng tôi vừa tạo một bộ chia điện áp chia điện áp tối đa mà chân đọc được từ 3,3V đến dưới 1V. Bạn có thể thử với sự kết hợp của riêng mình nếu bạn muốn nhưng hãy nhớ rằng điện áp cấp cho chân analog phải nhỏ hơn 1V.

7. Cuối cùng, kết nối chân RST (đặt lại) trên lông với chân 16 trên lông (dây màu cam trong ảnh). Cấu hình này cho phép Feather Huzzah vào chế độ ngủ sâu để tiết kiệm điện năng.

Bây giờ bạn đã hoàn thành! Tải mã lên lông vũ của bạn huzzah và hy vọng, bạn có thể thấy cập nhật trang web của mình (chỉ trang day.html). Nếu không, hãy thử sử dụng Serial monitor để khắc phục sự cố hoặc hỏi trong phần nhận xét bên dưới.

Bước 7: Dự án vĩnh viễn (Tùy chọn)

Giả sử mọi thứ đều hoạt động, nếu bạn muốn, bạn có thể làm cho dự án này lâu dài hơn. Tôi sẽ không hiển thị điều này ở đây, nhưng bạn có thể hàn tất cả các thành phần vào một bo mạch hoàn hảo và sau đó bọc chúng trong một hộp đựng. Tôi sẽ đính kèm các tệp IPT cho vùng chứa 3D mà tôi đã sử dụng bên dưới và một vài ảnh để bạn bắt đầu. Hộp chứa có nghĩa là để truyền cảm hứng bởi vì bạn có thể sẽ muốn làm cho nó trở nên cá nhân hơn với một thiết kế và văn bản khác. Chúc bạn vui vẻ với việc tùy chỉnh! Chúc may mắn!