Khóa luận tốt nghiệp Kỹ thuật phần mềm: Xây dựng hệ thống hỗ trợ luyện nói tiếng Anh

Xuất phát từ mong muốn này, nhóm em đã thực hiện 1 sản phẩm mang tênMoments, một nơi dé mọi người có cơ hội kết nối và yêu cầu những dịch vụ độc quyền từ người nổi tiếng họ yêu thích, rú

ĐẠI HỌC QUOC GIA TP HO CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHAN MEM

NGUYEN VAN PHƯỢNG ANH

NGUYEN DUC TUAN

KHOA LUAN TOT NGHIEP

XAY DUNG WEBSITE CAU NOI VOI NGUOI NOI

ĐẠI HỌC QUOC GIA TP HO CHÍ MINH

TRUONG DAI HOC CONG NGHE THONG TIN

KHOA CONG NGHE PHAN MEM

NGUYEN VAN PHƯỢNG ANH _ 17520247

NGUYEN ĐỨC TUẦN _ 16521563

KHOA LUAN TOT NGHIEP

XAY DUNG WEBSITE CAU NOI VOI NGUOI NOI

TIENG

BUILDING A CELEBRITY PERSONALIZED MEDIA SHARING

SERVICE

KY SU NGANH KY THUAT PHAN MEM

GIANG VIEN HUONG DAN THS NGUYEN CONG HOAN

TP HO CHÍ MINH, 2021

THONG TIN HOI DONG CHAM KHÓA LUẬN TOT NGHIỆP

Hội đồng cham khóa luận tốt nghiệp, thành lập theo Quyết định

Qe icc ec ec ne nc ne ne ne ne ee ne eeeeeeeeeeeeeeeeeeeenaes — Thu ky.

— eee e eee eee need tent eee e nena ene eed — Uy vién.

Sse — Ủy viên.

ĐẠI HỌC QUỐC GIA TP HỖ CỘNG HÒA XÃ HỘI CHỦ NGHĨA

CHÍ MINH VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

TRƯỜNG ĐẠI HỌC CÔNG

NGHỆ THÔNG TIN :

° TP Hồ Chi Minh, 30 tháng 6 năm 2021

NHAN XET KHOA LUAN TOT NGHIEP

(CUA CAN BO HUONG DAN)

Tên khóa luận:

XÂY DUNG WEBSITE CAU NOI VỚI NGƯỜI NOI TIENG

Nhóm SV thực hiện: Cán bộ hướng dẫn:

Nguyễn Vân Phượng Anh - 17520247 Th.S Nguyễn Công Hoan

Nguyễn Đức Tuấn - 16521563

Đánh giá Khóa luận

1 Về cuôn báo cáo:

Số trang 86 Số hình vẽ 22

Số chương 4 Số tài liệu tham khảo 13

Số bảng số liệu 0 Sản phẩm 1

Một so nhận xét về hình thức cuôn báo cáo:

2 Vê nội dung nghiên cứu:

Điểm từng sinh viên:

Nguyễn Vân Phượng Anh : /10

Nguyễn Đức Tuấn Tnhh, 0

Người nhận xét (Ký tên và ghi rõ họ tên)

ĐẠI HỌC QUOC GIA TP HO CONG HOA XA HOI CHU NGHIA

_ CHÍMINH _ VIỆT NAM

TRUONG DAI HOC CONG Độc Lập - Tự Do - Hanh Phúc

NGHỆ THÔNG TIN

TP.Hồ Chí Minh, 30 thang 6 năm 2021

NHAN XET KHOA LUAN TOT NGHIEP

(CUA CAN BO PHAN BIEN)

Tên khóa luận:

XÂY DỰNG WEBSITE CÂU NÓI VỚI NGƯỜI NOI TIENG

Nhóm SV thực hiện: Can bộ phản biên:

Nguyễn Vân Phượng Anh - 17520247 ThS Nguyễn Thị Thanh Trúc

Nguyễn Đức Tuấn _ 16521563 ` hố [ỄE

Đánh giá Khóa luận

1 Vê cuôn báo cáo:

Số trang 86 Số hình vẽ 22

Số chương 4 Số tài liệu tham khảo 13

Số bảng số liệu 0 Sản phẩm 1

Một so nhận xét về hình thức cuôn báo cáo:

2 Về nội dung nghiên cứu:

Điểm từng sinh viên:

Nguyễn Vân Phượng Anh : /10

Nguyễn Đức Tuấn key 10

Người nhận xét (Ký tên và ghi rõ họ tên)

LOI CAM ON

4 năm ở UIT đã cho nhóm em nhiều cơ hội được trau đồi kiến thức và tiếp

xúc với những tiềm năng rộng mở của công nghệ, dé chúng em có thé tự do hiện

thực những dự án mình muốn

Đầu tiên, chúng em xin chân thành cảm ơn thầy Nguyễn Công Hoan đã làngười hỗ trợ về định hướng và cho nhóm em những lời khuyên hữu dụng và thực tế

trong quá trình nghiên cứu và hoàn thiện dé tai luận văn tốt nghiệp này Cảm on

thầy rất nhiều và thầy là ấn tượng đặc biệt khó quên đối với nhóm em

Chúng em cũng muốn gửi lời cảm ơn đến quý thầy cô trong khoa đã giúp đỡ

tụi em trau dồi và lĩnh hội kiến thức chuyên môn Được tiếp xúc với nhiều thầy cô

với nhiều phong cách khác nhau cho tụi em trải nghiệm vô cùng hữu ích và đáng

học hỏi.

Quang thời gian đại học cũng cho em những người ban thú vi va môi trường

dé khám phá nhiều điều mới lạ và em rất biết ơn về điều đó Nếu không vi học ở

UIT thì chúng em đã không có những trải nghiệm và trở thành con người chúng em bây giờ.

Tuy đã rất nỗ lực, khả năng chúng em vẫn còn giới hạn nên không tránh khỏinhững thiếu sót, chúng em rất mong nhận được sự thông cảm và góp ý từ thầy cô và

các bạn.

Xin chân thành cảm ơn và chúc sức khỏe mọi người, chúc mọi người luôn

thành công và hạnh phúc trên con đường của mình !

TOM TAT KHÓA LUẬN

CHƯƠNG I: TÔNG QUAN ĐÈ TÀI

1.1 Phân tích đề tài

1.1.1 Đặt van đề

1.1.2 Nghiên cứu thị trường

1.143 — Giới thiệu dé tài

CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG

2.1 Công nghệ sử dụng

2.1.1 Front-end 2.1.2 Back-end 2.1.3 Nudgets & extensions

CHƯƠNG 3: PHAN TÍCH HE THONG

3.1 Kiến trúc hệ thống

3.2 Phân tích tính năng

3.2.1 Tổ chức dữ liệu

3.2.2 Tổng quan tính năng

Use case tong quan tinh nang User

Use case téng quan Artiste

11 13 15

10 10 10 11 17 20 20 21 21 22 22 23

3.2.3 — Giới thiệu tính năng

Tạo tài khoản

Chat với người nỗi tiếng

Gặp mặt người nỗi tiếng

3.3.3 Chat với người nổi tiếng

3.3.4 Gặp mặt người nổi tiếng

3.3.5 _ Sở hữu hình ảnh độc quyền

3.3.6 Nghe thần tượng hát

3.3.7 Yêu cau video thông điệp từ người nổi tiếng

3.3.8 Dành cho Artiste quan lý hoạt động

CHƯƠNG 4: KÉT LUẬN

4.1 Kết quả đạt được

4.2 Hướng phát triển

24 24 25 28 33 36 41 47

50

52

52 53 55 55 59 61

64

67 70 70 70

DANH MỤC HÌNH

HÌNH 2.1.1 SƠ DO KIEN TRÚC HE THONG

HINH 2.2.1 SƠ DO CLASS DIAGRAM CƠ SỞ DU LIEU

HINH 2.2.2 USE CASE TONG QUAN USER

HINH 2.2.3 USE CASE TONG QUAN ARTISTE

HINH 2.2.4 USE CASE TAO TAI KHOAN

HÌNH 2.2.5 USE CASE CAI ĐẶT DỊCH VỤ TRO CHUYEN Ở PHIA ARTISTE

HINH 2.2.7 USE CASE CHAT VỚI NGƯỜI NOI TIENG

HINH 2.2.8 USE CASE QUÁ TRINH GAP MAT NGƯỜI NOI TIENG QUA VIDEO CALL

HINH 2.2.9 USE CASE CAI DAT DICH VU GAP MAT O PHIA ARTISTE

HINH 2.2.10 USE CASE SO HUU HINH ANH DOC QUYEN O PHIA USER

HINH 2.2.11 USE CASE CAI DAT DICH VU HINH ANH DOC QUYEN O PHIA ARTISTE

HINH 2.2.12 USE CASE YEU CAU BAI HAT

HINH 2.2.13 USE CASE CAI DAT DICH VU GUI BAI HAT THEO YEU CAU G PHIA ARTISTE

HINH 2.2.14 USE CASE QUA TRINH YEU CAU VIDEO THONG DIEP TU NGUOI NOI TIENG

HINH 2.2.15 USE CASE CAI DAT DỊCH VU GUI VIDEO THONG ĐIỆP Ở PHÍA ARTISTE

HINH 2.2.16 USE CASE QUAN LY CAC YEU CAU CUA USER

HINH 2.2.17 USE CASE QUAN LY CAC YEU CAU CUA ARTISTE

HINH 2.2.18 USE CASE QUAN LY HOAT DONG CUA ARTISTE

HINH 2.2.19 USE CASE CAI ĐẶT PHƯƠNG THỨC THANH TOÁN Ở PHIA USER

HINH 2.3.1 GIAO DIEN KHAM PHA ARTISTE

HINH 2.3.2 GIAO DIEN MOBILE XEM PROFILE VA DICH VU CUA ARTISTE

HINH 2.3.3 GIAO DIEN MOBILE TAO TAI KHOAN VA DANG NHAP

HINH 2.3.4 GIAO DIEN MOBILE USER CHAT VOI NGUOI NOI TIENG

HINH 2.3.5 GIAO DIEN USER YEU CAU BUOI GAP MAT NGƯỜI NOI TIENG

HINH 2.3.6 GIAO DIEN TRUONG HOP ARTISTE DE XUAT KHUNG GIO MOI

HINH 2.3.7 GIAO DIEN THUC HIEN CUOC GOI ONLINE

HINH 2.3.8 GIAO DIEN USER DAT HANG HINH ANH DOC QUYEN

HINH 2.3.9 GIAO DIEN USER YEU CAU BAI HAT

HINH 2.3.10 GIAO DIEN ARTISTE THUC HIEN YEU CAU BAI HAT

HINH 2.3.11 GIAO DIEN USER NHAN ĐƯỢC BAI HÁT ĐÃ YÊU CAU

HINH 2.3.12 GIAO DIEN USER YEU CAU VIDEO THONG DIEP

HINH 2.3.13 GIAO DIEN ARTISTE THUC HIEN YEU CAU VIDEO

HINH 2.3.14 GIAO DIEN USER NHAN ĐƯỢC VIDEO THONG ĐIỆP DA YÊU CAU

HINH 2.3.15 GIAO DIEN DASHBOARD XEM THONG KE HOAT DONG CUA ARTISTE

48

50 52 53 54 55 56 57 58 60 61 62 63 64 65 66 67

HÌNH 2.3.16 GIAO DIỆN CÀI ĐẶT DỊCH VỤ HÌNH ẢNH ĐỘC QUYỀN

HÌNH 2.3.17 GIAO DIEN CÀI ĐẶT DỊCH VỤ VIDEO THEO YÊU CAU

HÌNH 2.3.18 GIAO DIỆN CÀI ĐẶT DỊCH VỤ GẶP MẶT ONLINE

HÌNH 2.3.19 GIAO DIỆN CÀI ĐẶT DỊCH VỤ BÀI HÁT THEO YÊU CÀU

HÌNH 3 1 SEQUENCE DIAGRAM CHAT VỚI NGƯỜI NOI TIENG

HINH 3 2 SEQUENCE DIAGRAM YEU CAU GAP MAT NGƯỜI NOI TIENG

HINH 3 3 SEQUENCE DIAGRAM VIDEO CALL GAP MAT NGƯỜI NOI TIENG

HÌNH 3 4 SEQUENCE DIAGRAM ĐẶT MUA HÌNH ANH ĐỘC QUYỀN CUA NGHỆ SĨ

HINH 3 5 SEQUENCE DIAGRAM YÊU CAU BAI HÁT TU NGƯỜI NOI TIENG

HINH 3.6 SEQUENCE DIAGRAM NHAN THANH PHAM BAI HAT TU NGUOI NOI TIENG

HÌNH 3 7 SEQUENCE DIAGRAM YEU CAU VIDEO THONG ĐIỆP TỪ NGƯỜI NOI TIENG

HINH 3 8 SEQUENCE DIAGRAM NHẬN THÀNH PHAM VIDEO THONG ĐIỆP TỪ NGƯỜI NOI

TIENG

HINH 3 9 SEQUENCE DIAGRAM CAI DAT PHUONG THUC THANH TOAN

68 68 69 69

DANH MỤC BANG

BANG 2.1 ĐẶC TA USE CASE TẠO TÀI KHOẢN 24 BANG 2.2 DAC TA USE CASE CAI DAT DICH VU CHAT 25 BANG 2.3 DAC TA USE CASE TRÒ CHUYEN VỚI NGƯỜI NOI TIENG 26 BANG 2.4 DAC TA USE CASE GAP MAT NGƯỜI NOI TIENG QUA VIDEO CALL 28 BANG 2.5 DAC TA USE CASE CAI DAT DICH VU GAP MAT 30 BANG 2.6 DAC TA USE CASE SO HUU HINH ANH DOC QUYEN 33 BANG 2.7 DAC TA USE CASE CAI DAT DICH VU HINH ANH DOC QUYEN 34 BANG 2.8 DAC TA USE CASE YÊU CAU BÀI HAT TỪ NGƯỜI NOI TIENG 36 BANG 2.9 DAC TA USE CASE CAI DAT DICH VU GUI BAI HAT THEO YEU CAU 38 BANG 2.10 ĐẶC TA USE CASE YEU CÀU VIDEO THONG DIEP TU NGƯỜI NOI TIENG 41 BANG 2.11 ĐẶC TA USE CASE CÀI ĐẶT DICH VỤ GUI VIDEO THONG ĐIỆP THEO YÊU CÀU 43 BANG 2.12 DAC TA USE CASE QUAN LY YEU CAU CUA USER 47 BANG 2.13 DAC TA USE CASE QUAN LY YEU CAU CUA ARTISTE 48 BANG 2.14 DAC TA USE CASE XEM LAI DOAN GHI AM BAI THI 50

DANH MỤC TỪ VIET TAT

COVID: Corona Virus Disease of 2019, ý nghĩa: Dịch virus Corona của năm 2019.

SQL: Structured Query Language, ý nghĩa: Ngôn ngữ truy van dữ liệu

NoSQL: Not Only SQL, ý nghĩa: Cơ sở dit liệu phi quan hệ.

RDBMS: Relational Database Management System, ý nghĩa: Cơ sở dit liệu quan hệ.

HTML: Hypertext Mark-up Language, ý nghĩa: Ngôn ngữ Đánh dấu Siêu

văn bản.

API: Application Programming Interface, ý nghĩa: Phương thức trung gian

kết nối

UI: User Interface, ý nghĩa: Giao điện người dùng.

GUI : Graphical User Interface, ý nghĩa: Giao diện đồ họa người dùng

URL: Uniform Resource Locator, ý nghia: Dinh vị tài nguyên thống nhất

TÓM TAT KHÓA LUẬN

Ai chắc hắn cũng đã có cho mình những nhân vật nổi tiếng họ yêu thíchnhưng dé tiếp xúc trực tiếp thần tượng là một việc rất khó

Xuất phát từ mong muốn này, nhóm em đã thực hiện 1 sản phẩm mang tênMoments, một nơi dé mọi người có cơ hội kết nối và yêu cầu những dịch vụ độc

quyền từ người nổi tiếng họ yêu thích, rút ngắn khoảng phân cách giữa người nồi

tiếng và fan Với những tính năng chính cho trải nghiệm kết nối toàn diện là:

© Chat trò chuyện với người nổi tiếng

e Yêu cau video thông điệp cá nhân từ người nỗi tiếng

e Gặp mặt I-I trực tiếp với người nổi tiếng

e Sở hữu nội dung hình ảnh độc quyền có chữ ký từ người nổi tiếng

Hình thức dé tài: Web Application cho desktop và mobile application

Phuong pháp thực hiện:

e Phân tích đề tai và yêu cầu dé ra

e Đối chiếu và tham khảo mô hình sản phẩm trên thị trường

e_ Thiết kế chức năng đáp ứng business rules và tối ưu trải nghiệm người

dùng.

e Tham khảo ý kiến của giảng viên hướng dan dé có định hướng phù hợp

e Tìm hiểu về công nghệ cần kết hợp dé thiết kế kiến trúc website

e Thiết kế giao diện và trải nghiệm người dùng phù hợp với đối tượng mục

tiêu.

e Kiêm thử va user testing đê hoàn thiện sản phâm.

CHUONG 1: TONG QUAN DE TÀI

1.1 Phan tich dé tai

1.1.1 Dat van dé

Người nỗi tiếng, là người được biết đến bởi công chúng cũng như giới truyềnthông bởi sự nghiệp nghệ thuật hay tầm ảnh hưởng của họ ở nhiều lĩnh vực cụ thé

Người nồi tiếng mang lại cho fan, thông qua tác phẩm của họ, những ấn tượng nhất

định và đã tạo cho họ một lực lượng người ủng hộ, quan tâm lớn.

Qua thời gian , cùng với sự phát triển của lĩnh vực giải trí và mạng xã hội,

moi quan hệ của người nổi tiếng với người hâm mộ càng được mở rộng Tính cách

riêng biệt của người nổi tiếng cùng với việc chia sẻ đời tư trên mạng xã hội, là điều

khiến khán giả tò mò, hứng thú hơn với họ hơn.

Xem thôi là chưa đủ, nhiều fan muốn trở thành bạn bè với người họ thần

tượng Tuy nhiên với việc nghệ sĩ nhận được hàng ngàn tin nhắn trên mạng xã hội,

khả năng kêt nôi được sẽ vô cùng thâp.

Theo cách truyền thống , người nổi tiếng sẽ có những buổi hòa nhạc, ký tặng

để giao lưu với fan, nhưng với sự bùng phát của dịch CO VID và sự hỗ trợ côngnghệ, việc phát triển một nền tảng chính thức dé kết nối người nối tiếng với côngchúng có thê giúp ích cho vấn đề này Và đây cũng chính là đề tài khóa luận nhóm

em lựa chọn.

1.1.2 Nghiên cứu thị trường

Trong thế giới hiện đại của ngành giải trí, càng có nhiều nhu cầu mới lạ đượcphát sinh Ví dụ như một người có thể trả tiền cho một video nghệ sĩ yêu thích của

họ động viên họ hay cho họ lời khuyên đó là những gi Cameo, một website nơi

người dùng có thé trả tiền người nổi tiếng để nhờ họ thực hiện video theo yêu cầu

đã và đang làm.

Tính năng chính và độc quyền của Cameo là việc thuê người nổi tiếng làmcameo theo ý mình Người dùng chỉ cần gửi thông tin người gửi, kèm với 1 hướngdẫn , như 1 kịch bản, dé người nồi tiếng thực hiện video theo ý mình Ngoài ra còn

một sô tính năng khác như:

e Tham dự fan-club đê nhận cập nhật mới vê người nôi tiêng.

e Thực hiện cuộc gọi l-on-1 với người nôi tiêng.

e Xem những cameo của người nôi tiêng

Với nội dung giao tiếp cá nhân và thường ngày, nhưng khi được thực hiện

bởi người nổi tiếng, lại có những tác động tích cực và công chúng dang hưởng ứng

điều đó Thị trường không thấy dấu hiệu của sự ngừng lại của loạt nội dung này

Năm 2020, Cameo này đã mang lại doanh thu 100 triệu $ trong thời dich

COVID và con số vẫn tiếp tục tăng Lượng booking tăng 350% và có thêm 10,000

người nồi tiếng gia nhập Cameo và sản xuất đến 30,000 giờ nội dung video (nguồn:

businessofapps.com).

cameo Q

Home Featured Reality TV Athletes Musicians Comedians Creators All categories

Tu Cameo có nghĩa là sự hiện điện ngăn của khách moi là người noi tiêng,

đó cũng là mục đích của nên tảng này.

Cameo có sự tham gia của nhiêu người nôi tiêng từ lớn đên nhỏ , từ diễn

viên, nghệ sĩ đên influencer (người có sức ảnh hưởng) với mục đích chính là trả tiên

đê người nôi tiêng làm video nội dung độc quyên cho mình Bạn có thê yêu câu họ

nói bât cứ điêu gì, mở ra tiêm năng sáng tạo cực kỳ rộng.

Một cameo có nhiều loại mức giá dé lựa chọn từ 5$- 2500$ Điều lôi cuỗnnhất và cũng là điều khó đoán nhất là người dùng sẽ không biết sắp nhận được gì

Yếu tố bat ngờ là lý do có rất nhiều người hứng thú vào dich vụ

Nội dung mới lạ, phục vụ theo yêu cầu là điều đặc trưng của dịch vu

Cameo là một startup 6 Chicago và ý tưởng thuê người nổi tiếng làm video

thông điệp là ý tưởng độc quyền của họ Trên thị trường ít lâu sau, có 1 số sản phẩm

cùng concept ra đời như Starsona, Myfanpark Cameo vẫn đi đầu và là nền tảng

thành công, nôi tiêng nhât trong mô hình này.

Ưu điêm nỗi trội của Cameo chính là:

e Là platform với ý tưởng gốc là mô hình thuê người nỗi tiếng làm

video ngắn

e Đa dạng về thể loại người nỗi tiếng và mức giá tiền

e Video thành phẩm được gửi trực tiếp qua mail cùng với bản quyền dé

chia sẻ lên mạng xã hội.

Với sự phát triên và sức ảnh hưởng của người nôi tiêng, cùng với nhu câu giải trí tăng cao vì dịch COVID, những sản phâm giúp găn kêt môi quan hệ có tâm

quan trọng lớn và có tiềm năng phát triển

Ý tưởng của Cameo tạo nên 1 nhu cầu mới với sự ủng hộ đông đảo, ké ca

mạng xã hội TikTok cũng đang chạy thử một tính năng mới là yêu cầu tiktoker làmvideo thông điệp ( nguồn: sea.pemag.com), tương tự như của Cameo

Q Fabian (Bern) Ouwehand j<tb# v

® Request a video and pay your creator

Wait up to 3 days for your ator to accept

© Geta video in about a week at jer the creator 8:17 PM - Jul'4, 2021 @

© 239 QD 13 đ, Share this Tweet

Có 1 điểm hạn chế là Cameo không hoàn toàn dap ứng được nhu cau quốc tếcủa từng thị trường cụ thể, vì đa số những ngôi sao Cameo đều ở khu vưc châu Mỹ,

dé phục vụ cho 1 môi trường cụ thê, ta cần 1 tập người nồi tiếng liên quan và được

biệt đên bởi những người trong môi trường đó.

Vì nhu câu và thi hiệu thị trường của nhóm người nôi tiêng khác nhau giữa các nước, nhóm em đã lựa chọn xây dựng một website kêt nôi công chúng với

người nôi tiêng làm đê tài khóa luận.

1.1.3 Giới thiệu đề tài

moments

Dé tài nhóm thực hiện mang tên Moments, là một nên tảng web application nơi người dùng có thê yêu câu những nội dung cá nhân hóa từ người nôi tiêng cũng như có được két nôi đặc quyên với người nôi tiêng, hay là những “Khoảnh khắc”

(dịch từ tiếng Anh: Moments) đáng nhớ với nghệ sĩ yêu thích

Trên website này, người dùng có thê trải nghiệm những điều sau:

e Kết nối thông qua video call trực tiếp với người nổi tiếng

e Yêu cầu video thông điệp cá nhân từ người nỗi tiếng

e Kết nối với người nổi tiếng thông qua chat

e Sở hữu nội dung hình ảnh độc quyền có chữ ký từ người nổi tiếng

e Quản lý những yêu cầu và thành phâm của mình

Và người nổi tiếng sẽ thực hiện yêu cầu cũng như đưa đến khán giả với

những mức giá , thời hạn nhất định của riêng từng người

Sau khi gửi thành công yêu cầu và thanh toán online, người nỗi tiếng sẽ cóthời hạn phản hồi là 3 ngày (Standard) hoặc 24h (Express) tùy theo mức giá người

dùng chọn.

Khi đã chấp nhận yêu cau, người nổi tiếng sẽ đảm bảo thực hiện đơn yêu cầu

theo deadline mình đã đặt ra cho dịch vụ.

Trong trường hợp yêu cầu không được đáp ứng kịp deadline, người dùng sẽ

được hoàn tiền và có thé thưởng thức thành pham từ nghệ sĩ miễn phí

Quá trình này được áp dụng chung cho tất cả dịch vụ trên Moments tạo nên 1trải nghiệm người dùng đồng bộ, dễ hiểu và nhanh gọn Website còn hỗ trợ them

những tiện ích quen thuộc như thanh toán thẻ VISA, login qua Facebook và Google.

1.1.4 Ứng dụng đề tài

Nhóm nhận thây, với tâm ảnh hưởng của người nôi tiêng, những nội dung

đặc biệt mà họ thực hiện có thể áp dụng cho rất nhiều mục đích thực tiễn:

e Thực hiện nội dung quảng bá thương hiệu với sự hiện diện của người

nôi tiếng

e Host màn trình diễn cá nhân cho fan theo yêu cầu

e_ Tạo những buôi giao lưu giữa người nồi tiếng và công chúng

e Thực hiện video theo mục đích cá nhân sáng tao: gửi lời chúc, động

viên, xin lôi, thông bao

e Moi người nôi tiêng làm khách mời xuât hiện trong những virtual

events dé thu hút sự chú ý

Mối quan hệ đặc biệt của người nồi tiếng với fan-base (lực lượng fan) của họ

mang tiềm năng và giá tri kinh tế- xã hội vô cùng mạnh mẽ Khi họ quảng bá

thương hiệu, kêu gọi và truyền đạt quan điểm với một tập người ủng hộ mình, họ sẽ

dễ dàng thành công hơn.

Nền tang này là nơi giúp xây dựng mối quan hệ đặc biệt hơn giữa người nổi

tiếng với khán gia cũng như giúp việc kết nối với người nồi tiếng dé dang hơn

Moments giúp rút ngắn khoảng cách và tạo nên những khoảnh khắc đáng nhớ với

thần tượng yêu thích

1 collection thư viện bao hàm đa dạng tinh năng như routing, quan lý form,

giao tiếp client- server và hơn thế nữa

Developer tools dé phat trién, build, test va cap nhat code

Một sô ưu diém cua Angular bao gom:

Rang buộc dữ liệu hai chiều giữa JavaScript và HTML, code cho cả hai đã

được đồng bộ hóa

Tính quy mô hóa dễ dàng

Cộng đồng, thư viện đa dạng

Có Template sẵn cho phép bạn tạo ra các ứng dụng với code ngắn gọn

Thử nghiệm — Framework hỗ trợ thử nghiệm đơn vi và tích hợp.

Tương thích với thiết bị di động và máy tính dé bàn, có thể chạy trên hầu hết

các trình duyệt web Không chỉ trên máy tính để bàn, mà cả các thiết bị di

động.

10

2.1.2 Back-end

¢ NET framework

NET là framework mã nguồn mở bao gồm những tools, ngôn ngữ lập trình

và thư viện dùng dé xây dựng nhiều loại applications khác nhau như: Web apps,

Mobile apps , Desktop apps, Games, IoT (Internet of Things)

Ngôn ngữ NET hỗ trợ là: C#, F# va Visual Basic.

NET đa nên tang và thích ứng với những hệ điều hành khác nhau Những

extensions của NET sẽ hỗ trợ code theo nhiều cách:

— NET Core hỗ trợ websites, servers và console apps trên Windows,

ASP.NET là một framework dựa trên được phát triển và cung cấp bởi

Microsoft, là một extension mở rộng của NET với những components khác nhau

dùng dé xây dựng I số thé loại apps cụ thê

11

ASP.NET bồ sung thêm những yếu tố như là:

— Cung cấp base framework để xử lý web requests trong ngôn như C# hoặc F#

— Thư viện dùng cho web patterns phô biến như mô hình MVC ( Model View

Controller)

— Hệ thống Authentication bao gồm thư viện, databases và template pages dé

xử lý đăng nhập, bao gồm cả việc xác thực nhiều lớp và xác thực với Google,

Twitter

— Editor extensions gồm syntax highlighting, gợi ý code va chức năng khác

cho viéc phat trién web

ASP.NET được dùng dé xây dựng nhiều loại web applications, bao gồm webpages, REST APIs, microservices và hubs dé đây dit liệu real-time đến những

client.

ASP.NET Core ra đời năm 2016, là phiên ban open-source cua ASP.NET va

nó cross-platform (da nền tang) có thé chạy trên nền tang Windows, Linux, macOS

va Docker Một số ưu điểm của ASP.NET Core bao gồm:

— Đồng bộ hóa giữa web UI và web APIs

— Kiến trúc được xây dựng hỗ trợ cho test kiểm thử

— Tinh cross-platform.

— Open-source va community focused.

— Có khả nang host Nginx, Docker, Apache

— Môi trường config trên cloud.

— Performance cao, nhẹ và có tinh modular (phân khối)

s* Mô hình 3-tier

12

1uau1ia8euein| jguoI1ø1ad@

3-tier là một kiến trúc client/server mà trong đó giao điện người dùng (Userinterface), các quy tắc xử lý (Business logic) và việc lưu trữ dữ liệu (Data access)

được phát triển như những module độc lập

Day là kiến trúc triển khai ứng dụng ở mức vật lý Kiến trúc gồm 3 module là:

¢ Presentation Layer : Lớp này có nhiệm vụ chính giao tiếp với người dùng.

Nó gồm các thành phan giao diện và đảm nhiệm việc nhập liệu, hiển thi ,

kiểm tra tính hợp lệ dit liệu trước khi gọi lớp Business Logic

e Business Logic Layer có 2 nhiệm vụ:

— Đây là nơi đáp ứng các yêu cầu thao tác dit liệu của Presentation layer, xử

lý chính nguồn dữ liệu từ Presentation Layer trước khi truyền xuống DataAccess Layer và lưu xuống database

— Đây còn là nơi kiểm tra các ràng buộc, tính toàn ven và hợp lệ dtr liệu,

thực hiện tính toán và xử lý các logic nghiệp vụ, trước khi trả kết quả về

Presentation Layer.

13

« Data Access Layer: Lớp này có chức năng giao tiếp với database dé xử lý

các công việc liên quan đến lưu trữ và truy vấn dữ liệu (tìm kiếm, thêm,

xóa, sửa ).

+ MySQL

MySQL là 1 hệ quản tri cơ sở dữ liệu quan hệ (RDBMS - Relational

database management system) open sourced với mô hình client-server Được phat

triển vào năm 1994 bởi 1 công ty Thuy Điền MySQL AB và vào năm 2010, thuộc

quyên sở hữu của Oracle.

Mô hình Client - Server là như sau: 1 hay nhiều thiết bị (client) kết nối vớiserver thông qua 1 network cụ thé Mỗi client tao request từ GUI và server sẽ xử lý

và cho ra output đáp ứng request đó MySQL sẽ tao 1 database dùng dé lưu trữ vàchỉnh sửa data và định nghĩa mối quan hệ giữa các table trong database Clients có

thé gửi request dùng câu lệnh SQL trong MySQL Server sẽ xử lý và cho ra

response đáp ứng dé hiền thị trên GUI của client

14

— Performance va toc độ tot.

— Bao mật với mã hóa password va host-based verification.

— Dat chuan trong nganh.

s* MongoDB

0 mongo

MongoDB là cơ sở dữ liệu NoSQL, nó lưu trữ dữ liệu trong các document

dạng JSON với schema động rat linh hoạt thay vì bang Nghia là ta có thé lưu các

bản ghi mà không cần lo lăng về cấu trúc dữ liệu như là số trường, kiêu của trường

lưu trữ.

Để thay đôi thuộc tính hoặc thêm mới, don giản chỉ cần thêm mới các trường

hoặc xóa các trường có sẵn MongoDB giúp ta trình bày các quan hệ dạng thứ bậc,

để lưu trữ mảng, và các câu trúc phức tạp khác một cách dễ dàng

MongoDB cung cấp hiệu suất cao, tính sẵn có cao và dé dàng mở rộng.

15

s Nginx Reverse Proxy

Nginx là 1 reverse proxy server Reverse proxy là một loại proxy server

trung gian giữa một may chủ va các client gửi tới các requests.

Nó kiêm soát request của các client, nêu hợp lệ, sẽ điêu chuyên đên các

server thích ứng.

Reverse proxy cung cấp 1 level trừu tượng bảo mật và kiểm soát dé đảm bảo

độ mượt ma của kêt nôi giữa client và server.

Ưu điêm của reverse proxy server là:

— Điều phối lưu lượng load, đảm bảo không có server nào bị quá tải và

điều phối đường truyền đến những active servers để đảm bảo

performance.

— Bảo mật danh tính khỏi identity attacks và dam bảo nhiều servers có

thé được truy cập bởi 1 record locator hoặc URL

— Tăng tốc độ truyền tải bằng cách cache những dữ liệu được yêu cầu

thường xuyên, nén dữ liệu và SSL (Secure Sockets Layer) encryption.

16

2.1.3 Nudgets & extensions

s* Entity Framework

Entity là ORM (Object Relational Mapping) framework mã nguồn mở dung

cho ứng dụng Developer có thé dùng Entity dé làm việc với data thông qua objects

mà không cần quá tập trung về tên bảng trong database Entity Framework có tín

trừu tượng hóa cao hơn dé developers có thé tạo và duy trì data với ít code hơn

Entity Framework Features

Entity Framework

Một số features của Entity là :

— Tính cross-platform có thê hoạt động trên Windows, Linux & Mac

— Entity dùng Entity data model với thuộc tinh get/set để giao thiệp với

Data layer cho những việc như query và lưu trữ data.

— Entity keep track những thay đôi về thuộc tính của entity data model

xuyên suốt quá trình sử dụng

— Entity bao gồm I*' level caching nên những query lặp lại sẽ được xử

lý thông qua cache thay vì giao tiếp với database

— Bao gồm những coding conventions và patterns áp dụng thắng vào

Entity data model.

— Entity cung cấp một bộ migration commands có thé chạy trên NuGet

Package Manager Console hoặc Comman Line dé quan lý database

schema.

17

s* Identity ASP NET Core

ASP.NET Core Identity là 1 API hỗ trợ cho chức năng đăng nhập trên UI.

Nó quản lý users, passwords, profile, data, tokens, xác thực email Identity được

config với SQL server dé lưu data

Người dùng có thé tao account với login information lưu trữ trong Identity

hoặc liên kết với login providers khác như Facebook, Google, Twitter va

Microsoft.

Stripe là một công thanh toán của Mỹ cho phép các trang thương mại điện tử(ecommerce) có khả năng thanh toán trên website bán hàng của mình Nền tang

này đã xử lý vô số giao dịch với tổng trị giá lên đến 100 tỷ mỗi năm

Stripe được áp dụng vào tính năng thanh toán online qua thẻ VISA.

Stripe cung cấp SDK dé có thé tích hợp trên các thiết bị chạy trên cả Android

va IOS Ngoài ra, nó còn cung cấp Stripe API dé có thé được sử dụng bởi rất nhiều

các ngôn ngữ như: Ruby, Python, Java, GO (Stripe API).

Tài khoản Stripe rất giống tài khoản ngân hàng và mỗi tài khoản có các

khoản thanh toán, dashboard riêng dé quan lý

Uu diém của Stripe là hỗ trợ nhiều don vị tiền tệ va có tính bảo mật quốc tế

18

Cơ chế hoạt động của Stripe là App sẽ gửi credit card infomation lên Stripe

dé Strip xử lý và trả về token Sau đó app gửi token về cho back-end và server giao

tiếp với Stripe qua Stripe’s API Sau khi giao dịch xong , Stripe trả về kết quả cho

server và thông báo cho app kết quả của giao dịch

“+ Agora

AQOra

Agora là một nền tảng cung cap SDK phục vụ nhiều chức năng kết nối như

video call, live message, real time live streaming va recording.

Agora được tin dung bời nhiều công ty trên thé giới và có một nền tang

developer vô cùng tiên tiến như vì tính quy mô hóa, dé dang implement 1 cách linhhoạt và thích ứng với nhiều thiết bị, nên tang develop cũng như tốn ít năng lượng

để chạy

Agora đáp ứng cho nhiều development platform như Android, iOs,

Windows, Mac, Electron, Unity Giúp hỗ trợ mang những tính năng real-time trên

thiết bị điện tử 1 cách tốt nhất

Agora được nhóm áp dụng vào tính năng video call với người nồi tiếng vàchat kết nói

19

CHƯƠNG 3: PHÂN TÍCH HỆ THÓNG

3.1 Kiến trúc hệ thống

Nhóm đã lựa chọn phát triển web application cho đề tài vì nó có thê truy cập

từ bất kỳ browser nào trên cả thiết bị mobile và desktop Sau đây là mô hình kiến

3.2 Phân tích tính năng

3.2.1 Tổ chức dữ liệu

© Code VARCHAR(50) @ Accountld INT(11)

© NormalizedCode VARCHAR(50) © Categoryld INT(11)

< Tile VARCHARUS) © LastName VARCHAR(45) tye INT

5 SubTite V (6) © NormalizedLastName VARCHAR(45) ype

" ba E ‹ Email VARCHAR(45)

ou te DATETIME Normalize dEmail VARCHAR(45)

© IsRead TINYINT © ReferrenceCode VARCHAR(45)

® Productld VARCHAR(24) PIG INT(11)

——l< @ PayMethodld INT @ Code VARCHAR(20)

@ Accountld INT © NormalizedCode VARCHAR(20)

@ Arlisld INT © Name VARCHAR(45)

PIG INT(11)

G R @ Currencyld INT :à NormalizedName VARCHAR(45)

` vA hóo PersonName VARCHARI

NormalizedCode VARCHAR(20) [45 — — | : otal FLOAT I4)

© Name VARCHAR) '— 1S», MekName VARCHAR

© NormalizedName VARCHAR(45) ‘ame M45)

3.2.2 Tổng quan tính năng

Use case tổng quan tính năng User

User ( người dùng ) là khách hang sử dụng dịch vụ trên web application của

Use case tổng quan Artiste

Artiste (dich từ tiếng Pháp: Nghệ si) có thé hiểu là những người nỗi tiếng ,

những người sáng tạo nội dung phục vụ người dùng.

Đăng nhập

Tao tai khoản ok

Doi mat khau

Quan lý profile

động

Chỉnh sửa thang tin

hiển thị

Quản lý tai khoản

Cai dat payment

method

Dich vụ trò chuyện

Dich vụ tang bai hat

Dich vu hen gap mat

Artiste

Bộ hinh ảnh độc quyển

Dịch vụ gửi thông điệp video

Hình 3.2.3 Use case tổng quan Artiste

23

3.2.3 Giới thiệu tính năng

Tạo tài khoản

h

Hé théng

Hinh 2.2.4 Use case Tao tai khoan

Bang 3.1 Dac ta use case Tao tai khoan

Use case name Tao tai khoan

Description Chức năng cơ ban dé lưu trữ dit liệu sử dung của user qua thời

gian Cho phép user truy cập những tính năng chính.

Actor(s) User

Priority

Precondition(s) Người dùng chưa có tài khoản trên hệ thống

Post-Condition(s) | Hệ thống hiển thị chính xác và day đủ những nội dung liên quan

Alternate Flow Tao tai khoản thông qua Facebook:

1 Người dùng nhấn Continue with Facebook

2 Đăng nhập vào tài khoản Facebook

24

3 Authorize tài khoản Facebook

2 Đăng nhập vào tài khoản Google

3 Authorize tài khoản Google

Non-Functional Người dùng cần có tài khoản email hoặc Facebook

Requirement

Chat với người nỗi tiếng

Đề mở và sử dụng dịch vụ Chat, Artiste cần cài đặt những thông tin cơ bản

cho dịch vụ này ở trong tài khoản của mình.

Bat/ tat dich vu

Hình 3.2.5 Use case Cai đặt dich vu Trò chuyện ở phía Artiste

Bang 3.2 Dac ta use case Cai dat dich vu Chat

Description Artiste cần một nơi dé cài đặt và cập nhật các thông tin cơ bản

cho dịch vụ Chat của mình

25