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

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.37 MB, 28 trang )

Trang 1<div class="page_container" data-page="1">

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

</div>Trang 2<div class="page_container" data-page="2">

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 hồ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ể hồ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 hồ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!

</div>Trang 3<div class="page_container" data-page="3">

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 ụ

</div>Trang 4<div class="page_container" data-page="4">

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

</div>Trang 5<div class="page_container" data-page="5">

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 hồn tồ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 ngồ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 hồn tồ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.

</div>Trang 6<div class="page_container" data-page="6">

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

</div>Trang 7<div class="page_container" data-page="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ễ ấ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

</div>Trang 8<div class="page_container" data-page="8">

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

</div>Trang 9<div class="page_container" data-page="9">

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

</div>Trang 10<div class="page_container" data-page="10">

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ị

</div>Trang 11<div class="page_container" data-page="11">

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 PH

T.T PH

T.T P.H

</div>Trang 12<div class="page_container" data-page="12">

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

</div>Trang 13<div class="page_container" data-page="13">

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)

</div>Trang 14<div class="page_container" data-page="14">

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

</div>Trang 15<div class="page_container" data-page="15">

16

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

</div>Trang 16<div class="page_container" data-page="16">

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.

</div>Trang 17<div class="page_container" data-page="17">

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

</div>Trang 18<div class="page_container" data-page="18">

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

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

</div>Trang 19<div class="page_container" data-page="19">

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”

</div>Trang 20<div class="page_container" data-page="20">

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ý

</div>Trang 21<div class="page_container" data-page="21">

22

</div>Trang 22<div class="page_container" data-page="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

</div>Trang 24<div class="page_container" data-page="24">

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

</div>Trang 25<div class="page_container" data-page="25">

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:

</div>Trang 26<div class="page_container" data-page="26">

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

</div>Trang 27<div class="page_container" data-page="27">

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 ngồ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 đã hồ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.

</div>Trang 28<div class="page_container" data-page="28">

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!

</div>