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

 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

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!

3

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 ụ

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

6

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.

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

-

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:

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

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

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

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

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

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

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

14

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)

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

16

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

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

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

N 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:

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

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!