báo cáo bài tập lớn kỹ thuật phần mềm ứng dụng

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

1

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VIỆN ĐIỆN TỬ - VIỄN THÔNG

L ờ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 !

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ăng

4.2 K t luế ận và đánh giá chung

Mục L c ụ

Chươ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

+ 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 t

yếu

Quả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

8

của mình khi đã từng thêm vào trang web Có th thêm các thi t b ể ế ị

cảm ứng m i lên trang web m t cách d dàng.ớ ộ ễ

- Admin c a h ủ ệ thống có th tìm ki m thông tin khách hàng, thông tin ể ế

c a h ủ ệ thống c a h ủ ệ thống của khách hàng đã thêm vào trang web

Đồng th i Admin có th xóa bỏ các thi t bị không h p lệ mà khách ờ ể ế ợhàng đã thêm vào

- 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ễ ất

1.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

Sơ đồ luồng dữ liệu DFD:

Sơ đồ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

TK KH T.T KH

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

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ị

12

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

STT 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

Mã khách hàng => (Mã thi t b , têế ị n khách hàng, email, tên đăng nhập,

m t kh u, s ậ ẩ ố lượng thi t b ế ị đang sử ụ d ng trên h ệ thống)

Chu n hóa CSDL: ẩ

Liệt kê các thuộc tính: B ng R1 ả

Chu n hóa 1NF b ng R1 b ng cách làm ph ng b ng => Bẩ ả ằ ẳ ả ảng R1

Mã 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

Mã khách hàng (*)

Mã thi t b ế ịNgày thêm thi t b ế ịNgày xóa thi t b ế ịR4

Chươ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

18

- 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

Giao di n phệ ần đăng nhập người dùng

Giao di n ph n thêm thi t b ệ ầ ế ị

20

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”

Sau 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ý

22

Sau 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

24

Sau khi ấn “Register”, hệ thống s tẽ ự động t o m t h ạ ộ ồ sơ người dùng vào database

Đểtăng tính bảo mật của người dùng, ta dùng hàm băm (Hash) để mã

hóa m t khậ ẩu để tránh tìnhtrạng đánh cắp cũng như lộ thông tin

3.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 độ”

Sau 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ị ể ế

28

C hương 4 K ết lu n ậ

- Nhóm ch ỉ thực hi n m t s ệ ộ ố chức năng cơ bản đã được đề ra nhưng còn

m t s ộ ố chức năng vẫn chưa thể hoàn thiện được

- Các ph n chầ ức năng nên trên vẫn còn m t s h n chộ ố ạ ế nhất định 4.2 K t lu ế ận và đánh giá chung

Nhìn chung, h ệ thống đã hoàn thành được những module nhóm đã

đề ra, nhưng kèm theo đó là nhiều vấn đề phát sinh mà nhóm chưa thể kiểm soát được và cũng do kiến thực của nhóm đang còn khá hạn hẹp bởi v y nhóm vậ ẫn chưa thể thực hiện được mộ ốt s yêu cầu ban đầu đã đề

ra

Phươ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

L 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!