thiết kế và chế tạo mô hình giám sát điều khiển bể cá sử dụng vi điều khiển esp32

ESP32 không chỉ có khả năng kết nối Internet thông qua Wi-Fi mà còn tích hợp các cổng giao tiếp như GPIO, I2C, và SPI, tạo điều kiện thuận lợi cho việc kết nối và điều khiển các thiết bị

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA ĐIỆN – ĐIỆN TỬ

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

NGÀNH: CÔNG NGHỆ KỸ THUẬT ĐIỆN TỬ - VIỄN THÔNG

CHUYÊN NGÀNH: ĐIỆN TỬ - MÁY TÍNH

ĐỀ TÀI: THIẾT KẾ VÀ CHẾ TẠO MÔ HÌNH GIÁM SÁT, ĐIỀU

KHIỂN BỂ CÁ SỬ DỤNG VI ĐIỀU KHIỂN ESP32

Nguyễn Đăng Chương

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA ĐIỆN – ĐIỆN TỬ

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

NGÀNH: CÔNG NGHỆ KỸ THUẬT ĐIỆN TỬ - VIỄN THÔNG

CHUYÊN NGÀNH: ĐIỆN TỬ - MÁY TÍNH

ĐỀ TÀI: THIẾT KẾ VÀ CHẾ TẠO MÔ HÌNH GIÁM SÁT, ĐIỀU

KHIỂN BỂ CÁ SỬ DỤNG VI ĐIỀU KHIỂN ESP32

Nguyễn Đăng Chương

1911505410107

Đà Nẵng, 12/2023

LỜI MỞ ĐẦU

Ngày nay, sự phát triển nhanh chóng của khoa học công nghệ hiện nay đã làm cho cuộc sống của con người trở nên hiện đại hơn Cùng với xu hướng phát triển của khoa học kĩ thuật ngày càng mạnh mẽ trên toàn thế giới, thì việc áp dụng chúng vào cuộc sống luôn mang lại nhiều lợi ích Chúng ta phải nắm bắt và vận dụng nó một cách có hiệu quả, nhằm góp phần vào sự phát triển nền khoa học kỹ thuật nói chung và trong sự phát triển kỹ thuật điện từ nói riêng để ứng dụng vào thực tiễn góp phần đưa cuộc sống con người ngày càng tốt hơn

Bằng cách sử dụng kit ESP32 có khả năng kết nối internet, chúng ta có thể dùng chúng để giám sát, thu thập dữ liệu và điều khiển các thiết bị khác Các dữ liệu thông tin và điều khiển đó được lưu trữ trên hosting giúp chúng ta có thể xem và điều khiển các thiết bị khác thông qua các website Có thể tác dụng tự động hóa hoàn toàn hoặc bản tự động tùy thuộc vào người điều khiển

Với việc áp dụng khoa học kỹ thuật thì giờ đây, người dùng có thể giám sát, điều khiển các thiết bị hỗ trợ nuôi cá và quản lý chúng từ xa Họ có thể tự điều khiến tất bật hay xem thông tin của đèn hay máy sưởi, máy oxi ngay cả khi họ và thiết bị cách nhau ở khoảng cách rất xa, người dùng chỉ cần thiết bị có kết nối internet và truy cập và website để quản lý và giảm sát bể cá ở mọi lúc mọi nơi

Mặc dù đã cố gắng hoàn thành nhiệm vụ đề tài đặt ra và đảm bảo thời hạn nhưng do kiến thức còn hạn hẹp nên chắc chắn sẽ không tránh khỏi những thiếu sót, mong quý Thầy/Cô và các bạn sinh viên thông cảm Nhóm mong nhận được những ý kiến của Thầy/Cô và các bạn viên

Nhóm chúng em xin chân thành cảm ơn !

LỜI CAM ĐOAN

Tôi xin cam đoan đồ án tốt nghiệp: “THIẾT KẾ VÀ CHẾ TẠO MÔ HÌNH GIÁM SÁT, ĐIỀU KHIỂN BỂ CÁ SỬ DỤNG VI ĐIỀU KHIỂN ESP32” là công trình nghiên cứu của bản thân chúng tôi dưới sự hướng dẫn của Th.S Nguyễn Văn Thịnh

Các kết quả công bổ trong đồ án tốt nghiệp là trung thực và không sao chép từ bất kỳ công trình nào khác

Đã thực hiện chỉnh sửa, bổ sung theo đúng yêu cầu của GV phản biện và Hội đồng chấm

Nhóm sinh viên thực hiện

Trần Văn Hùng – Nguyễn Đăng Chương

CHƯƠNG 1 GIỚI THIỆU MÔ HÌNH GIÁM SÁT VÀ ĐIỀU KHIỂN BỂ CÁ 3

1.1 TỔNG QUAN VỀ KỸ THUẬT NUÔI CÁ CẢNH 3

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 10

2.1 CÔNG NGHỆ INTERNET OF THINGS 10

2.1.1 Nguồn gốc của IoT 10

2.1.2 Khái niệm của IoT 10

2.1.3 Hoạt động của IoT 10

2.1.4 Kiến trúc của IoT 11

2.1.5 Đặc điểm công nghệ IoT 12

2.1.6 Ưu và nhược điểm của IoT 12

2.3.1 Thông tin của Arduino IDE 17

2.3.2 Ngôn ngữ lập trình C/C++ cho Arduino 17

2.6.1 Ưu điểm của MySQL 28

2.6.2 Nhược điểm của MySQL 28

3.3.11 Máy cho cá ăn tự động 42

3.3.12 Camera giám sát hệ thống mô hình 43

3.3.13 Màn LCD 44

3.4 LƯU ĐỒ GIẢI THUẬT VI ĐIỀU KHIỂN ESP32 44

3.4.1 Lưu đồ giải thuật chương trình con cảm biến pH 47

3.4.2 Lưu đồ giải thuật chương trình con cảm biến nhiệt độ 49

3.5 TIẾN HÀNH VẼ MẠCH PROTEUS 49

3.6 THIẾT KẾ GIAO DIỆN ĐIỀU KHIỂN MÔ HÌNH 51

3.7 HƯỚNG DẪN ĐIỀU KHIỂN HỆ THỐNG QUA WEBSITE 52

Hình 2.1 Kiến trúc 3 lớp (A); Kiến trúc 5 lớp (B) 11

Hình 2.2 Module wifi ESP32 14

Hình 2.3 Ví dụ minh họa code C/C++ 17

Hình 2.4 Thư viện của Arduino 18

Hình 2.5 Nút kiểm tra lỗi (Verify) 18

Hình 2.6 Nút tải code vào bo mạch (Upload) 19

Hình 3.3 Module thời gian thực DS1307 34

Hình 3.4 Sơ đồ chân module DS1307 35

Hình 3.5 Máy sưởi thủy sinh 35

Hình 3.13 Máy cho cá ăn tự động 42

Hình 3.14 Mạch thu phát ESP32 – CAM 43

Hình 3.15 Sơ đồ chân của LCD 44

Hình 3.16 Lưu đồ thuật toán toàn bộ hệ thống 45

Hình 3.17 Lưu đồ triển khai 46

Hình 3.23 Giao diện đăng nhập web 51

Hình 3.24 Giao diện điều khiển hệ thống 52

Hình 3.25 Giao diện cài đặt thông số 52

Hình 3.26 Giao diện camera giám sát 53

Hình 3.27 Hộp điều khiển trên hệ thống 53

DANH MỤC CHỮ VIẾT TẮT

IoT Internet of Things Internet vạn vật USB Universal Serial Bus Một chuẩn kết nối có dây DMIPS Dynamic Microscopic Image

Processing Scanner Máy quét xử lý hình ảnh RTC Real-time computing Tính toán thời gian thực VCC Voltage at the common collector Điện áp tại đầu thu chung CPU Central Processing Unit Bộ xử lý trung tâm RAM Random Access Memory Bộ nhớ truy cập tạm thời ROM Read-Only Memory Bộ nhớ chỉ đọc HTML HyperText Markup Language Ngôn ngữ siêu văn bản UART Universal Asynchronous Receiver /

Transmitter Bộ tiếp nhận không đồng bộ HTTP Hyper Text Transfer Protocol Giao thức truyền tải siêu văn bản

PHP Personal Home Page 1 ngôn ngữ lập trình URL Uniform Resource Locator Địa chỉ website

IC Integrated Circuit Mạch tích hợp TM Transverse Magnetic Từ trường ngang TEM Transverse Electric Magnetic Trường điện từ ngang LED Light-Emitting-Diode Đi ốt phát quang GND Gemeinsame Normdatei Đất WPA Wi-Fi Protected Access Chuẩn bảo mật mạng WiFi

MỞ ĐẦU

1 Mục đích thực hiện đề tài Đề tài "Thiết kế và chế tạo mô hình giám sát và điều khiển bể cá sử dụng vi điều khiển ESP32" mang tính chất quan trọng và ứng dụng cao trong lĩnh vực quản lý

và chăm sóc hệ thống nuôi cá Việc phát triển một mô hình giám sát và điều khiển thông minh có thể giúp nâng cao hiệu suất quản lý, tối ưu hóa điều kiện môi trường cho cá, và giảm thiểu những rủi ro đối với sinh sản cá trong bể

Vi điều khiển ESP32, một nền tảng linh hoạt và mạnh mẽ, sẽ đóng vai trò chính trong việc xây dựng hệ thống này ESP32 không chỉ có khả năng kết nối Internet thông qua Wi-Fi mà còn tích hợp các cổng giao tiếp như GPIO, I2C, và SPI, tạo điều kiện thuận lợi cho việc kết nối và điều khiển các thiết bị cảm biến, máy bơi lọc, hệ thống tưới nước, và nhiều thành phần khác của bể cá

Trong quá trình thiết kế, cần xác định những thông số môi trường quan trọng như nhiệt độ, pH, lượng oxy, và mức nước Mô hình giám sát có thể tích hợp cảm biến để theo dõi những thông số này và truyền dữ liệu về ESP32 Hệ thống điều khiển có thể được lập trình để tự động điều chỉnh các yếu tố môi trường, như tăng giảm nhiệt độ, điều chỉnh mức oxy, và duy trì độ pH ổn định

Ngoài ra, việc kết hợp hệ thống giám sát và điều khiển với phần mềm giao diện web sẽ giúp người nuôi cá có thể theo dõi và điều khiển bể cá từ xa Điều này mang lại sự tiện ích và linh hoạt, đồng thời giảm áp lực cho người chăm sóc cá

Với những ưu điểm nêu trên, đề tài này không chỉ mang tính khoa học mà còn đáp ứng nhu cầu thực tế trong việc quản lý hệ thống nuôi cá hiện đại, hứa hẹn đem lại những giải pháp sáng tạo và hiệu quả cho ngành công nghiệp nuôi trồng thủy sản

2 Mục tiêu đề tài

- Tìm hiểu đề tài - Thiết kế mô hình, hệ thống - Chuẩn bị thiết bị cần sử dụng - Kết nối thiết bị hệ thống - Lập trình hệ thồng - Thử nghiệm mô hình - Viết báo cáo

- Hoàn thiện mô hình hệ thống

3 Phạm vi và đối tượng nghiên cứu

- Xác định loại cá, kích thước bể cá và điều kiện môi trường mà hệ thống sẽ được thiết kế cho

- Giám sát nhiệt độ, độ ph của hệ thống điều khiển các thiết bị trong bể - Sử dụng vi điều khiển esp32 trong hệ thống

- Ngôn ngữ lập trình và môi trường phát triển: - Ngôn ngữ lập trình (arduino ide) để lập trình esp32

4 Phương pháp nghiên cứu

- Tham khảo tài liệu, sách hướng dẫn, video hướng dẫn - Tham khảo các nguồn tài liệu từ giáo viên, bạn bè, nhà trường - Vận dụng các phương pháp tổng hợp thông tin, phân tích các dữ liệu, sàng lọc

các thông tin

5 Cấu trúc của đồ án tốt nghiệp

- CHƯƠNG 1: GIỚI THIỆU MÔ HÌNH GIÁM SÁT VÀ ĐIỀU KHIỂN BỂ CÁ Chương này trình bày dặt vẫn để dẫn nhập lý do chọn đề tài, mục tiêu đạt được sau khi thực hiện đề tài, các nội dung nghiên cứu và thực hiện, các giới hạn thông số và bố cục trình bày đồ án

- CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Chương này trình bày dặt vẫn để dẫn nhập lý do chọn đề tài, mục tiêu đạt được sau khi thực hiện đề tài, các nội dung nghiên cứu và thực hiện, các giới hạn thông số và bố cục trình bày đồ án

- CHƯƠNG 3: THIẾT KẾ HỆ THỐNG Chương này trình bày sơ đồ khối của hệ thống, giải thích các khỏi, quy trình hoạt động và tính toán các thông số cần thiết của hệ thống Trình bày và giải thích sơ đồ nguyên lí Tiếp theo là trình bày nội dung tiến hành thi công hệ thông, viết chương trình điều khiển web

CHƯƠNG 1 GIỚI THIỆU MÔ HÌNH GIÁM SÁT VÀ ĐIỀU

Kích thước bể nuôi: Hình dạng và kích thước bể nuôi thay đổi linh hoạt tùy vào sở thích và không gian xung quanh Cơ bản được dựa trên nguyên tắc chiều dài nên gấp đôi chiều rộng và chiều cao, hài hòa với cảnh vật xung quanh

1.1.2 Ánh sáng

Nguồn ánh sáng cho bể cá cảnh tốt nhất đó chính là ánh sáng tự nhiên Tuy nhiên, cá có tính nhạy cảm cao nên không thể để cá tiếp xúc trực tiếp ánh sáng mặt trời trong thời gian quá lâu Vậy nên, nếu bể cá được đặt ngoài trời hay khu vực gần cửa sổ thì bạn nên dùng các tấm màn che cho bể vào thời điểm buổi trưa

Vai trò của ánh sáng trong bể cá Làm tăng vẻ đẹp của bể, ngoài ra sử dụng đèn chiếu sáng sẽ là một phần trang trí cho bể Ánh sáng cần thiết cho quá trình quang hợp của thủy sinh thực vật

Thời gian chiếu sáng: nên khoảng 8 – 15 giờ Các loại ánh sáng thường được dùng trong bể cá cảnh Gồm ánh sáng tự nhiên và ánh sáng nhân tạo Trong đó ánh sáng nhân tạo có ánh sáng nóng (bóng đèn tròn) và ánh sáng huỳnh quang

1.1.3 Sục khí

Hình 1.2 Hệ thống sục khí cung cấp oxy

Là quá trình bơm không khí hòa tan vào trong bể để tăng hàm lượng oxy cho bể nuôi Tùy kích thước bể nuôi mà ta chọn kích cỡ và công suất máy sục khí sao cho phù hợp để cá có đầy đủ oxi nhất

Bất kể loài vật nào dù sống trên cạn hay dưới nước hoặc trên không đều cần oxi để tồn tại Cả có thể ngoi lên mặt nước để lấy oxi Nhưng nhiều loại cá thường nhất khi được nuôi, vì thế chúng rất hạn chế ngoi lên Thay vào đó, chúng lấy oxi bằng cách lọc oxi có sẵn trong nước qua mang Với những người nuôi cá thì cách giải quyết của họ là trang bị cho bể cả những bình thổi oxi

Việc bơm oxi cho cả thì mỗi ngày bơm khoảng vài giờ là đủ cho cả Không cần bật liên tục 24/24h mỗi ngày

Đối với một số loại cá cảnh nhiệt đới, cách chữa một số bệnh đơn giản là tăng nhiệt độ nước lên 30 – 32 độ C Để làm được việc này, bạn cần có máy sưởi loại tốt với cảm biển nhiệt độ có độ chính xác cao

1.1.5 Hệ thống lọc

Thường hệ thống lọc sẽ được đặt riêng biệt bên ngoài bể nuôi

1.1.6 Sự cân bằng sinh học trong bể nuôi

Bể nuôi tốt là bể có sự cân bằng sinh học Cân bằng sinh học có thể hiểu nôm na là bể nuôi có cây mọc tốt, cá sống tốt và nước trong, các chỉ tiêu trong nước ổn định, ít biến đổi Sự cân bằng này có hàm chứa cả hệ vi sinh vật

Các nguyên nhân có thể dẫn đến mất cân bằng sinh học bao gồm: - Thiếu thực vật thủy sinh

- Thiếu ánh sáng - Thừa cá

- Thừa thức ăn

1.1.7 Nguồn nước

Nước máy: thường nước máy sẽ đảm bảo về các chỉ tiêu chất lượng nước nhưng có chứa hàm lượng Chlorine, Fluoride do việc khử trùng trong máy nhà Do đó để sử dụng nước máy cần làm bay hơi Chlorine, Fluoride bằng cách trữ nước ở ngoài 1 – 2 ngày trước khi sử dụng, có thể phơi dưới nắng hoặc sục khí sẽ đẩy nhanh quá trình

Nước mưa: nên sử dụng nước mưa sau 3 – 4 cơn mưa đầu, vì những cơn mưa đầu thường ô nhiễm Ngoài ra nước mưa thường có pH thấp nên cần điều chỉnh trước khi sử dụng

Nước giếng: thường có hàm lượng oxy hòa tan thấp, do đó cần sục khí để tăng lượng oxy hòa tan Đôi khi còn chứa kim loại nặng gây động cho thủy sinh vật

1.1.8 Các chỉ tiêu chất lượng nước

Nhiệt độ: là yếu tố ảnh hưởng đến sự sinh trưởng của thủy sinh vật, tác động gián tiếp lên hàm lượng oxy hòa tan và các yếu tố khác trong môi trường nước Thường nhiệt độ thích hợp là 20 – 30oC

Hàm lượng Oxy hòa tan: tạo ra bởi sục khí và thủy sinh thực vật Cung cấp oxy cho cá và các quá trình sinh hóa của vi sinh vật

pH: là chỉ số đo độ hoạt động của các ion hydro (H+) trong dung dịch hay còn gọi là độ acid hay bazơ, pH bằng 7 là trung tính, nhỏ hơn 7 là acid còn lớn hơn 7 là bazơ Giá trị pH phù hợp là 6.5 – 8.5

Lựa chọn bể phù hợp: Trên thị trường hiện có 3 loại bể với kích thước là 60 90 120cm, tùy thuộc với từng không gian và loại cá bạn nuôi

-Khi chọn bể cá, ngoài kích thước bạn cũng cần quan tâm tới chất liệu Có thể chọn bể kính đúc hoặc bể kính dán

Vị trí đặt bể: Khi chọn vị trí đặt bể bạn có thể chọn theo tiêu chí trang trí hoặc phong thủy Bên cạnh đó, nên đặt bể cá ở nơi có không gian rộng rãi và thoáng mát

Chọn chân bể cá: Cần đảm bảo chân bể cá phải chắc chắn và có độ cao lý tưởng để ngắm nhìn cũng như vệ sinh bể

Đặt bộ lọc: Bể cá hoàn chỉnh gồm có: Bộ lọc ngoài, bộ lọc tràn và bộ lọc thác Bố trí đường cấp thoát nước: Cần đảm bảo đường cấp thoát nuwosc phải đảm bảo và đúng quy trình để vệ sinh bể cá dễ dàng

Trang trí bể cá: Tùy theo sở thích bạn có thể sử dụng hòn non bộ, lá cây, sỏi để trang trí

Đổ nước vào bể: Cuối cùng bạn đổ nước vào bể cá là hoàn thành Tìm hiểu các loại cá

Tùy vào điều kiện thích nghi của từng loại cá mà người nuôi có thể tìm kiếm và lựa chọn để phù hợp

Nếu chúng ta không tìm hiểu kỹ đặc tính của các loại cá sẽ khiến cho 1 số loại cá chậm phát triển hoặc nguy hiểm trong quá trình nuôi

Dưới đây là các loài cá phổ biến thường được sử dụng nhiều trong nuôi cá cảnh

1.2.1 Cá Vàng

Hình 1.4 Hình ảnh cá vàng

Điều kiện thích nghi: - PH: 6-7.5 - Nhiệt độ: 25-30 Đặc điểm: Cá Vàng là một trong những loài cá cảnh phổ biến nhất và thích hợp cho người mới bắt đầu Chúng có nhiều màu sắc và hình dạng khác nhau, và dễ dàng chăm sóc Cá vàng ba đuôi có tập tính hiền hòa

1.2.2 Cá beta

Hình 1.5 Hình ảnh cá beta

Điều kiện thích nghi: - PH: 6-7.5 - Màu sắc: Đa dạng, bao gồm cam, đỏ và xanh - Thức ăn: cá ăn tạp thiên về động vật, thức ăn là phiêu sinh động vật, cung

quăng, trùng chỉ, ấu trùng côn trùng,…

Đặc điểm: Cá Betta là loài cá cảnh đẹp và dễ chăm sóc Chúng có nhiều màu sắc tươi sáng và có thể sống trong hồ cá nhỏ Cá betta có tập tính hung dữ, nên cẩn trọng khi nuôi chung với các loài cá cảnh khác

1.2.3 Cá 7 màu

Hình 1.6 Hình ảnh cá 7 màu

Điều kiện thích nghi: - PH: 6-7.5 - Nhiệt độ: 26-30 độ - Thức ăn cho cá bảy màu nên kết hợp giữa các loại cám như: cám Nhật,

INVE… cùng thức ăn tươi như: bobo, trùn chỉ, atimia… để cá có đầy đủ dinh dưỡng phát triển Ngoài ra, mỗi lần chỉ cho cá ăn lượng vừa đủ, chia làm nhiều bữa nhỏ trong ngày Tránh dư thừa thức ăn trong bể sẽ khiến nguồn nước bị ô nhiễm

Màu sắc: Đa dạng, bao gồm đỏ, cam, vàng, xanh lá cây và xanh dương Đặc điểm: Cá Mắt To là loài cá nhỏ và nổi tiếng với màu sắc đa dạng Chúng rất dễ sinh sản và phù hợp cho người mới bắt đầu Có tập tính ôn hòa, thích sống bầy đàn

1.2.4 Cá mun đen

Hình 1.7 Cá mun đen

Điều kiện thích nghi: - PH: 6-7 - Nhiệt độ: 25-30 độ C Màu sắc: Đen

- Thức ăn: ăn tạp, ăn chung được với các loại thức ăn với các loài cá khác Hình thức sinh sản: đẻ con

Đặc điểm: Cá mún đen có kích thước trung bình khoảng 3-4cm do vậy chúng phù hợp với đa dạng các kích cỡ bể nuôi Với 1 màu đen tuyền huyền bí và khả năng thích môi trường cao nên cá mún đen được rất nhiều sự lựa chọn của người mới bắt đầu nuôi cá cảnh

1.2.5 Cá ngân bình mắt đỏ

Hình 1.8 Hình ảnh cá ngân bình mắt đỏ

Điều kiện thích nghi: - PH: 6-8 - Nhiệt độ: 25-30 độ C - Trong hồ nuôi nhân tạo ngân bình mắt đỏ thường ăn tất cả các loại thực

phẩm tươi sống, trùng chỉ, tim bò đông lạnh và cả thức ăn viên dạng khô Màu sắc: trắng bạc, mắt đỏ kèm sọc đen ở phần đuôi

Đặc điểm: Vẻ ngoài giống với 1 con cá diếc nhưng điểm thú vị của loài cá này là một vệt đỏ đậm ở phía trên tạo nên điểm thu hút rất đặc Đây là dòng cá cảnh dễ nuôi và thích hợp với nhiều điều kiện bể cá khác nhau

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

2.1 Công nghệ Internet of Things 2.1.1 Nguồn gốc của IoT

Thuật ngữ “Internet of Things” hay viết tắt là IoT được sử dụng lần đầu tiên tại Procter và Gamble (P&G) vào năm 1999 bởi một chuyên gia về đổi mới kỹ thuật số người Anh là Kevin Ashton Thuật ngữ này được sử dụng để mô tả một hệ thống mà trong đó các đối tượng vật lý có thể kết nối được với internet thông qua các cảm biến Bên cạnh đó, thuật ngữ này còn là một minh họa cho sức mạnh của việc kết nối sóng vô tuyến để tự động theo dõi, nhận dạng các đối tượng

2.1.2 Khái niệm của IoT

Hiện nay, cộng đồng người dùng trên thế giới cho rằng không có định nghĩa duy nhất nào có sẵn cho Internet of Things Có rất nhiều nhóm chuyên gia, học giả, nhà nghiên cứu, nhà đổi mới xác định thuật ngữ này nhưng điểm chung của tất cả định nghĩa là ý tưởng đối với phiên bản đầu tiên về internet là dữ liệu được tạo ra bởi con người, nhưng đối với phiên bản tiếp theo thì dữ liệu được tạo ra bởi mọi thứ

Tuy nhiên, Internet of Things định nghĩa chung là một mạng lưới các đối tượng vật lý Internet không chỉ là một mạng máy tính, mà nó đã phát triển thành một mạng lưới thiết bị thuộc mọi loại kích cỡ như xe cộ, điện thoại thông minh, thiết bị gia dụng, đồ chơi, máy ảnh, dụng cụ y tế, động vật, con người, tòa nhà Tất cả được kết nối, giao tiếp, chia sẻ thông tin với nhau dựa trên các giao thức quy định để đạt được sự sắp xếp thông minh, định vị, kiểm soát an toàn, thậm chí giám sát trực tuyến thời gian thực cá nhân và quản trị quy trình

2.1.3 Hoạt động của IoT

Hệ sinh thái IoT bao gồm các thiết bị thông minh hỗ trợ web sử dụng các hệ thống nhúng, chẳng hạn như bộ xử lý, cảm biến và phần cứng truyền thông, để thu thập, gửi và hành động trên dữ liệu mà chúng thu được từ môi trường của chúng Các thiết bị IoT chia sẻ dữ liệu cảm biến mà chúng thu thập được bằng cách kết nối với cổng IoT hoặc thiết bị biên khác, nơi dữ liệu được gửi đến đám mây để phân tích hoặc phân tích cục bộ Đôi khi, các thiết bị này giao tiếp với các thiết bị liên quan khác và hoạt động dựa trên thông tin chúng nhận được từ nhau Các thiết bị thực hiện hầu hết công việc mà không có sự can thiệp của con người, mặc dù mọi người có thể tương tác với các thiết bị

Các giao thức kết nối, mạng và giao tiếp được sử dụng với các thiết bị hỗ trợ web này phần lớn phụ thuộc vào các ứng dụng IoT cụ thể được triển khai

IoT cũng có thể tận dụng trí tuệ nhân tạo (AI) và học máy để hỗ trợ quá trình thu thập dữ liệu trở nên dễ dàng và năng động hơn

2.1.4 Kiến trúc của IoT

Kiến trúc của IoT không được thống nhất bởi vì khái niệm liên quan đến vấn đề này quá rộng lớn Khả năng quan sát và cung cấp thông tin cho việc ra quyết định sẽ là một phần kiến trúc cơ bản của internet trong tương lai

Kiến trúc ba và năm lớp của IoT Kiến trúc cơ bản và được chấp nhận rộng rãi là kiến trúc ba lớp Ba lớp này cụ thể là lớp nhận thức (Perception layer), lớp mạng (Network layer) và lớp ứng dụng (Application layer) Kiến trúc ba và năm lớp của IoT được giới thiệu trong Hình 1.4

Hình 2.1 Kiến trúc 3 lớp (A); Kiến trúc 5 lớp (B)

Lớp nhận thức (Perception layer): Là lớp có các cảm biến để theo dõi trạng thái của môi trường và thu thập thông tin về các biến vật lý khác nhau Ví dụ như chuyển động, vị trí, nhiệt độ, độ ẩm và ánh sáng

Lớp mạng (Network Layer): Là lớp sẽ chịu trách nhiệm cho việc kết nối với các đối tượng thông minh, thiết bị mạng và máy chủ Về tính năng của nó được dùng để truyền và xử lý dữ liệu từ cảm biến

Lớp ứng dụng (Application Layer): Là lớp cung cấp các dịch vụ tiện ích cho ứng dụng đến với người dùng Nó xác định các ứng dụng khác nhau mà trong đó IoT có thể được triển khai Ví dụ như nhà thông minh, thành phố và sức khỏe thông minh

Kiến trúc năm lớp bao gồm lớp nhận thức (Perception layer), lớp vận chuyển (Transport layer), lớp xử lý (Processing layer), lớp ứng dụng (Application layer) và lớp kinh doanh (Business layer) Vai trò của các lớp nhận thức và ứng dụng thì giống với kiến trúc ba lớp

Lớp vận chuyển (Transport layer): Là lớp sẽ đảm nhận việc chuyển dữ liệu cảm biến từ lớp nhận thức sang lớp xử lý và ngược lại thông qua các mạng như không dây, 3G, LAN, Bluetooth và RFID

Lớp xử lý (Processing layer): Được gọi là phần mềm trung gian Nhiệm vụ của nó là lưu trữ, phân tích và xử lý một lượng lớn dữ liệu đến từ lớp vận chuyển Nó có thể quản lý và cung cấp một bộ dịch vụ đa dạng cho các lớp thấp hơn Nó sử dụng nhiều công nghệ như cơ sở dữ liệu, điện toán đám mây và module xử lý dữ liệu lớn

Lớp kinh doanh (Business layer): Là lớp quản lý toàn bộ hệ thống IoT bao gồm các ứng dụng, mô hình kinh doanh và quyền riêng tư của người dùng

Dựa vào nền tảng kiến trúc trên, đề tài này tập trung vào phần ứng dụng để tạo nên một hệ thống có thể hỗ trợ quản lý nhà kính Hoạt động của nhà kính được minh họa thông qua bộ điều khiển dựa trên bộ vi xử lý Arduino Mega 2560 và ESP8266 Bộ điều khiển này được kết nối với các cảm biến và bộ truyền động Ngoài ra, đề tài này còn thiết kế bộ giao diện điều khiển trên trang web và ứng dụng di động Blynk

2.1.5 Đặc điểm công nghệ IoT

Công nghệ IoT có những đặc điểm cơ bản như sau: Tính liên kết: Mọi thứ đều có thể kết nối được với nhau trên cơ sở thông tin và truyền thông toàn cầu

Các dịch vụ liên quan đến sự vật: IoT có khả năng bảo vệ quyền riêng tư, tính nhất quán giữa những thứ vật chất và những thứ ảo liên quan của chúng

Tính không đồng nhất: Dựa trên các nền tảng phần cứng và mạng khác nhau nên các thiết bị trong IoT không được nhất quán Bên cạnh đó, nhờ việc thông qua các mạng khác nhau nên cũng có thể tương tác với các thiết bị hoặc nền tảng dịch vụ khác

Tính thay đổi linh hoạt: Trạng thái của các thiết bị có thể thay đổi linh hoạt Ví dụ như là ngủ và thức, kết nối hoặc ngắt kết nối Ngoài ra, số lượng thiết bị cũng có thể được thay đổi một cách linh hoạt

Quy mô khổng lồ: Số lượng thiết bị kết nối được với internet trong mạng lưới IoT có rất rất nhiều

Kết nối: Cho phép khả năng truy cập mạng và khả năng tương thích

2.1.6 Ưu và nhược điểm của IoT

Giám sát tiết kiệm chi phí và thời gian: IoT sử dụng các cảm biến thông minh để giám sát các sự vật trong cuộc sống cho các ứng dụng khác nhau, giúp tiết kiệm chi phí và thời gian

Chất lượng cuộc sống tốt hơn: Các ứng dụng dựa trên IoT làm tăng sự thoải mái và quản lý tốt hơn cho cuộc sống hằng ngày

Cơ hội kinh doanh: Tạo ra công việc kinh doanh mới cho công nghệ IoT, do đó làm tăng tốc độ tăng trưởng kinh tế và việc làm mới Tiết kiệm được nguồn tài nguyên thiên nhiên, cây cối và nước Đồng thời, giúp tạo ra một cuộc sống thông minh, xanh – sạch – bền vững hơn

b Nhược điểm:

Khả năng tương thích: Vì các thiết bị được làm ra từ các nhà sản xuất khác nhau và được kết nối với nhau trong IoT cho nên không có tiêu chuẩn tương thích cho việc gắn thẻ cũng như giám sát

Độ phức tạp: IoT là một mạng phức tạp và đa mạng Bất kỳ lỗi nào trong phần mềm hay phần cứng sẽ gây ra hiệu quả nghiêm trọng Thậm chí, việc mất điện cũng có thể gây ra nhiều bất tiện

Quyền riêng tư và bảo mật: IoT có sự tham gia của nhiều thiết bị và công nghệ Bên cạnh đó, nhiều công ty cũng sẽ giám sát nó Vì có rất nhiều dữ liệu liên quan đến ngữ cảnh được truyền bởi các cảm biến thông minh, nên sẽ có nguy cơ bị mất dữ liệu riêng tư

Việc làm hạn chế hơn: Các hoạt động hằng ngày sẽ ngày càng tự động hóa với sự ra đời của công nghệ Do đó, gây ra ít yêu cầu về nguồn nhân lực

Công nghệ kiểm soát cuộc sống: Cuộc sống của chúng ta sẽ ngày càng bị kiểm soát và phụ thuộc vào công nghệ Với IoT, sự phụ thuộc này sẽ lan rộng giữa các thế hệ và trong thói quen hằng ngày của người dùng

2.2 Tổng quan về mạch điều khiển trung tâm Module wifi ESP32

ESP32 là một bộ vi điều khiển thuộc danh mục vi điều khiển trên chip công suất thấp và tiết kiệm chi phí Hầu hết tất cả các biến thể ESP32 đều tích hợp Bluetooth và Wi-Fi chế độ kép, làm cho nó có tính linh hoạt cao, mạnh mẽ và đáng tin cậy cho nhiều ứng dụng

Thiết kế với hình dạng và các chân tín hiệu được sắp xếp để có độ tương đồng về chức năng cao nhất với quy chuẩn Arduino

Sử dụng mạch nguồn xung giảm áp với ưu điểm là hiệu suất chuyển đổi cao, toả nhiệt thấp, tiết kiệm năng lượng, dải điện áp đầu vào cấp cho mạch rộng từ 6~24VDC với dòng đầu ra lớn: 5VDC/Max 1500mA, 3.3VDC / Max 700mA

Tích hợp chuyển mức logic I2C (3.3V/5V)

Hình 2.2 Module wifi ESP32

Nó là sự kế thừa của vi điều khiển NodeMCU ESP8266 phổ biến và cung cấp hiệu suất và tính năng tốt hơn Bộ vi điều khiển ESP32 được sản xuất bởi Espressif Systems và được sử dụng rộng rãi trong nhiều ứng dụng khác nhau như IoT, robot và tự động hóa

ESP32 cũng được thiết kế để tiêu thụ điện năng thấp, lý tưởng cho các ứng dụng chạy bằng pin Nó có hệ thống quản lý năng lượng cho phép nó hoạt động ở chế độ ngủ và chỉ thức dậy khi cần thiết, điều này có thể kéo dài tuổi thọ pin rất nhiều

2.2.1 Thông số kỹ thuật

Loại: Wifi + Bluetooth Module Mô hình: ESP32 38 chân Điện áp nguồn (USB): 5V DC Đầu vào/Đầu ra điện áp: 3.3V DC Công suất tiêu thụ: 5μA trong hệ thống treo chế độ Hiệu suất: Lên đến 600 DMIPS

Tần số: lên đến 240MHz Wifi: 2.4 GHz lên đến 150 Mbit/S Bluetooth: 4.2 BR/EDR BLE 2 chế độ điều khiển Bộ nhớ: 448 Kbyte ROM, 520 Kbyte SRAM, 6 Kbyte SRAM trên RTC và QSPI Hỗ trợ đèn flash / SRAM chip

Chip USB-Serial: CP2102 Ăng ten: PCB

GPIO kỹ thuật số: 24 chân (một số chân chỉ làm đầu vào) Kỹ thuật số Analog: 12bit SAR loại ADC, hỗ trợ các phép đo trên lên đến 18 kênh, một số chân hỗ trợ một bộ khuếch đại với lập trình tăng

Bảo mật: IEEE 802.11, bao gồm cả WFA, WPA/WPA2 và WAPI

Phần cứng tăng tốc mật mã học: AES, SHA-2, RSA, hình elip mật mã Đường Cong (ECC), số ngẫu nhiên Máy phát điện (RNG)

2.2.2 Các biến thể ESP32

Tốc độ tối đa mà mỗi biến thể có thể đạt được được chỉ định trong cột thứ tư Nó dao động từ 96 MHz đến 400 MHz, tùy thuộc vào biến thể Số lượng GPIO có sẵn trong mỗi biến thể được liệt kê trong cột thứ năm, dao động từ 20 đến 50+ Cột thứ sáu cho biết liệu biến thể có hỗ trợ Wi-Fi hay không và tiêu chuẩn Wi-Fi tối đa (2,4 G, 5G hoặc Wi-Fi 6) được hỗ trợ Cột thứ bảy cho biết liệu biến thể có hỗ trợ Thread hay không, là một giao thức không dây công suất thấp được sử dụng cho các thiết bị IoT Cuối cùng, cột cuối cùng liệt kê các tính năng đặc biệt của từng biến thể, chẳng hạn như USB OTG, tập lệnh AI, mã hóa phần cứng cho phương tiện

Nhìn chung, bảng cung cấp một so sánh toàn diện về các biến thể ESP32 khác nhau, cho phép các nhà phát triển chọn biến thể phù hợp nhất với nhu cầu của họ dựa trên số lượng lõi, RAM, tốc độ, GPIO, Wi-Fi, Thread và các tính năng đặc biệt cần thiết cho ứng dụng cụ thể của họ

ESP32 với các bộ vi điều khiển khác Khi so sánh vi điều khiển ESP32 với các vi điều khiển khác, một trong những lợi thế đáng kể của nó là có các mô-đun Wi-Fi và Bluetooth tích hợp Mặc dù một số bộ vi điều khiển có thể thêm Wi-Fi thông qua các tấm chắn hoặc bộ điều hợp, nhưng nó không phải là một tính năng gốc của bo mạch, làm tăng giá thành của bo mạch Ngược lại, ESP32 đi kèm với các mô-đun Wi-Fi và Bluetooth đã được tích hợp, làm cho nó trở thành một lựa chọn tiết kiệm chi phí hơn cho những người quan tâm đến việc sử dụng các tính năng này

Hơn nữa, bộ điều hợp cho Wi-Fi và Bluetooth thường đắt tiền, đây có thể là một thách thức đối với những người có sở thích hoặc các dự án quy mô nhỏ Trong khi đó, các mô-đun Wi-Fi và Bluetooth tích hợp của ESP32 mang lại tính linh hoạt, mạnh mẽ và độ tin cậy cao hơn trong một loạt các ứng dụng, chẳng hạn như IoT, Cổng dựa trên MQTT, giải mã MP3, mã hóa giọng nói và phát trực tuyến video Ngoài ra, ESP32 đi kèm với cổng USB, làm cho nó trở thành một thiết bị cắm và chạy có thể được lập trình như các bộ vi điều khiển khác

2.2.3 ES32 Chân đế WROOM-32 Devkit

Bộ vi điều khiển ESP32 cung cấp tính năng ghép kênh chân cho phép chúng tôi chọn thiết bị ngoại vi nào để kết nối từ 28 chân đầu vào / đầu ra Tính năng này cung cấp cho chúng tôi sự linh hoạt để quyết định chân nào chúng tôi muốn sử dụng cho thiết bị ngoại vi nào như MISO, RX, SCLK, MOSI, TX, SCL, SDA và một số tùy chọn khác

Tuy nhiên, một số chân cho bộ chuyển đổi tương tự sang kỹ thuật số và bộ chuyển đổi kỹ thuật số sang tương tự được dành riêng cho các thiết bị ngoại vi này và không thể được định cấu hình theo yêu cầu của người dùng

Các kênh chuyển đổi tương tự sang kỹ thuật số (ADC) là 18 Giao diện SPI là 3

Giao diện UART là 3 Giao diện I2C là 2 Đầu ra PWM là 16 Bộ chuyển đổi kỹ thuật số sang tương tự (DAC) là 2 Giao diện I2S là 2

Cảm biến trên chip ESP32 Cảm biến Hall

Bộ dao động tinh thể 32 kHz Bộ khuếch đại tương tự tiếng ồn cực thấp 10x giao diện cảm ứng điện dung

2.2.4 Lập trình ESP32

Để bật nguồn bảng phát triển ESP32, chúng tôi có tùy chọn sử dụng cổng USB hoặc pin LiPo Khi cả hai nguồn điện được kết nối, một số bo mạch phát triển có bộ điều khiển sạc tích hợp để sạc pin LiPo Hơn nữa, bo mạch có bộ điều chỉnh điện áp 3.3 V có thể cung cấp dòng điện 600 mA Trong quá trình truyền RF, bo mạch có thể tiêu thụ tới 250 mA Điều quan trọng cần lưu ý là các chân đầu vào-đầu ra có mục đích chung không thể xử lý 5 V, và do đó, cần phải thay đổi mức độ để giao tiếp với bo mạch với 5 V

Để lập trình bảng ESP32, chúng ta có thể sử dụng Arduino IDE Tuy nhiên, một số trình điều khiển và thư viện nhất định phải được cài đặt để làm cho nó tương thích với IDE và sẵn sàng sử dụng Dưới đây là một lời giải thích ngắn gọn về các trình điều khiển và thư viện cần thiết

Cài đặt trình điều khiển Điều đầu tiên và quan trọng nhất để lập trình bo mạch này là cài đặt trình điều khiển USB CP210x - UART Tùy thuộc vào hệ điều hành của bạn, cài đặt trình điều khiển thích hợp

Cài đặt Thư viện ESP32 trong Arduino IDE Có thể cài đặt thư viện cho ESP32 bằng cách sử dụng GitHub Sau khi cài đặt tất cả các trình điều khiển và thư viện này, bạn đã sẵn sàng để lập trình bảng của mình Bạn

có thể sử dụng Terminal trong MAC hoặc dòng lệnh trong hệ điều hành windows để cài đặt các thư viện này từ GitHub

2.3 Phần mềm Arduino IDE

2.3.1 Thông tin của Arduino IDE

- Nền tảng: Windows, MacOS, Linux - Dung lượng: ~530MB

- Loại ứng dụng: Công cụ - Nhà phát hành: Arduino Software - Tính năng chính của Arduino IDE - Phần mềm lập trình mã nguồn mở miễn phí IDE trong Arduino IDE là phần có nghĩa là mã nguồn mở, nghĩa là phần mềm này miễn phí cả về phần tải về lẫn phần bản quyền: Người dùng có quyền sửa đổi, cải tiến, phát triển, nâng cấp theo một số nguyên tắc chung được nhà phát hành cho phép mà không cần xin phép ai, điều mà họ không được phép làm đối với các phần mềm nguồn đóng

Tuy là phần mềm mã nguồn mở nhưng khả năng bảo mật thông tin của Arduino IDE là vô cùng tuyệt vời, khi phát hiện lỗi nhà phát hành sẽ vá nó và cập nhật rất nhanh khiến thông tin của người dùng không bị mất hoặc rò rỉ ra bên ngoài

2.3.2 Ngôn ngữ lập trình C/C++ cho Arduino

Arduino IDE sử dụng ngôn ngữ lập trình C/C++ rất phổ biến trong giới lập trình Bất kỳ đoạn code nào của C/C++ thì Arduino IDE đều có thể nhận dạng, giúp các lập trình viên thuận tiện trong việc thiết kế chương trình lập cho các bo mạch Arduino

Ưu điểm của ngôn ngữ C/C++ - C++ là một ngôn ngữ lập trình hướng đối tượng - C++ cho phép bạn thoải mái quản lý vùng nhớ - C++ là một ngôn ngữ low-level để dễ dàng gia tiếp với phần cứng

Hình 2.3 Ví dụ minh họa code C/C++

2.3.3 Hỗ trợ lập trình tốt cho bo mạch Arduino

Arduino có một module quản lý bo mạch, nơi người dùng có thể chọn bo mạch mà họ muốn làm việc cùng và có thể thay đổi bo mạch thông qua Menu Quá trình sửa đổi lựa chọn cũng liên tục tự động cập nhật để các dữ liệu có sẵn trong bo mạch và dữ liệu sửa đổi đồng nhất với nhau Bên cạnh đó, Arduino IDE cũng giúp bạn tìm ra lỗi từ code mà bạn biết giúp bạn sửa lỗi kịp thời tránh tình trạng bo mạch Arduino làm việc với code lỗi quá lâu dẫn đến hư hỏng hoặc tốc độ xử lý bị giảm sút

- Thư viện hỗ trợ phong phú Arduino IDE tích hợp với hơn 700 thư viện, được viết và chia sẻ bởi nhà phát hành Arduino Software và thành viên trong cộng đồng Arduino Mọi người có thể tận dụng chúng cho dự án của riêng mình mà không cần phải bỏ ra bất kỳ chi phí nào

Hình 2.4 Thư viện của Arduino

Arduino IDE có một giao diện đơn giản, dễ sử dụng giúp người dùng thuận tiện hơn trong thao tác Dưới đây là một số tính năng nổi bật chúng ta thường sử dụng:

Nút kiểm tra chương trình (Verify): giúp dò lỗi phần code định truyền xuống bo mạch Arduino

Hình 2.5 Nút kiểm tra lỗi (Verify)

Nút tải đoạn code vào bo mạch Arduino (Upload): giúp nhập đoạn code vào bo mạch Arduino

Hình 2.6 Nút tải code vào bo mạch (Upload)

Vùng lập trình: người dùng sẽ viết chương trình tại khu vực này

2.3.4 Cấu trúc một chương trình Arduino

Cấu trúc một chương trình Arduino gồm 2 hàm: hàm setup() và hàm loop().Những lệnh trong hàm setup() sẽ được chạy khi Arduino khởi động (chỉ chạy một lần duy nhất).Sau khi hàm setup() chạy xong, những lệnh trong hàm loop() sẽ được chạy và lặp đi lặp lại cho đến khi reset hoặc shutdown Arduino

Các bước lập trình và chạy chương trình với Arduino

+ Bước 1: Thiết kế mạch theo yêu cầu + Bước 2: Lập trình điều khiển và nạp code Để lập trình điều khiển và nạp code thì chúng ta sử dụng phần mềm Integrated Development Environment (viết tắt là IDE), phần mêm IDE hỗ trợ người lập trình viết code và nạp code cho vi điều khiển

+ Bước 3: Chạy thử và sửa lỗi nếu có

2.4 Tổng quan về Website

Một website là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP hoặc HTTPS Website có thể được xây dựng từ các tệp tin HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (website động) Website có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP,NET, Java, )

2.4.1 Giới thiệu về Trang web

Trang web còn gọi là webpage hay gọi ngắn gọn là pages, đây là tài liệu được hiển thị trên trình duyệt web bao gồm văn bản, hình ảnh, tệp tin,….Khi nhắc đến trang web, người dùng thường sẽ nhầm lẫn với website, tuy nhiên thực tế trang web chỉ là một phần trong website nói chung

2.4.2 URL

URL là chữ viết tắt của “Uniform Resource Locator“, tạm dịch: “Trình định vị tài nguyên thống nhất“ Website URL là một đường dẫn liên kết đến website, tham chiếu tới các tài nguyên trên mạng Internet

Hầu hết các trình duyệt web hiển thị URL của một trang web phía trên trang trong một thanh địa chỉ URL Website là đoạn text có thể đọc được thay cho địa chỉ IP mà máy tính sử dụng để liên hệ với server

2.4.3 Cập nhật website

Cập nhật website (update website) là hoạt động thay đổi hay bổ sung thêm những thông tin, yếu tố trên trang web sao cho phù hợp với sự thay đổi xu hướng thời đại, không gây nhàm chán cho khách hàng khi truy cập vào website Cập nhật website có bao gồm nhiều khía cạnh cần phải thực hiện như:

- Cập nhật nội dung website - Cập nhật tính năng website - Cập nhật xu hướng thiết kế web chuẩn SEO Cấu tạo và hoạt động của Website

Một website sẽ gồm nhiều webpage (trang con) là tập hợp các tập tin dạng HTML hoặc XHTML được lưu trữ trên máy chủ (web server) Các máy tính khác sẽ sử dụng các trình duyệt web như Firefox, Safari, Google, Cốc Cốc, thông qua môi trường là

internet để truy cập vào máy chủ Sau đó lấy các tập tin nêu trên để hiện thị cho người dùng

Các tập tin có thể hiển thị dưới dạng văn bản, hình ảnh hoặc âm thanh,… Để một Website hoạt động được cần có những phần sau:

Source Code (mã nguồn website): Đây là một hệ thống các tập tin được viết bằng ngôn ngữ lập trình và được kết nối thành giao diện người dùng trên website

Web hosting (Lưu trữ web): Là máy chủ dùng để lưu trữ mã nguồn và các thành phần khác trên website

Domain (Tên miền): Là địa chỉ website của bạn giúp người dùng dễ dàng truy cập vào trang website của bạn

Và tất nhiên một điều kiện không thể thiếu để người dùng có thể truy cập vào các website đó chính là đường truyền và kết nối mạng (internet) Ngoài ra, trang web còn gồm các yếu tố khác như:

Bandwith (băng thông): Là dung lượng tải dữ liệu của website/ 1 giây Banner, slide, quảng cáo, sitemap, menu trên web,v.v…

Admin (người quản trị web) Nhà thiết kế, phát triển website,… Giao diện Website gồm những thành phần nào? Sau khi tìm hiểu về website một cách tổng quát, Miko Tech sẽ phân tích bố cục website cơ bản và phổ biến nhất Bởi vì mỗi website doanh nghiệp sẽ có bố cục thay đổi theo nhu cầu đặc thù của doanh nghiệp cũng như mong muốn của họ Các thành phần của 1 trang web bao gồm:

2.4.4 Header

Header là một thuật ngữ được đặt cho một dải hoặc biểu tượng chính nằm ở đầu trang web Mục đích của header là giúp người truy cập có thể dễ dàng nắm bắt các thành phần và các nội dung của website doanh nghiệp

Phần này thường sẽ bao gồm logo, hotline, ngôn ngữ, đăng nhập hoặc đăng ký, tìm kiếm, Một số trang web đặc biệt sẽ không được thiết kế header với mục đính riêng là không làm cho người dùng xao nhãng, tăng tỷ lệ chuyển đổi nhanh chóng

Header là phần không thể thiếu với các website bán hàng như website nội thất hay xây dựng website du lịch và nhiều ngành nghề khác

2.4.5 Trình chiếu web

Slider – Thanh trượt là một thuật ngữ dùng để chỉ trình chiếu trên một trang web Ví dụ về thanh trượt có thể là một băng chuyền quay vòng hiển thị các sản phẩm hoặc ảnh Ở những trang web trước đây còn được gọi là banner nếu Slider này là 1 ảnh tĩnh

Slider được đặt dưới header và được đầu tư rất nhiều vào thiết kế hình ảnh nhằm giới thiệu những đặc điểm nổi bật của doanh nghiệp hoặc sản phẩm, dịch vụ

Những hình ảnh này sẽ được cài đặt để trượt ngang tương tự như slide, hoặc một hướng nào đó nhất định và đính kèm những hiệu ứng Tại đây, người ta cũng sẽ tích hợp nút điều hướng người dùng xem ảnh tiếp theo hoặc trở về ảnh trước đó

Thông thường, trên Slider sẽ được đặt các nút kêu gọi hành động, cụ thể là: đặt hàng, tư vấn ngay, liên hệ,… Đây là phần mà bạn không nên bỏ qua khi thiết kế website khách sạn resort, thiết kế website bán ô tô,… và bất cứ website ngành nghề yêu cầu cao về mặt thẩm mỹ

2.4.6 Content Area

Trong các thành phần của 1 trang web thì content là yếu tố quan trọng nhất Bởi content area là phần nội dung chính của website, cung cấp thông tin cho độc giả, phần chứa thông tin nhiều nhất trong các danh mục Phần này nội dung cần được trình bày dễ nhìn, dễ đọc, thông tin hay và bổ ích sẽ giúp người dùng ở lại trang web lâu hơn

Nội dung có thể thể hiện qua nhiều hình thức khác nhau: văn bản, hình ảnh, âm thanh, video,… Ngoài ra, đây còn là khu đây còn là khu vực để Google đánh giá website doanh nghiệp có hữu ích hay không Đối với những trang web thực hiện dự án SEO thì đây là thành phần trọng điểm và được đầu tư nhiều nhất

Phần nội dung thường sẽ bao gồm: Page title (Tiêu đề trang): Tiêu đề đặt ở đầu phần nội dung, sẽ có font chữ to, in đậm để người xem dễ dàng nhận biết được chủ đề của website

Breadcrumb navigation: Đây là thanh điều hướng phân cấp nhằm giúp người truy cập biết được rằng họ đang ở đâu trong trang web từ đó có thể di chuyển giữa các mục trở nên nhanh chóng hơn

Phần nội dung chính: Phần này sẽ chứa bất kỳ thông tin gì, website sẽ có phần quản trị website để bạn có thể nhập nội dung phần này

Paging navigation: Đây là điều hướng phân trang, giúp cho người dùng không phải cuộn trang quá nhiều Phần điều hướng này thường đặt ở đầu, cuối hoặc cả đầu và cuối của phần nội dung trang

Thanh thông tin: Thanh thông tin thường bao gồm như ngày đăng bài, tên tác giả, số lượt xem của bài viết, thường đặt ở đầu hay cuối của phần nội dung trang

Thanh chia sẻ mạng xã hội: Thanh này sẽ bao gồm các nút chia sẻ trang web sang các mạng xã hội khác như Facebook, Google, Twitter,

Sidebar Sidebar là khu vực mà người quản trị website có thể tùy chỉnh thêm/bớt nội dung cho bài viết (có thể là mục tìm kiếm, lịch, bài viết mới,…)

Sidebar thường hiển thị ở bên cạnh các thành phần chính của trang web khi bạn truy cập vào một trang web Vị trí của sidebar sẽ tùy thuộc vào mục đích của trang web Sidebar sẽ thường nằm ở những vị trí như: bên trái, bên phải, trên header hoặc footer của trang web

Footer Phần chân trang nằm ở dưới cùng của trang web, thường được bố trí thông tin bản quyền, các liên kết nhanh, thông tin liên hệ trang web như fanpage, social network,… Đây là phần không thể thiếu khi thiết kế website mà bạn cần phải lưu ý

Trang Web tĩnh Web tĩnh là các website sử dụng các đoạn mã HTML, CSS, audio, video, hình ảnh,… để tạo ra một giao diện website Nó được lưu thành tập tin dưới dạng html hoặc htm, cố định, không chỉnh sửa được Web tĩnh sẽ khó khăn khi bạn muốn thay đổi giao diện

Nếu bạn không biết về HTML, bạn sẽ sẽ rất khó thực hiện vì không có khả năng tạo ra các tương tác web

Trang Web động Web động là các website không cố định nội dung, có thể chỉnh sửa, thêm trang tùy biến Những ngôn ngữ lập trình website động thường thấy là: Java, PHP, ASP, ASP.NET, Python,… Trong đó, PHP và ASP.NET là 2 ngôn ngữ được sử dụng phổ biến nhất hiện nay

Hình 2.8 Sự khác nhau giữa web động và web tĩnh

2.5 Ngôn ngữ HTML

HTML (viết tắt của từ Hypertext Markup Language) hay là Ngôn ngữ đánh dấu siêu văn bản Sử dụng HTML để xây dựng và cấu trúc lại các thành phần trong website

hoặc ứng dụng HTML có thể được hỗ trợ bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript

HTML không phải là ngôn ngữ lập trình, nghĩa là không thể tạo ra các chức năng “động” được Giống như như phần mềm Microsoft Word, HTML dùng để bố cục và định dạng trang web

HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng Các phần tử HTML được phân định bằng các tags, được viết bằng dấu ngoặc nhọn

2.5.1 Lịch sử của HTML

HTML được tạo ra bởi Tim Berners-Lee là nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ Ông đã nghĩ ra và viết siêu văn bản và hypertext trên Internet Hypertext được hiểu là văn bản chứa link, giúp người xem truy cập ngay lập tức

Hiện nay, HTML đã trở thành một chuẩn Internet được vận hành và phát triển bởi tổ chức W3C (World Wide Web Consortium) Bạn có thể tự tìm kiếm cập nhật mới nhất của HTML tại bất kỳ thời điểm nào trên Website của W3C

HTML đầu tiên được công khai là một tài liệu có tên “HTML Tags” được đề cập trên Internet vào cuối năm 1991 Gồm 18 phần tử đơn giản của HTML và các phiên bản sau của HTML đều có thêm tag và attributes mới

Từ năm 1996, các phần tử HTML được duy trì với đầu vào là các nhà cung cấp phần mềm thương mại bởi World Wide Web Consortium

Năm 2000, HTML đã trở thành tiêu chuẩn quốc tế, sau đó đến năm 2004 HTML5 trong Web Hypertext Application Technology Working Group và được hoàn thiện vào năm 2014 HTML có thêm tags vào markup để xác định rõ nội dung là gì ví dụ như <article>, <header>, <footer>

HTML documents là files được kết thúc html hay htm Với những file này bạn có thể xem bằng cách sử dụng bất kỳ trình duyệt nào (Google Chrome, Firefox, Safari,…) Các trình duyệt đọc những file HTML này và biến đổi chúng thành một dạng visual trên Internet sao cho người dùng có thể xem và hiểu được chúng

Bình thường một trang web có nhiều có web HTML như: trang chủ, giới thiệu, liên hệ, blog,… Mỗi trang như thế đều cần một trang HTML riêng Trong mỗi trang HTML chứa một bộ các tag (elements) để xác định từng khối của một trang web và tạo thành một cấu trúc gồm section, paragraph, heading và các khối nội dung khác

Đa phần các HTML elements đều có tag mở và tag đóng <tag></tag> Bạn có thể xem qua một đoạn HTML được cấu trúc như thế nào:

Hình 2.9 Cấu trúc HTML

Trong đó: Element được bao ở ngoài là bộ tag division <div></div> dùng để markup cho toàn bộ nội dung

Tiếp theo là các thẻ tag tiêu đề <h1></h1>, <h2></h2>, <h3></h3> Đoạn văn <p></p>

Hình ảnh <img> Đoạn văn thứ 2 chứa tag <a></a> với attribute href chứa URL đích Tag hình ảnh chứa 2 attribute: src cho ảnh và alt cho mô tả hình ảnh

Một số trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

Vai trò của HTML trong lập trình Web HTML là một loại ngôn ngữ đánh dấu siêu văn bản, hầu hết các chức năng cũng xoay quanh định nghĩa này Theo cách dễ hiểu hơn, HTML giúp cấu thành các cấu trúc cơ bản trên một website (bao gồm chia khung sườn, chia bố cục các thành phần trang web) và góp phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh

Ngoài ra, ưu điểm được biết đến nhiều nhất và cũng là thế mạnh của HTML là khả năng xây dựng cấu trúc và làm cho website trở thành một hệ thống hoàn chỉnh HTML giúp cho website có cấu trúc tốt cho mục đích sử dụng nhiều loại yếu tố trong văn bản

Tùy theo mỗi quan điểm, các lập trình viên có thể lựa chọn ngôn ngữ lập trình riêng cho Website của họ tùy vào mục đích sử dụng Nhưng HTML chứa những yếu tố mà mọi website cần thiết Trang Web của bạn sẽ cần phải sử dụng đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập Điều này đúng dù website xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu

2.5.4 Các phần mềm lập trình HTML:

a Visual Studio Code

Visual Studio Code là một công cụ lập trình code miễn phí, đa nền tảng do Microsoft phát triển Phần mềm kết hợp được tính năng của IDE và Code Editor, giúp lập trình viên có một trải nghiệm làm việc không những hiệu quả mà còn vô cùng thoải mái

Visual Studio Code có thể sử dụng để debug, tích hợp Git, tô màu cú pháp, tùy chỉnh định dạng code, tạo snippets và cải tiến mã nguồn Đồng thời, còn cho phép người dùng tùy biến theme, phím tắt và hàng loạt thiết lập khác Nhờ đó mà Visual Studio Code đã trở thành một trình biên tập code đáng tin cậy và chuyên nghiệp

b Sublime Text

Sublime Text là phần mềm được phát triển năm 2008 và được viết bằng ngôn ngữ Python và C++ Là phần mềm giúp các lập trình viên tiết kiệm được thời gian với các plugin được tích hợp sẵn Phiên bản mới nhất của Sublime Text là Sublime Text 4 Bạn có thể download Sublime Text 4 ngay dưới đây

c PHP Designer

PHP là viết tắt của chữ "Hypertext Preprocessor", đây là một ngôn ngữ lập trình được sử dụng để viết ở phía máy chủ (server side) Và PHP là một mã nguồn mở, nên chính vì thế nó có tính cộng đồng của nó cao và đồng thời cũng sẽ có rất nhiều các framawork, CMS hỗ trợ như Laravel, Wordpress

PHP được dùng phổ biến để tạo ra các ứng dụng web Một đoạn code PHP được đặt trong cặp thẻ: <?php và ?>

Tập tin php được lưu với phần mở rộng là ".php" Một số quy tắc trong ngôn ngữ PHP:

- Mã lệnh của chương trình cần được đặt trong cặp thẻ <?php và ?> - Sử dụng dấu chấm phẩy “;” để kết thúc một câu lệnh

- Văn bản cần được đặt trong cặp dấu nhảy đơn hay cặp đấu ngoặc đơn - Một biển được biểu diễn bắt đầu bằng dầu S, sau đó là một chữ cái hoặc

dấu gạch dưới - PHP coi 1 biển có một giới hạn Để xác định một biến toàn cục (global) có

tác dụng trong một hàm, ta cần khai bảo lại Nếu không giả trị của biển sẽ được coi như là cục bộ trong hảm

d CSS

CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium (W3C)

CSS xử lý một phần giao diện của trang web Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như hàng loạt các hiệu ứng khác

Cách CSS hoạt động đó chính là tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ HTML, ID, class, v.v Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọn

CSS rất dễ học và dễ hiểu nhưng nó cung cấp khả năng kiểm soát mạnh mẽ việc trình bày tài liệu HTML Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML

HTML và CSS có mối quan hệ gắn bó mật thiết với nhau Nếu HTML là nền tảng của một trang web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó

CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website Nếu HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu sắc của chiếc xe

Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có tình thẩm mỹ CSS làm cho giao diện người dùng của một trang web tỏa sáng và mang đến trải nghiệm người dùng tuyệt vời Nếu không có CSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa