Qua quá trình thực hiện dự án, chúng ta sẽ khám phá sâu hơn về khảnăng của ReactJS trong việc xây dựng ứng dụng web tương tác, cách quản lýtrạng thái và dữ liệu, và cách tương tác với AP
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Phát biểu bài toán
RiceMP3 là dịch vụ nghe nhạc trực tuyến và tải nhạc trên nền tảng web, cung cấp hàng nghìn bài hát, album và danh sách phát từ các nghệ sĩ trong nước và quốc tế Người dùng có thể dễ dàng tìm kiếm, nghe và tải nhạc với nhiều thể loại đa dạng như nhạc trẻ, nhạc pop, rap, rock và nhiều thể loại khác Ngoài ra, RiceMP3 còn tích hợp các tính năng như tạo playlist cá nhân, chia sẻ nhạc và theo dõi các nghệ sĩ yêu thích để nâng cao trải nghiệm nghe nhạc trực tuyến của người dùng.
RiceMP3 hướng đến đối tượng khách hàng là người dùng yêu nhạc, đặc biệt là người dùng tại Việt Nam
RiceMP3 hướng đến tệp đối tượng khách hàng đa dạng, bao gồm:
- Người yêu nhạc trẻ tuổi:
RiceMP3 cung cấp một loạt các thể loại nhạc phổ biến như nhạc trẻ, nhạc pop, nhạc rap, và nhạc dance, đáp ứng nhu cầu nghe nhạc của người trẻ tuổi.
- Người yêu nhạc truyền thống:
Ngoài kho nhạc hiện đại, Zing MP3 còn cung cấp đa dạng thể loại nhạc truyền thống như nhạc cổ truyền, dân ca và nhạc đỏ, đáp ứng sở thích riêng của từng khách hàng về âm nhạc.
- Người yêu nhạc quốc tế:
RiceMP3 không chỉ giới hạn trong việc cung cấp nhạc Việt Nam mà còn đưa đến người dùng một loạt các bài hát và album của nghệ sĩ quốc tế, từ các thể loại nhạc phổ biến như Pop, Rock, R&B, EDM đến những thể loại âm nhạc đặc biệt
2.1.3 Các chức năng của hệ thống
Người dùng ( End User / Client )
Xác thực người dùng ( Authentication ):
- Người dùng có thể đăng kí tài khoản cá nhân trên hệ thống.
- Người dùng có thể đăng nhập bằng bên thứ 3 ( OAuth2 ) sử dụng Google, FaceBook, GitHub.
- Người dùng phải xác nhận email của mình.
- Người dùng có thể yêu cầu quên mật khẩu để lấy lại mật khẩu của mình.
- Người dùng có thể tìm kiếm, nghe, tải xuống các bài hát mình yêu thích.
- Người dùng có thể tìm kiếm các nghệ sĩ, thể loại, album mà mình yêu thích.
- Người dùng có thể xem Bảng Xếp Hạng RiceMP3 để cập nhật các bài hát đang là HOT trong ngày.
RiceMP3 cung cấp dịch vụ VIP giúp người dùng thưởng thức các bài hát VIP chất lượng cao Để trải nghiệm dịch vụ này, người dùng cần nâng cấp tài khoản của mình lên VIP bằng cách thanh toán qua ZALOPAY Hãy đăng ký và thanh toán dễ dàng để tận hưởng những ưu đãi đặc biệt từ RiceMP3.
- Người dùng có thể xem lời bài hát và hát karoke cùng bài nhạc yêu thích.
- Người dùng có thể “YÊU THÍCH” các bài hát, album, nghệ sĩ vào thư viện để dễ dàng theo dõi và tìm kiếm hơn.
- Người dùng có thể tạo playlist của riêng mình
- Thống kê nhanh về doanh thu, người dùng, bài hát, album.
- Quản lý tìm kiếm, phân loại bài hát
- Quản lý tìm kiếm, phân loại album.
- Quản lý tìm kiếm, phân loại nghệ sĩ.
Phân tích thiết kế hệ thống
Hình 2.1 Biểu đồ lớp của hệ thống RiceMP3
Biểu đồ lớp trên gồm 11 class khác nhau:
-User: Dùng để lưu trữ thông tin người dùng.
-OTP: Dùng để lưu trữ OTP trong một khoản thời gian nhất định khi user cần đến.
-Transaction: Dùng để lưu trữ thông tin giao dịch của user.
-Banner: Dùng để lưu trữ Banner chạy ở trang web.
- Library: Là thư viện của mỗi user dùng để lưu trữ các mục yêu thích.
-Country: Dữ liệu thông tin là tên của các nước trên thế giới.
-Chart: Dùng để lưu trữ bảng xếp hạng mỗi ngày.
-Song: Dùng để lưu trữ thông tin các bài hát.
-Artist: Dùng để lưu trữ thông tin các nghệ sĩ.
-Album: Dùng để lưu trữ thông tin các album.
-Hub: Dùng để lưu trữ thông tin các thể loại, chủ đề.
Các mối quan hệ trong biểu đồ lớp trên:
-Mỗi User chỉ có một mã OTP vào cùng một thời điểm.
-Mỗi User chỉ có duy nhất một thư viện tương ứng với “userId”. -Mỗi User có thể không hoặc có nhiều giao dịch.
-Mỗi một một mã OTP chỉ tương ứng với một User.
-Là một bảng độc lập không có mối quan hệ với các bảng khác.
-Mỗi một Library tương ứng với một User duy nhất.
Một thư viện có thể chứa nhiều hoặc không chứa bất kỳ nghệ sĩ nào, mang đến sự đa dạng và linh hoạt trong quản lý nội dung Ngoài ra, thư viện này cũng có thể chứa nhiều hoặc không có album nào, phù hợp với các mục đích khác nhau của người dùng Tương tự, một thư viện có thể lưu trữ nhiều hoặc không có bài hát nào, giúp tạo ra hệ thống tổ chức linh hoạt, tối ưu hóa trải nghiệm người dùng và nâng cao hiệu quả tìm kiếm nội dung âm nhạc.
-Mỗi một Chart có thể có nhiều hoặc ít nhất 3 Song.
-Mỗi một ngày chỉ được tối đa có một Chart.
-Mỗi một Country có thể có nhiều Song.
-Mã của mỗi Country là độc nhất.
-Mỗi một Song có thể tương ứng với nhiều Library.
-Mỗi một Song tương ứng với một Country.
-Mỗi một Song có thể tương ứng với một hoặc nhiều Artist.
-Mỗi một Song có thể tương ứng với một hoặc nhiều Album.
-Mỗi một Song có thể tương ứng với một hoặc nhiều Hub.
-Mỗi một Song có thể tương ứng với nhiều hoặc không có Chart nào. Artist:
Mỗi Artist có thể không có Song nào hoặc có nhiều Song khác nhau, thể hiện sự đa dạng trong sự nghiệp của họ Tương tự, Artist có thể không phát hành Album nào hoặc có nhiều Album để khán giả thưởng thức Họ cũng có thể liên kết với nhiều Library khác nhau, giúp mở rộng phạm vi tiếp cận và lưu trữ nội dung âm nhạc Ngoài ra, mỗi Artist có thể liên kết với một hoặc nhiều Hub, tạo điều kiện cho việc phân phối và quảng bá âm nhạc một cách hiệu quả.
-Mỗi một Album có thể tương ứng với nhiều Song.
-Mỗi một Album có thể tương ứng với một hoặc nhiều Aritst.
-Mỗi một Album có thể tương ứng với một hoặc nhiều Hub
-Mỗi một Album có thể tương ứng với nhiều hoặc không có Library nào.
Hai biểu đồ dưới đây biểu thị các chức năng mà User và Admin có thể sử dụng trong hệ thống
Hình 2.2 Biểu đồ usecase của user trong hệ thống RiceMP3
Hình 2.3 Biểu đồ usecase của admin trong hệ thống RiceMP3
Vì thời gian khoá luận có hạn, nên em xin phép tập trung vào một số chức năng chính như:
- Đăng nhập từ bên thứ ba ( Facebook, GitHub, Google )
- Nâng cấp tài khoản vip dưới hình thức thanh toán ZALOPAY
- Tìm kiếm bài hát, nghệ sĩ, album
2.2.2.1 Đăng nhập từ bên thứ 3 Đặc tả:
Mô tả: Chức năng cho phép người dùng đăng nhập vào hệ thống
RiceMP3 mà không cần phải đăng kí thông qua bên thứ ba ( Facebook, Google, Github ) sử dụng giao thức OAuth 2.0
Tiền điều kiện: Người dùng chưa đăng nhập vào hệ thống RiceMP3
Hậu điều kiện: Người dùng đăng nhập vào hệ thống RiceMP3 thành công Kịch bản:
1 Người dùng truy cập vào hệ thống RiceMP3 và yêu cầu đăng nhập
2 Hệ thống chuyển hướng người dùng đến các URL uỷ quyền của bên thứ 3 với các thông tin cần thiết như ClientID, Redirect URI, Scope.
3 Người dùng phải đăng nhập vào bên thứ ba trước khi thực hiện đăng nhập vào hệ thống
4 Bên thứ ba sẽ yêu cầu người dùng phê duyệt quyền truy cập từ hệ thống của RiceMP3
5 Người dùng chấp nhập tiếp tục bước 6, từ chối chuyển đến bước 15
6 Bên thứ ba sẽ chuyển hướng người dùng về hệ thống RiceMP3
7 Bên thứ ba sẽ đính kèm mã truy cập ( authorization code ) trong tham số truy vấn khi chuyển hướng người dùng
8 Hệ thống RiceMP3 sẽ nhận được mã truy cập để yêu cầu đăng nhập từ bên thứ 3
9 Hệ thống RiceMP3 sẽ gửi yêu cầu đến bên thứ 3 cùng với các thông tin ID, ClientSecret,Redirect URI, Authorization Code
10 Bên thứ ba sẽ xác nhận và phê duyệt yêu cầu đăng nhập từ hệ thống RiceMP3
11 Bên thứ ba sẽ phản hồi với mã truy cập (access token)
12 Hệ thống sẽ sử dụng mã truy cập (acces token) để lấy thông tin cần thiết như thông tin người dùng, email, avatar…
13 Hệ thống sẽ kiểm tra người thông tin lấy được bên thứ ba và đối chiếu với dữ liệu ở Database để đối soát
14 Người dùng đăng nhập thành công
Hình 2.4 Biểu đồ hoạt động của chức năng đăng nhập từ bên thứ ba
Giao diện demo chức năng:
Hình 2.5 Giao diện demo chức năng đăng nhập từ bên thứ ba 2.2.2.2 Nâng cấp tài khoản VIP với hình thức thanh toán ZALOPAY Đặc tả:
Mô tả: Chức năng cho phép người dùng nâng cấp tài khoản của mình thành
VIP trong hệ thống RiceMP3 để thưởng thức các bài hát được đánh dấu là VIP
- Người dùng đã đăng nhập vào hệ thống RiceMP3
- Tài khoản của người dùng chưa nâng cấp VIP
- Người dùng yêu cầu nâng cấp tài khoản
Hậu điều kiện: Tài khoản của người dùng được nâng cấp thành VIP
1 Người dùng yêu cầu nâng cấp tài khoản lên VIP
2 Hệ thống hiển thị trang thông tin cần thanh toán cho người dùng
3 Người dùng bấm thanh toán chuyển đến bước 4, nếu không chuyển đến bước 11
4 Hệ thống RiceMP3 sẽ gửi các thông tin cần thiết mà ZALOPAY yêu cầu đến Server của ZALOPAY
5 ZALOPAY Server sẽ kiểm tra các thông tin từ server của hệ thống RiceMP3 gửi đến
6 ZALOPAY Server sẽ chuyển hướng người dùng vào 1 trang thanh toán của ZALOPAY với mã QR được hiển thị trên màn hình người dùng
7 Người dùng mở ứng dụng ZALO ở điện thoại để tiến hành quét mã thanh toán
9 Thời gian thanh toán là có hạn nếu hết thời gian thanh toán mà người dùng chưa thanh toán chuyển đến bước 11 ngược lại tiếp tục bước 9
10 ZALOPAY sẽ kiểm tra trạng thái giao dịch và trả thông tin về phía server của hệ thống RiceMP3, đồng thời thông báo người dùng thanh toán thành công và chuyển hướng người dùng ngược lại về hệ thống RiceMP3
11 Hệ thống RiceMP3 hiển thị người dùng đã là VIP
Hình 2.6 Biểu đồ hoạt động của chức năng nâng cấp tài khoản VIP với hình thức thanh toán ZALOPAY
Giao diện demo chức năng
Hình 2.7 Giao diện demo chức năng nâng cấp tài khoản VIP với hình thức thanh toán ZALOPAY
Hình 2.8 Giao diện demo chức năng nâng cấp tài khoản VIP với hình thức thanh toán ZALOPAY 2.2.2.3 Tìm kiếm nghệ sĩ, bài hát, album, thể loại Đặc tả:
Mô tả: Đây là chức năng giúp người dùng tìm kiếm các bài hát, chủ để, thể loại yêu thích
Tiền điều kiện: Người dùng nhập dữ liệu vào khung tìm kiếm
Hậu điều kiện: Hệ thống hiển thị ra những tìm kiếm trùng khớp
1 Người dùng sẽ nhập từ khoá tìm kiếm vào thanh tìm kiếm
2 Hệ thống sẽ hiển thị những tìm kiếm liên quan ở mục danh sách đề xuất
3 Người dùng có thể chọn những kết quả ở mục đề xuất hoặc bấm enter
4 Hệ thống sẽ so sánh từ khoá tìm kiếm với kết quả truy xuất gần nhất theo thứ tự ưu tiên : Bài Hát, Album, Nghệ Sĩ, Thể Loại Nếu không có kết quả nào được trả về chuyển đến bước 8.
5 Khi đã xác định được kết quả gần nhất, hệ thống sẽ tiếp tục tìm kiếm các kết quả liên quan xoay quanh kết quả đầu tiên đã được tìm thấy
6 Hệ thống sẽ tổng hợp tất cả các kết quả tìm kiếm liên quan đến kết quả tìm kiếm ở bước số 4 và trả ra phía người dùng
7 Màn hình người dùng hiển thị ra thông tin kết quả tìm kiếm và có thể lọc tìm kiếm theo Bài hát, album, nghệ sĩ
Hình 2.9 Biểu đồ hoạt động của chức năng tìm kiếm nghệ sĩ, bài hát, album trong hệ thống RiceMP3
Hình ảnh demo chức năng:
Hình 2.10 Hình ảnh demo chức năng tìm kiếm nghệ sĩ, bài hát, album trong hệ thống RiceMP3
Hình 2.10.1 Hình ảnh demo chức năng tìm kiếm nghệ sĩ, bài hát, album trong hệ thống RiceMP3 2.2.2.4 Hệ thống lyrics, karoke Đặc tả:
Mô tả: Đây là chức năng giúp người dùng có thể xem lời bài hát hoặc hát theo bài hát yêu thích
Tiền điều kiện: Người dùng đang nghe một bài hát và bài hát đã được cập nhật lời ở trong hệ thống
Hậu điều kiện: Hệ thống hiển thị bài hát đang phát và lời bài hát chạy theo nhạc
1 Người dùng bật bài hát và chọn chức năng hình “microphone” ở dưới góc phải màn hình
2 Hệ thống sẽ kiểm tra thời gian bài nhạc đang phát hiện tại để đối chiếu với dữ liệu được lưu trên hệ thống để hiển thị lời bài hát khớp với thời gian mà người dùng đang thực hiện
3 Hệ thống sẽ hiện thị lời bài hát với hiệu ứng tô màu với số thời gian mà người dùng đang nghe a Nếu người dùng đang “nghe” lời bài hát sẽ được tiếp tục tô màu tương ứng sau đó chuyển đến bước 7 b Nếu người dùng đang “dừng” hệ thống chỉ hiển thị phần lời đang được tô màu tương ứng với số thời gian đã qua sau đó chuyển đến bước 3 c Nếu người dùng tua thời gian, hệ thống sẽ tự so sánh để tô màu lời bài hát tương ứng sau đó chuyển đến bước 3
4 Hệ thống sẽ tiếp tục tô màu lời bài hát đến khi kết thúc
Hình 2.10.2 Biểu đồ hoạt động của hệ thống karoke RiceMP3
Hình 2.10.3 Giao diện demo của hệ thống karoke RiceMP3
2.2.2.4 Chức năng nghe nhạc Đặc tả:
Mô tả: Đây là chức năng giúp người dùng có thể nghe các bài hát yêu thíchTiền điều kiện: Người dùng nhấp chọn nghe một bài hát
Hậu điều kiện: Hệ thống sẽ gửi yêu cầu lên hệ thống và phát bài nhạc tương ứng
1 Người dùng nhấp ICON hình tam giác ở bài hát
2 Hệ thống gửi thông tin bài hát lên server để phản hồi bài hát về client cho người dùng
3 Client sẽ phát bài hát mà người dùng đã chọn đồng thời hiện thanh điều khiển ở dưới màn hình
4 Hệ thống sẽ tự động cập nhật bài hát vào danh sách đang phát và người dùng có thể quản lý ( yêu cầu người dùng đã đăng nhập )
5 Hệ thống sẽ lưu bài hát hiện tại vào cookies của người dùng để người dùng thoát cũng không bị mất bài hát đang nghe
6 Hệ thống tự động tìm kiếm các playlist liên quan đến bài hát để tự động phát khi bài hát kết thúc
Hình 2.10.4 Biểu đồ hoạt động của chức năng nghe nhạc
Hình 2.10.5 Hình ảnh demo chức năng nghe nhạc
CÀI ĐẶT VÀ PHÁT TRIỂN HỆ THỐNG
Cài đặt môi trường chung
Dự án được phát triển dựa trên công nghệ MERN STACK, gồm MongoDB, ExpressJS, ReactJS và NodeJS, mang lại cấu trúc phát triển web fullstack hiệu quả Để đảm bảo quá trình cài đặt và phát triển diễn ra thuận tiện, người dùng cần cài đặt các phần mềm và công cụ cần thiết như Node.js, MongoDB cùng các trình quản lý gói phù hợp Việc thiết lập môi trường phát triển đúng chuẩn giúp nâng cao hiệu suất và dễ dàng mở rộng dự án trong tương lai.
Visual Studio Code là trình biên tập mã nguồn mở ngày càng phổ biến, hỗ trợ nhiều ngôn ngữ lập trình như JavaScript, Python, C++ và nhiều hơn nữa Với các tính năng mạnh mẽ như tự động hoàn thành mã, tích hợp Git, và khả năng mở rộng qua các tiện ích mở rộng, Visual Studio Code là công cụ lý tưởng cho phát triển fullstack hiện đại Nhờ giao diện thân thiện và khả năng tùy biến cao, nó giúp lập trình viên tối ưu hóa quy trình làm việc và nâng cao năng suất trong các dự án phần mềm.
ReactJS: Một thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI) tương tác Nó được sử dụng trong phát triển các ứng dụng web đơn trang (Single Page Applications - SPA).
NodeJS: Một nền tảng phát triển dựa trên JavaScript chạy trên máy chủ.
Nó cho phép bạn xây dựng các ứng dụng web và API với mã JavaScript.
MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) phổ biến, được sử dụng rộng rãi cho các ứng dụng web Với khả năng lưu trữ dữ liệu dạng JSON linh hoạt, MongoDB giúp doanh nghiệp mở rộng hệ thống dễ dàng và tối ưu hóa hiệu suất xử lý dữ liệu phức tạp Đây là lựa chọn hàng đầu cho các dự án đòi hỏi tính linh hoạt cao và khả năng mở rộng trong môi trường phát triển phần mềm ngày nay.
Git là hệ thống quản lý phiên bản phân tán phổ biến hàng đầu, giúp theo dõi mọi thay đổi trong mã nguồn một cách dễ dàng Nó cho phép quản lý các phiên bản của dự án một cách hiệu quả, đảm bảo sự kiểm soát chặt chẽ và linh hoạt trong quá trình phát triển phần mềm Với Git, nhóm phát triển có thể làm việc cộng tác trên cùng một dự án mà không gặp phải xung đột, nâng cao năng suất và đảm bảo tính nhất quán của mã nguồn.
MERN Stack là một sự kết hợp mạnh mẽ và phổ biến cho phát triển ứng dụng web hiện đại, giúp giảm đáng kể thời gian và công sức cần thiết để xây dựng các ứng dụng web fullstack Việc sử dụng MERN Stack giúp các nhà phát triển tích hợp các công nghệ như MongoDB, Express.js, React.js và Node.js một cách dễ dàng, tối ưu hóa quy trình phát triển và nâng cao hiệu suất ứng dụng Nhờ vào tính linh hoạt và khả năng mở rộng, MERN Stack là lựa chọn lý tưởng cho các dự án từ nhỏ đến lớn, giúp rút ngắn thời gian phát triển và nâng cao trải nghiệm người dùng.
1 Backend: Đầu tiên, bạn cần cài đặt Node.js trên máy tính của mình Truy cập trang web chính thức của Node.js (https://nodejs.org) và tải xuống phiên bản mới nhất dành cho hệ điều hành của bạn Tiếp theo, cài đặt Node.js bằng trình cài đặt đã tải xuống.
Tạo một thư mục mới cho dự án của bạn Bạn có thể đặt tên thư mục theo ý muốn của mình.
Mở terminal hoặc command prompt trên máy tính và di chuyển đến thư mục dự án mà bạn đã tạo ở bước trước.
Trong terminal hoặc command prompt, nhập lệnh sau để khởi tạo dự án Node.js:
Sau khi khởi tạo dự án thành công, bạn có thể cài đặt các module và thư viện cần thiết cho dự án của mình bằng lệnh sau:
Để xây dựng một dự án backend hoàn chỉnh, cần cài đặt các module thư viện hỗ trợ thiết yếu như Express.js và Nodemon Khi mới tạo dự án Node.js, việc thiết lập các module này là bước quan trọng để đảm bảo hệ thống hoạt động ổn định và dễ dàng phát triển mở rộng trong tương lai.
Thiết lập các biến môi trường để cấu hình API (file env):
Hình 3.3 Thiết lập các biến API
Giao diện khi cài đặt Nodejs và cấu hình thành công:
Hình 3.4 Khởi tạo nodeJS thành công
Tận dụng nodejs đã cài đặt ở bước trên, sử dụng Terminal của Visual Studio Code để tiến hành cài đặt ReactJS với TypeScript:
Hình 3.5 Cài đặt ReactJS sử dụng vite
Sau đó tiếp tục thực thi lệnh “npm i” ở màn hình terminal để tiến hành cài đặt các package cần thiết cho dự án
Hình 3.6 Cài đặt package cho dự án
Chúng ta cần cài đặt TailwindCSS vào dự án để sử dụng, lần lượt gõ 2 lệnh sau vào cửa sổ terminal
Hình 3.7 Cài đặt TailwindCSS sử dụng npm
Thiết lập các biến môi trường để kết nối với API (file env):
Hình 3.8 Thiết lập các biến API
Giao diện sau khi cài đặt và cấu hình ReactJS và TailwindCSS thành ông:
Hình 3.9 Cài đặt ReactJS và TailwindCSS thành công
Truy cập vào trang chủ của MongoDB để tạo một tài khoản MongoDBAtlas: https://www.mongodb.com/cloud/atlas Đăng nhập vào tài khoản của bạn hoặc tạo một tài khoản mới nếu bạn chưa có.
Sau khi đăng nhập vào giao diện quản lý MongoDB Atlas, bạn cần truy cập vào trang Projects và nhấn vào nút "Create a New Project" để bắt đầu quá trình tạo dự án mới Tiếp theo, hãy nhập tên cho dự án và nhấn nút "Next" để hoàn tất bước chuẩn bị, giúp bạn dễ dàng quản lý và triển khai các dịch vụ MongoDB của mình.
Chọn "Build a Cluster" để bắt đầu tạo cluster mới.
Trong trang "Create a New Cluster", bạn có thể tùy chỉnh các cài đặt cho cluster như chọn khu vực đặt, kích thước và loại instance phù hợp, cũng như thiết lập các cài đặt bảo mật để bảo vệ dữ liệu của bạn.
Khi bạn hoàn thành việc cài đặt, nhấp vào nút "Create Cluster" để bắt đầu quá trình tạo cluster Quá trình này có thể mất vài phút.
Sau khi cluster được tạo thành công, bạn sẽ thấy cluster của mình được liệt kê trong trang quản lý MongoDB Atlas.
Bạn có thể truy cập vào cluster của mình bằng cách sử dụng các thông tin kết nối như URL kết nối, tên người dùng, mật khẩu và tên cơ sở dữ liệu Quá trình đăng ký một cluster MongoDB trên MongoDB Atlas khá đơn giản, trong đó bạn cần có tài khoản MongoDB Atlas để bắt đầu MongoDB Atlas là dịch vụ điện toán đám mây của MongoDB, cung cấp khả năng quản lý và triển khai các cluster MongoDB dễ dàng trên nền tảng đám mây.
Cài đặt chức năng
3.2.1 Đăng nhập từ bên thứ ba
Mô tả: Là chức năng giúp người dùng đăng nhập vào vệ thống sử dụng bên thứ ba
Hình 3.10 Luồng xử lý chức năng đăng nhập từ bên thứ ba Đặc tả API:
Developer POST http://localhost:3002/api/v1/oauth2/{provider}
Production POST https://zing-mp3-api.onrender.com/api/v1/ oauth2/{provider}
Chú thích: provider là tên nhà cung cấp bên thứ ba ví dụ facebook,github, google
Dữ liệu truyền vào API :
Tham số Kiểu dữ liệu
Bắt buộc Ý Nghĩa Ví dụ clientID String 50 Có Là mã ứng dụng đã được đăng ký đăng nhập từ bên thứ ba
“208343a401 cd889a2270” clientSecret String 50 Có Là khoá bí mật bên thứ ba sẽ cung cấp khi đăng ký ứng dụng
“ad7a72d14a 789459ff4c8 0ff3b85cdd3 52591917” callbackURL String 50 Có Là đường dẫn để bên thứ ba chuyển hướng khi người dùng đăng nhập thành công
“/api/v1/ oauth2/ github/ callback” scope Array 50 Không Chứa những thông tin mà server cần lấy khi người dùng đăng nhập
Hình 3.11 Ví dụ về tham số truyền vào của yêu cầu đăng nhập từ bên thứ ba
Dữ liệu API trả về:
Hệ thống sẽ chuyển hướng người dùng đến trang đăng nhập của bên thứ ba
Tham số Kiểu dữ liệu Ý Nghĩa url String Đường dẫn chuyển hướng người dùng để đăng nhập vào hệ thống
Hình 3.12 Ví dụ về chuyển hướng người dùng đến trang đăng nhập
Tham số Kiểu dữ liệu
Bắt buộc Ý Nghĩa Ví dụ access_token String 50 Có Mã truy cập được cung cấp từ bên thứ ba
Hình 3.13 Tham số truyền vào hàm callback từ bên thứ ba
Dữ liệu Callback trả về:
Tham số Kiểu dữ liệu Ý Nghĩa user Object Dữ liệu người dùng từ bên thứ ba trả về
Hình 3.14 Ví dụ về tham số trả về của yêu cầu đăng nhập từ bên thứ ba Giao diện thực thi:
Hình 3.15 Giao diện thực thi đăng nhập từ bên thứ ba bước 1
Hình 3.16 Giao diện thực thi đăng nhập từ bên thứ ba bước 2
Hình 3.17 Giao diện thực thi đăng nhập từ bên thứ ba bước 3
Hình 3.18 Giao diện thực thi đăng nhập từ bên thứ ba thành công 3.2.2 Nâng cấp tài khoản VIP với hình thức thanh toán ZALOPAY
Mô tả: Là chức năng giúp người dùng nâng cấp tài khoản của mình thành
VIP sử dụng phương thức thanh toán ZALOPAY
Hình 3.15 Luồng xử lý chức năng nâng cấp tài khoản VIP Đặc tả API:
Developer POST http://localhost:3002/api/v1/payment/ zalo-pay Developer GET http://localhost:3002/api/v1/payment/check
Production POST https://zing-mp3-api.onrender.com/api/v1/ payment/ zalo-pay Production GET https://zing-mp3-api.onrender.com/api/v1/ payment /check
Dữ liệu truyền vào API:
Tham số Kiểu dữ liệu
Bắt buộc Ý Nghĩa Ví dụ app_id int Có Định danh cho ứng dụng đã được cấp khi đăng ký ứng dụng với ZaloPay.
Trong hệ thống thanh toán, trường "app_user" là chuỗi ký tự tối đa 50 ký tự chứa thông tin định danh của người dùng như ID, tên người dùng, số điện thoại hoặc email Trong trường hợp không thể xác định chính xác danh tính người dùng, có thể sử dụng thông tin mặc định như tên của ứng dụng để đảm bảo quá trình xử lý không bị gián đoạn Việc lưu trữ và quản lý dữ liệu người dùng rõ ràng giúp nâng cao bảo mật và tối ưu trải nghiệm thanh toán an toàn và thuận tiện.
String 40 Có Mã giao dịch của đơn hàng Mã giao dịch phải bắt đầu theo format yymmdd của ngày hiện tại và nên theo format yymmddMã đơn hàng thanh toán
TimeZone Vietnam (GMT+7) (Vì các giao dịch đối soát theo ngày giờ Việt Nam)
180208 _007242 app_time Long Có Thời gian tạo đơn hàng (unix timestamp in milisecond) Thời gian tính đến milisecond, lấy theo current time và không quá
15 phút so với th điểm thanh toán
14598236 10957 amount Long Có Giá trị của đơn hàng VND 50000 item JSON
2048 Có Item của đơn hàng, do ứng dụng tự định nghĩa
[{"itemid" :"knb","ite name":"ki m nguyen bao","ite mprice":1 98400,"ite mquantity
":1}] description String 256 Có Thông tin mô tả về dịch vụ đang được thanh toán dùng để
Lazada -Thanh hiển thị cho user trên app ZaloPay và trên tool quản lý Merchant toán đơn hàng
1024 Có Dữ liệu riêng của đơn hàng Dữ liệu này sẽ được callback lại cho AppServer khi thanh toán thành công (Nếu không có thì để chuỗi rỗng)
{"promoti oninfo":"" ,"merchan tinfo":"du lieu rieng cua ung dung"} bank_code String 20 Có Mã ngân hàng VTB mac String Có Thông tin chứng thực của đơn hàng, c8f49d52 3336f0a1 82586a70 b71c20da 96
Một số trường đặc biệt của embed_data :
Tham số Kiểu dữ liệu Định dạng Ý Nghĩa Ví dụ redirectu rl_id
String URL Redirect về url này sau khi thanh toán trên cổng ZaloPay (override redirect url lúc đăng ký app với ZaloPay)
"https://docs.zalopay. vn/result"} columni nfo
JSON String {"colu mn_na me":
Thêm thông tin hiển thị ở phần Quản lý giao dịch chi tiết trên Merchant site, nếu cột chưa tồn tại cần vào phần
"{\"branch_id\": \"HC M\",\"store_id\": \"C H123\",\"store_name\
": \"SaigonCentre\",\"mc_campa ign_id\": \"FREESHI
Cài đặt hiển thị dữ liệu để cấu hình Lưu ý: đối với thanh toán Offline cần thiết truyền các thông tin như branch_id, store_id, store_name,
JSON String {"camp aigncod e":"cod e"}
Dùng để triển khai chương trình khuyến mãi
Mã thông tin thanh toán (String) chỉ được truyền khi đối tác cần nhận thanh toán đối soát qua nhiều tài khoản khác nhau Hệ thống ZaloPay sẽ tạo ra một mã thanh toán riêng biệt cho từng tài khoản ngân hàng đối tác cung cấp và gửi lại cho đối tác để thiết lập dễ dàng Việc này giúp quản lý các giao dịch thanh toán một cách chính xác và thuận tiện hơn.
Tạo thông tin chứng thực mac:
Hình 3.16 Tạo thông tin chức thực
Hình 3.17 Ví dụ dữ liệu truyền vào API nâng cấp tài khoản
Dữ liệu API t rả về:
Tham số Kiểu dữ liệu Ý Nghĩa return_coded int 1: Thành công
2: Thất bại return_message String Mô tả mã trạng thái sub_return_code Int Mã trạng thái chi tiết sub_return_message String Mô tả chi tiết trạng thái order_url String Dùng để tạo QR code hoặc chuyển tiếp sang trang cổng ZALOPAY zp_trans_token String Thông tin token đơn hàng
Hình 3.18 Ví dụ dữ trả về từ ZALOPAY Giao diện thực thi:
Hình 3.19 Giao diện thực thi nâng cấp tài khoản bước 1
Hình 3.20 Giao diện thực thi nâng cấp tài khoản bước 2
Hình 3.21 Giao diện thực thi nâng cấp tài khoản bước 3
Hình 3.22 Giao diện thực thi nâng cấp tài khoản bước 4
Hình 3.23 Giao diện thực thi nâng cấp tài khoản bước 5
Hình 3.24 Giao diện thực thi nâng cấp tài khoản bước 6 3.2.3 Tìm kiếm bài hát, nghệ sĩ, album
Là chức năng giúp người dùng tìm kiếm các bài hát, nghệ sĩ, album, thể loại yêu thích
Hình 3.25 Luồng xử lý chức năng tìm kiếm Đặc tả API:
Developer GET http://localhost:3002/api/v1/search/search-suggest Developer GET http://localhost:3002/api/v1/search/search-full
Production GET https://zing-mp3-api.onrender.com/api/v1/search/ search-suggest
GET https://zing-mp3-api.onrender.com/api/v1/search/ search-full
Dữ liệu truyền vào API:
Tham số Kiểu dữ liệu
Bắt buộc Ý Nghĩa Ví dụ search String Có Là từ khoá mà người dùng muốn tìm kiếm
Hình 3.26 Ví dụ dữ liệu truyền vào API tìm kiếm
Dữ liệu truyền vào API:
Tham số Kiểu dữ liệu
Bắt buộc Ý Nghĩa Ví dụ search String Có Là từ khoá mà người dùng muốn tìm kiếm
“bức tường” tab String Không Là danh mục mà người dùng muốn tìm kiếm
Hình 3.27 Ví dụ dữ liệu truyền vào API tìm kiếm 2
Dữ liệu API trả về:
Tham số Kiểu dữ liệu Ý Nghĩa success boolean Kết quả trạng thái của API message String Lời nhắn trả về data Array Dữ liệu được tìm thấy
Là một mảng có kiểu dữ liệu linh hoạt, phù hợp với dữ liệu người dùng tìm kiếm, các kiểu dữ liệu trường dữ liệu này cho phép lưu trữ đa dạng thông tin một cách hiệu quả Việc sử dụng các kiểu dữ liệu phù hợp giúp tối ưu hóa hiệu suất truy vấn và quản lý dữ liệu trong hệ thống Các kiểu dữ liệu này hỗ trợ lưu trữ linh hoạt, phù hợp với nhiều loại dữ liệu khác nhau, từ chuỗi ký tự đến số liệu, giúp đáp ứng nhu cầu linh hoạt của người dùng.
Tham số Kiểu dữ liệu Ý Nghĩa data Array Là dữ liệu được tìm kiếm phù hợp với các tiêu chí mà người dùng cung cấp
Hình 3.28 Ví dụ dữ liệu trả về vào API tìm kiếmGiao diện thực thi:
Hình 3.29 Giao diện thực thi tìm kiếm bước 1
Hình 3.30 Giao diện thực thi tìm kiếm bước 2 3.2.4 Hệ thống karoke lyrics
Là chức năng giúp người dùng xem được lời bài hát
Hình 3.31 Luồng xử lý chức karaoke lyrics Đặc tả API:
Developer GET http://localhost:3002/api/v1/song/get-lyrics/
Production GET https://zing-mp3-api.onrender.com/api/v1/song/ get-lyrics/{songId}
Dữ liệu API trả về:
Tham số Kiểu dữ liệu Ý Nghĩa data Array Dữ liệu lời bài hát timeIn Array Thời gian xuất hiện timeOut Array Thời gian kết thúc
Hình 3.32 Ví dụ dữ liệu trả về vào API lyrics Giao diện thực thi:
Hình 3.33 Giao diện thực thi lyric bước 1
Hình 3.34 Giao diện thực thi lyric bước 2 3.2.5 Chức năng nghe nhạc
Là chức năng giúp người dùng thưởng thức các bài hát yêu thích
Hình 3.34 Luồng xử lý chức năng nghe nhạc Đặc tả API:
Developer GET http://localhost:3002/api/v1/file/get-file/
Production GET https://zing-mp3-api.onrender.com/api/v1/file/ get-file/{fileName}
Dữ liệu API trả về:
Tham số Kiểu dữ liệu Ý Nghĩa file audio Là file âm thanh của bài hát
Hình 3.33 Giao diện thực thi chức năng phát nhạc
Triển khai ứng dụng
Tạo dockerfile để đóng gói ứng dụng, thuận tiện cho việc triển khai và cài đặt hệ thống
Hình 3.34 Cấu hình dockerfile để đóng gói ứng dụng
Tiếp tục tạo khởi tạo docker compose để dễ dàng liên lạc giữa các service
Hình 3.35 Cấu hình dockercompose để quản lý các container
Chúng ta chỉ cần khởi chạy Docker Compose để triển khai ứng dụng một cách dễ dàng và nhanh chóng Điều này loại bỏ sự phức tạp của các bước cài đặt thủ công bằng câu lệnh, giúp tiết kiệm thời gian và giảm thiểu lỗi trong quá trình thiết lập môi trường Việc sử dụng Docker Compose mang lại sự tiện lợi, hiệu quả cao cho quá trình phát triển và triển khai ứng dụng.
Lệnh `docker-compose -f docker-compose.yml up -d build` giúp xây dựng và khởi động ứng dụng theo cấu hình trong file docker-compose.yml Sau khi chạy, ứng dụng của bạn sẽ được lưu thành một Docker image và lưu trữ trên Docker Hub, cho phép dễ dàng chia sẻ và quản lý Để triển khai ứng dụng trên server đã cài Docker, bạn chỉ cần tải xuống Docker image từ Docker Hub về và bắt đầu chạy, giúp tiết kiệm thời gian và công sức cấu hình.
Triển khai ứng dụng frontend:
1 Truy cập vào vercel.com và đăng nhập bằng tài khoản github
2 Chọn add new project theo hiển thị ở trên màn hình
3 Sau đó import repository từ github vào, cấu hình phù hợp và bấm
4 Chờ hệ thống build và nhận kết quả
Hình 3.36 Triển khai ứng dụng frontend thành công
Triển khai ứng dụng backend:
1 Truy cập vào render.com và đăng nhập bằng tài khoản github
2 Chọn add new project theo hiển thị ở trên màn hình
3 Sau đó import repository từ github vào, cấu hình phù hợp và bấm
4 Hệ thống sẽ tự tìm thấy dockerfile và triển khai ứng dụng
5 Chờ hệ thống build và nhận kết quả
Hình 3.37 Triển khai ứng dụng frontend thành công
