“NGHIÊN CÚU XÂY DỰNG FRONTEND CHO GIAO DIỆN IOT TRONG VIỆC GIÁM SÁT QUY TRÌNH SẢN XUẤT ĐIỆN TỪ NĂNG LƯỢNG GIÓ.”
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.45 MB, 31 trang )
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA KỸ THUẬT ĐIỆN TỬ 1
TIỂU LUẬN KẾT THÚC HỌC KÌ
MƠN HỌC: MẠNG CẢM BIẾN
Đề tài: “NGHIÊN CÚU XÂY DỰNG FRONT-END CHO GIAO
DIỆN IOT TRONG VIỆC GIÁM SÁT QUY TRÌNH SẢN XUẤT
ĐIỆN TỪ NĂNG LƯỢNG GIÓ.”
Giảng viên hướng dẫn : Trần Thị Thanh Thủy
Họ và tên
: Nguyễn Tuấn Anh – B20DCDT015
Mã sinh viên
: B20DCDT015
Nhóm lớp học
: 01
Lớp
: D20ĐTMT2
Hệ đào tạo
: Đại học chính quy
Hà Nội – 2023
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA KỸ THUẬT ĐIỆN TỬ 1
TIỂU LUẬN KẾT THÚC HỌC KÌ
MƠN HỌC: MẠNG CẢM BIẾN
Đề tài: “NGHIÊN CÚU XÂY DỰNG FRONT-END CHO GIAO
DIỆN IOT TRONG VIỆC GIÁM SÁT QUY TRÌNH SẢN XUẤT
ĐIỆN TỪ NĂNG LƯỢNG GIÓ.”
Giảng viên hướng dẫn : Trần Thị Thanh Thủy
Họ và tên
: Nguyễn Tuấn Anh – B20DCDT015
Mã sinh viên
: B20DCDT015
Nhóm lớp học
: 01
Lớp
: D20ĐTMT2
Hệ đào tạo
: Đại học chính quy
Hà Nội - 2023
MỤC LỤC
MỤC LỤC .......................................................................................................................2
DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT .....................................................4
DANH MỤC CÁC HÌNH VẼ .........................................................................................4
CHƯƠNG 1: CÁC VẤN ĐỀ TỔNG QUAN ..................................................................6
1.1.
Tổng quan về năng lượng tái tạo ..........................................................6
1.1.1. Định nghĩa ........................................................................................6
1.1.2. Phân loại ...........................................................................................6
1.1.3. Ưu nhược điểm của năng lượng tái tạo ............................................9
1.1.4. Ứng dụng........................................................................................10
1.1.5. Năng lượng gió ..............................................................................10
1.2.
Tổng quan về hệ thống IOT ...............................................................15
1.2.1. Định nghĩa ......................................................................................15
1.2.2. Cấu trúc hệ thống IOT ...................................................................16
1.2.3. Các đặc trưng cơ bản của hệ thống IoT .........................................17
1.2.4. Ưu và nhược điểm của hệ thống IoT .............................................17
1.2.5. Ứng dụng........................................................................................18
1.2.6. Giao diện cho hệ thống IOT...........................................................19
1.3.
Tổng quan về Front-end .....................................................................20
1.3.1. Định nghĩa ......................................................................................20
1.3.2. Cấu trúc của một front-end ............................................................21
1.3.3. Mối quan hệ giữa front-end tới giao diện hệ thống .......................25
CHƯƠNG 2: XÂY DỰNG FRONT-END CHO HỆ THỐNG GIÁM SÁT ................26
2.1.
Xây dựng bài toán ..............................................................................26
2.2.
Nội dung thực hiện .............................................................................26
CHƯƠNG 3: KẾT QUẢ VÀ ĐÁNH GIÁ ....................................................................29
3.1.
Kết quả thực tế....................................................................................29
3.2.
Đánh giá kết quả : ...............................................................................29
3.3.
Hướng phát triển:................................................................................29
DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT
DANH MỤC CÁC HÌNH VẼ
Hình 1: Năng lượng tái tạo ..............................................................................................6
Hình 2: Hệ thống khai thác năng lượng mặt trời .............................................................7
Hình 3: Hệ thống sản xuất điện từ năng lượng gió .........................................................7
Hình 4: Khai thác năng lượng thuỷ điện từ các đập thuỷ điện ........................................8
Hình 5: Sơ đồ cấu tạo hệ thống địa nhiệt ........................................................................8
Hình 6: Sơ đồ hệ thống khai thác năng lượng chất thải rắn ............................................9
Hình 7: Hệ thống nhà máy điện gió ở Ninh Thuận .......................................................10
Hình 8: Cấu tạo tua bin gió............................................................................................11
Hình 9: Đo đạc sức gió và hướng gió thơng qua cảm biến ...........................................12
Hình 10: Hệ thống tua bin gió hoạt động ở tốc độ cao..................................................13
Hình 11: Bảng khảo sát tốc độ gió với cơng suất sản xuất được của tua bin gió ..........14
Hình 12: Hệ thống nhà máy điện gió tại Ninh Thuận ...................................................15
Hình 13: Hệ thống Internet of Things (IoT) ..................................................................16
Hình 14: Cấu trúc một hệ thống IOT.............................................................................16
Hình 15: Ứng dụng IoT trong ngành chế tạo thơng qua các cánh tay máy ...................18
Hình 16: Hệ thống xử lí cảnh báo va chạm cho xe tự lái ..............................................19
Hình 17: Hệ thống giao diện Iot đầy đủ ........................................................................21
Hình 18: HTML .............................................................................................................21
Hình 19: CSS .................................................................................................................22
Hình 20: JavaScripts ......................................................................................................23
Hình 21: TypeScripts .....................................................................................................24
Hình 22: Framework Angular .......................................................................................25
Hình 23: Giao diện HTML đẩy dữ liệu cảm biến thu thập ...........................................26
Hình 24: Giao diện HTML thể hiện giao diện bảng biểu ..............................................27
Hình 25: Giao diện CSS ................................................................................................27
Hình 26: Giao diện TypeScripts ....................................................................................28
Hình 27: Giao diện hệ thống giám sát điện gió .............................................................29
CHƯƠNG 1: CÁC VẤN ĐỀ TỔNG QUAN
1.1.
Tổng quan về năng lượng tái tạo
1.1.1. Định nghĩa
Là nguồn năng lượng được hình thành và được tạo ra bởi các nguồn năng lượng
có tính liên tục cao và có trữ lượng gần như là vơ hạn hoặc trữ lượng có thể được sản
sinh lại qua nhiều cách khác nhau
Hình 1: Năng lượng tái tạo
Chính vì với trữ lượng gần như là vơ tận cũng như khai thác không gây tác hại
lớn hơn so với các nguồn năng lượng hóa thạch nên hiện nay năng lượng tái tạo đang
trở thành lời giải cho bài tốn khai thác năng lượng nhưng gây ảnh hưởng ít tới môi
trường và hệ sinh thái trên trái đất
1.1.2. Phân loại
Tùy thuộc theo nguồn năng lượng được khai thác mà sẽ được phân loại thành các
nguồn năng lượng tái tạo khác nhau
Năng lượng mặt trời
6
Là nguồn năng lượng được khai thác từ ánh sáng của mặt trời sản sinh ra, năng
lượng mặt trời hiện nay là một trong số các nguồn năng lượng tái tọa phổ biến nhất và
có tỉ lệ khai thác đến thời điểm hiện nay là lớn nhất
Hình 2: Hệ thống khai thác năng lượng mặt trời
Năng lượng gió
Là nguồn năng lượng được khai thác từ sức gió thổi qua từng khu vực, năng
lượng gió là một trong những nguồn năng lượng có tỉ lệ sản lượng khai thác cao hiện
nay và đã được thí điểm cơng nghiệp hóa tại nhiều khu vực có tiềm năng về năng lượng
tái tạo tại nước ta như Bình Thuận, Phú Yên
Hình 3: Hệ thống sản xuất điện từ năng lượng gió
7
Thủy điện
Là nguồn năng lượng được khai thác từ sức nước được khai thác tại các dịng
sơng, suối tại địa phương. Hiện nay, thủy điện đang được khai thác mạnh mẽ tại nhiều
khu vực tại nước ta
Hình 4: Khai thác năng lượng thuỷ điện từ các đập thuỷ điện
Năng lượng địa nhiệt
Là nguồn năng lượng được khai thác từ nhiệt độ trong lòng đất. Đây là nguồn
năng lượng mới và có tiềm năng khai thác lớn tuy nhiên vẫn chưa được triển khai rộng
rãi và cịn có hạn chế về cơng nghệ
Hình 5: Sơ đồ cấu tạo hệ thống địa nhiệt
8
Năng lượng chất thải rắn
Là nguồn năng lượng được khai thác từ chất thải hữu cơ. Đây là nguồn năng
lượng đáp ứng bài toán về năng lượng khi vừa giải quyết được vấn đề về năng lượng
vừa giải quyết được vấn đề về chất thải. Tuy nhiên để có thể sử dụng cũng như khai thác
một cách tối đa cần có nguồn lực kinh tế cũng như cơng nghệ khai thác
Hình 6: Sơ đồ hệ thống khai thác năng lượng chất thải rắn
1.1.3. Ưu nhược điểm của năng lượng tái tạo
• Ưu điểm:
o Các nguồn năng lượng trên có khả năng tái tạo được hoặc có trữ
lượng vơ cùng lớn từ đó khơng mất chi phí nhiên liệu
o Có hiệu quả sản xuất vượt trội hơn so với các nguồn năng lượng
hóa thạch
o Tác động đến mơi trường của các nguồn năng lượng tái tạo rất ít,
một số ngược lại cịn giảm thiểu các tác động từ mơi trường được
sinh ra từ các lĩnh vực khác
o Khu vực khai thác của các nguồn năng lượng tái tạo trải dài rộng
khắp tại rất nhiều khu vực khác nhau
• Nhược điểm:
o Có độ ổn định nguồn năng lượng thấp hơn rất nhiều so với năng
lượng hóa thạch hoặc nếu có ổn định cần những yêu cầu đặc biệt
về môi trường
9
o Đòi hỏi một nguồn lực kinh tế cũng như công nghệ cao để đáp ứng
khả năng lắp đặt và sử dụng
1.1.4. Ứng dụng
Hiện nay, các nguồn năng lượng tái tạo đang được các nước trên thế giới xúc tiến
trong đó có Việt Nam cũng đang đẩy mạnh nhu cầu và khả năng khai thác. Trên quy mô
công nghiệp, nước ta đẩy mạnh việc phát triển nguồn năng lượng tái tạo như nguồn năng
lượng gió và nguồn năng lượng mặt trời tại các khu vực như Phú Yên, Bình Thuận,...
Hình 7: Hệ thống nhà máy điện gió ở Ninh Thuận
Ngồi ra, nước ta còn đang đẩy mạnh phát triển và khai thác nguồn năng lượng
thủy điện tại các địa điểm ở miền Bắc và miền Trung có . Đối với các hộ gia đình, họ
lựa chọn sử dụng nguồn năng lượng tái tạo chủ yếu là nguồn năng lượng mặt trời được
lắp đặt trên các mái nhà ở cả các khu vực thành thị và nông thôn. Đối với vùng nơng
thơn, các hộ gia đình cịn đẩy mạnh các nguồn năng lượng tái tạo khác như các nguồn
năng lượng sinh khối sinh ra trong q trình chăn ni và canh tác nơng nghiệp, năng
lượng gió trên nhiều vùng núi cao hoặc các vùng đồng rộng rãi
1.1.5. Năng lượng gió
1.1.5.1. Định nghĩa
Gió là dạng năng lượng được sinh ra từ tự nhiên, nhờ sự di chuyển của khơng khí
trong bầu khí quyển. Đây cũng chính là một dạng năng lượng gián tiếp của năng lượng
mặt trời. Gió được hình thành nhờ kết quả của việc mặt trời và trái đất không cùng nằm
10
trên 1 đường thẳng, trái đất quay xung quanh mặt trời và bị đốt nóng khơng đều trong
khí quyển.
Hình 8: Cấu tạo tua bin gió
Nguồn năng lượng được sinh ra do sức gió đẩy các cánh quạt làm quay các tuabin điện, trục của các tua-bin đó kết nối với các máy phát điện làm biến đổi cơ năng sinh
ra do gió đẩy các tua-bin trởi thành điện năng
1.1.5.2. Các thông số yêu cầu dùng trong khai thác và sản xuất
• Tốc độ gió và hướng gió
Tốc độ gió là thông số vô cùng quan trọng ảnh hưởng trực tiếp đến khả năng nhận
gió của tua bin. Từ đố, tua bin có thể đón gió cũng như là sản xuất điện năng dựa vào
tốc độ gió tác động lên cánh quạt làm cảnh quạt quay
11
Hình 9: Đo đạc sức gió và hướng gió thơng qua cảm biến
Hướng gió là thơng số thứ yếu nhưng lại là một trong những thông số vô cùng
quan trọng trong q trình khai thác năng lượng gió bởi nếu với một hướng gió phù hợp
thì có thể nâng cao tốc độ quay cho tua bin và chịu ảnh hưởng trực tiếp đến hiệu suất
khai thác năng lượng gió
Khi có các thơng tin về tốc độ gió mơi trường mà chúng ta có thể lắp đặt và cài
dặt vận hành sao cho đạt được hướng mong muốn có thể khai thác tối đa hiệu suất năng
lượng cũng như thiết lập một chế độ hoạt động hợp lí nhằm vừa đạt được hiệu suất khai
thác cũng như gia tăng độ bền cho tua bin
• Tốc độ quay của tua-bin
12
Hình 10: Hệ thống tua bin gió hoạt động ở tốc độ cao
Là nhân tố chính ảnh hưởng đến khả năng khai thác năng lượng gió thành điện
năng sử dụng. Thông số ảnh hưởng tới sản lượng và chất lượng khai thác đồng thời cũng
là thông số chúng ta cần theo dõi nhằm duy trì độ bền cao cho các tua bin.
Thông số trên thường giao động từ 4m/s đến 25m/s nhằm đảm bảo chất lượng
điện cung cấp cũng như hạn chế sự hỏng hóc hệ thống tua bin khi phải hoạt động ở tốc
độ quá cao
• Nhiệt độ tua bin
Là thông số thứ yếu ảnh hưởng đến công suất làm việc cũng như độ bền của tua
bin đối với việc sản xuất. Việc để nhiệt độ quá cao khi quay với vận tốc lớn có thể gây
ảnh hưởng đến trục cũng như nhanh chóng gây hư hại đến các bộ phận bên trong tua bin
• Cường độ dịng điện, điện áp và công suất của tua bin
Là các thông số thể hiện hiệu năng sản xuất cũng như khả năng cung ứng năng
lượng đáp ứng nhu cầu cho các hộ gia đình, xí nghiệp.
13
Hình 11: Bảng khảo sát tốc độ gió với cơng suất sản xuất được của tua bin gió
Đây là thơng số quan trong dùng để người dùng có thể nắm bắt nhu cầu tiêu thụ
năng lượng ứng với tốc độ sản xuất từ đó có thể giúp người dùng quản lí và quy hoạch
hệ thống phù hợp với khả năng sản xuất và nhu cầu sử dụng
• Độ ồn của tua bin
Đây là thơng số ảnh hưởng đến việc tìm đặt vị trí có thể khai thác năng lượng gió
đảm bảo các quy định đồng thời không gây ảnh hưởng đến hệ thống dân cư xung quanh
• Ứng dụng của năng lượng gió
Hiện nay với sự tiến bộ của khoa học cơng nghệ mà năng lượng gió đang được
ứng dụng rất nhiều trong việc sản xuất năng lượng điện thay thế cho nguồn nhiên liệu
hóa thạch đang dần cạn kiêt. Việt Nam cũng là một trong số những nước đẩy mạnh phát
triển các nguồn năng lượng sạch, năng lượng tái tạo vào hệ thống sản xuất điện ở nước
ta. Nước ta đã và đang triển khai nhiều các nhà máy khai thác, sản xuất năng lượng điện
từ năng lượng gió như
o Nhà máy năng lượng điện gió Trung Nam (Ninh Thuận)
o Nhà máy điện gió Ninh Thuận (Ninh Thuận)
o Nhà máy điện gió Chính Thắng (Ninh Thuận)
o Nhà máy điện gió Mũi Dinh (Ninh Thuận)
o Nhà máy điện gió Đầm Nại (Ninh Thuận)
o Nhà máy điện gió Bạc Liêu (Bạc Liêu)
14
o Nhà máy năng lượng gió Phú Q (Bình Thuận)
Hình 12: Hệ thống nhà máy điện gió tại Ninh Thuận
Ngồi những nhà máy trên thì nước ta đã thấy được tiềm năng của năng lượng
gió từ đó xúc tiến khơng chỉ các nhà máy trên mà đã thúc đẩy mở rộng ra nhiều vùng có
khí hậu khắc nghiệt nhưng lại có tiềm lực sản xuất năng lượng tái tạo cũng như năng
lượng gió như Phú Yên, ....
1.2.
Tổng quan về hệ thống IOT
1.2.1. Định nghĩa
IoT (Internet of Things) nghĩa là Internet vạn vật. Một hệ thống các thiết bị tính
tốn, máy móc cơ khí và kỹ thuật số hoặc con người có liên quan với nhau và khả năng
truyền dữ liệu qua mạng mà không yêu cầu sự tương tác giữa con người với máy tính.
15
Hình 13: Hệ thống Internet of Things (IoT)
1.2.2. Cấu trúc hệ thống IOT
Cấu trúc chung của một hệ thống IOT bao gồm 4 phần
Hình 14: Cấu trúc một hệ thống IOT
• Thiết bị (Things)
• Trạm kết nối (Gateways)
• Hạ tầng mạng (Network and Cloud)
• Bộ phân tích và xử lý dữ liệu (Services-creation and Solution Layers)
16
1.2.3. Các đặc trưng cơ bản của hệ thống IoT
Khả năng định danh: Bất kì một Things nào kết nối với hệ thống IOT luôn được
định danh bằng một mã đinh nhất định không phân biệt con người hay máy móc. Việc
tạo định danh giúp cho hệ thống dễ dàng phân loại nhóm đối tượng từ đó đưa ra được
kết quả chính xác ,hiệu quả.
Thơng minh: Một hệ thống IOT khơng chỉ có thể hoạt động và phân loại dựa
trên những yêu cầu đã được thiết lập sẵn mà hiện nay cịn có thể tích hợp trí tuệ nhân
tạo vào trung tâm vào hệ thống nhằm xử lí và đưa ra các hoạt động nằm ngoài những
thiết lập đã được cài đặt ban đầu
Kết nối liên thông: Trong một hệ thống IOT thì tất cả Things đều được kết nối
với nhau thông qua một mạng lưới cố dịnh
Thay đổi linh hoạt: Tất cả các thiết bị đều có thể được điều khiển hoặc thay đổi
tùy thuộc vào yêu cầu
Quy mô kích thước lớn: Hệ thống IoT sở hữu máy móc, thiết bị với số lượng
cực lớn. Tất cả đều được quản lý và giao tiếp với nhau và khối lượng thông tin truyền
đi giữa chúng thực tế lớn hơn gấp nhiều lần so với tưởng tượng.
1.2.4. Ưu và nhược điểm của hệ thống IoT
1.2.4.1. Ưu điểm
• Truy cập thơng tin mọi lúc, mọi nơi trên mọi thiết bị thông minh có kết
nối internet.
• Hệ thống IoT cải thiện khả năng giao tiếp giữa các thiết bị điện tử.
• Chuyển dữ liệu nhanh chóng qua Internet giúp tiết kiệm thời gian và tiền
bạc.
• Tự động hóa nhiệm vụ được giao giúp cải thiện chất lượng dịch vụ của
doanh nghiệp.
1.2.4.2. Nhược điểm
• Thơng tin được chia sẻ giữa nhiều thiết bị có thể bị đánh cắp. Do đó, cần
có giải pháp ngăn ngừa, phòng chống nguy cơ.
17
• Khi hệ thống xảy ra lỗi, nếu khơng có biện pháp khắc phục kịp thời có khả
năng gây hư hại nhiều thiết bị.
1.2.5. Ứng dụng
• Ngành chế tạo:
Trong ngành chế tạo, IOT được ứng dụng nhằm lắp đặt trong các dây chuyền sản
xuất nhằm tự động vận hành giám sát và sửa lỗi hoạt động trên các thiết bị
Hình 15: Ứng dụng IoT trong ngành chế tạo thông qua các cánh tay máy
Cảm biến được lắp trên dây chuyền trong hệ thống IoT sản xuất sẽ đo lường được
số lượng sản phẩm bị hư hại hoặc không đáp ứng tiêu chuẩn đề ra. Nhờ đó, cơng tác
phát hiện sai sót và sửa lỗi được tối ưu hóa về mặt thời gian và hiệu suất giúp doanh
nghiệp cắt giảm chi phí hoạt động đồng thời cải thiện quản lý hiệu suất tài sản.
• Ngành sản xuất ơ tơ
Trong ngành sản xuất ô tô, hệ thống IOT được lắp đặt phục vụ cho việc tự động
hóa các dây chuyền sản xuất đồng thời cũng để kiểm thử khả năng lỗi của các hệ thống
sản xuất
18
Hình 16: Hệ thống xử lí cảnh báo va chạm cho xe tự lái
Đồng thời cịn được tích hợp trong các hệ thống ô tô dùng để đưa ra các cảnh báo
nguy hiểm đồng thời đưa ra các chỉ dẫn cần thiết cho người sử dụng
• Ngành y tế:
Hiện nay hệ thống IOT đang dần được phát triển nhằm thu thập các số liệu đo
đạc y tế đến từ bệnh nhân lưu vào các bệnh án điện tử. Từ đó, hệ thống có thể giảm bớt
gánh nặng cho bệnh nhân khi đi lại đồng thời cũng tiến đến hệ thống bệnh án y tế giúp
người bệnh ở các vùng nông thơn khó khăn có thể được tiếp cận y tế tuyến cao hơn, tiết
kiệm chi phí đi lại
1.2.6. Giao diện cho hệ thống IOT
1.2.6.1. Định nghĩa
Là phần giúp cho người dùng là con người có thể nắm được các thơng tin mà
người dùng mong muốn đồng thời cũng phải cung cấp cho người dùng công cụ đùng để
tương tác điều khiển hệ thống IOT một cách dễ dàng từ đó người dùng có tồn quyền
về thơng tin cần nắm trên các cảm biến
1.2.6.2. Yêu cầu giao diện
Giao diện cần có nội dung trực quan dễ nhìn, đảm bảo thể hiện đủ tất cả các nội
dung mà hệ thống cần yêu cầu. Các nội dung cần được sắp xếp gọn gàng, khoa học đảm
bảo thuận tiện cho người sử dụng thu thập dữ liệu
19
1.2.6.3. Mối quan hệ của giao diện tới hệ thống IOT
Trong một hệ thống IOT, giao diện giúp thể hiện được các thông tin mà người
dùng cần thu thấp đồng thời giúp người dùng có thể tương tác và kết nối tới hệ thống
IOT thông qua việc tương tác với giao diện trên. Có thể thấy được giao diện chính là
cầu nối để người dùng có thể tương tác đồng thời quản lí các hệ thống máy móc trong
một giao diện IOT
1.2.7. Mối quan hệ giữa việc sử dụng hệ thống IOT đối với việc sản xuất năng lượng
Với sự tiến bộ của khoa học cơng nghệ hiện nay thì việc thu thập dữ liệu phục vụ
cho việc quan sát và theo dõi hệ thống ngày càng trở nên dễ dàng. Tuy vậy dữ liệu trên
tồn tại dưới dạng các tham số vơ cùng rối rắm và gây khó khăn cho người đọc đồng thời
các cảm biến cần có sự liên kết với nhau thì khi đó các duẽ liệu mới được tập trung để
xử lí và hiển thị. Chính vì lí do trên, cần phải phát triển một hệ thống IOT dùng để thu
thập thông tin từ rất nhiều cảm biến phục vụ cho công tác giám sát và phải biểu diễn các
dữ liệu đó một cách trực quan nhằm đảm bảo cho người giám sát có thể dễ dàng nhận
biết và thu thập các thông tin quan trọng đảm bảo việc giám sát hệ thống có hiệu quả
1.3.
Tổng quan về Front-end
1.3.1. Định nghĩa
Phần front-end của một trang web là phần tương tác với người dùng. Tất cả mọi
thứ bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các
menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript
được điều khiển bởi trình duyệt máy tính của bạn.
20
Hình 17: Hệ thống giao diện Iot đầy đủ
1.3.2. Cấu trúc của một front-end
Cấu trúc của một Fron-end bao gồm các file HTML, CSS và JavaScript được liên
kết với nhau dùng để tạo nên giao diện cho một website đồng thời cũng là nơi xử lí các
tương tác của người dùng đến hệ thống giám sát
1.3.2.1. HTML
HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ
đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần trong
trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và
HTML khơng phải là ngơn ngữ lập trình.
Hình 18: HTML
21
Khi bạn gõ ra 1 tên miền, trình duyệt mà bạn đang sử dụng (chẳng hạn như
Chrome) sẽ kết nối tới 1 máy chủ web, bằng cách dùng 1 địa chỉ IP, vốn được thấy bằng
cách phân giải tên miền đó (DNS). Máy chủ web chính là 1 máy tính được kết nối tới
internet và nhận các yêu cầu tới trang web từ trình duyệt của bạn. Máy chủ sau đó sẽ
gửi trả thơng tin về trình duyệt của bạn, là 1 tài liệu HTML, để hiển thị trang web
Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements). Mỗi thẻ sẽ
có những tác dụng nhất định, giúp xây dựng nên một cấu trúc hoàn chỉnh cho Website.
Bạn có thể xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu
trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác.
1.3.2.2. CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó 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 (HTML).
Nói ngắn gọn hơn là ngơn ngữ tạo phong cách cho trang web.
Hình 19: CSS
22
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ể thêm style vào các phần tử
HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn
có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp
dụng các thuộc tính cần thay đổi lên vùng chọn đó.
Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup
(nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện
website), chúng là không thể tách rời.
1.3.2.3. JavaScripts
JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web
tương tác. Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và
bản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng
của trang web.
JavaScript là một ngôn ngữ lập trình thơng dịch với khả năng hướng đến đối
tượng. Là một trong 3 ngơn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để
xây dựng một website sống động, chuyên nghiệp:
Hình 20: JavaScripts
23
Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt. Nó có
thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ
HTML một cách dễ dàng. Hay nói cách khác, Javascript là một ngơn ngữ lập trình trên
trình duyệt ở phía client
1.3.2.4. Typescripts
TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể
được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh
và lớp hướng đối tượng mà điều này khơng có ở Javascript. TypeScript có thể sử dụng
để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS).
Hình 21: TypeScripts
Bản chất của TypeScript là biên dịch tạo ra các đoạn mã javascript nên ban có
thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript. Ngồi ra bạn có thể sử
dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập
trình viên tiếp cận TypeScript dễ dàng hơn.
TypeScript được xem là một phiên bản nâng cao hơn của JavaScript vì nó được
thiết kế thêm nhiều chức năng tiện lợi hơn, cải tiến hơn từ những điểm yếu của
JavaScript như các lớp hướng đối tượng và Static Structural typing
1.3.2.5. Angular
Angular là một mã nguồn mở viết bằng TypeScript và được sử dụng để thiết kế
giao diện web (front – end). Angular được xây dựng, phát triển từ những năm 2009 và
24
