1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Xây dựng website nghe nhạc trực tuyến

48 71 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Website Nghe Nhạc Trực Tuyến
Tác giả Hoàng Lê Trung Hậu, Văn Quốc Huy
Người hướng dẫn ThS. Trần Thị Hồng Yến
Trường học Trường Đại Học Công Nghệ Thông Tin
Chuyên ngành Khoa Công Nghệ Phần Mềm
Thể loại Đồ Án Môn Học
Năm xuất bản 2022
Thành phố Tp HCM
Định dạng
Số trang 48
Dung lượng 2,27 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

Mục tiêu: - Xây dựng được website nghe nhạc trực tuyến với nội dung phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết của một website nghe

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO

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

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN MÔN HỌC

ĐỒ ÁN 1 XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN

Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực hiện 1 : Hoàng Lê Trung Hậu

Trang 2

BỘ GIÁO DỤC VÀ ĐÀO TẠO

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

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN MÔN HỌC

ĐỒ ÁN 1 XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN

Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực hiện 1 : Hoàng Lê Trung Hậu

Trang 3

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

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

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI:

XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN

Tên đề tài tiếng Anh:

BUILD A MUSIC STREAMING WEBSITE Cán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện: Từ ngày 21/02/2022 đến tháng 10/06/2022

Sinh viên thực hiện:

Hoàng Lê Trung Hậu – 19521484

Văn Quốc Huy - 19520607

Nội dung đề tài:

1 Giới thiệu:

Âm nhạc là một bộ phận không thể thiếu trong cuộc sống của con người Âm nhạc

có thể chia sẻ với chúng ta rất nhiều điều: giải quyết những khó khăn trong cuộc sống, vơi đi những giận hờn vu vơ, … Âm nhạc đã gắn liền với đời sống con người và không ngừng phát triển

Với thời đại công nghệ phát triển nhanh chóng như hiện nay, các nền tảng âm nhạc

đã được đưa lên mạng Internet, qua đó, giúp người dùng có thể tiếp cận đến thế giới

âm nhạc rộng lớn một cách tự do, thoải mái

Thông qua đề tài này, nhóm sẽ xây dựng website nghe nhạc trực tuyến Fiveseven Website cung cấp cho người dùng kho nhạc khổng lồ với đa dạng thể loại nhạc Người nghe được thoả sức tìm kiếm với các tuỳ chọn: bài hát, album, ca sĩ, tác giả, … Website cập nhật tất cả những bài hát, album mới nhất nhằm đáp ứng nhu cầu giải trí

Trang 4

về lĩnh vực âm nhạc

Hệ thống này sẽ có chức năng cơ bản như hiển thị và chơi nhạc, upload/download bài hát, nghe nhạc, chức năng tìm kiếm theo dạng text, … Về phía quản tr ị viên sẽ có những chức năng chính như: quản lý nội dung bài hát, album, thông tin nghệ sĩ, quản

lý tài khoản người dùng, …

2 Mục tiêu:

- Xây dựng được website nghe nhạc trực tuyến với nội dung phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết của một website nghe nhạc trực tuyến

- Xây dựng được website dành cho quản trị viên với các chức năng quản lý thông tin

o Quản lý thông tin bài nhạc

o Quản lý tài khoản người dùng

o Quản lý thông tin nghệ sĩ

o Tìm kiếm bài nhạc

o Phân loại bài nhạc theo thể loại, chủ đề, hay top lượt nghe,

o Tạo playlist, đánh dấu bài hát yêu thích

o Cho phép upload hoặc download bài nhạc

o Báo cáo bài nhạc hoặc người dùng cho quản trị viên để xử lý

4 Đối tượng:

- Người dùng khách

- Người dùng có tài khoản

- Quản trị viên (Admin)

Trang 5

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

- Tìm hiểu về ReactJS, NodeJS, MongoDB

- Khảo sát các website nghe nhạc hiện có trên thị trường, từ đó tiến hành phân tích, xác định các yêu cầu, tính năng cụ thể cho đề tài

- Phân tích và thiết kế hệ thống website

- Tìm hiểu quy trình thiết kế UX/UI và tiến hành thiết kế giao diện cho website

- Xây dựng website cho người dùng và website cho quản trị viên

- Tiến hành triển khai và kiểm thử

6 Công nghệ:

- Front-end: ReactJS

- Back-end: NodeJS, ExpressJS

- Database: MongoDB

- Source control: Github

7 Kết quả mong đợi

- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài

- Hiểu rõ các nghiệp vụ, chức năng của một website nghe nhạc trực tuyến

- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án phần mềm để xây dựng website sản phẩm đề tài

- Xây dựng được website nghe nhạc trực tuyến đáp ứng được các yêu cầu về giao diện và chức năng đã đề ra

- Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức năng mới cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn trong tương lai

Trang 6

Kế hoạch thực hiện:

21/02/2022 – 06/03/2022 Tìm hiểu đề tài, đánh giá thị trường, xác định các chức năng

của hệ thống

07/03/2022 – 03/04/2022 Tìm hiểu, nghiên cứu công nghệ

04/04/2022 – 17/04/2022 Phân tích và thiết kế hệ thống website

18/04/2022 – 08/05/2022 Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện cho

website 09/05/2022 – 29/05/2022 Cài đặt phần back-end, xử lý của hệ thống

30/05/2022 – 10/06/2022 Kiểm thử hệ thống và hoàn thiện báo cáo

Xác nhận của CBHD

(Ký tên và ghi rõ họ tên)

ThS Trần Thị Hồng Yến

TP HCM, ngày 18 tháng 02 năm 2022 Sinh viên Sinh viên (Ký tên và ghi rõ họ tên) (Ký tên và ghi rõ họ tên)

Hoàng Lê Trung Hậu Văn Quốc Huy

Trang 7

LỜI CẢM ƠN

Đầu tiên, nhóm thực hiện đề tài “Xây dựng website nghe nhạc trực tuyến FiveSeven” xin gửi lời cảm ơn đến quý thầy cô đã đang giảng dạy chúng em ở ngôi trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh những kiến thức nền tảng vững chắc để nhóm có thể tự tìm hiểu và hoàn thiện đề tài này một cách tốt nhất

Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến vì sự tận tình hướng dẫn cũng như những góp ý, đề xuất quý báu của cô dành cho nhóm trong quá trình thực hiện đồ án

Trong suốt thời gian qua, nhóm đã tự tìm hiểu các công nghệ mới và kết hợp với những kiến thức nền tảng trong quá trình học tập, nghiên cứu và vận dụng để thực hiện đề tài này Với quỹ thời gian có hạn cũng như kinh nghiệm xây dựng sản phẩm còn thiếu, sản phẩm

đồ án cuối cùng có thể sẽ mắc phải một số sai sót và chúng em rất mong sẽ nhận được những góp ý của cô để bổ sung, cải tiến sản phẩm cũng như nâng cao kiến thức để xây dựng các sản phẩm tiếp theo sẽ chỉn chu và hoàn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm quý giá để đáp ứng tốt cho những công việc thực tế trong tương lai

Một lần nữa, xin cảm ơn cô vì đã đồng hành cùng chúng em trong suốt học kỳ II của năm học này

Sinh viên thực hiện

Hoàng Lê Trung Hậu - Văn Quốc Huy

Trang 8

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Tp.HCM, ngày … tháng 6 năm 2022

GVHD

ThS Trần Thị Hồng Yến

Trang 9

MỤC LỤC

LỜI CẢM ƠN 5

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 6

Chương 1: GIỚI THIỆU ĐỀ TÀI 3

1.1 Tên đề tài: 3

1.2 Mô tả đề tài: 3

1.3 Lý do chọn đề tài: 3

1.4 Khảo sát hiện trạng: 4

1.5 Công nghệ sử dụng: 4

1.6 Môi trường thiết kế: 4

1.7 Công cụ hỗ trợ: 4

Chương 2: CƠ SỞ LÝ THUYẾT 5

2.1 Tổng quan về ReactJS: 5

2.1.1.Giới thiệu về ReactJS: 5

2.1.2.Khái niệm cơ bản trong ReactJS: 5

2.1.2.1 Virtual DOM: 5

2.1.2.2 JSX: 5

2.1.3.Cách ReactJS hoạt động: 6

2.1.4.Ưu điểm của ReactJS: 7

2.2 NodeJS: 7

2.2.1.NodeJS là gì? 7

2.2.2.Cách NodeJS hoạt động: 8

2.2.3.Ưu điểm của NodeJS: 8

2.3 ExpressJS: 8

Trang 10

2.3.1.ExpressJS là gì? 8

2.3.2.Tính năng của ExpressJS: 9

2.4 MongoDB: 9

2.4.1.MongoDB là gì: 9

2.4.2.Một số câu lệnh cơ bản: 10

2.4.3.Ưu điểm của MongoDB: 10

2.5 Spotify API: 11

2.5.1.Spotify API là gì? 11

2.5.2.Tính năng của Spotify API: 11

Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12

3.1 Sơ đồ Use-case: 12

3.1.1.Đăng nhập: 12

3.1.2.Đăng xuất: 13

3.1.3.Đăng ký thành viên: 14

3.1.4.Nghe nhạc: 15

3.1.5.Thay đổi thông tin các nhân: 15

3.1.6.Quản lý playlist cá nhân: 17

3.1.7.Tìm kiếm: 20

3.1.8.Xem thông tin playlist: 21

Chương 4: THIẾT KẾ GIAO DIỆN 23

4.1 Trang đăng nhập, đăng ký: 23

4.1.1.Giao diện: 23

4.1.2.Mô tả: 23

4.2 Trang chủ: 24

4.2.1.Giao diện: 24

Trang 11

4.2.2.Mô tả: 24

4.3 Trang cá nhân: 25

4.3.1.Giao diện: 25

4.3.2.Mô tả: 26

4.4 Trang tìm kiếm: 26

4.4.1.Giao diện: 26

4.4.2.Mô tả: 26

4.5 Trang thông tin nghệ sĩ: 28

4.5.1.Giao diện: 28

4.5.2.Mô tả: 28

4.6 Trang bài hát yêu thích: 29

4.6.1.Giao diện: 29

4.6.2.Mô tả: 29

4.7 Trang playlist/album: 29

4.7.1.Giao diện: 29

4.7.2.Mô tả: 30

4.8 Trang thư viện: 30

4.8.1.Giao diện: 30

4.8.2.Mô tả: 30

4.9 Trình phát nhạc: 31

4.9.1.Giao diện: 31

4.9.2.Mô tả: 31

Chương 5: KẾT LUẬN 33

5.1 Nhận xét: 33

5.1.1.Thuận lợi: 33

Trang 12

5.1.2.Khó khăn: 33

5.2 Đánh giá: 33

5.2.1.Ưu điểm của đồ án: 33

5.2.2.Nhược điểm của đồ án: 33

5.3 Hướng phát triển của đồ án: 33

TÀI LIỆU THAM KHẢO 34

Trang 13

MỤC LỤC HÌNH ẢNH

Hình 2.1: Mô tả cách Virtual DOM hoạt động 5

Hình 2.2: Một đoạn code mẫu về JSX .6

Hình 2.3: Ví dụ về tạo một element trong React 6

Hình 2.4: Ví dụ về React được viết bằng JSX 7

Hình 2.5: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website .9

Hình 3.1: Sơ đồ use-case tổng quát 12

Hình 3.2: Sơ đồ use-case đăng nhập 12

Hình 3.3: Sơ đồ use-case đăng xuất 13

Hình 3.4: Sơ đồ use-case đăng ký thành viên 14

Hình 3.5: Sơ đồ use-case nghe nhạc 15

Hình 3.6: Sơ đồ use-case thay đổi thông tin cá nhân 16

Hình 3.7: Sơ đồ use-case quản lý playlist cá nhân 17

Hình 3.8: Sơ đồ use-case tìm kiếm 20

Hình 3.9: Sơ đồ use-case xem thông tin playlist 21

Hình 4.1 Giao diện nút đăng ký, đăng nhập ở bên phải trên thanh header 23

Hình 4.2 Giao diện nút trang đăng nhập sau khi click Log in 23

Hình 4.3 Giao diện nút trang đăng ký sau khi click Sign up 23

Hình 4.4 Giao diện trang chủ khi chưa đăng nhập 24

Hình 4.5 Một số chức năng ở sidebar được sử dụng sau khi đăng nhập 24

Hình 4.6: Giao diện trang chủ sau khi đăng nhập thành công 25

Hình 4.7: Giao diện trang cá nhân của tài khoản đã đăng nhập 25

Hình 4.8: Giao diện trang tìm kiếm 26

Hình 4.9: Giao diện kết quả sau khi chọn thể loại nhạc hiphop 26

Trang 14

Hình 4.10: Giao diện kết quả sau tìm kiếm với từ khoá “le quyen” 27

Hình 4.11: Giao diện thông tin nghệ sĩ 28

Hình 4.12: Giao diện các nghệ sĩ liên quan và trạng thái Following 28

Hình 4.13: Giao diện trang bài hát yêu thích 29

Hình 4.14: Giao diện trang playlist/album bất kỳ 29

Hình 4.15: Giao diện trang thư viện với lần lượt các tab playlist, artist, album 30

Hình 4.16: Giao diện trình phát nhạc 31

Hình 4.17: Giao diện đề xuất bài hát 31

Hình 4.18: Giao diện hiển thị bài hát 32

Trang 15

DANH MỤC BẢNG

Bảng 3.1: Đặc tả đăng nhập: 12

Bảng 3.2: Đặc tả đăng xuất: 13

Bảng 3.3: Đặc tả đăng ký thành viên: 14

Bảng 3.4: Đặc tả nghe nhạc: 15

Bảng 3.5: Đặc tả đề xuất nhạc: 15

Bảng 3.6: Đặc tả hiển thị lời bài hát: 16

Bảng 3.7: Đặc tả nghe nhạc: 16

Bảng 3.8: Đặc tả thêm playlist: 17

Bảng 3.9: Đặc tả xoá playlist: 18

Bảng 3.10: Đặc tả thêm bài hát: 19

Bảng 3.11: Đặc tả xoá bài hát: 19

Bảng 3.12: Đặc tả xoá bài hát: 20

Bảng 3.13: Đặc tả tìm kiếm: 21

Bảng 3.14: Đặc tả tìm kiếm: 21

Trang 16

2

DANH MỤC VIẾT TẮT

4 RDBMS Relational Database Management System

Trang 17

Với sự phát triển nhanh chóng của internet, âm nhạc đã được đưa lên không gian mạng qua những website nghe nhạc trực tuyến Điều này khiến chúng ta tận hưởng âm nhạc một cách dễ dàng và thoải mái hơn trước đây

Tên sản phẩm đề tài FiveSeven được nhóm lấy ý tưởng từ việc kết hợp khá thú vị FiveSeven được hiểu là số 5 và số 7 Số 5 tượng trưng cho 5 dòng kẻ trong khuông nhạc, còn

số 7 tượng trưng cho 7 nốt nhạc cơ bản Đồ, Rê, Mi, Fa, Son, La, Si

Website nghe nhạc trực tuyến FiveSeven với mục tiêu mang lại trải nghiệm tốt cho người dùng, chúng em xây dựng website cung cấp đầy đủ các chức năng cơ bản hiện có của một website nghe nhạc Người dùng sẽ tiếp cận kho âm nhạc khổng lồ với hàng nghìn, hàng triệu bài hát, có thể tư quản lý các playlist nghe nhạc theo sở thích riêng của mình, …

FiveSeven được xây dựng bằng ReactJS kết hợp với các thư viện hỗ trợ khác và đặc biệt là sức mạnh to lớn đến từ Spotify API nhằm đem lại một giao diện thân thiện, dễ sử dụng, cùng nguồn bài hát vô tận dành cho tất cả mọi người

1.3 Lý do chọn đề tài:

Với sự phát triển của Internet, nhu cầu nghe nhạc trên không gian mạng tăng vượt trội bởi vì sự đơn giản, dễ sử dụng, sự tiếp cận nhanh chóng đến kho bài hát khổng lồ của các website nghe nhạc trực tuyến

Trước đây, chúng ta luôn bị gò bó khi nghe nhạc bởi vì nguồn bài hát hạn chế Một chiếc đĩa mềm, hay các thiết bị lưu trữ thời đó có bộ nhớ thấp như thẻ nhớ, điện thoại di dộng

có phím bấm, … chỉ cho phép chúng ta lưu trữ được vài trăm, vài nghìn bài hát Muốn bổ sung các bài hát mới đều phải “copy” từ các nguồn khác, điều này gây mất nhiều thời gian, và chỉ những ai được tiếp cận máy tính sớm thì mới thực hiện được thao tác này Một cách khác

Trang 18

4

là mua những chiếc đĩa nhạc lậu và sử dụng đầu đĩa để phát nhạc Mỗi lần thay đĩa cũng như mỗi lần nghe một playlist mới, vô cùng bất tiện Chi phí cho những chiếc đĩa cũng như thẻ nhớ, hay thậm chí điện thoại là vô cùng đắt đỏ vào thời điểm đó

Tốc độ phát triển “chóng mặt” của Internet đã mang lại nhiều thay đổi lớn cho con người, trong đó bao gồm cả việc thay đổi cách thức và thói quen nghe nhạc trước đây của chúng ta vì đã xuất hiện các website nghe nhạc trực tuyến

Chúng em quyết định chọn đề tài “Xây dựng website nghe nhạc trực tuyến” bởi vì tính ứng dụng cao, nhu cầu thực tế lớn và muốn vận dụng khả năng của mình ở nhiều loại đề tài khác nhau để xây dựng các sản phẩm cho chúng và cái tên đề tài cũng khá thú vị vì chúng

em chưa từng nghĩ tới sẽ thực hiện đề tài này

1.4 Khảo sát hiện trạng:

Hiện nay, thị trường đã có rất nhiều website nghe nhạc trực tuyến nổi tiếng được mọi người biết đến như nhaccuatui.com, zingmp3.vn, deezer.com, … Với giao diện bắt mắ t, dễ sử dụng, cùng với kho âm nhạc bản quyền khổng lồ, chúng nhanh chóng trở thành những website nghe nhạc trực tuyến hàng đầu Các chức năng của những website này đều tập trung vào trải nghiệm nghe nhạc thoải mái nhất cho người dùng

Chúng em cũng sẽ xây dựng một website nghe nhạc trực tuyến với những tính năng nghe nhạc cơ bản nhằm mang lại trải nghiệm dễ sử dụng và tiện dụng cho người dùng, kết hợp với API bên thứ ba để sử dụng kho âm nhạc phong phú, đa dạng và tránh việc vi phạm bản quyền

1.6 Môi trường thiết kế:

- Visual Studio Code

1.7 Công cụ hỗ trợ:

- Trình duyệt Cốc Cốc, Chrome, FireFox

Trang 19

Chương 2:

CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về ReactJS:

2.1.1 Giới thiệu về ReactJS:

ReactJS là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, ra mắt vào 2013 ReactJS hỗ trợ việc xây dựng những thành phần trên website có tính tương tác cao, có trạng thái và có thể sử dụng lại được

Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng server mà còn ở dưới client React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM (Document Object Model)

2.1.2 Khái niệm cơ bản trong ReactJS:

2.1.2.1 Virtual DOM:

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý

React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điề u này sẽ giúp tối ưu hoá việc re-render DOM tree thật

Hình 2.1: Mô tả cách Virtual DOM hoạt động

2.1.2.2 JSX:

- JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript

Trang 20

6

• Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript

• Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là

nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng

gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript,

vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng

Hình 2.2: Một đoạn code mẫu về JSX

2.1.2.3 Props và State:

- Props: giúp các component tương tác với nhau, component nhận input gọi là props, và

trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến

- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

2.1.3 Cách ReactJS hoạt động:

- Tạo đại diện của nút DOM thông qua tạo hàm Element trong React Đây là một ví dụ:

Hình 2.3: Ví dụ về tạo một element trong React

- Cú pháp trong HTML code ở trên rất giống với XML components Tuy nhiên, thay vì

sử dụng DOM class truyền thống, React sử dụng className

- Thẻ JSX có tên thẻ, con và thuộc tính Dấu ngoặc kép tr ong các thuộc tính JSX đại diện cho chuỗi Yếu tố này tương tự như JavaScript

- Ngoài ra, các giá trị số và biểu thức phải được viết bên trong dấu ngoặc nhọn

Trang 21

Hình 2.4: Ví dụ về React được viết bằng JSX

• <MyCounter> được gọi là Số đếm, hiển thị biểu thức số là giá trị của nó

• GameScores là một đối tượng theo nghĩa đen có hai cặp giá trị prop

• <DashboardUnit> là khối XML được render trên trang

• scores={GameScores}}: thuộc tính điểm nhận được giá trị từ GameScores, đã được xác định trước đó

2.1.4 Ưu điểm của ReactJS:

- Phù hợp với đa dạng thể loại website

- Tái sử dụng các Component

- Có thể sử dụng cho cả Mobile application

- Thân thiện với SEO

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trìn h và giảm thời gian ở mức thấp nhất

Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ

Trang 22

2.2.3 Ưu điểm của NodeJS:

- Tốc độ cực nhanh: Được xây dựng dựa trên engine JavaScript V8 của Google

Chrome, do đó các thư viện của nó có khả năng thực thi code chỉ rất nhanh

- NPM: Với hơn 50,000 package khác nhau, các developer có thể dễ dàng lựa chọn bất

kỳ tính năng nào để xây dựng cho ứng dụng của mình

Lập trình không đồng bộ: Mọi API của Node.JS đều có tính không đồng bộ (non

-blocking), do đó một server dựa trên Node.JS không cần phải đợi API trả về dữ l iệu

- Không có buffering: Node.JS giúp tiết kiệm thời gian xử lý file khi cần upload âm

thanh hoặc video vì các ứng dụng này không bao giờ buffer dữ liệu mà chỉ xuất dữ liệu theo từng phần (chunk)

- Đơn luồng: Node.JS sử dụng mô hình đơn luồng với vòng lặp sự kiện Do đó các ứng

dụng có thể xử lý số lượng request lớn hơn rất nhiều so với các server truyền thống như Apache HTTP Server

- Khả năng mở rộng cao: Server NodeJS phản hồi theo hướng non-blocking, do đó nó

có thể mở rộng vô cùng dễ dàng, tạo ra các luồng giới hạn để xử lý request

2.3 ExpressJS:

2.3.1 ExpressJS là gì?

Express.js là một framework mã nguồn mở miễn phí cho Node.js Express.js đượ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 hỗ rợ các phương thức HTTP và midleware tạo ra môt API vô cùng mạnh

mẽ và dễ sử dụng

Trang 23

2.3.2 Tính năng của ExpressJS:

- Phát triển máy chủ nhanh chóng: Expressjs cung cấp nhiều tính năng dưới dạng các hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này đã loại bỏ nhu cầu viết mã từ đó tiết kiệm được thời gian

- Phần mềm trung gian Middleware: Đây 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 Phần mềm 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 Express.js

- Định tuyến - Routing: Express js 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

- Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js cung cấp cho phép các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ

- Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể thiết đi việc gỡ lỗi Giờ đây với Expressjs việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định chính xác các phần ứng dụng web có lỗi

Hình 2.5: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website

Trang 24

10

- Với CSDL quan hệ chúng ta 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 chúng

ta sẽ dùng khái niệm là collection thay vì bảng

- So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS

- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

2.4.2 Một số câu lệnh cơ bản:

2.4.3 Ưu điểm của MongoDB:

- Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ

dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

- Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem

có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

- MongoDB rất dễ mở rộng (Horizontal Scalability) Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

Ngày đăng: 17/08/2022, 21:40

Nguồn tham khảo

Tài liệu tham khảo Loại Chi tiết
[4] Giới thiệu về ReactJS - Phần I (Các khái niệm cơ bản): https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 Link
[5] React là gì? Và nó hoạt động như thế nào? https://www.hostinger.vn/huong-dan/react-la-gi-va-no-hoat-dong-nhu-the-nao Link
[8] Expressjs là gì? Tại sao nên sử dụng Expressjs trong lập trình? https://itnavi.com.vn/blog/expressjs-la-gi/?amp Link
[9] MongoDB là gì? Cơ sở dữ liệu phi quan hệ: https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N Link
[12] Trang dành cho các nhà phát triển của Spotify: https://developer.spotify.com/ Link
[13] F8 – Học lập trình để đi làm: https://fullstack.edu.vn/ Link
[1] Trần Thị Hồng Yến (2021), Slide bài giảng môn Internet và Công nghệ Web, Khoa Khoa Học và Kỹ Thuật Thông Tin, Trường ĐH. Công Nghệ Thông Tin Khác
[2] Phạm Thế Sơn (2021), Bài tập thực hành Internet và Công nghệ Web, Khoa Khoa Học và Kỹ Thuật Thông Tin, Trường ĐH. Công Nghệ Thông Tin Khác
[3] Jon DuCkeTT (2011), HTML &amp; CSS Design and Build Websites, John Wiley &amp; Sons, Inc Khác

TỪ KHÓA LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w