Tuy ộốấnhiên trong quá trình th c hi n k , ựệỹ năng lập trình của nhóm em còn bị h n ch dạế ẫn đến sản phần vẫn chưa thể hoàn thiện như mong muốn.. Đánh giá và th ử nghiệm 3.1 Thử nghiệm
Trang 11
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN ĐIỆN TỬ - VIỄN THÔNG
Phạm Khương Duy 20192804 Dương Thế Hiếu 20182509 Bùi Ph m Minh Tu n 20193168 ạấ Quàng Thành Đạt 20192755
Trang 2Lời nói đầu
Đầu tiên, nhóm thực hi n xin g i l i cệử ờ ảm ơn chân thành tới thầy V H i thu c viũ ảộện Đ ệ ửi n t - Viễn thông, trường Đại học Bách khoa H Nà ội đã giúp cho nhóm có những kiến thức cơ bản để làm nền t ng th c hiảựện đề tài này Thầy đã hướng d n t n tình, s a chẫ ậửữa và đóng góp nhiều ý kiến quý báu giúp nhóm có th hoàn thành tểốt môn học.
Trong th i gian th c hiờựện đề tài, nhóm đã vận dụng những kiến thức n n tảng đã tích lũy đồng thờềi k t h p vế ợới vi c h c h i và ệọỏnghiên c u nh ng ki n th c mứữếứới T ừ đó nhóm có thể vận dụng tối đa những gì đã thu thập để hoàn thành m t báo cáo t t nh t Tuy ộốấnhiên trong quá trình th c hi n k , ựệỹ năng lập trình của nhóm em còn bị h n ch dạế ẫn đến sản phần vẫn chưa thể hoàn thiện như mong muốn Vì vậy, nhóm r t mong nhấận được sự đóng góp ý kiến từ phía thầy V H i nh m hoàn thành nh ng ph n thi u sót ũ ảằữầếđó đồng thời cho ra được một s n phảẩm hoàn thiện hơn
Xin chân thành cảm ơn!
Trang 33
Chương 1 Các pha phát tri n trong h ể ệ thống1.1 Pha l p k ậ ế hoạch
1.2 Pha tìm hi u yêu c u ể ầ1.3 Pha phân tích 1.4 T ừ điển d u ữ liệ
1.5 Pha thi t k ế ế cơ sở ữ liệ d u
Chương 2 Giao di n h ệ ệ thống
2.1 Xác định các yêu c u thi t k website ầ ế ế2.2 Các bước thi t k website ế ế
Chương 3 Đánh giá và th ử nghiệm
3.1 Thử nghiệm chức năng đăng nhập cho người dùng 3.2 Th ử nghiệm phần đăng ký cho người dùng 3.3 Th ử nghiệm ph n thêm c m biầ ả ến cho người dùng
Chương 4 K t lu n ế ậ4.1 ánh giá các chĐ ức năng4.2 K t luế ận và đánh giá chung
Mục L c ụ
Trang 4Chương 1 Các pha trong phát triển hệ thống
1.1 Pha l p kậế hoạch
Khởi t o d án:ạự
Các mục tiêu cơ bản c a trang webủ ;
- Cung c p giao di n tr c quan, d dàng thu n tiấ ệ ự ễ ậ ện để khách hàng d ễtheo dõi và qu n lý các thi t b cả ế ị ảm ứng.
- Có th tìm hi u thông tin, k t qu c a thi t b c m bi n mể ể ế ả ủ ế ị ả ế ột cách đơn giản nh t ấ
- Có th d dàng qu n lý s ể ễ ả ố lượng thi t bế ị, số lượng khách hàng s ửdụng
- D dàng qu n lý, th ng kê s u k t qu ễ ả ố ố liệ ế ả nhận đượ ừc t các thi t b ế ị- Cập nh t thông tin nhanh chóng, b sung thông tin k p th i theo các ậ ổ ị ờ
- Có th d dàng qu ng bá trang wed b ng mể ễ ả ằ ột đường Link, m t cú ộClick t ừ đó khách hàng rấ ễ tiết d p cận
Trang 56
Phân tích tính kh thiả : - Khả thi v mề ặt kĩ thuật
Các thành viên trong nhóm có kh ả năng phân tích, thiế ế cơ sở ữt k d liệu, l p trình front-end và back-end cho website ậ
Nhóm hoàn toàn có kh ả năng hoàn thiện, xây d ng h ự ệ thống này - Khả thi v m t kinh t : ề ặ ế
+ Do các thành viên trong nhóm đều có khả năng thiết kế và lập trình cho h ệ thống nên không m t chi phí h c thêm ngôn ng m i ho c thuê ấ ọ ữ ớ ặnhân l c bên ngoài ự
+ Do h ệ thống không làm vi c v i các ngu n c n cung c p chi phí tr ệ ớ ồ ầ ấ ảthêm đồng thời không sử dụng các thiết bị ngoại vi nên không m t chi ấphí mua ph n cầ ứng.
Nhóm hoàn toàn có kh ả năng hoàn thiện, xây d ng h ự ệ thống này - Khả thi v m t tề ặ ổ chức:
Trong kinh doanh, vi c d dàng s d ng, ti p cệ ễ ử ụ ế ận, đơn giản hóa giúp công vi c giúp cho khách hàng, công ty hay m t doanh nghi p là mệ ộ ệ ột việc vô cùng c n thiầ ết và đắt giá, từ đó có thể lôi kéo cuốn hút thêm nhiều người sử dụng, biết tới hệ thống hơn Cùng với sự phát triển m nh m c a m t n n xã h i phát tri n- ạ ẽ ủ ộ ề ộ ề thời kì 4.0, các thi t b ế ị điện tử, cảm ứng thu th p thông tin xu t hi n trong các công ty, doanh ậ ấ ệnghiệp ngày càng nhi u và phổ ến thì một h ề bi ệ thống được xây dựng để tổng hợp các thông tin đó lại một cách rành m ch, rõ ràng cho ạngườ ửi s d ng d ụ ễ dàng quan sát, theo dõi được ra đời là một điề ất u tyếu.
Trang 6Quản tr d ị ự án:- Quản lý d án: ự
- Danh sách thành viên nhóm: 1 Phạm Khương Duy: Leader
2 Bùi Ph m Minh Tu n: Timekeeper ạ ấ3.Dương Thế Hiếu: Notetaker 4 Quàng Thành Đạt: Team member - Phân công công vi ệc:
1 Phạm Khương Duy: Phân tích và thi t k h ế ế ệ thống, x lý back-end ửvà front-end
2 Bùi Ph m Minh Tu n: Phân tích và thi t k ạ ấ ế ế sơ bộ front-end, làm báo cáo và h ỗ trợ làm slide thuy t trình ế
3 Dương Thế Hiếu: Thống kê các yêu cầu cần thiết qua các bài giảng, làm slide, thuy t trình gi i thiệu h thốế ớ ệ ng
4 Quàng Thành Đạt: Hỗ trợ làm slide và làm web
1.2 Pha tìm hi u yêu c u ểầ
-
M i khi có thi t b mỗ ế ị ới được thêm vào h ệ thống, thi t b ế ị đó sẽ được gắn một ID và qu n lý (Admin) cả ủa h ệ thống s ẽnhập t t c thông tin ấ ảc a thi t b ủ ế ị đó lên hệ thống Admin có có th ể chỉnh s a thông tin cử ủa thi t b ế ị đó và có thể xóa thi t b ế ị đó khỏ ệ thống i h-
Mỗi khi có khách hàng đăng nhập vào trang web và đăng kí tài khoản trên website, ngay l p t thông tin cậ ứ ủa khách hàng được ghi l i và cạ ập nhật trên h thống Khách hàng có th s dụng tài kho n cá nhân của ệ ể ử ảmình để đăng nhập Khách hàng có thể thêm thông tin hoặc sửa đổi thông tin cá nhân c a b n thân trong trang.ủ ả-
Khi khách hàng đăng nhập vào tài khoản của bản thân, khách hàng có thể theo dõi biểu đồ thông kê số liệu c a t t c các thi t bủ ấ ả ế ị cảm ứng Trang 7-
H ệ thống s c p nh t thông tin c a các thi t b thu và c p nh t lên ẽ ậ ậ ủ ế ị ậ ậtrang web qua t ng kho ng th i gian c ừ ả ờ ố định mà người dùng có th ểtùy ch nh T ỉ ừ đó vẽ ạ l i, so sánh thông qua d ng biạ ểu đồ ộ m t cách trực quan, d quan sát nhễ ất1.3 Pha phân tích
Sơ đồ chức năng của hệ thống:
Hệ thống qu n lí ảthiết bị cảm bi n ế
1 Qu n tr ảịhệ thống
2 Qu n lí ảngười dùng
3.Quản lí thiết bị cảm bi n ế
4.Tìm kiếm
5 Cập nhật thông
n
Đăng kí KH
Sửa thông n cảm biến Thêm cảm biến m i ớThêm
người dùng
Cập nhật thông n theo s ngày ốTìm kiếm
sản ph m ẩTìm kiếm khách hàng
Xóa cảm biến Đăng nhập Xóa người
dùng
Cập nhật thông n theo ngày Cập nhật thông n theo gi ờ
Chỉnh s a ửthông n
Trang 8Sơ đồ luồng dữ liệu DFD:
Quản tr viên ị
Khách hàng 1 Qu n tr ảị
hệ thống
3 Qu n lí ảthiết bị cảm biến
5 C p nhậật thông n 4 Tìm ki m ế
T.T TKD
TK KH
Thiết bị T.T PH
2 Qu n lí ảkhách hàng
Trang 9Sơ đồDFD mức 1 (chức năng 1):
1.1 Đăng kí
Quản trị hệ thống
1.2 Đăng nhập
1.3 Chỉnh sửa thông
n
TK KH T.T KH
2.1 Xóa khách hàng
Khách hàng T.T KH
T.T KH T.T KH Đăng kí
T.T KH Ph n h i ảồ
T.T KH Ph n h i ảồ
T.T KH
Trang 10Sơ đồ DFD mức 1 (chức năng 3):
Quản tr viên ị
3.1 Thêm cảm biến m i ớ
3.2 S a thông ửn c m bi n ảế
3.3 Xóa cảm biến cũ
Khách hàng T.T Thiết bị
T.T PH
T.T TB
Sơ đồ DFD mức 1 (chức năng 4):
4.1 Tìm kiếm khách hàng
Quản trị viên 4.2 Tìm kiếm
T.T KH T.T Ph n h i ảồ
T.T TB T.T PH T.T PH
T.T KH
Khách hàng
Thiết bị
Trang 1112
Sơ đồ DFD mức 1 (chức năng 5):
5.1 C p nhậật thông n theo
giờ
5.1 C p nhậật thông n theo
ngày
5.1 C p nhậật thông n theo
nhiều ngày
Thiết bị T.T PH
T.T KH
T.T KH
T.T KH T.T PH
T.T PH
T.T P.H
Trang 12STT Viế ắt t t Mô t ả
1 QTHT Quản trị h thống: bao bao gồm đăng kí ệkhách hàng, đăng nhập, ch nh s a thông tin ỉ ử2 Đăng kí KH Đăng kí khách hàng: Khách hàng đăng kí
thông tin c n thiầ ết để ạ t o 1 tài khoản để có thđủ điều ki n s d ng h th ng: tê, tuổi, nơi ệ ử ụ ệ ốlàm vi c, s ệ ố điện thoại, địa chỉ,…
3 Chỉnh s a TT ử Chỉnh s a thông tin: ử chỉnh s a các thông tiửcác nhân c a khách hàng ủ
4 Sửa thông tin
TB Sửa thông tin thi t b : các thông tin thi t b như tên, chỉ số,… ế ị ế ị5 TT PH Thông tin ph n h i: là các thông tin sau khiả ồđã được tính toán qua các bước của hệ thống và tr v ả ề để phản h i nh ng thông tin nhồ ữ ập vào c a khách hàng hay Amin ủ
6 TT KH Thông tin khách hàng: nh ng thông tin cácữnhân mà khách hàng đã cung cấp khi đăng kí tài kho n ho c các thi t b cả ặ ế ị ảm ứng c u kháảhàng thêm vào
7 TT TB Thông tin thi t b : Các thông tin mà các thiế ị ếbị thu nhận đượ ại nơi làm việc t c của khách hàng g i v h ử ề ệ thống
1.5 Pha thi t kế ế cơ sở ữ liệ d u (CSDL)
Những d u c n qu n lý: ữ liệ ầ ả- Thi t b ế ị- Khách hàng
1.4 Từ điển dữ liệu
Trang 1314
Các thu c tính mà h ộ ệ thống CSDL qu n lý: ả
Mã thi t b (ID thi t b ), tên thi t b , chú thích, mã khách hàng (ID khách ế ị ế ị ế ịhàng), tên khách hàng, s ố điện thoại, email, địa chỉ công ty (nơi đặt thiết bị cảm ứng), tên đăng nhập, m t khậ ẩu (được mã hóa), ngày thêm thi t bế ị, ngày ng ng s d ng thi t b (có th b qua nừ ử ụ ế ị ể ỏ ếu chưa có thông tin chính xác)
Trang 14Mã thi t b ế ịTên thi t b ế ị
Chỉ s ố đoBiểu đồ dữ liệu Mã khách hàng Tên khách hàng
Email Tên đăng nhập
M t kh u ậ ẩSố thi t b ế ịNgày thêm thi t b ế ị
Ngày xóa thi t b ế ị
Chu n hóa 2NF bẩ ảng R1 => ta xác định khóa chính và tách bảng Bảng R1 (khóa chính là Mã khách hàng)
Chuẩn hóa 3NF1 bảng R1 => Ta thu được b ng R2, R3, R4 ả R2
Mã thi t b ế ị (*)Tên thi t b ế ị
Chỉ s ố đoBiểu đồ dữ liệu
Trang 1516
R3
Mã khách hàng (*) Tên khách hàng Email
Tên đăng nhập M t kh u ậ ẩSố thi t b ế ị
Sơ đồ thực thể liên kết (ERD) Mã khách hàng (*)
Tên khách hàng Email Tên đăng nhập
M t kh u ậ ẩSố thi t b ế ị
Mã thi t b (*) ế ịTên thi t b ế ị
Chỉ s ố đoBiểu đồ dữ liệu
Mã khách hàng (*) Mã thi t b ế ịNgày thêm thi t b ế ị
Ngày xóa thi t b ế ị
Mã khách hàng (*) Mã thi t b ế ịNgày thêm thi t b ế ị
Ngày xóa thi t b ế ịR4
Trang 16Chương 2 Giao diện hệ thống
2.2.1 Xác định các yêu cầu thiết kế giao diện website
Yêu c u thi t k ầ ế ế:
- Cần rõ ràng, sáng s a, thân thi n ủ ệ
- Cần đầy đủ các chức năng đã nêu, dễ ử ụ s d ng và s d ng an toàn ử ụ- Cần hiểu được các nhu c u s d ng c a khách hàng khi truy cầ ử ụ ủ ập
vào sửdụng trang web
- Cần kh ả năng tùy biến và linh hoạt để tránh nhàm chán, giúp việc sửd ng ngày càng hi u qu ụ ệ ả
Quy t c thi t k ắ ế ế:
- Đặ ngườt i dùng vào v ị trí điều khi n: Vi c thi t k giao di n cể ệ ế ế ệ ần đứng t ừgóc độ người dùng và vì người dùng, chứ không chỉ góc ởđộ của người phát triển h ệthống dùng chương trình
- T o giao di n nh t quán: Các giao di n c a m t h ạ ệ ấ ệ ủ ộ ệ thống c n phầ ải theo m t phong cách th ng nhộ ố ất nào đó, như các form nhập liệu theo m t cách b trí nhộ ố ất định, các báo cáo có cùng định d ng nhạ ất định, các c a sổ có cùng phong cách nhử ất định
2.2.2 Các bước thiết kế giao diện website
Phân tích môi trường, người dùng, các công việc:
- Trang web t p trung sậ ửdụng trên trình duy t c a máy tính Thiệ ủ ết kế website b ng Reactjs ằ
- Đối tượng s d ng s là b t c ai có nhu cử ụ ẽ ấ ứ ầu đưa dữ liệ u c a củ ảm biến lên và theo dõi d li u của cảm biữ ệ ến.
Trang 1718
- Các công việc: Đưa ra menu cho các lựa ch n, mọ ục đăng nhập/đăng ký, giao diện trang chủ, quản lý các thi t bế ị, đăng ký/đăng nhập
Thi t kế ế, cài đặt giao di n : ệ
- Phác th o b c c và thi t k giao di n website: ả ố ụ ế ế ệ
- Thi t k b c c vào giao di n web trên Visual Studio Code + chế ế ố ụ ệ ỉnh sửa tr c ti p trên trình duy t Chrome + s dự ế ệ ử ụng thư việnhỗ trợ front-end: Material- UI
- Chỉnh sử : a Hoàn thi n giao di n s chính th c s dệ ệ ẽ ứ ử ụng:
Giao diện ph n biầ ểu đồ các d l u c a các c m biữ ệ ủ ả ến
Trang 18Giao di n phệ ần đăng nhập người dùng
Giao di n ph n thêm thi t b ệ ầ ế ị
Trang 1920
CHƯƠNG 3: ĐÁNH GIÁ VÀ THỬ NGHIỆM
3.1 Th nghi m chửệức năng đăng nhập cho người dùng
Đầu tiên người dùng sẽ điền thông tin tài khoản mật khẩu
Sau khi điền tài khoản và mật khẩu xong người dùng ấn nút “SIGN IN”
Trang 20Sau khi đăng nhập thành công h ệ thống s t o ra m t mã Json Web ẽ ạ ộToken để có thể thực hiện các thao tác liên quan đến dữ liệu người dùng
Khi đăng nhập thành công trang web sẽ tự động chuyển hướng đến giao diện chính
Nếu thông tin đăng nhập không thành công, h ệ thống s báo cáo l i vẽ ạ ới người dùng và yêu c u nh p l i ầ ậ ạ
3.2 Th nghi m phửệần đăng ký người dùng
Nếu người dùng chưa có tài khoản để đăng nhập, trong phần đăng nhập, ấn vào dòng “Sign Up” để trang web điều hướng sang mục đăng ký
Trang 2122
Trang 22Sau khi điề thông tin đăng ký và ngườn i dùng ấn đăng ký, hệ thống sẽ kiểm tra các phần đã được hoàn chỉnh chưa và thực hi n thao tác t o mệ ạ ột tài kho n mả ới
N u mế ột trong các thông tin điền b l i, trang web s ị ỗ ẽ hiện ra các thông báo và giúp người dùng thực hiện lại các thao tác điền thông tin
Trang 243.3 Th nghi m ph n thêm thi t b , c m biửệầếị ảến
Sau khi đăng nhập thành công, giao diện chính của trang web hiện lên
Phần thêm thi t bị được đặt ở phía trên c a giao di n chính trang web và ế ủ ệnếu người dùng muốn thêm thiết bị phải nh p tên cậ ủa thi t b c n theo ế ị ầdõi.
Giả ử s nếu người dùng nhập tên thi t bị ế là “đo nhiệt độ”
Trang 25N u ta nh p trùng tên h ế ậ ệ thống s báo l i v ẽ ỗ ề cho người dùng và yêu cầu nhập l ại:
Trang 26Sau khi ta thêm thi t b thành công, h ế ị ệ thống s t o ra mẽ ạ ột module để cho người dùng có thể quan sát và quản lý dữ liệu được gửi lên
Phần biểu đồ của thi t bị ếPhần hi n thị Api Key của thi t bị ểế
Trang 27Phương hướng đề ra để tiếp tục phát triển sản phẩm:
Cần c i thi n ph n giao di n web nhìn b t m t và thú vị hơn nhằm ả ệ ầ ệ ắ ắtăng cảm giác thân thiện cho người sử dụng
Cần làm thêm chức năng phát hiện nguy hiểm, c nh báo cho khách ảhàng khi thu nhận được tín hi u t máy c m bi n có m c tín hiệ ừ ả ế ứ ệu ngoài vùng an toàn
Cần thêm chức ăng xác nhận gamil người dùng, hiển thị thông tin người dùng, …
Cần ph i tri n khai web trên th c tế ả ể ự
Sau m t th i gian h c t p và nghiên cộ ờ ọ ậ ứ, nhóm em đã hoàn thành bài t p lậ ớn đúng tiến độ do Thầy đề ra, tuy nhiên do th i gian và kiờ ến thức của nhóm còn thi u sót nhi u nên không th tránh khỏi nh ng ế ề ể ữđiểm trục tr c Nhóm em rặ ất mong được thầy chỉ b o và quan tâm ảnhiều hơn để hoàn thiện bài tập Em cảm ơn thầy và các bạn
Trang 28L i k t ờ ế
Nhóm Blood for future chúng em xin chân thành cảm ơn thầy ũV Hải đã hướng d n và ch b o nhóm chúng em trong su t th i gian nhóm ẫ ỉ ả ố ờtiến hành th c hi n d án Web qu n lý d ự ệ ự ả ữ ệ c m bi n và giúp chúng li ả ếem hoàn thành bài t p l n l n này ậ ớ ầ
Xin chân thành cảm ơn!