Khóa luận tốt nghiệp Công nghệ thông tin: Xây dựng website dạy tập luyện thể dục trực tuyến

Các hệ thống này vừa tạo ra môi trường cho người dạy cung cấp dịch vụ,khóa học giúp họ tìm được nhiều học viên cũng như giúp được khách hàng, họcviên tìm được khóa học tốt mà chi phí phả

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRUONG ĐẠI HỌC CÔNG NGHỆ THONG TIN KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN

BUILDING A WEB-APPLICATION FOR TRAINING ONLINE

CU NHAN NGANH CONG NGHE THONG TIN

TP HO CHi MINH, 2022

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRUONG ĐẠI HỌC CÔNG NGHỆ THONG TIN KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN

HỒ VƯƠNG KHANH LONG - 18521024

DANG NHẬT HUY - 18520820

KHOA LUAN TOT NGHIEP XAY DUNG UNG DUNG HUONG DAN TAP LUYEN

TRUC TUYEN

BUILDING A WEB-APPLICATION FOR TRAINING ONLINE

CU NHAN NGANH CONG NGHE THONG TIN

GIANG VIEN HUONG DAN

THS VO NGOC TAN

TS NGUYEN GIA TUAN ANH

TP HO CHi MINH, 2022

THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ngày của Hiệu trưởng Trường Dai học Công nghệ Thông tin

LỜI CẢM ƠN

Để hoàn thành đồ án khóa luận tốt nghiệp này, chúng tôi xin gửi lời cảm

ơn chân thành nhất đến quý thầy cô của trường Đại học Công nghệ Thông tin —Đại học Quốc gia Thành phố Hồ Chí Minh, bạn bè trong và ngoài trường đã chỉbảo, quan tâm, giúp đỡ tận tình trong suốt quá trình học tập ở trường nói chung

và trong quá trình thực hiện đề tài nói riêng Nhờ đó chúng tôi đã có thêm nhiềukinh nghiệm để xử lý những khó khăn, thử thách và hoàn thành đề tài này

Chúng tôi xin gửi lời cảm ơn sâu sắc nhất đến TS Nguyễn Gia Tuấn Anh,

ThS Võ Ngọc Tân cùng thầy Tô Quốc Huy Các thầy đều là những người đã

trực tiếp hướng dẫn, định hướng chuyên môn, quan tâm, giúp đỡ tận tình và tạo

mọi điều kiện thuận lợi trong quá trình thực hiện đồ án

Trong thời gian làm đồ án, ngoài những kiến thức đã học, chúng tôi đãđược học tập, tìm hiểu rất nhiều kiến thức mới, những trải nghiệm bổ ích Đồng

thời được sự hướng dẫn tận tình, cùng những góp ý chân tình từ những người

thay, chúng tôi đã tích lũy được nhiều kinh nghiệm cho bản thân, phục vụ chocông việc sau này

Mặc dù chúng tôi đã cố gắng nỗ lực để hoàn thành Khóa luận Tốt nghiệpcủa mình nhưng khó tránh khỏi sai sót, rất mong nhận được sự góp ý và chỉ bảocủa quý Thầy/Cô để đề tài được tốt hơn

TP Hồ Chí Minh, tháng 07 năm 2022

Sinh viên thực hiệnĐặng Nhật Huy — Hồ Vương Khánh Long

MỤC LỤC

CHUONG Loe ố all GIỚI THIỆU

2

1.1 Lý do chọn đề tài - - c2 n2 n1 SH SH nh nh cv rẽ 2

1.2 Đối tượng nghiên CỨU -. cc S1 vn vn vn, 3

1.3 Khảo sát các giải pháp liên quan - -.-< -<<s<s<+<ssssss2 3 1.4 Mục tiêu đề tài - cọ n nh kg vs 4

1.5 MG tả bài toán - cọ TK kh 5

1.5 Phương pháp thực hi@n cccccccecceeceeceecesceecceceeeeeeesceeceeeeeees 6 1.6 Giới hạn phạm vi -. << 2121211311131 1111111131352 6

2.2.1 Tim hiéu ngôn ngữ JaVaSCTiDI - «- sĂ {S3 **3 9

2.2.2 Giới thiệu thư viện ReactJS -.-. -. << << <<+ 10 2.3 Tim hiểu công nghệ NodeJS - -< s22 31s ss2 21 2.4 Tìm hiểu công nghệ WeblRTC - cv x2 26

Chương 3 -cse¿ PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

27

c8 00-8 0 7 ¬ 27

3.1.2 Giao dịch, thanh toán -. -. ccscscsscsssssx2 28

3.1.3 Đánh giá hiện trạng và hướng giải quyết - -.-. -‹ 28

3.2 Phân tích yêu cầu hệ thống -. . - <2 < << ss<ssss2 28

3.2.1 Phân tích yêu cầu học viên - << << s2 28

3.2.2 Phan tích yêu cầu Huấn luyện viên - -. -<<- 28

3.2.3 Phân tích yêu cầu người quản trị -. . - << << +2 28

3.3 I0 8< 7 ai 29

3.3.1 Xác định các Actor và Use Case của hệ thống - - - 29

3.3.2 Sơ đồ Use Case tổng quát -. «<2 S3 1x1 x13 s3 30 3.3.3 Sơ đồ Use Case Chỉ tiẾt -c- SH n k x 31 3.3.4 Đặc tả Use CaSG QC QC HH HH HH HH ty ni Kong nu nu ng 37 3.3.5 Sơ đồ hoạt động - -nc SH nh nh cv vs 43

3.3.6 SO đồ tuần tỰ - HH HH HH ng n ng my 49

3.3.7 Bảng mô tả thuộc tính trong hệ thống 54

Chương 4 KET QUA XÂY DUNG UNG DỤNG - s5: 62

41 Trang Ehuxse © Á cơ CÚ re 62 4.2 Trang hiển thị khóa học - ¿<1 11 E22 £kki 64

4.3 _ Trang chi tiết khóa hỌC - << s 64

4.4 Trang giỏ hàng S2 SSSnssssvvvkeeeeees 66

A.5 Trang Meetind - ch kh, 67

4.6 Trang học khóa hOC cc eececeeeeececeeececeeceeeeceeeeeeeaeeeeeneees 68

Chương 5 KẾT LUẬN VA HUONG PHAT TRIỂN 5: 69

5.1 Kt luận -.-. c- cc n9 n HH ng ng ng hy nu ng 69 5.2 Hướng phát triển - << c2 S11 Y1 vs xa 70

DANH MỤC HÌNH ẢNH

Hình 2.1: Hình minh họa mô hình DOM ảo và mô hình DOM thật 12Hình 2.2: So sánh function ESS và E/S Ác HH HH TH ngư 13Hình 2.3: So sánh khai báo object trong E/S cv re, 14Hình 2.4: UseState trong React HOOS - - - c 21133 1 111 8111 81 ng 15Hình 2.5: UseEffect trong React HOOS - + 2c 31131333 1335EEEEerrs 16Hình 2.6: Kiến trÚC EEÏUIX -: - + + + E 1E x91 EEk E99 v9 91 1v ng rư 18

Hình 2.7: Khác nhau giữa sử dung và không sử dụng Redux ‹ - 19

Hình 2.8: Luồng xử lý của Redux -.- ác 321112211 1151 3411551111851E 1111 1 20Hình 2.9: Cơ chế xử lý trong NodeJS .- c- cv HH ng ng 22

Hình 2.10: Hiệu năng của MongolDB << kg 25

Hình 3.1: Sơ đồ Usecase tổng quát ¿5c 2 1S 1211311311111 1 E11 re 30Hình 3.2: Sơ đồ Usecase đăng nhập - 6 5c 221311131 1315131151118111511 1xx 31Hình 3.3: Sơ đồ Usecase dang k - - - + +11 2v E1 1v nh ng ngư, 32Hình 3.4: Sơ đồ Usecase học khóa hỌọc - - 2+ + +21 + +2 *£zEeezseeeesreeeree 33Hình 3.5: Sơ đồ Usecase thanh toán - - - + +++++x+++vE+exexereserrserrrerrerre 34Hình 3.6: Sơ đồ Usecase quản lý khóa hỌC + + + +++++x+£+k+seersezeeeeesers 35Hình 3.7: Sơ đồ Usecase đăng ký làm huấn luyện viên ‹ - «+ ++sss++<<+ 36Hình 3.8: Sơ đồ hoạt động đăng nhập ¿5 2c S2 1232315151151 43Hình 3.9: Sơ đồ hoạt động đăng ký tài khoản 5 55 +55 *+*+++s+ssessss 44Hình 3.10: Sơ đồ hoạt động xem khóa học - ¿+5 + *+*+*+sxsrsrrererseres 45Hình 3.11: Sơ đồ hoạt động thêm gid hàng 5c 2c 3+3 ssesssersrss 46Hình 3.12: Sơ đồ hoạt động đặt mua và thanh toán - + 55+ +5 +++ssx+ss+ 47Hình 3.13: Sơ đồ hoạt động đăng kí trở thành huấn luyện viên - 48

Hình 3.14: Sơ đồ tuần tự đăng ký - Ác 2 L121 11 1191111181111 8 111811 8k rrhy 49Hình 3.15: Sơ đồ tuần tự xem khóa học <2 + EEE +2 EEEkeeeesseeeres 50Hình 3.16: Sơ đồ tuần tự đăng nhậpp c2 2211311211911 11 811 81g ngư 50Hình 3.17: Sơ đồ tuần tự thêm khóa học - 5+ + 22+ + + + + +22 eezzzzeeeees 51Hình 3.18: Sơ đồ tuần tự đặt mua và thanh toán - -¿ 5555 << <£<+sce2 51Hình 3.19: Sơ đồ tuần tự đăng ki trở thành huấn luyện viên - -s« 52Hình 3.20: Sơ đồ tuần tự quản lý khóa hỌc ¿+ ++2* 3+ +*Eeeseeseessersss 53Hình 3.21: Mối liên kết tong quát của hệ th6ng ee eecesesssceeeseeeeeeseeesesseeeeeens 58Hình 3.22: Mối liên kết bảng khóa hỌC ¿+ + + +*££Esx+vEeeeseeerseeeesee 59Hình 3.23: Mối liên kết người dùng, gid hàng, khóa hoc da thanh toán 60Hình 3.24: Mối liên kết người dùng, hóa đơn ¿5c + + 2s *+++ssxsesseresersrss 61Hình 4.1: Giao diện trang chủ websife - - -c + cc 3+ 111 11111111181 1511 E1 re 63Hình 4.2: Giao diện trang hiển thị khóa học - - ¿+55 ++++s£+++ssve+++seersss 64Hình 4.3: Giao diện trang chi tiết khóa hỌC ¿+55 + 3+ + +*v+svereerseeessrs 65Hình 4.4: Giao diện trang giỏ hàng - - c3 3132 33 1 11111111 xe rrrrey 66

Hình 4.5: Giao diện meeting của WebSÏ{@ cnnHHnH ng ng ngư 67 Hình 4.6: Giao diện trang học khóa hỌC - - - + 1x 191 99 111 98 11198111 re, 68

DANH MỤC BẢNG

Bảng 3.1: Đặc tả Usecase đăng ký - - 1111 1 9 1 1118118 11g ng ng vn 37

Bang 3.2: Đặc tả Usecase đăng nhập -. - - sư 39

Bảng 3.3: Đặc tả Usecase đăng ký làm huấn luyện viên ‹+-s+ + x+<<+ 40Bang 3.4: Đặc tả Usecase học khóa hỌC - + c1 133112 1 1 11 18111 81 ngư 41Bang 3.5: Đặc tả thanh toán khóa hỌc - - << 1132111311311 135515111515 ex.x 42Bảng 3.6: Bảng mô tả thuộc tính hệ thống - 5 + 5s +S+£+x£s+vEseeseersxrs 54

DANH MỤC TỪ VIẾT TẮT

TÓM TẮT KHÓA LUẬN

Các hệ thống trung gian giúp người cung cấp dịch vụ dễ dàng tiếp cận người

sử dụng dịch vụ hơn Những mô hình như vậy đã phát triển khá mạnh trong nhữngnăm gần đây Có thé ké đến như các nền tảng dạy học online E-learning mọi lĩnhvực như Udemy, Coursera

Các hệ thống này vừa tạo ra môi trường cho người dạy cung cấp dịch vụ,khóa học giúp họ tìm được nhiều học viên cũng như giúp được khách hàng, họcviên tìm được khóa học tốt mà chi phí phải chăng

Có thể thấy có nhiều nền tảng như vậy ra đời để phục vụ, cung cấp khóa học

ở nhiều lĩnh vực khác nhau về công nghệ, tài chính, Những lĩnh vực về luyện tập

thể chất sức khỏe vốn được mọi người quan tâm hiện nay thì vẫn còn rất hạn chế.

Gần đây ở Việt Nam đã có một nền tảng LMS giảm béo y khoa khá nổi tiếng của

Phan Bảo Long được gọi vốn trên Shark Tank Tuy nhiên nền tảng này vẫn chưa có

website cụ thể nên khó tiếp cận người dùng

Trong bối cảnh đại dịch Covid-19 hiện nay thì sức khỏe ngày càng được chú

ý nhiều hơn, bên cạnh dinh dưỡng thì việc rèn luyện thể chất cũng rất quan trọng.Tập gym, yoga, đều là những phương pháp tập luyện không những giúp nângcao sức khỏe mà còn cải thiện được vóc dáng cơ thể được rất nhiều người theo đuổi

Vì thế dịch vụ tập luyện có huấn luyện viên hướng dẫn (Coach) rất có tiềm năng

phát triển trong tương lai

Chuong1 GIỚI THIỆU

1.1 Lý do chọn đề tài

Hiện nay vấn đề về thể chất và sức khỏe được rất nhiều người quan tâm đặcbiệt là trong bối cảnh đại dịch Covid-19 thì vấn đề này càng “hot” hơn bao giờ hết.Các bộ môn rèn luyện thể chất như tập thể hình hay yoga nhờ thế mà ngày càngđược nhiều người biết đến và theo đuổi Tuy nhiên để đạt được hiệu quả tốt nhấtcho cơ thể thì cần luyện tập những bộ môn này một cách bài bản và đúng đắn Đặc

biệt là những người lớn tuổi, họ cần phải có một huấn luyện viên hướng dẫn tận tình

thì mới đạt được hiệu quả tốt nhất Vì thế nghề huấn luyện viên (Coach) đã ra đời.Tuy nhiên, hiện nay chỉ có những phòng tập lớn thì mới có Coach hướng dẫn vàchưa có một cộng đồng đủ lớn để những người tập luyện (học viên) có thể dễ dàngtiếp cận Do đó trong bối cảnh Covid-19 hiện nay đã làm ảnh hưởng lớn tới những

người làm công việc Coaching như trong bài báo sau: “Phòng gym đóng cửa, PT

sớm chiều lăn lộn mướt mồ hôi kiếm sống ”'

Các trang mạng xã hội lớn như: Facebook hay Youtube cũng đã hỗ trợ đượckhá nhiều Những người tập lâu năm hoặc những Coach có kinh nghiệm có thể đăng

tải được các video hướng dẫn hoặc những dịch vụ, khóa học của mình Tuy nhiên việc tiếp cận đối với học viên vẫn còn rất hạn chế và tốn nhiều công sức Một hệ

thống trung gian để tạo ra môi trường, cộng đồng giúp những Coach có thể dễ dànglàm những điều này là hướng mà nhóm chúng tôi muốn thực hiện

Để tạo ra được môi trường lớn mạnh và giúp học viên có thể dễ dàng lựa

chọn dịch vụ cũng như khóa học tốt nhất Hệ thống phải giúp Coach có nhu cầu có

thể đăng ký trở thành đối tác một cách dễ dàng, đồng thời tích hợp những tính năng

quản lý khóa học, nhắn tin giữa học viên và Coach Bên cạnh đó cách thức thanhtoán minh bạch cũng rất cần thiết, điều này giúp đôi bên đều cùng có lợi

, https://vietnamnet.vn/vn/kinh-doanh/thi-truong/dong-cua-phong-gym-online-kiem-song-634958.html , truy

cap vao ngay 20/02/2022

1.2 Đối tượng nghiên cứu

Đối tượng phục vụ mà hệ thống chúng tôi hướng đến chính là Coach và họcviên có nhu cầu tập luyện

Những huấn luyện viên hay người tập lâu năm có kinh nghiệm đều có thểđăng ký trở thành đối tác cùng hệ thống Coach sẽ được đăng các khóa học lên hệthống để tìm kiếm học viên Sau khi trả phí hoa hồng cho Website thì phần tiền cònlại Coach đều nhận được

Học viên có thể đăng ký tài khoản để tìm kiếm khóa học và huấn luyện viên

mà mình ưng ý Thông qua hệ thống lọc khóa học theo yêu cầu thì học viên sẽ dễdàng có sự lựa chọn phù hợp với mình hơn

1.3 Khảo sát các giải pháp liên quan

Qua việc khảo sát các website như Udemy’, Citigym”, Chúng tôi đã nhận

thấy rằng tập luyện qua video là phương pháp phổ biến nhất: Đây là phương pháptập luyện phổ biến nhất khi người tập không có nhu cầu thuê huấn luyện viên tạiphòng Hiện nay trên các nền tảng mạng xã hội video như Youtube, Tiktok đều có

rất nhiều video hướng dẫn của các huấn luyện viên nổi tiếng nhiều kinh nghiệm

giúp ích cho người xem tập luyện rất nhiều Tuy nhiên nếu chỉ xem video để tậptheo thì huấn luyện viên không thể sửa động tác cho người tập cũng như không thểcung cấp thực đơn dinh dưỡng phù hợp với thể trạng của học viên

Vì thế chúng tôi đề xuất thêm tính năng hướng dẫn qua Meeting để giúp người học được trực quan và dễ dàng tập luyện hơn

Từ khi đại dịch Covid-19 diễn ra, mọi người đều làm việc online và việc tậpluyện cũng thế Hình thức này đang được nhiều người tiếp cận gần đây vì tính phù

? https://www.udemy.com/

3 https://citigym.com.vn/

hợp, không cần gặp trực tiếp mà vẫn có giáo án cũng như cách tập đúng mà giá cả

lại rất phải chăng Vì thế nhiều người đã lựa chọn phương pháp này

Qua hai phương pháp trên, chúng tôi sẽ tham khảo và kết hợp vào website tập

luyện trực tuyến Website có video hướng dẫn của huấn luyện viên, thực đơn dinh dưỡng để học viên theo dõi và có tính năng chat để giúp học viên tập luyện dễ dàng

hơn

1.4 Mục tiêu đề tai

Mục tiêu của nhóm là xây dựng một ứng dụng học, tập luyện trực tuyến kếthợp với tính năng meeting giữa huấn luyện viên và các học viên Để xây dựng ứngdụng chúng tôi phải trải qua những quy trình sau:

Bước đầu tiên của nhóm là tìm hiểu những mô hình hệ thống trung giantương tự nhưng làm về những dịch vụ khác để có cái nhìn tổng quát về quy trìnhhoạt động, cách thức triển khai Bởi vì không phải tất cả các hệ thống này đều giống

nhau tất cả mà tùy vào mỗi dịch vụ mà họ hướng tới sẽ có những điều chỉnh về cách

thức hoạt động để phù hợp hơn Vì thế chúng tôi đã tìm hiểu và học hỏi nhằm tìm raquy trình tối ưu nhất và những tính năng cần thiết để áp dụng vào hệ thống củamình Ngoài ra có thể biết được những ứng dụng phổ biến hiện nay áp dụng mô

hình trung gian này dang sử dụng ngồn ngữ, cơ sở dữ liệu hay công nghệ gi Qua đó

có thể lựa chọn hướng đi tốt nhất cho hệ thống của chúng tôi.

Tiếp theo là phân tích mô tả các chức năng chính của hệ thống từ những gi

đã tìm hiểu ở trên, nêu rõ các Use Story Sau đó tiến hành phân tích từng Usecase

và vẽ sơ đồ Usecase cho các chức năng chính của hệ thống như tính năng đăng ký

làm đối tác dành cho Coach, chức năng đánh giá của học viên đối với khóa học đã

đăng ký, chức năng thanh toán, chức năng liên lạc giữa Coach và học viên Tiếptheo là thiết kế cơ sở dữ liệu cho hệ thống (Database Diagram)

Bước kế tiếp là thiết kế giao diện dựa trên các sơ đồ Use case ở trên để thiết

kế UI/UX của hệ thống Bước nay rất quan trọng vi nó chính là bộ mặt của toàn bộ

hệ thống, giao diện quyết định sự trải nghiệm của người dùng Hơn nữa đây là mộtứng dụng về thể chất sức khỏe nên cần một giao diện bắt mắt nhưng không quá lòeloẹt và đặc biệt là dễ sử dụng để giúp cho mọi đối tượng đều có thể dùng được Cóđược giao diện rồi thì bước tiếp theo chính là lập trình Bước này chính là cốt lõibởi vì nếu không làm chỉn chu thì trải nghiệm của người sử dụng không thể mượt

mà được Các tính năng cần phải được lập trình logic và kết nối được với nhau.Điều này sẽ giúp cho người sử dụng có được trải nghiệm tốt hơn

Cuối cùng là bước kiểm thử phần mềm Day là quá trình quan trọng giúpphát hiện các lỗi ở giao diện và chức năng Cũng nhờ bước này mà có thể tiếp thu

được ý kiến của những người sử dụng hệ thống từ đó đưa ra giải pháp và thay đổi

để phù hợp với người sử dụng hơn

1.5 Mô tả bài toán

Những công việc cần xử lý:

- Ung dụng cần có hệ thống đăng ký tài khoản cho người sử dụng (Coach và

học viên)

- Cac khóa học sẽ được hiến thị một cách trực quan và sắp xếp theo hệ thống

do chính học viên đã tham gia Điều này sẽ hỗ trợ rất lớn cho học viên tìm

kiếm khóa học phù hợp về giá cả lẫn chất lượng

- Tich hợp tính nang meeting trên ứng dung để học viên có thé liên hệ với

Coach một cách dễ dàng

- _ Hệ thống thanh toán minh bach rõ ràng

1.5 Phương pháp thực hiện

Lựa chọn công nghệ sử dụng cũng là một điều rất quan trong để thực hiệnxây dựng ứng dụng Ngoài giao diện đẹp mắt, sự đa dạng của các khóa học ra thìhiệu năng, chất lượng của website cũng là một vấn đề mà người dùng mong muốn.Hiệu năng cao, tốc độ load file, video hoặc hình ảnh nhanh cũng là một điểm mạnhgiúp website được nhiều người dùng tiếp cận hơn

ReactJS và NodeJS là hai công nghệ mà chúng tôi đã tìm hiểu và áp dụngtrong khóa luận lần này Đây là những công nghệ hiện tại đang rất phổ biến và được

nhiều người sử dụng vì đều sử dụng ngôn ngữ JavaScript nên cấu trúc code rất dễ hiểu và dễ bảo trì, phát triển Bên cạnh đó NodeJS là một nền tảng được xây dựng

trên “V8 Javascript engine” được viết bằng C++ và Javascript vì thế hiệu suất được

gia tăng đáng kể Ứng dụng Single Page Application sử dụng ReactJS, khả năng tái

sử dụng Component, áp dụng Virtual Dom cũng giúp cải thiện tốc độ một cáchđáng kể

1.6 Giới hạn phạm vỉ

Phạm vi của ứng dụng trong khóa luận lần này là về chủ đề sức khỏe, thểdục, fitness Người dùng sau khi đăng ky làm huấn luyện viên thi sẽ được quản trịviên duyệt Khi trở thành huấn luyện viên thì sẽ có quyền đăng tải khóa học và quản

lý Ngoài ra quản trị viên còn có thể duyệt khóa học của huấn luyện viên khi trước

khi đưa lên ứng dụng, quản lý người dùng, danh mục

Không chỉ về chủ đề sức khỏe, chúng tôi sẽ tiếp tục mở rộng phạm vi của đềtài này ra nhiều lĩnh vực hơn trong tương lai

1.7 Bố cục khóa luận

Khóa luận gồm có 5 chương và có bố cục như sau:

Chương 1: Giới thiệu.

Chương 2: Cơ sở lý thuyết

Chương 3: Phân tích và thiết kế hệ thống

Chương 4: Kết quả xây dựng Web-Application Pacifitness.Chương 5: Kết luận và hướng phát triển

Chương 2 CƠ SỞ LÝ THUYET

2.1 Tống quan về hệ thống kết nối học viên va Coach (Huan luyện viên)

Hệ thống kết nối giữa Coach và học viên là một hệ thống trung gian giúpngười có nhu tập luyện (học viên) có thể tìm được một huấn luyện viên (Coach) phùhợp về thời gian tập luyện, giá tiền cũng như phương pháp tập tốt nhất

Một số đặc điểm nối bật của hệ thống là cả học viên lẫn Coach đều không

cần phải tiếp xúc trực tiếp với nhau nên không cần thiết phải biết nhau Tuy nhiên

việc huấn luyện vẫn diễn ra khá dễ dàng thông qua các video của Coach hoặc cả hai

có thể liên lạc thông qua meeting

Tai thời budi dịch bệnh Covid-19 rất phức tạp thì để bảo vệ sức khỏe thinhiều người đã lựa chọn việc tập luyện tại nhà Tuy nhiên nếu không biết phươngpháp cũng như chế độ dinh dưỡng phù hợp thì người tập luyện rất khó đạt được

mục tiêu Vì thế hệ thống sẽ giúp người tập giải quyết vấn đề đó một cách dễ dàng.

Hệ thống bao gồm nhiều huấn luyện viên (Coach) có kinh nghiệm và đa dạng mọi

bộ môn, điều này sẽ giúp ích rất lớn cho người tập có thế đạt được mục tiêu đề ranhanh và hoàn hảo nhất Hệ thống giúp Coach và học viên có thể tháo gỡ khoảngcách địa lý, Coach sẽ dễ dàng trao đổi cũng như chia sẻ các kiến thức cũng nhưkhóa học của mình đến với học viên Coach có thể hướng dẫn, truyền tải phươngpháp đến nhiều học viên hơn so với việc hướng dẫn truyền thống trước đây Học

viên có thể đăng ký được các huấn luyện viên có tiếng, tập luyện bất cứ lúc nào thông qua các video của khóa học Khi có thắc mắc thì họ cũng có thể dễ dàng trao

đối với nhau bang cách nhắn tin hoặc gọi video

Hệ thống này hiện tại còn khá mới mẻ và chưa được thương mại hóa rộng rãi.Mới đây nhất Apple có cho ra một ứng dụng có ý tưởng khá giống đó chính là:Apple Eitness+ Tuy nhiên để sử dụng được dịch vụ thì người dùng phải có AppleWatch và ứng dung này có thé đo được lượng calories tiêu thụ để kiểm soát buổi tập

của học viên Nhưng ứng dụng chỉ cung cấp video hướng dẫn mà người tập không

thể nhận được hướng dẫn trực tiếp từ người huấn luyện Ngoài ra có khá nhiều app

hỗ trợ người tập trong việc tập luyện, tuy nhiên những ứng dụng đó chỉ có một số

chức năng nhất định

2.2 Tim hiểu công nghệ ReactJS

2.2.1 Tìm hiểu ngôn ngữ Javascript

Tổng quan về ngôn ngữ Javascript: JavaScript? là một trong những ngôn ngữ

lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua Nó cũng là một trong số

3 ngôn ngữ chính của lập trình web:

HTML5: Để thiết kế và cấu trúc website

CSS3: phiên bản mới nhất của CSS có thể định dạng thiết kế, bố cục, phongcách, canh lề của trang web

JavaScript: Ghi nhận các sự kiện của người dùng như: di chuyển chuột,nhấp chuột Sau đó, tùy theo phản hồi của người dùng, đoạn mã sẽ thực hiện công

việc được lập trình tương ứng JavaScript có thể học nhanh và dễ dàng áp dụng cho

nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạygame và tạo phần mềm nền web

Lịch sử phát triển của JavaScript

JavaScript được tạo trong mười ngày bởi Brendan Eich, một nhân viên củaNetscape, vào thang 9 năm 1995 Được đặt tên đầu tiên là Mocha, tên của nó đượcđối thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng nhưbây giờ

Trong năm 1996, JavaScript được chính thức đặt tên la ECMAScript.ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm

1999 Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắpmọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn JavaScript

4 https://vi wikipedia.org/wiki/JavaScript , truy cập vào ngày 20/02/2022

liên tục phát triển kể từ đó, có lúc đạt đến 92% website đang sử dụng JavaScript vào

năm 2016.

Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêng trở thành công cụ quantrọng nhất trên bộ công cụ của các chuyên viên lập trình web

2.2.2.Giới thiệu thư viện ReactJS

React [3] (Hay React JS, ReactJS) là một thư viện Javascript mã nguồn mở đểxây dựng các thành phần giao diện có thể tái sử dụng Nó được tạo ra bởi JordanWalke, một kỹ sư phần mềm tai Facebook

Hiện nay, thư viện này nhận được rất nhiều sự quan tâm đến từ cộng đồng Nóđang được bảo trì (maintain) bởi Facebook và Instagram, cũng với sự đóng góp củacộng đồng các lập trình viên giỏi trên Thế giới

React sinh ra để dành cho các ứng dụng lớn dễ dàng quản lý và mở rộng Mụctiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng

React sử dụng luồng dữ liệu 1 chiều giúp kiểm soát dữ liệu dễ dàng hơn.Ngoài

ra ta sẽ luôn luôn biết được component sẽ sinh ra mã HTML như thế nào khi nhìnvào 1 file source, giúp dễ dàng nâng cấp, bảo trì sau này Tích hợp giữa JavaScript

và HTML vào trong JSX làm cho các component dễ hiểu hơn.

[] Tại sao chọn React?

@ Giúp viết mã Javascript dé dang hơn với JSX:

JSX° chính là cú pháp là một cú pháp mở rộng cho JavaScript JSX với React

để mô tả giao diện (UI) JSX có thể trông giống Ngôn ngữ Khuôn mẫu

(Template language), nhưng JSX đi kèm với toàn bộ tính năng của JavaScript

Code không sử dụng JSX:

° https://vi.reactJS.org/docs/introducing-JSx.html, truy cập ngày 01/06/2022.

10

ngữ nghĩa của JavaScript.

@ "Thanh phần hóa" giao diện:

React cho phép lập trình viên tạo ra các Component (Thành phần) tương ứngvới các phần của giao diện Các component này có thể tái sử dụng, hoặc kết hợp vớicác Component khác để tạo ra một giao diện hoàn chỉnh Component thực sự làtương lai của lập trình ứng dụng web, và nó cũng là tính năng quan trọng nhất mà

React đem lại [1 ].

@ Tăng hiệu năng với Virtual-DOM

Khi dữ liệu của Component thay đổi React cần phải render lại giao diện.Thay vì tạo ra thay đối trực tiếp vào mô hình DOM của trình duyệt, nó tạo ra thayđổi trên một mô hình DOM ảo (Virtual DOM) Sau đó nó tính toán sự khác biệt

giữa 2 mô hình DOM, và chỉ cập nhập các khác biệt cho DOM của trình duyệt.

Cách tiếp cận này mang lại hiệu năng cho ứng dụng

11

Virtual DOM DOM

Hình 2.1: Hình minh họa mô hình DOM ảo và mô hình DOM thật.

@ Thân thiện với SEO

React có thể chạy tại phía Client, nhưng nó cũng có thể chạy tại phía Server,

vì vậy dữ liệu trả về cho trình duyệt là văn bản HTML, nó không gây ra khó khăn gì

cho các Search Engine, vì vậy nó thân thiện với SEO.

LÍ Tinh năng mới trong ES6 °

Block-Scoped Constructs Let and Const

Đây là một trong những tính năng được định nghĩa với các từ khóa Let và

Const Theo cách định nghĩa này thì biến chỉ tồn tại trong một phạm vi khối củaBlock Scope Những khối lệnh này sẽ được thực hiện định nghĩa thông qua các cặpngoặc nhọn

Trong phiên ban ES5 thường thì các khối này sẽ không được giới hạn phạm

vi của các biến còn đối với ES6 thì nó lại được sử dụng LET để có thé giới hạnđược phạm vi của các biến nằm trong khối lệnh khi thực hiện

6 http://es6-features.org, truy cập ngày 01/06/2022.

12

Với từ khóa Const do ES6 giới thiệu thì mọi thứ sẽ trở nên dễ dàng bởi nó là

một biến không thay đổi và nó thường bị giới hạn trong một phạm vị các khối giớitương tự như Let

Arrow Function

Việc sử dụng Arrow functions giúp viết code ngắn gọn hơn trong việc khaibáo một biểu thức hàm Nhưng hãy chú ý, vì khi sử dụng Arrow functions thì ở đóthis không hoạt động, không có prototypes, không thể sử dung constructors

Destructuring

Là một trong những tính năng có phần khá giống với hàm List được sử dụngtrong PHP Destructuring Assignment trong ES6 sẽ thực hiện phân các giá trị trongmảng vào các biến dựa theo một thứ tự nhất định Có thể nói theo một cách khác làDestructuring Assignment sẽ tách ra các phần từ Object hoặc Array chỉ bằng một

đoạn code nhất định để chia thành nhiều biến nhỏ.

13

Ngoài ra còn rất nhiều ưu điểm của ES6 được xem là bước tiến lớn so vớiES5 Một số tinh năng khác của ES6 là classes, enhanced object literals,destructuring, default + rest + spread, promises, øenerators,

[] React Hooks

Hooks’ mới được thêm ở phiên bản React 16.8 Với Hooks, có thé sử dung

state và các chức năng khác của một React class component mà không cần phải viếtmột class

Để có thể thay thế được Class thì React Hook cung cấp một bộ các built-inHook, giúp sử dụng được các thành phần tạo nên React, có 2 loại built-in đó là:Basic Hook và Additional Hook

UseState: Hàm này nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1

function dùng để cập nhật state (giống như ham setState cũ)

7 https://vi.reactJS.org/docs/Hook-overview.html truy cập ngày 01/06/2022

14

(props) {

super(props) ;this.state = { isLoading: false }

const [isLoading, setLoading] =

Ot

(true)

Hinh 2.4: UseState trong React Hooks

15

UseEffect: Vì sự phức tạp trong các hàm LifeCycle thì để thay thế nó sẽ cóhàm useEffect Nó giúp xử lý các side effects, useEffect sẽ tương đương với các

hàm componentDidMount, componentDidUpdate và componentWillUnMount

Hinh 2.5: UseEffect trong React Hooks

UseEffect được kích hoạt sau khi quá trình render cua React component hoàntất Nó sẽ được gọi và thực hiện tính toán các hành động bên trong nó trong một

callback

UseEffect chấp nhận 2 đối số: useEffect(callback, dependencies)

Callback: sẽ được gọi trong useEffect sau khi return thực thi nhiệm vụ kết

xuất giao diện của nó

16

Dependencies: Là một mảng chứa các đối số mà useEffect sẽ phụ thuộc vào

đó để thực thi Trong ví dụ trên là một mảng trống, nó đồng nghĩa với việc chỉ thựchiện một lần duy nhất sau khi component render

L| Kiến trúc Flux

Flux® là kiến trúc ứng dụng mà Facebook sử dụng để xây dựng các ứng dụng

web phía máy khách Đồng thời, nó bổ sung cho các thành phần chế độ xem tổng

hợp của React bằng cách sử dụng luồng dữ liệu một chiều (tên tiếng anh là

Unidirectional Data Flow).

Cac ứng dung Flux có các phần chính: Controller Views là các ReactComponents, làm nhiệm vụ nhận các trạng thái (state) từ Stores và truyền dữ liệu(dưới dạng props) cho các thành phần con Stores là nơi lưu trữ trạng thái và cáclogic của hệ thống, đây chính là nơi sẽ đăng ký nhận dữ liệu với Dispatcher.Actions làm nhiệm vụ truyền dẫn dữ liệu tới Dispatcher (được coi như các HelperMethod) Dispatcher nhận thông tin từ Actions, truyền tải dữ liệu (payload) tới cácnơi đã đăng ký nhận thông tin

8 https://facebook github.io/flux/docs/in-depth-overview/, truy cập ngày 01/06/2022.

17

Hình 2.6: Kiến trúc FluxViews chính là thành phần làm nhiệm vụ hiển thị nội dung ứng dụng Khingười dùng tương tác với ứng dụng làm thay đổi trạng thái (state) của ứng dụng(VD: thêm, sửa, xóa dữ liệu), View sẽ thông qua Action gửi các thông tin thay đổitới Dispatcher Sau khi nhận được thông tin từ Action, Dispatcher làm nhiệm vụtruyền tải (broadcast) nội dung nhận được tới các Store đăng ký lắng nghe sự kiệnthay đổi từ trước đó Store sau khi nhận thông tin, tiến hành cập nhật dữ liệu Saukhi cập nhật, Store đưa sự kiện xuống View để tiến hành cập nhật hiển thi cho

người dùng.

18

[] Redux

Redux là một vùng chứa trang thái có thé dự đoán được hay con biết đến là

một thư viện của JavaScript Thư viện này được thiết kế để giúp bạn viết các ứng

dụng JavaScript có thể hoạt động nhất quán trong các môi trường máy khách, máy

chủ và môi trường số, đồng thời cho phép dễ dàng kiểm tra.

Hầu hết các thư viện như React, Angular, được xây dựng theo một cách

sao cho các components đến việc quản lý nội bộ các state của chúng mà không cần

bất kỳ một thư viện hoặc tool nào từ bên ngoài Nó sẽ hoạt động tốt với các ứngdụng có ít components nhưng khi ứng dụng trở lên lớn hơn thì việc quản lý statesđược chia sẻ qua các components sẽ biến thành các công việc rất khó khăn Từ đó

cần một công cụ hỗ trợ quản lý states.

WITH0UT REDUX WITH REDUX

Hình 2.7: Khác nhau giữa sử dung va không sử dung Redux

Store được coi là phần quan trọng nhất trong Redux, nó có nhiệm vụ lưu trữ

và phân phát dữ liệu cho các component Trong store bao gồm các thành phần nhưdispatcher (có nhiệm vụ kích hoạt các action bên trong reducer), reducer có nhiệm

vụ xử lý các hành động được gửi đến Sau đây là mô hình cách thức hoạt động của

Redux.

19

°® —› yo 8

ACTION REDUCER STORE

I

Hình 2.8: Luồng xử lý của Redux

Sau khi một action được thực thi, dispatcher sẽ được kích hoạt và gửi đến

reducer một action Lúc này reducer thực hiện hành động dựa vào action được gửi

đến Sau đó, đồng thời lưu lại giá trị của state mới vào trong store và trả về state

mới đó.

[] Cloudinary

Cloudinary” là một cloud-based service, nó cung cấp một giải pháp quan lý

hình ảnh, video, file bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery

Với cloudinary việc upload ảnh, video, file lên cloud được dễ dàng hơn, tự động

thực thi các thao tác với dữ liệu một cách thông minh mà không cần phải cài đặt bất

kì một phần mềm phức tạp nào khác Cloudinary cung cấp các APIs toàn diện và

màn hình quản lý dễ dàng tích hợp vào các trang web và ứng dụng di động.

LỆ Amazon SES API (Simple Email Service)

Amazon Simple Email Service (SES)"° là dịch vu email tiết kiệm chi phí,

linh hoạt và có thé thay đổi quy mô, cho phép nhà phat triển gửi email từ bên trong

9 https://cloudinary.com/, truy cập ngày 01/06/2022.

20

ứng dụng bất kỳ Các tùy chọn xác thực email và triển khai IP linh hoạt củaAmazon SES giúp thúc day khả năng gửi cao hon và bảo vệ uy tín của người gửi,trong khi các phân tích gửi đo lường tác động của từng email Với Amazon SES, cóthể gửi email một cách bảo mật trên toàn cầu ở quy mô lớn.

2.3 Tim hiếu công nghệ NodeJS

NodeJS [4] là một nền tảng (platform) được xây dựng trên “V8 Javascriptengine” Bởi vì được phần core được viết hầu hết bằng C++ nên có tốc độ xử lý vàhiệu năng rất ấn tượng Vì thế NodeJS thường được sử dụng để xây dựng nhữngứng dụng Real time và một lượng yêu cầu lớn NodeJS hiện tại rất pho biến, ngoàixây dựng trang web ra thì nền tảng này cũng được sử dụng để xây dựng các ứng

dụng mobie trên iOS hoặc Android.

Như đã nói tốc độ thực thi của NodeJS là rất ấn tượng, với khả năng tự buildserver bằng ngôn ngữ client giúp việc chuyển dữ liệu hiệu quả và nhanh hơn Nhờvậy, hầu hết các ứng dụng NodeJS đều có khả năng đáp ứng được thời gian thựcchạy trên đa nền tảng, đa thiết bi,

Xây dựng các ứng dụng trong thời gian thực (Real time) là ưu điểm của

NodeJS Như các ứng dụng chat, mang xã hội: Facebook, Twitter,

Node Package Manager (NPM), một trong những ưu điểm mạnh nhất của

Node JS NPM cho phép bạn tìm kiếm, và sử dụng miễn phí cho các node package,

cung cấp các chức năng bổ sung Theo thống kê chính thức, hơn 100.000 gói mới

được tải lên mỗi tuần Có thể chạy ứng dụng NodeJS ở bất kỳ đâu trên máy Mac —

Window — Linux, hơn nữa cộng đồng NodeJS rất lớn và hoàn toàn miễn phí

NodeJS có hiệu năng cao cũng nhờ vào cơ chế xử lý bất đồng bộ blocking)

(non-10 https://docs.aws.amazon.com/ses/latest/dg/send-email-api.html, truy cập ngày 01/06/2022.

21

| Starting getuser for user

] Starting getuser for user2

Hình 2.9: Cơ chế xử lý trong NodeJS

Ví dụ khi cần xử lý backend cho user1 và user2

Blocking I/O: Dữ liệu của user2 phải đợi cho đến khi user1 xuất trên man

hình thì mới có thể bắt đầu Bởi vì tính đơn luồng này nên đã cho ra đời blocking

Non-Non-blocking UO: Với cơ chế này bạn có thể xử lý request của cả user1 vàuser2 cùng một lúc Vì thé Non-blocking I/O đã loại bỏ nhu cầu đa luồng vì đã cóthể xử lý nhiều Request cùng một lúc

Với những ưu điểm rất tuyệt vời thì NodeJS đang ngày càng được phổ biến

và sử dụng rộng rãi Phải kể đến rất nhiều công ty lớn hàng đầu đang sử dụng như:Amazon, Ebay, Linkedin, Microsoft, Paypal, Trello, Uber và còn nhiều cái tên nổitiếng khác nữa

Trong khóa luận này, chúng tôi quyết định sử dung framework ExpressJS

Đây là một framework cung cấp những tính năng mạnh mẽ để phát triển ứng dụng

web và mobile Và MongoDB làm cơ sở dữ liệu dạng NoSQL.

22

LÍ Framework ExpressJS

Đây là một framework mã nguồn mở miễn phí cho Node.JS ExpressJS [5]

được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và

nhanh chóng Express JS chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xâydựng các ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhàphát triển ExpressJS cũng là một khuôn khổ của Node.JS do đó hầu hết các mã

code đã được viết sẵn cho các lập trình viên có thể làm việc Middleware là phần

mềm trung gian có quyền truy cập vào cơ sở dữ liệu, yêu cầu của khách hàng vànhững phần mềm trung gian khác Middleware này chịu trách nhiệm chính cho việc

tổ chức có hệ thống các chức năng của ExpressJS Ngoài ra ExpressJS cung cấp cơchế định tuyến giúp duy trì trạng thái của website với sự trợ giúp của URL

LÍ MongoDB

MongoDB [6] là một hệ cơ sở dữ liệu NoSQL mã nguồn mở, có cấu trúcdocument có khả năng mở rộng cao Các dữ liệu được lưu trữ trong document kiểuJSON thay vì dạng bảng như cơ sở dữ liệu quan hệ nên truy vấn sẽ rất nhanh

Với CSDL quan hệ có khái niệm bảng, các cơ sở dữ liệu quan hệ (nhưMySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB sẽdùng khái niệm là collection thay vì bảng Những collections này đơn giản là tậpcủa các document được lưu trữ dạng cặp key-value Các document khá linh hoạt vềschema, document trong cùng một collection không nhất thiết phải có các field hoặccấu trúc giống nhau Dữ liệu trong cùng một field cũng có thể có nhiều kiểu dữ liệu

khác nhau.

Trường _id là trường bắt buộc có trong mỗi document Là đại diện cho một

giá trị duy nhất trong document MongoDB Trường _id cũng có thể được hiểu làkhóa chính trong document Nếu bạn thêm mới một document thì MongoDB sẽ tựđộng sinh ra một _id đại diện cho document đó va là duy nhất trong cơ sở dữ liệu

MongoDB.

23

Một chức năng cốt lõi của MongoDB là khả năng mở rộng theo chiều ngang,làm cho nó trở thành một cơ sở dữ liệu hữu ích cho các công ty chạy các ứng dụng

dữ liệu lớn Ngoài ra, còn cho phép cơ sở dữ liệu phân phối dữ liệu trên một cụm

máy Các phiên bản mới hơn của MongoDB cũng hỗ trợ tạo các vùng dữ liệu.

Tốc độ truy van (find, update, insert, delete) của MongoDB nhanh hơn han

so với các hệ quan trị co sở dữ liệu quan hệ (RDBMS)

Thử nghiệm cho thấy tốc độ insert, tốc độ insert của MongoDB có thể nhanhtới gấp 100 lần so với MySQL

24

Number of Parallel Clients 5 Time in seconds

2.4 Tìm hiểu công nghệ WebRTC

WebRTC (Web Real-Time Communication) là một bộ JavaScript API chophép thiết lập kết nối ngang hàng giữa hai trình duyệt để trao doi dữ liệu như âm

thanh và video, cho phép tạo các ứng dụng có tính năng gọi âm thanh và video [2]

Điều làm cho WebRTC trở nên đặc biệt là một khi kết nối được thiết lập; dữliệu có thể được truyền trực tiếp giữa các trình duyệt trong thời gian thực mà không

cần chạm vào máy chủ Bằng cách bỏ qua máy chủ, chúng tôi giảm độ trễ vì dữ liệu

không phải đến máy chủ trước, điều này làm cho webRTC trở nên tuyệt vời để trao

đổi âm thanh và video[7]

Đây là nơi mà webRTC có ý nghĩa Bằng cách thiết lập kết nối và trao đổi dữ

liệu giữa hai trình duyệt, sẽ loại bỏ bất kỳ độ trễ nào mà máy chủ có thể thêm

vào WebRTC cũng sử dụng Giao thức Dữ liệu Người dùng, hoặc UDP, rất tốt để

truyền dữ liệu thực sự nhanh chóng nhưng nhiều hơn thế trong một thời gian

26

Chương 3 PHAN TÍCH VA THIẾT KẾ HỆ THONG

3.1.1 Tìm hiểu thông tin

Sau khi khảo sát một vài nền tảng E-learning Platform thì chúng tôi đã tốnghợp được một vài thông tin sau:

Hầu hết Website đều cho phép người dùng đăng ký tài khoản, các tác vụ vềtài khoản, thay đối thông tin, mật khẩu Déu hiển thị đầy đủ thông tin của khóa họcnhư: giá cả, mô tả khóa học, những chương của khóa học, video, hình ảnh mô tả,các bình luận về khóa học Có thể lọc theo danh mục hoặc tìm kiếm bằng từ khóacác khóa học và người dạy học, hiến thị các khóa học tương tự hoặc các khóa học

mà người dùng đã xem gan nhất Déu có tính năng thêm khóa học vào giỏ hàng,

kiểm tra giỏ hàng, nhiều phương thức thanh toán đa dạng, dễ sử dụng.

Giao diện của các hệ thống E-learning đều đơn giản và dễ sử dụng, các tính năng đều hiển thị dễ hiểu giúp người dùng thao tác dễ dàng.

Về phần quản trị: Phần này khá khó để tiếp cận khảo sát vì các hệ thống learning lớn đều bảo mật về tính năng này Vì thế chúng tôi đã khảo sát xây dựng hệthống E-learning trên Youtube để tìm hiểu về tính năng này Cơ bản thì quản trịviên sẽ có quyền quản lý người dùng, duyệt và xem các yêu cầu trở thành người dạyhọc hoặc các khóa học trước khi đưa lên website, quản lý danh mục, xem doanhthu Về người dạy học thì họ sẽ quản lý khóa học của mình, xem doanh thu, sốlượng học viên

E-27

3.1.2 Giao dịch, thanh toán

Website E-learning là hệ thống học từ xa nên hầu hết các phương thức thanhtoán đều thông qua ví điện tử hoặc tài khoản ngân hàng Kèm theo đó là hóa đơn,thông tin giao dịch được gửi qua mail

3.1.3 Đánh giá hiện trạng và hướng giải quyết

Qua khảo sát thì hầu hết các website đều có đầy đủ tính năng và yêu cầudành cho người dùng Tuy nhiên chủ yếu đều học qua video hoặc bài giảng thì sẽkhó cho học viên tiếp thu, đặc biệt là về việc tập thể dục Vì thế cùng với các tínhnăng tương đồng chúng tôi cũng đã xây dựng thêm một tính năng giúp học viên và

huấn luyện viên có thể meeting với nhau để dễ dàng để có thể dễ dàng chỉnh sửa

động tác cũng như tối ưu nhất cho việc tập luyện

3.2 Phân tích yêu cầu hệ thống

3.2.1 Phân tích yêu cầu học viên

Giao diện trực quan, đẹp mắt dễ sử dụng, có thể đăng ký tài khoản, bảo mậtthông tin người dùng, có thể thay đổi được thông tin tài khoản Tìm kiếm dễ dànghuấn luyện viên, được chia theo từng bộ môn giúp học viên dễ dàng tìm kiếm theonhu cầu Thông tin chỉ tiết của từng huấn luyện viên giúp cho học viên tham khảo.Tính năng thêm vào danh sách yêu thích giúp học viên dễ dàng xem lại, hình thứcthanh toán rõ ràng

3.2.2 Phân tích yêu cầu Huấn luyện viên

Giao diện có thêm những tính năng như: thêm, xóa, sửa video, quản lý doanh thu, quản lý học viên đã đăng ký khóa học.

3.2.3 Phân tích yêu cầu người quản trị

Quản trị viên là người có thể quản lý thông tin của cả học viên và huấn

luyện viên Có thể phân quyền truy cập cho học viên và huấn luyện viên Dễ dàng

28

quản lý đơn hàng khóa học, kiểm tra được thông tin người dùng, khóa học, thôngtin hóa đơn thanh toán.

3.3 Thiết kế hệ thống

3.3.1 Xác định các Actor va Use Case của hệ thống

% Học viên

Các Use Case chính: Đăng nhập, Đăng ký, Hiển thị profile, Học khóa

học, Thanh toán khóa học, Tìm kiếm khóa học

% Huấn luyện viên

Cac Use Case chính: Đăng nhập, Đăng ký, Quản lý khóa học

¢ Quan trị viên

Các Use Case chính: Quản lý người dùng, Duyệt huấn luyện viên, khóahọc, quản lý danh mục

29

3.3.2 Sơ đồ Use Case tổng quát