báo cáo bài tập lớn môn học scada nâng cao đề tài nhà thông minh

GIỚI THIỆU

Công nghệ và trí tuệ nhân tạo (AI) đang phát triển mạnh mẽ, đặc biệt trong lĩnh vực nhà thông minh Sự phủ sóng của internet đã làm thay đổi thế giới và cải thiện đời sống hàng ngày của con người Nhờ vào điện thoại thông minh và AI, cuộc sống trở nên tiện nghi và nhanh chóng hơn bao giờ hết.

Sự phát triển của công nghệ đã biến ngôi nhà và các thiết bị chúng ta sử dụng trở nên thông minh, không còn là những vật dụng vô tri Những thiết bị này có khả năng giao tiếp, thực hiện mệnh lệnh và tối ưu hóa nhu cầu của chúng ta Nhà thông minh ngày càng trở nên phổ biến, mặc dù không phải ai cũng có cơ hội tiếp cận Là sản phẩm của cuộc cách mạng công nghiệp 4.0, nhà thông minh ứng dụng các công nghệ tiên tiến như hồng ngoại, điện thoại thông minh, IoT và công nghệ đám mây, giúp tự động hóa nhiều công việc trong nhà.

WEB SCADA

ĐẶT VẤN ĐỀ

Với sự phát triển nhanh chóng của khoa học kỹ thuật và công nghệ thông tin, Việt Nam đang chứng kiến xu hướng ứng dụng công nghệ 4.0 trong các lĩnh vực công nghiệp và đời sống Sự bùng nổ của Internet và thiết bị di động thông minh đã dẫn đến khái niệm IoT (Internet of Things), tạo điều kiện cho việc điều khiển thiết bị điện trở nên dễ dàng và thông minh hơn Xuất phát từ nhu cầu này, chúng tôi đã nghiên cứu và chọn đề tài “Thiết kế hệ thống điều khiển và giám sát nồng độ khí ở môi trường thông qua Webserver sử dụng board Arduino và Esp8266” nhằm tiếp cận công nghệ trong thời đại 4.0.

Hệ thống tài nguyên của Arduino và Esp8266 được tối ưu hóa cho các ứng dụng IoT với công suất thấp, giúp giám sát thiết bị một cách dễ dàng Thông qua hệ thống này, người dùng có thể theo dõi các thông số như thời gian hoạt động một cách hiệu quả.

3 download by : skknchat@gmail.com trạng thái của thiết bị sẽ được đưa lên website để người dùng có thể tương tác một cách trực quan về hệ thống.

TỔNG QUAN VỀ MẠNG INTERNET

Internet là một hệ thống thông tin toàn cầu, cho phép truy cập công khai và kết nối hàng ngàn mạng máy tính nhỏ hơn từ doanh nghiệp, viện nghiên cứu, trường đại học, người dùng cá nhân và chính phủ Hệ thống này sử dụng công nghệ chuyển giao dữ liệu theo kiểu nối chuyển gói (packet switching) dựa trên giao thức IP tiêu chuẩn hóa, cung cấp một lượng thông tin và dịch vụ khổng lồ cho người dùng trên toàn thế giới.

Internet cung cấp nhiều tiện ích hữu ích cho người dùng, bao gồm hệ thống thư điện tử (email), trò chuyện trực tuyến (chat), công cụ tìm kiếm (search engine), dịch vụ thương mại và chuyển tiền, cùng với các dịch vụ y tế và giáo dục như khám bệnh từ xa và lớp học ảo.

Internet là một mạng lưới các máy tính kết nối qua dây đồng, cáp quang và nhiều phương tiện khác Trong khi đó, www (World Wide Web) là một tập hợp các tài liệu liên kết thông qua siêu liên kết (hyperlink) và địa chỉ URL Người dùng có thể truy cập vào các tài liệu này thông qua Internet, tạo thành một nguồn thông tin khổng lồ với các dịch vụ đa dạng.

2.2 Hoạt động của mạng Internet

Các Giao Thức (Protocols): là tập các luật mà các máy tính phải tuân theo khi giao tiếp trên Internet.

4 download by : skknchat@gmail.com

The Transmission Control Protocol (TCP) establishes a connection between two computers for data transmission, segmenting the data into smaller packets and ensuring reliable data transfer As a connection-oriented protocol, TCP guarantees the integrity and order of the transmitted data.

Giao thức Datagram Người Dùng (UDP) cho phép thiết lập kết nối nhanh chóng giữa các máy tính để truyền tải dữ liệu, nhưng không đảm bảo tính chắc chắn trong quá trình truyền UDP cung cấp ít dịch vụ để khắc phục lỗi, điều này khiến nó phù hợp cho các ứng dụng yêu cầu tốc độ cao hơn là độ tin cậy.

Internet Protocol (IP): điều chỉnh đường đi của những gói dữ liệu đường truyền nhận trên Internet TCP là giao thức phi kết nối (connectionless protocol).

HTTP: cho phép trao đổi thông tin trên Internet.

FTP: cho phép truyền nhận file trên Internet.

SMTP: cho phép gửi thư điện tử trên Internet.

POP3: cho phép nhận thư điện tử trên Internet.

TCP/IP là giao thức chuẩn cho giao tiếp trên Internet nhờ tính độc lập với nền tảng hệ thống và không thuộc quyền sở hữu của bất kỳ tổ chức nào Địa chỉ IP (IP Address) là thành phần quan trọng trong giao thức này.

Internet là một mạng lưới kết nối rộng lớn giữa các máy tính Mỗi máy tính trên mạng được xác định bằng một địa chỉ IP, bao gồm bốn số nhỏ hơn 255, được ngăn cách bởi dấu chấm.

Hệ thống tên miền (DNS - Domain Name System) giúp dễ dàng xác định máy tính trên mạng Internet, vì mỗi máy tính được nhận diện qua địa chỉ IP, nhưng địa chỉ này rất khó nhớ Do đó, hệ thống tên miền được sử dụng để đặt tên cho các máy tính, tạo điều kiện thuận lợi cho người dùng trong việc truy cập.

Ví dụ: tên miền www.yahoo.com ứng với địa chỉ IP 216.109.127.28.

TCP/IP là bộ giao thức thiết yếu giúp kết nối các hệ thống mạng khác nhau, bao gồm cả mạng cục bộ và Internet toàn cầu Viết tắt của Transmission Control Protocol và Internet Protocol, TCP/IP hiện nay được sử dụng phổ biến trong nhiều ứng dụng mạng.

TCP/IP không chỉ bao gồm hai giao thức mà thực chất là một tập hợp của nhiều giao thức, được gọi là hệ giao thức hay bộ giao thức (Suite Of Protocols) Mô hình TCP/IP được xem là phiên bản giản lược của mô hình tham chiếu OSI, với bốn tầng được sắp xếp theo thứ tự từ trên xuống.

+ Tầng ứng dụng (Application Layer)

+ Tầng giao vận (Transport Layer) +Tầng mạng (Internet Layer)

+ Tầng liên mạng (Network Interface Layer)

Hình 1: Mô hình TCP/IP

Tầng liên mạng (Network Interface Layer) có vai trò quan trọng trong việc gửi và nhận dữ liệu qua các phương tiện truyền dẫn Tầng này bao gồm thiết bị giao tiếp mạng như Card Mạng và Cáp Mạng, cùng với các chương trình cung cấp thông tin cần thiết để hoạt động và truy cập đường truyền vật lý thông qua các thiết bị này.

Tầng mạng (Internet Layer) nằm trên tầng liên mạng, có chức năng gán địa chỉ, đóng gói và định tuyến dữ liệu Bốn giao thức quan trọng nhất trong tầng này bao gồm IPv4, IPv6, ICMP và IGMP.

• IP (Internet Protocol): Có chức năng gán địa chỉ cho dữ liệu trước khi truyền và định tuyến chúng tới đích.

• ARP (Address Resolution Protocol): Có chức năng biên dịch địa chỉ IP của máy đích thành địa chỉ MAC (Media Access Control).

• ICMP (Internet Control Message Protocol): Có chức năng thông báo lỗi trong trường hợp truyền dữ liệu bị hỏng.

• IGMP (Internet Group Management Protocol): Có chức năng điều khiển truyền đa hướng (Multicast).

Tầng giao vận (Transport Layer) chịu trách nhiệm thiết lập phiên truyền thông giữa các máy tính và quy định phương thức truyền dữ liệu Hai giao thức chính trong tầng này là TCP (Transmission Control Protocol) và UDP (User Datagram Protocol).

TCP cung cấp kênh truyền thông kết nối và đảm bảo truyền dữ liệu tin cậy giữa hai trạm Nó chia nhỏ các gói tin của tầng trên thành kích thước phù hợp cho tầng mạng dưới, đồng thời sử dụng cơ chế báo nhận và đặt hạn chế thời gian time-out để bên nhận biết các gói tin đã gửi Với khả năng truyền các gói tin lớn và yêu cầu xác nhận từ phía nhận, TCP giúp tầng trên không cần lo lắng về tính tin cậy của dữ liệu.

UDP cung cấp dịch vụ đơn giản cho tầng ứng dụng với kênh truyền thông phi kết nối, cho phép gửi các gói dữ liệu từ trạm này đến trạm khác mà không đảm bảo chúng đến đích Các ứng dụng sử dụng UDP thường truyền gói dữ liệu nhỏ, và độ tin cậy của dữ liệu phụ thuộc vào từng ứng dụng cụ thể Do đó, các cơ chế đảm bảo độ tin cậy cần được thực hiện bởi tầng ứng dụng phía trên.

WEB SERVER VÀ CƠ SỞ DỮ LIỆU

Bản chất của phát triển website là tạo ra các giao tiếp hiệu quả giữa hai chủ thể khác nhau thông qua giao thức HTTP.

Server: giữ vai trò phục vụ cho trang cần được hiển thị

Client: gửi yêu cầu trang đến server, và hiển thị chúng trên trình duyệt cho người dùng Trong hầu hết các trường hợp, client thường là trình duyệt web.

Việc lựa chọn ngôn ngữ lập trình cho website phụ thuộc vào môi trường hoạt động, bao gồm máy chủ (server) và máy khách (client) Do đó, ngôn ngữ lập trình có thể được phân chia thành hai loại chính: ngôn ngữ phía máy chủ (server-side) và ngôn ngữ phía máy khách (client-side).

Ngôn ngữ lập trình chạy trên client chủ yếu giúp hiển thị nội dung và tạo trang tương tác trên trình duyệt, trong khi các ngôn ngữ lập trình phía server thực hiện các tác vụ phức tạp hơn Chúng được web server thông dịch để trả về phản hồi, quản lý yêu cầu người dùng, xử lý sự kiện, cũng như lưu trữ và trích xuất dữ liệu từ cơ sở dữ liệu.

3.2 Khái quát về ngôn ngữ HTML

3.2.1 HTML là gì? Giải thích rõ về ngôn ngữ Markup Hypertext

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ giúp người dùng tạo và cấu trúc các thành phần trên trang web hoặc ứng dụng, bao gồm việc phân chia đoạn văn, tiêu đề, liên kết và các trích dẫn.

HTML không phải là ngôn ngữ lập trình, nên nó không thể thực hiện các chức năng “động” Thay vào đó, HTML giống như Microsoft Word, được sử dụng để bố cục và định dạng trang web.

Khi làm việc với HTML, chúng ta sử dụng cấu trúc mã đơn giản bao gồm các thẻ và thuộc tính để đánh dấu nội dung trên trang web Chẳng hạn, để tạo một đoạn văn, chúng ta chỉ cần đặt văn bản giữa cặp thẻ mở

và thẻ đóng

Đây là cách bạn thêm đoạn văn trong HTML.

Bạn có thể thêm nhiều đoạn văn!

HTML được phát minh bởi Tim Berners-Lee, một nhà vật lý tại CERN, Thụy Sĩ Ông đã nảy ra ý tưởng về hệ thống hypertext dựa trên nền tảng Internet.

Hypertext là văn bản có chứa các liên kết cho phép người đọc truy cập ngay lập tức Năm 1991, Anh đã phát hành phiên bản đầu tiên của HTML.

18 tag HTML Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới.

Theo Mozilla Developer Network: HTML Element Reference, hiện tại có hơn

140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại).

HTML đã trở thành chuẩn mực quan trọng cho các website, với sự phát triển và quản lý bởi Tổ chức W3C (World Wide Web Consortium) Bạn có thể dễ dàng theo dõi các cập nhật mới nhất về ngôn ngữ này trên trang web của W3C.

3.2.3 HTML hoạt động như thế nào?

HTML documents là các tệp có đuôi html hoặc htm, có thể được mở bằng bất kỳ trình duyệt web nào như Google Chrome, Safari hay Mozilla Firefox Các trình duyệt này sẽ đọc các tệp HTML và hiển thị nội dung lên internet, giúp người dùng dễ dàng tiếp cận thông tin.

Thông thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng.

Mỗi trang HTML bao gồm một tập hợp các thẻ (elements), giống như việc xây dựng các khối cho một trang web Những thẻ này tạo nên cấu trúc cây thư mục, bao gồm các phần như section, paragraph, heading và các khối nội dung khác.

3.2.4 Ưu điểm và nhược điểm của HTML a) Ưu điểm:

Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.

Sử dụng mượt mà trên hầu hết mọi trình duyệt

Có quá trình học đơn giản và trực tiếp.

Mã nguồn mở và hoàn toàn miễn phí.

Markup gọn gàng và đồng nhất.

Chuẩn chính của web được vận hành bởi World Wide Web Consortium

Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js, nhưng chủ yếu được sử dụng cho các trang web tĩnh Đối với các tính năng động, cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ ba như PHP.

Nó có khả năng thực thi một số logic nhất định cho người dùng, do đó hầu hết các trang cần được tạo riêng biệt, ngay cả khi sử dụng các yếu tố giống nhau như headers và footers.

Một số trình duyệt chậm hỗ trợ tính năng mới.

Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ không render được tag mới)

3.3 Khái quát về ngôn ngữ CSS

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm và định dạng các phần tử do HTML tạo ra Nói một cách đơn giản, CSS giúp tạo phong cách cho trang web Trong khi HTML định hình các phần tử như đoạn văn, tiêu đề và bảng, CSS cho phép chúng ta thêm các kiểu dáng như bố cục, màu sắc, font chữ và cấu trúc cho các phần tử HTML đó.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.

CSS hoạt động bằng cách tìm kiếm các vùng chọn, bao gồm tên thẻ HTML, ID, class và nhiều kiểu khác Sau khi xác định được vùng chọn, CSS sẽ áp dụng các thuộc tính cần thiết để thay đổi kiểu dáng của chúng.

LẬP TRÌNH WEBSITE

4.1 Phần mềm lập trình cho Website a) Visual Studio Code là gì?

Visual Studio Code là một trình soạn thảo mã nguồn mạnh mẽ được phát triển bởi Microsoft Ra mắt lần đầu vào năm 2015 và chính thức phát hành vào năm 2016, công cụ này đã nhanh chóng trở thành lựa chọn phổ biến cho lập trình viên nhờ vào tính năng linh hoạt và giao diện thân thiện.

Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn mở, miễn phí, có dung lượng nhẹ và hoạt động mạnh mẽ trên ba nền tảng: macOS, Linux và Windows Nhờ vào những ưu điểm này, VS Code đã trở thành lựa chọn phổ biến của nhiều lập trình viên.

Hình 3: Phần mềm Visual Studio Code

Visual Studio Code là sự kết hợp hoàn hảo giữa IDE và Code Editor, mang đến cho người dùng nhiều tiện ích hữu ích như đổi theme, hỗ trợ Git, cải tiến mã nguồn, syntax highlighting, cùng với các phím tắt và nhiều tùy chọn khác.

Visual Studio Code hiện đang là môi trường phát triển phổ biến nhất cho lập trình viên, theo khảo sát của Stack Overflow năm 2019, với hơn 50% người dùng chọn sử dụng, tăng từ 35% trong năm 2018 Sự gia tăng này chứng tỏ độ phủ sóng rộng rãi và tính hữu ích mà VSCode mang lại cho cộng đồng lập trình.

Hình 4: Khảo sát về môi trường phát triển 2019

Visual Studio Code là môi trường phát triển được ưa chuộng nhất năm 2019 b) Visual Studio Code dành cho những đối tượng nào?

VSCode thích hợp sử dụng cho nhiều đối tượng khác nhau như:

Lập trình viên chuyên nghiệp.

Người yêu thích công việc lập trình hoặc đang theo học chuyên ngành công nghệ thông tin.

Visual Studio Code là một công cụ lý tưởng cho những người yêu thích lập trình, phục vụ cho cả công việc và học tập cá nhân Một trong những tính năng nổi bật của Visual Studio Code là Intellisense, giúp nâng cao hiệu suất lập trình và tối ưu hóa trải nghiệm người dùng.

Intellisense là một công nghệ kết hợp trí tuệ nhân tạo với tính năng tự động hoàn thành mã, cung cấp nhiều đề nghị, gợi ý và mô tả ngắn trong quá trình lập trình Những gợi ý này được tính toán dựa trên các yếu tố như cú pháp, ngôn ngữ lập trình, hàm và biến.

Hình 5: Phần mềm Visual Studio Code

Visual Studio Code hỗ trợ Intellisense cho nhiều ngôn ngữ lập trình như JSON, JavaScript, TypeScript, CSS, HTML, Less và Sass Ngoài ra, người dùng có thể cài đặt thêm IntelliSense thông qua các extension cho các ngôn ngữ khác hoặc tùy chỉnh tính năng này theo nhu cầu cá nhân.

Git trên Visual Studio Code cung cấp đầy đủ các hành động cơ bản như push và commit code Qua từng phiên bản, tính năng hỗ trợ Git ngày càng được cải thiện, mang lại sự tiện ích tối đa cho người dùng.

Hỗ trợ debug trong VSCode là một tính năng quan trọng, mặc dù mặc định chỉ hỗ trợ Node JS Người dùng có thể cài đặt thêm các extension để mở rộng khả năng debug cho nhiều ngôn ngữ lập trình khác nhau, đáp ứng nhu cầu sử dụng đa dạng.

Terminal là một chương trình giao diện dòng lệnh quan trọng cho lập trình viên Trong VSCode, bạn có thể mở nhiều tab terminal trong thư mục làm việc của mình, điều này giúp tăng cường hiệu quả công việc.

Khả năng mở rộng và tùy chỉnh

Visual Studio Code cung cấp cho người dùng khả năng tùy chỉnh tuyệt vời như: tùy chỉnh theme, kích thước, font chữ, keyboard shortcut, coding style, tùy

16 download by : skknchat@gmail.com chỉnh tính năng,… một cách linh hoạt Bên cạnh đó, bạn cũng có thể tùy chỉnh trên từng workshop vô cùng tiện lợi.

Tính năng này giúp người dùng nhanh chóng kiểm tra tên hàm, các bình luận và tên biến sai chính tả, từ đó tạo điều kiện thuận lợi cho việc chỉnh sửa một cách dễ dàng và nhanh chóng hơn.

Xây dựng server cho CSS/HTML/JS bằng tính năng Live Server giúp tự động làm mới trình duyệt khi có thay đổi trong mã, từ đó tiết kiệm thời gian hiệu quả.

Ngoài ra, VSCode còn cung cấp rất nhiều tính năng hữu ích khác. d) Lý do nên sử dụng Visual Studio Code?

Nhỏ gọn và tiện lợi

VScode là một trình soạn thảo mã nhẹ, chiếm ít RAM, giúp tối ưu hóa hiệu suất làm việc Sự kết hợp giữa Code Editor và DIE mang lại sự linh hoạt, tiết kiệm thời gian so với việc sử dụng các phần mềm hỗ trợ khác.

VSCode là một công cụ phát triển mạnh mẽ với tốc độ làm việc nhanh chóng, cho phép người dùng sử dụng nhiều tính năng đồng thời như đối sánh dấu ngoặc và đánh dấu cú pháp Ngoài ra, VSCode cũng hỗ trợ người dùng trong việc xây dựng, chỉnh sửa và gỡ lỗi mã nguồn một cách đơn giản và dễ dàng.

Hình 6: Lập trình trong Visual Hỗ trợ đa ngôn ngữ lập trình

VSCode hỗ trợ đa dạng ngôn ngữ lập trình như C#, C/C++, HTML, Visual Basic, F#, JavaScript, và CSS, giúp phát hiện lỗi trong mã nguồn một cách dễ dàng và nhanh chóng.

MOBILE APP

TỔNG QUAN VỀ MOBILE APP

Ứng dụng di động là phần mềm được thiết kế đặc biệt cho các thiết bị như smartphone và tablet, cho phép người dùng dễ dàng truy cập vào nội dung mong muốn ngay trên thiết bị di động của họ.

Ứng dụng di động là nguồn khách hàng tiềm năng phong phú mà doanh nghiệp đang tìm kiếm Chính vì lý do này, hiện nay có rất nhiều ứng dụng được phát triển trong các lĩnh vực và ngành nghề đa dạng.

2 Những ưu điểm của mobile app.

Smartphone đang trở nên phổ biến hơn bao giờ hết, với hầu hết mọi người, từ doanh nhân đến những người sử dụng mạng xã hội, đều tích cực sử dụng các ứng dụng trên thiết bị này.

Hình 10: Ưu điểm Mobile app

Khả năng hiển thị của smartphone ngày càng trở nên nổi bật, thu hút người dùng với khối lượng công việc lớn mà trước đây chỉ có thể thực hiện trên máy tính xách tay hoặc máy tính để bàn Các ứng dụng di động hiện nay được tối ưu hóa để mang lại trải nghiệm hiển thị tốt nhất cho người dùng.

Khả năng giám sát từ xa hiệu quả: Sử dụng phần mềm di động, người dùng có thể dễ dàng theo dõi và quản lý công việc từ xa một cách thuận tiện.

Gia tăng trải nghiệm người dùng: Ứng dụng di động cung cấp cho người sử dụng những trải nghiệm độc đáo và gần gũi mà không có website di động hay công cụ nào khác có thể sánh kịp.

ỨNG DỤNG MOBILE APP TRONG ĐỒ ÁN MÔN HỌC

1 Tạo phần mềm Android với MIT App Inventor 2.

MIT App Inventor cho Android là một ứng dụng web mã nguồn mở, ban đầu do Google phát triển và hiện do Viện Công nghệ Massachusetts (MIT) duy trì Nền tảng này cho phép lập trình viên tạo ra ứng dụng phần mềm cho hệ điều hành Android thông qua giao diện đồ họa, nơi người dùng có thể kéo và thả các khối mã để phát triển ứng dụng tương thích với thiết bị Android.

MIT App Inventor có mục tiêu chính là hỗ trợ những người không có kiến thức lập trình tạo ra ứng dụng hữu ích cho hệ điều hành Android Phiên bản mới nhất hiện nay là MIT App Inventor 2.

Hình 12: App Inventor liên kết tài khoản Google

Hiện nay, MIT đã phát triển hoàn thiện App Inventor, cho phép người dùng dễ dàng truy cập qua tài khoản Google Những lập trình viên mới hoặc bất kỳ ai muốn tạo ứng dụng Android chỉ cần vào trang web của MIT, đăng nhập bằng tài khoản Google và bắt đầu xây dựng ý tưởng của mình từ những mảnh ghép đơn giản.

Hình 13: Giao diện đăng nhập trên điện thoại

Hình 14: Giao diện hệ thống trên điện thoại

Chức năng, khả năng giám sát và điều khiển của giao diện:

Cập nhật liên tục nhiệt độ , độ ẩm thực tế.

Cập nhật liên tục thông số nồng độ không khí theo đơn vị ppm Bật tắt máy lạnh, quạt, đèn trên app.

Tốc độ phản hồi giữa App và Node Mcu Esp32 cao – chưa đến 1s

3 Phần code lập trình của giao diện.

DESKTOP

TẠO GIAO DIỆN TRÊN MÁY TÍNH TRONG ĐỒ ÁN MÔN HỌC

Hình 15: Phần mềm thiết kế giao diện Visual Studio

Visual Studio là một hệ thống toàn diện cho phát triển ứng dụng, tích hợp trình chỉnh sửa mã, thiết kế và gỡ lỗi trong một phần mềm duy nhất Người dùng có thể dễ dàng viết code, sửa lỗi và chỉnh sửa thiết kế ứng dụng, tương tự như khi phát triển ứng dụng Xamarin, UWP bằng XAML hay Blend Phần mềm hỗ trợ đa ngôn ngữ lập trình, cho phép sử dụng nhiều ngôn ngữ như C#, F#, C/C++, HTML, CSS, Visual Basic, JavaScript, và có khả năng phát hiện lỗi trong các chương trình một cách hiệu quả.

Hình 16: Giao diện đăng nhập hệ thống trên máy tính

Hình 17: Giao diện Visual Studio được thiết kế

Chức năng, khả năng giám sát và điều khiển của giao diện:

Gửi và nhận dữ liệu lên Firebase liên tục.

Cập nhật liên tục nhiệt độ ( 0 C), độ ẩm (%) thực tế

Cập nhật liên tục thông số nồng độ không khí theo đơn vị ppm Bật tắt máy lạnh, quạt, đèn trên giao diện C#.

Hiện thị biểu đồ nhiệt độ ( 0 C) theo thời gian

3 Phần code lập trình của giao diện. namespace fireConfig

/ private System.ComponentModel.IContainer components = null; /

/ Clean up any resources being used.

/ true if managed resources should be disposed; otherwise, false. protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose();

#region Windows Form Designer generated code

/ Required method for Designer support - do not modify

/ the contents of this method with the code editor.

The code snippet initializes a component within a Windows Forms application, creating a container for the components and defining several UI elements, including buttons and labels Key elements include 'button1', 'onquat', and 'bttatled', along with labels for displaying temperature and additional information This setup is essential for building a user interface that interacts with temperature data.

The article describes a software interface featuring various components, including labels, group boxes, solid gauges, and picture boxes Key elements include buttons for user interaction and a list view to display data, supported by a timer for dynamic updates The interface is designed using Windows Forms, showcasing a structured layout for efficient user experience.

((System.ComponentModel.ISupportInitialize) (this.pictureBox1)).BeginInit();

((System.ComponentModel.ISupportInitialize) (this.pictureBox4)).BeginInit(); this.groupBox2.SuspendLayout(); this.SuspendLayout();

/ this.button1.Font = new System.Drawing.Font("Microsoft Sans Serif", 15.75F, ((System.Drawing.FontStyle)

The button1 control is configured with a bold and italic font style, positioned at coordinates (0, 240) on the form It is named "button1" and has a size of 132 by 71 pixels, with a tab index of 2 The button displays the text "Show Data" and is set to use the default visual style An event handler is attached to the button's Click event, linking it to the button1_Click method.

/ this.Temperature.AutoSize = true; this.Temperature.Font = new System.Drawing.Font("Microsoft Sans Serif", 30F, System.Drawing.FontStyle.Bold,

The Temperature control is positioned at coordinates (292, 41) with a size of 257 by 46 pixels It is identified by the name "Temperature" and is assigned a tab index of 5.

/ this.label2.AutoSize = true; this.label2.Font = new System.Drawing.Font("Microsoft Sans Serif", 30F, System.Drawing.FontStyle.Bold,

The label for humidity is positioned at coordinates (1358, 41) with a size of 183 by 46 pixels It is identified as "label2" and has a tab index of 6, displaying the text "Humidity."

The label is configured to automatically adjust its size and is styled with a bold 30-point Microsoft Sans Serif font It is positioned at coordinates (872, 41) on the form.

44 download by : skknchat@gmail.com this.label3.Name = "label3"; this.label3.Size = new System.Drawing.Size(72, 46); this.label3.TabIndex = 7; this.label3.Text = "Air";

/ this.onquat.Font = new System.Drawing.Font("Microsoft Sans

The button "ON Máy Lạnh" is designed with a bold and italic font style, positioned at coordinates (321, 43) within the form It has a size of 132 by 71 pixels and is assigned a tab index of 8 When clicked, it triggers the event handler btled_Click, enhancing user interaction with the application.

/ this.bttatled.Font = new System.Drawing.Font("Microsoft Sans

The button "bttatled" is designed with a bold and italic font style, positioned at coordinates (459, 43) on the form It has dimensions of 132 by 71 pixels and is assigned a tab index of 9 The button's text reads "OFF Máy Lạnh" and it utilizes the default visual style for buttons A click event handler is attached to the button, triggering the "bttatled_Click" method when the button is clicked.

/ this.label4.AutoSize = true; this.label4.Font = new System.Drawing.Font("Microsoft Sans Serif", 48F, System.Drawing.FontStyle.Regular,

System.Drawing.GraphicsUnit.Point, ((byte)(0))); this.label4.ForeColor = System.Drawing.SystemColors.Highlight; this.label4.Location = new System.Drawing.Point(568, -5);

The code snippet showcases the configuration of a label in a Windows Forms application, specifically designed for a smart home interface The label, named "label4," features a margin of 2 pixels, a size of 465 by 73 pixels, and is assigned a tab index of 15 Its displayed text is "SMART HOME," indicating its purpose within the application.

The label5 control is configured with a red foreground color and positioned at coordinates (718, 114) within the form It has a margin of 2 pixels on the top and bottom, and its size is set to 0 width and 37 height The control is identified by the name "label5" and has a tab index of 16.

The label6 control in the application is configured with a red foreground color and positioned at coordinates (45, 114) It has a margin of 2 pixels on the top and bottom, and its size is set to a width of 0 pixels and a height of 37 pixels Additionally, label6 is assigned a tab index of 17 for navigation purposes.

This code snippet sets the properties of a label in a user interface, adjusting its size to fit the content automatically It specifies a font style of "Microsoft Sans Serif" at a size of 24 points, applies a regular font style, and defines the label's text color as red.

The code snippet includes a label configuration for a Windows Forms application, defining its location, margin, name, size, and tab index Specifically, it sets the label's position at coordinates (373, 114) with a size of 0 by 37 pixels Additionally, it attaches a click event handler to the label, allowing for interaction when the label is clicked.

The group box is configured with a background color of System.Drawing.SystemColors.ActiveCaption and includes various controls such as three solid gauges, multiple labels, and several picture boxes It features a button and is styled with a font size of 25.8F using the Microsoft Sans Serif typeface.

Định dạng
Số trang	59
Dung lượng	792,73 KB