Chƣơng 3 : PHƢƠNG PHÁP GIẢI QUYẾT
3.5 Phần mềm lập trình cho Websever (Visual Studio Code)
Hình 3.11: Logo Visual Studio Code
Visual Studio Code là một trình biên tập mã được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn. Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và cá tùy chọn khác. Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi.
Hỗ trợ nhiều ngơn ngữ lập trình Hỗ trợ đa nền tảng
Kho lưu trữ an toàn Hỗ trợ web
Lưu trữ dữ liệu dạng phân cấp Intellisense
Hỗ trợ viết Code
19
Hình 3.12: Trang download Visual Studio Code
Sau khi download thành công chúng ta tiến hành cài đặt.
20
Hình 3.14: Các thành phần Html – CSS – JavaScript
Để có thể thiết kế mơt giao diện trang web điều khiển cần lập trình 3 phần của một trang web cơ bản là Html, Css và JavaScript
Hình 3.15: Chức năng của HTML, CSS, Javascript 3.5. Giới thiệu HTML 3.5. Giới thiệu HTML
HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thơng tin được trình bày trên World Wide Web. Cùng với CSS và JavaScript, HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web.
Các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là
21
sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng (ví du <strong> và </strong>). Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ. Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là .html hoặc .htm. Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt web đảm nhận.
Trình duyệt sẽ đóng vai trị đọc hiểu nội dung HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu (do các bot máy tính hiểu).
Hình 3.16: Cấu trúc HTML đơn giản 3.6 Giới thiệu về CSS 3.6 Giới thiệu về CSS
CSS (Cascading Style Sheets) là một ngơn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngơn ngữ đánh dấu (ví dụ như HTML). Có
22
thể hiểu đơn giản rằng, nếu HTML đóng vai trị định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng, …thì CSS sẽ giúp chúng ta có thể “trang trí” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc, …rất nhiều.
Hình 3.17: CSS rule 3.7 Giới thiệu về JavaScript 3.7 Giới thiệu về JavaScript
JavaScript, theo phiên bản hiện hành, là một ngơn ngữ lập trình thơng dịch được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs).
Javascript là một ngơn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, ... thậm chí các trình duyệt trên thiết bị di động cũng có hỗ trợ.
Để có thể hosting trước hết ta cần cài đặt Node.js. Node.js là một nền tảng chạy trên môi trường JavaScript runtime - một trình thơng dịch JavaScript cực nhanh chạy trên trình duyệt Chrome. JavaScript là một ngơn ngữ dựa trên sự kiện, vì vậy bất cứ thứ gì xảy ra trên server đều tạo ra một sự kiện nonblocking. Mỗi kết nối mới sinh ra một sự kiện; dữ liệu nhận được từ một upload form sinh ra một sự kiện data-received; việc truy vấn dữ liệu từ database cũng sinh ra một sự kiện. Trong thực tế, điều này có nghĩa là một trang web Node.js sẽ chẳng bao giờ bị khóa
23
(lock up) và có thể hỗ trợ cho hàng chục nghìn user truy cập cùng lúc. Node.js đóng vai trị của server - Apache - và thơng dịch mã ứng dụng chạy trên nó.
24
Chƣơng 4:
QUY TRÌNH THIẾT KẾ
4.1 Giới thiệu
Đề tài yêu cầu thiết kế một hệ thống điều khiển và giám sát tủ kem. Hệ thống được điều khiển và giám sát bằng từ xa thông qua Web Server.
Ở chương này, khảo sát một số nội dung sau: Sơ đồ khối hệ thống
Trình bày chức năng của từng khối Tính tốn và thiết kế mạch
Sơ đồ nguyên lý toàn hệ thống
4.2 Thiết kế mạch và sơ đồ khối hệ thống
Theo yêu cầu của đề tài, em tiến hành thiết kế sơ đồ khối của hệ thống như hình 4.1:
25
Chức năng từng khối:
Khối cấp nguồn: Cung cấp nguồn điện đã chỉnh lưu hạ áp cho khối điều
khiển hoạt động.
Khối xử lý và điều khiển trung tâm: Tiếp nhận tín hiệu, xử lí và mã hóa
thơng tin để đưa lên các khối giám sát phục vụ cho mục đích theo dõi và quản lý thiết bị.
Khối phát hiện điện áp: Phát hiện trạng thái của thiết bị đang quản lý (đang
chạy/dừng chạy, đủ nhiệt/thiếu nhiệt) để xử lí và gửi về cho khối xử lí trung tâm tiếp nhận.
Khối điều khiển đóng ngắt: Tiếp nhận tín hiệu từ khối xử lí và điều khiển
trung tâm để thực hiện đóng ngắt nguồn điện cho tủ kem
Website thiết bị: Tiếp nhận thông tin từ khối xử lí trung tâm và hồi tiếp
thông tin cho người dùng, đồng thời dùng để thao tác một số chức năng sẵn có của khối điều khiển trung tâm.
Website Quản lý: Tiếp nhận thơng tin từ khối xử lí và điều khiển trung tâm,
ghi lại lịch sử hoạt động, trạng thái và thông tin thiết bị, thông tin wifi, và đưa ra khuyến cáo dựa trên trạng thái hiện tại của thiết bị.
4.3 Tính tốn và thiết kế mạch điện tử
Mạch điện tử có vai trị thu nhận tín hiệu từ thiết bị cần quản lý, server sẽ tiếp nhận tín hiệu từ mạch phần cứng thông qua kết nối wifi để ta có thể dễ dàng quản lý, server cũng có thể lưu lại lịch sử hoạt động, các mốc thời gian thay đổi trạng thái của tủ kem để tiện cho việc theo dõi.
26
4.3.1 Mạch giám sát và điều khiển thiết bị
Hình 4.2: Sơ đồ ngun lý của mạch
Tính năng phát hiện điện áp được đề xuất để theo dõi trạng thái bật/tắt khi máy hoạt động và gửi tín hiệu lên website quản lý cũng như website thiết bị. Vậy nên, phần mạch giám sát và điều khiển cho thiết bị sẽ được chia ra làm 2 phần: Một là phần mạch phát hiện điện áp sử dụng Opto cách li quang PC817, hai là phần mạch điều khiển và gửi tín hiệu cho Node MCU ESP8266. Cả hai phần phân tích hoạt động của mạch đều sẽ được giải thích dưới đây.
4.3.2 Mạch phát hiện điện áp AC
27
Ngõ vào ra trạng thái tủ kem có điện áp AC chỉnh lưu nửa sóng điện áp xoay chiều 220V-AC sẽ đi qua một diode chỉnh lưu theo nguyên lý chỉnh lưu nửa sóng (bán kỳ), khi dạng sóng AC tiêu chuẩn được truyền qua diode chỉnh lưu thì dạng sóng chỉ cịn lại một nửa, hiệu quả của bộ chỉnh lưu nửa sóng là 40.6%, tức là điện áp được bỏ đi một nửa từ 220V xuống cịn ~ 110V, mục đích sử dụng duy nhất một diode thay vì cầu diode là để giảm tải cho điện trở cơng suất phía sau. Chỉ cần duy nhất một diode để chỉnh lưu bán kỳ. Về bản chất, đây là tất cả những gì bộ chỉnh lưu nửa sóng đang làm.
Hình 4.4: Chỉnh lƣu bán kỳ
Điện áp sau khi qua điện trở công suất sẽ được giảm xuống và ổn áp tại diode Zenner với giá trị 4.7V, sử dụng tụ 1000uF và tụ 1uF để chuyển đổi (làm mịn) dạng sóng DC xung thành dạng sóng DC khơng đổi, triệt tiêu các gợn sóng trong dạng sóng.
Dịng điện sau khi đi qua các tụ lọc đã đủ ổn định để cung cấp cho các cấu thành linh kiện còn lại trong mạch hoạt động, khi đó sẽ được truyền qua Opto cách li quang PC817 để nhận biết có điện áp đi qua hay khơng.
28
Hình 4.5: Sơ đồ cấu tạo Opto cách li quang PC817
PC817 là một opto được sử dụng rất phổ biến, nó chứa một LED hồng ngoại và một transistor quang trong cùng một thân linh kiện dạng IC có 4 chân, chủ yếu được sử dụng để cách li hai mạch với nhau.
Khi có điện áp được đặt vào LED hồng ngoại nối trên chân 1 và 2, LED sẽ được kích hoạt và anh sáng được nhận bởi Transistor quang bên trong làm cho nó ở trạng thái bão hịa, từ đó chân 3 và 4 sẽ nối với nhau và cho dòng điện đi qua. Do cấu tạo bên trong Opto là một LED phát và một LED thu, nên dòng điện sau khi đi qua tụ lọc sẽ được mắc thêm một điện trở (trong mạch này sử dụng 470 Ohm).
Hình 4.6: Đèn LED để kiểm tra trạng thái Opto
Do bản thân Opto PC817 là một linh kiện kín cho nên việc kiểm tra và nhận biết Opto có đang hoạt động hay khơng là điều khơng thể. Vì vậy một đèn LED rời được mắc nối thêm bên ngồi có nguồn VCC nối chung với chân số 4, GND nối chung với chân số 3 của Opto. Đèn LED trong quá trình vận hành khi có điện áp chạy qua sẽ sáng để báo hiệu rằng Opto đang hoạt động, giúp cho cơng việc bảo trì
29
sửa chữa mạch về lâu dài sẽ dễ dàng hơn. Tín hiệu bật tắt này cũng tương ứng với tín hiệu bật tắt của tủ kem, do đó chúng ta sẽ nối một đường tín hiệu từ đây vào một chân GPIO của vi điều khiển ESP8266-12F.
4.3.3 Mạch điều khiển sử dụng kết nối wifi
Hình 4.7: Sơ đồ mạch điều khiển
Node MCU ESP8266-12F đóng vai trò là một vi điều khiển trung tâm với nhiệt vụ thu phát Wifi, thu nhận tín hiệu truyền trạng thái của tủ kem truyền về từ mạch phát hiện điện áp, ngồi ra nó cịn hỗ trợ một website local để theo dõi trạng thái của tủ kem theo thời gian thực, có thể thay đổi thơng tin kết nối, khởi động lại mạch hoặc xóa dữ liệu đưa về trang thái ban đầu chỉ với một thao tác nhấn đơn giản.
30
4.4 Lƣu đồ giải thuật
31
Khi có nguồn cấp vào mạch cứng, nó sẽ khởi các chân và cấu hình cho ESP8266 phát Local Wifi. Khi này sẽ đến bước kiểm tra thông tin kết nối:
Không: Lúc này bên trong bộ nhớ của vi điều khiển chưa có dữ liệu tồn tại, khi này hệ thống sẽ cần người dùng kết nối vào wifi nội bộ do chính mạch phần cứng phát ra, đồng thời truy cập vào địa chỉ IP mặc định được cấp sẵn từ trước để kết nối website thiết bị. Người dùng khi này sẽ nhập thông tin wifi và địa chỉ server trên web thiết bị để mạch phần cứng ghi nhận và lưu thông tin vào bộ nhớ, người dùng sẽ không cần phải nhập lại thông tin cho lần kết nối tiếp theo. Mạch phần cứng sẽ thực thi kết nối đúng với thông tin wifi tại nơi lắp đặt mà người dùng nhập vào, khi này wifi tại nới lắp đặt sẽ cấp xuống 1 địa chỉ IP mới tương ứng, người dùng cần truy cập vào địa chỉ IP này thay cho địa chỉ IP mặc định, đồng thời kết nối với đúng thông tin wifi mà mạch phần cứng đang kết nối từ trước để có thể truy cập trở lại web thiết bị.
Có: Khi này bên trong bộ nhớ đã tồn tại thông tin wifi được người dùng nhập từ trước, khi này vi điều khiển sẽ bỏ qua bước khởi tạo Local Wifi và trực tiếp kết nối với thơng tin Wifi đang có sẵn trong bộ nhớ. Để truy cập vào web thiết bị khi này người dùng sẽ thực hiện tương tự như trường hợp trên, kết nối với wifi tại nơi lắp đặt và truy cập địa chỉ IP từ wifi tại nơi lắp đặt cấp xuống. Sở dĩ cách thức kết nối này được cho ra đời để nhằm đảm bảo rằng nhân viên bảo trì có mặt tại nơi đặt tủ kem để kiểm tra và bảo dưỡng, tránh được việc nhờ người khác làm giúp, ảnh hưởng đến chất lượng hoạt động của tủ kem.
Khi khởi tạo các chân và cấu hình cho ESP8266, trong trường hợp đã có sẵn thơng tin Wifi từ trước, bao gồm cả địa chỉ server, mạch phần cứng sẽ tự động khởi tạo port và đường lên web server thông qua JSON, thông tin gửi lên sẽ được in ra dưới dạng chuỗi và gửi lên web server để phục vụ cho việc quản lý. Tại web server, người dùng cũng có thể kiểm tra được mật khẩu, địa chỉ IP tại nơi lắp đặt và thông tin tủ kem để phục vụ cho việc truy cập vào web thiết bị được dễ dàng hơn.
32
4.5 Website quản lý
Website quản lí các tủ kem được sử dụng đồng thời cho doanh nghiệp quản lí cũng như nhân viên giám sát tại tủ, đây là một trong những yếu tố cấu thành quan trọng nhất để hình thành nên hệ thống giám sát và quản lý tủ kem. Tất nhiên phần quản lý này cịn có thể áp dụng cho nhiều hệ thống khác như đã đề cập trên phần sơ lược tổng quan.
Đầu tiên ta đi vào phần giới thiệu website quản lí, truy cập vào tên miền “ctbus.tk:888” ta sẽ thấy giao diện đăng nhập như hình.
Hình 4.10: Giao diện đăng nhập trên website quản lí
(Lưu ý: phần tên miền này có thể thay đổi được tùy vào server của từng doanh nghiệp hay cá nhân)
Để đăng nhập vào website này, nhân viên giám sát phải có một tài khoản quản lí tạo và cấp sẵn, trường hợp này sẽ đăng nhập dưới vai trị quản lí với tài khoản được thiết lập sẵn (username: master, password: 123). Sau khi đăng nhập thành công, website sẽ hiển thị như sau:
33
Hình 4.11: Giao diện website cho ngƣời quản lí
Giao diện cho người quản lí sẽ cho phép xem tất cả các tủ kem trong hệ thống, đồng thời cũng hiển thị thông tin riêng cho từng tủ kem, bao gồm tên tủ kem, IP kết nối, thông tin wifi của tủ kem, thông tin wifi của khách hàng, thông tin cá nhân của khách hàng, địa chỉ khách hàng hạn hợp đồng. Không những thế người quản lí cịn có thể thay đổi thơng tin của khách hàng và thông tin của người giám sát tủ kem qua các chức năng gán đã được định sẵn.
34
Hình 4.12: Tất cả thơng tin của riêng một tủ kem qua giao diện của ngƣời quản lý
35
Bên cạnh giao diện dành cho người quản lý, website còn cung cấp thêm giao diện dành cho nhân viên giám sát. Không giống như bên quản lý, giao diện website dành cho nhân viên giám sát chỉ cho phép xem một số tủ kem do chính nhân viên đó quản lý, chức năng báo hỏng về nhà quản lý khi phát hiện có sự cố, chức năng báo cáo thu hồi để sửa chữa hoặc do hết hạn hợp đồng. Và để có thể quản lý được nhân viên giám sát đó có đến tận nơi tủ kem được đặt để chăm sóc và bảo trì hay khơng, ta cịn có một chức năng rất quan trọng chính là điểm danh (hay còn gọi là check in). Nhân viên có thể quản lý các tủ kem thuộc phân quyền của chính mình bất cứ nơi đâu nhưng chỉ điểm danh được khi kết nối chung với wifi mà tủ kem đang kết nối, điều này làm cho nhân viên giám sát phải đến tận nơi kiểm tra mới có thể thực hiện check in. Phương pháp này khá hữu dụng trong việc phòng chống gian lận khi nhân viên check in từ xa mà không đến tận nơi đặt thiết bị để kiểm tra và theo dõi.
Hình 4.14: Giao diện dành cho nhân viên giám sát chỉ hiển thị các tủ kem