ĐỀ TÀI PHÁT TRIỂN ỨNG DỤNG WEB HỖ TRỢ QUẢN LÝ VÀ CHIA SẺ WORKSHEETS

 Quản lý trạng thái follow: Xây dựng chức năng cho phép follow, xem và chia sẻ profile, worksheets, collection của người dùng khác trong trường hợp author để status là public Có thể sav

ĐẠI HỌC BÁCH KHOA HÀ NỘI Trường công nghệ thông tin và truyền thông

oOo

-MÔN: PROJECT 3

ĐỀ TÀI: PHÁT TRIỂN ỨNG DỤNG WEB HỖ TRỢ QUẢN LÝ VÀ CHIA SẺ WORKSHEETS

Giảng viên hướng dẫn:

Mã lớp:

PGS.TS Nguyễn Thị Hoàng Lan 733514

Sinh viên thực hiện: Phạm Thị Vân Anh – 20198204

Hà Nội, 2023

Mục lục

CHƯƠNG 1 KHẢO SÁT BÀI TOÁN 3

1.1 Mục đích bài toán 3

1.2 Nhiệm vụ cụ thể của đồ án 3

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ SỬ DỤNG 4

2.1 ReactJs 4

2.2 NodeJs 5

2.3 MongoDB 5

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ 7

3.1 Biểu đồ use case tổng quan 7

3.2 Đặc tả use case 8

3.2.1 Use case: Thay đổi thông tin collection 8

3.2.2 Use case: Follow/unfollow một người dùng khác 8

3.2.3 Use case: Save collection từ danh sách collections của người khác 9

3.2.4 Use case: Download worksheets 10

3.2.5 Use case: Mời bạn bè đăng ký tài khoản 10

3.3 Biểu đồ trình tự 12

3.3.1 Update collection 12

3.3.2 Follow/ unfolow 13

3.3.3 Download worksheets 14

3.3.4 Mời bạn bè 15

3.4 Thiết kế cơ sở dữ liệu 16

CHƯƠNG 4 TRIỂN KHAI 17

4.1 Môi trường lập trình 17

4.2 Giao diện 17

Kết luận và hướng phát triển 19

Tài liệu tham khảo 19

CHƯƠNG 1 KHẢO SÁT BÀI TOÁN

1.1 Mục đích bài toán

Mục tiêu của dự án là xây dựng một trang web giúp người dùng chia sẻ, và quản lý worksheets Trang web cung cấp các chức năng như xem, tìm kiếm và cho phép người dùng thực hiện các tác vụ như download, edit, add to collection Ngoài ra, trang web cũng hỗ trợ quản lý thông tin cá nhân và trạng thái mời bạn bè để đạt được lượt download không giới hạn

1.2 Nhiệm vụ cụ thể của đồ án

 Xây dựng giao diện người dùng:

Thiết kế giao diện thân thiện và dễ sử dụng cho trang detail worksheet và trang quản lý Cung cấp khả năng xem, tìm kiếm, và lọc worksheets dựa trên các tiêu chí như độ phổ biến, thời gian cập nhật, ký tự A-Z

Tạo trang detail worksheet hiển thị các thông tin chi tiết như author, description, tags, rating và các tác vụ như download, edit, add to collection

 Quản lý worksheets:

Cho phép người dùng quản lý worksheets đã tạo bao gồm các chức năng edit, delete, download và duplicate

Cho phép người dùng quản lý worksheets đã like và đã download bao gồm các chức năng edit/update, download

 Quản lý collection:

Cho phép người dùng quản lý các collection của mình, bao gồm edit name, edit description, delete, dupliace

Kết nối collection với worksheets để người dùng có thể dễ dàng tổ chức worksheets của mình bằng cách add hoặc delete worksheets khỏi collection

 Quản lý trạng thái follow:

Xây dựng chức năng cho phép follow, xem và chia sẻ profile, worksheets, collection của người dùng khác( trong trường hợp author để status là public)

Có thể save collection của người dùng khác về nhưng chỉ có trạng thái view Nếu muốn edit phải duplicate thành một bản copy

 Quản lý profile:

Tạo trang quản lý profile cho người dùng, cho phép thay đổi thông tin cá nhân như tên, avatar, link dẫn tới các social media của người dùng

 Quản Lý Trạng Thái Mời Bạn Bè:

Xây dựng chức năng quản lý trạng thái mời bạn bè để nhận thêm lượt download

Ghi nhận lượt mời từ người dùng và cộng thêm lượt tải về theo các điều kiện cụ thể như mời được một số người nhất định, hoặc chia sẻ trên Pinterest

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ SỬ DỤNG 2.1 ReactJs

ReactJS là một thư viện JavaScript phát triển bởi Facebook, được sử dụng để xây dựng giao diện người dùng (UI) động cho các ứng dụng web Dưới đây là một số điểm quan trọng về ReactJS:

 Component-Based Architecture:

ReactJS sử dụng mô hình kiến trúc dựa trên components Mỗi thành phần (component) là một đơn vị độc lập, có thể tái sử dụng và quản lý trạng thái của nó Components giúp tách biệt logic và hiển thị, làm cho mã nguồn dễ đọc, hiểu và bảo trì

 Virtual DOM:

React sử dụng Virtual DOM để tối ưu hóa hiệu suất khi cập nhật giao diện người dùng Thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần thay đổi (diffing) trên Virtual DOM trước, sau đó áp dụng những thay đổi này lên DOM thực tế một cách hiệu quả

 JSX (JavaScript XML):

React sử dụng JSX, một cú pháp mở rộng của JavaScript, để mô tả cấu trúc của giao diện người dùng trong mã JavaScript JSX làm cho việc viết và đọc mã nguồn trở nên dễ dàng hơn, đồng thời nó cũng giúp React hiểu cú pháp này để tạo ra các elements trong Virtual DOM

 Unidirectional Data Flow:

React thực hiện luồng dữ liệu một chiều, đi từ component cha đến component con Điều này giúp quản lý trạng thái ứng dụng một cách dễ dàng và dự đoán được

 React Hooks:

Hooks là một tính năng mới giới thiệu từ React 16.8, cho phép sử dụng state và lifecycle trong functional components Hooks giúp tái sử dụng logic, làm cho functional components có khả năng thực hiện nhiều chức năng như class components

2.2 NodeJs

Node.js là một môi trường thực thi mã JavaScript phía máy chủ, được xây dựng dựa trên Chrome's V8 JavaScript engine Dưới đây là một số điểm quan trọng về Node.js:

 JavaScript on the Server-Side:

Node.js cho phép viết mã JavaScript để thực thi trên máy chủ, điều này giúp tạo ra một cấu trúc đồng nhất giữa phía máy khách (client) và phía máy chủ (server)

 Non-blocking I/O và Asynchronous Programming:

Node.js sử dụng mô hình xử lý không đồng bộ (non-blocking) và sự kiện (event-driven)

để xử lý nhiều yêu cầu mà không làm chậm hiệu suất Điều này làm cho Node.js phù hợp cho các ứng dụng có nhiều I/O operations như xử lý file, truy vấn cơ sở dữ liệu

 Nền Tảng Module Hóa:

Node.js có hệ sinh thái module mạnh mẽ, giúp tổ chức mã nguồn thành các modules nhỏ tái sử dụng được Nó cũng sử dụng npm (Node Package Manager) để quản lý dependencies và chia sẻ code giữa các dự án

 Phù Hợp cho Ứng Dụng Thời Gian Thực:

Khả năng xử lý đồng thời và xử lý sự kiện làm cho Node.js phù hợp cho các ứng dụng thời gian thực như chat applications, streaming services, và các ứng dụng có số lượng lớn kết nối đồng thời

 Tích Hợp Tốt với JavaScript và JSON:

Sự tích hợp tốt với JavaScript giúp việc phát triển ứng dụng trở nên mạnh mẽ và đơn giản Node.js cũng thường sử dụng JSON làm định dạng dữ liệu, điều này thích hợp với ứng dụng web hiện đại

 Tích Hợp Với Cơ Sở Dữ Liệu:

Node.js có các thư viện và driver để kết nối với nhiều loại cơ sở dữ liệu khác nhau, từ các

cơ sở dữ liệu SQL đến NoSQL như MongoDB

2.3 MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL, được thiết kế để lưu trữ dữ liệu dưới dạng BSON (Binary JSON) Dưới đây là một số điểm quan trọng về MongoDB:

 NoSQL Database:

MongoDB thuộc loại cơ sở dữ liệu NoSQL, không yêu cầu một cấu trúc cố định cho dữ liệu Điều này giúp MongoDB linh hoạt và có thể thích ứng với các dạng dữ liệu đa dạng

 BSON Format:

Dữ liệu trong MongoDB được lưu trữ dưới dạng BSON (Binary JSON), một định dạng nhị phân hiệu quả và dễ đọc BSON hỗ trợ nhiều kiểu dữ liệu, bao gồm các kiểu dữ liệu đặc biệt như ObjectId, Date

 Schema-less:

MongoDB không yêu cầu một schema cố định cho cơ sở dữ liệu Mỗi document có thể có các trường khác nhau, điều này giúp linh hoạt khi phát triển ứng dụng và thay đổi cấu trúc dữ liệu

 Tích Hợp Tốt với JavaScript và Node.js:

MongoDB sử dụng JavaScript cho các truy vấn và các thao tác trong cơ sở dữ liệu Điều này làm cho tích hợp với Node.js trở nên dễ dàng

 Hỗ Trợ Query Rich:

MongoDB cung cấp một ngôn ngữ truy vấn linh hoạt và mạnh mẽ, cho phép tìm kiếm dữ liệu theo nhiều điều kiện khác nhau

 Tích Hợp Tốt với Node.js:

Có nhiều thư viện và driver chính thức hỗ trợ việc kết nối MongoDB với ứng dụng Node.js, giúp thực hiện các thao tác cơ sở dữ liệu một cách thuận tiện

 Mở Rộng Dễ Dàng:

MongoDB hỗ trợ khả năng mở rộng dữ liệu và tăng cường hiệu suất bằng cách thêm các nodes mới vào cluster

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ

3.1 Biểu đồ use case tổng quan

3.2 Đặc tả use case

3.2.1 Use case: Thay đổi thông tin collection

Tên usecase Thay đổi thông tin collection: name, description, sharging status Tác nhân Người dùng

Mô tả Người dùng chỉnh sửa thông tin một collection trong list collection Điều kiện trước Người dùng đăng nhập thành công

Điều kiện sau Hệ thống cập nhật thông tin người dùng vừa chỉnh sửa

Luồng sự kiện

chính

Người dùng Hệ thống 1.Tại giao diện danh sách

collection, bấm vào dấu ba chấm của collection muốn edit( hoặc tại giao diện detail collection bấm chọn

button”edit”) 2.Chọn “Edit” 3 Hệ thống hiển thị popup edit

4 Người dùng chỉnh sửa các thông tin muốn thay đổi và click button “ save “

5 Hệ thống cập nhật lại thông tin người dùng vừa chỉnh sửa

Luồng sự kiện

phụ

4.1 Người dùng không click

“save” mà thoát khỏi popup

4.2 Hệ thống vẫn lưu trữ thông tin cũ của collection

3.2.2 Use case: Follow/unfollow một người dùng khác

Tên usecase Follow/unfollow một người dùng khác

Tác nhân Người dùng

Mô tả Người dùng follow một user khác

Điều kiện trước Người dùng đăng nhập thành công

Điều kiện sau Hệ thống cập nhật danh sách following của người dùng

Luồng sự kiện

chính

Người dùng Hệ thống 1.Tại giao diện detail

worksheet, click tên tác giả

2 Hệ thống điều hướng người dùng tới trang detail của user vừa click

3 Hệ thống kiểm tra xem người

có đang follow user này không? Nếu không thì hiển thị button

“follow”

4.Chọn button “follow” 5 Cập nhật danh sách following

của người dùng và danh sách follower của user

Luồng sự kiện

phụ

3.1 Nếu người dùng đang follow tài khoản này rồi, hiển thị button “unfollow”

3.2 Chọn button “unfollow” 3.3 Cập nhật danh sách

following của người dùng và danh sách follower của user

3.2.3 Use case: Save collection từ danh sách collections của người khác

Tên usecase Save collection từ list collection của user khác

Tác nhân Người dùng

Mô tả Người dùng save collection từ list collection của user khác

Điều kiện trước Người dùng đăng nhập thành công

Điều kiện sau Hệ thống cập nhật list collection của người dùng

Luồng sự kiện

chính

Người dùng Hệ thống 1.Tại giao diện list collection

của user khác, click chọn collection muốn save

2 Cập nhật danh sách collection của người dùng

3 Tại giao diện list collection của mình, click chọn collection vừa lưu về

4 Hiển thị detail collection của author

5.Chọn button “edit” 6 Mở popup “duplicate to edit”

7 Chọn ‘duplicate’ 8 Tạo một bản copy của

collection vừa duplicate

9 Thực hiện được các hành động edit với bản copy collection

10 Các hành động edit trên collection copy sẽ không ảnh hưởng tới collection gốc

Luồng sự kiện

phụ

7.1 Không chọn duplicate 7.2 Người dùng chỉ xem và

share được collection

3.2.4 Use case: Download worksheets

Tên usecase Download worksheets

Tác nhân Người dùng

Mô tả Người dùng download worksheet về máy

Điều kiện trước Người dùng đăng nhập thành công

Điều kiện sau Hệ thống cập số lượt download, danh sách worksheets download Luồng sự kiện

chính

Người dùng Hệ thống 1.Tại bất kỳ giao diện nào có

worksheet, người dùng chọn worksheets và chọn button

‘download’

2 Tính toán các thông tin liên quan: số worksheet download,

số lượt download hiện có và hiển thị popup download

3 Người dùng chọn “save to device”

4 Lấy thông tin worksheets và lưu về máy

5 Cập nhật lượt download, danh sách worksheets download

Luồng sự kiện

phụ

4.1 Người dùng không đủ lượt download Điều hướng tới popup kiếm thêm lượt download

3.2.5 Use case: Mời bạn bè đăng ký tài khoản

Tên usecase Mời bạn bè đăng ký tài khoản

Tác nhân Người dùng

Mô tả Người dùng mời bạn bè đăng ký tài khoản

Điều kiện trước Người dùng đăng nhập thành công

Điều kiện sau Hệ thống cập nhật thông tin người được mời, cập nhật trạng thái

limit download của người dùng Luồng sự kiện

chính

User khác Người dùng Hệ thống

1.Tại giao diện làm tăng lượt download, chọn chức năng ‘refer friend’

2 Hiển thị giao diện refer

3 Nhập email muốn mời hoặc copy link

4 Kiểm tra thông tin email và thực hiện gửi email mời

5 Cập nhật trạng thái email vừa mời vào danh sách refer

6 Chấp nhận lời mời

7 Cập nhật trạng thái

đã accept và update limit download

Luồng sự kiện

phụ

4.1 Email có fomat không đúng hoặc đã có tài khoản, thông báo nhập email khác 6.1 Đã chấp nhận lời

mời khác hoặc không chấp nhận lời mời hiện tại

6.2 Cập nhật trạng thái trong list refer và không update limit download

3.3 Biểu đồ trình tự

3.3.1 Update collection

3.3.2 Follow/ unfolow

3.3.3 Download worksheets

3.3.4 Mời bạn bè

3.4 Thiết kế cơ sở dữ liệu

CHƯƠNG 4 TRIỂN KHAI

4.1 Môi trường lập trình

 Frontend

Sử dụng ReactJs; thư viện MUI chạy trên trình duyệt của người dùng

Tương tác với backend thông qua API

Viết bằng ngôn ngữ lập trình javaScript, typeScript trên Visual Studio Code

 Backend

Sử dụng Node.js làm môi trường thực thi mã máy chủ

Express.js để xây dựng API và xử lý các yêu cầu từ phía client

 Database

Sử dụng MongoDB

 Quản lý và lưu trữ

Sử dụng github, google storage

4.2 Giao diện

Trang quản lý worksheets

Trang quản lý collections

Trang detail worksheet

Kết luận và hướng phát triển

Trong quá trình phát triển dự án xây dựng trang web quản lý worksheets, em đã hướng đến một mục tiêu rõ ràng: tạo ra một nền tảng linh hoạt, thân thiện và đầy đủ chức năng

để người dùng có thể chia sẻ, tạo và quản lý worksheets một cách hiệu quả Dự án không chỉ đơn thuần là một công cụ, mà còn là một không gian cộng đồng nơi mọi người có thể tương tác, chia sẻ kiến thức và hỗ trợ nhau trong quá trình học tập

Em đã đặt nhiều tâm huyết trong việc xây dựng giao diện người dùng thân thiện, đồng thời cung cấp những chức năng mạnh mẽ và linh hoạt để đáp ứng đa dạng nhu cầu của người dùng Khả năng tìm kiếm, xem chi tiết, và thực hiện các tác vụ như download và chỉnh sửa được tích hợp một cách mượt mà để người dùng có trải nghiệm tốt nhất

Mục tiêu của em không chỉ dừng lại ở việc cung cấp một công cụ hiệu quả, mà còn mở rộng đến việc xây dựng một cộng đồng năng động Hệ thống mời bạn bè và chia sẻ trên các mạng xã hội không chỉ giúp tăng cường sự tương tác, mà còn thúc đẩy sự phát triển

và lan rộng của nền tảng

Tài liệu tham khảo

1 https://mui.com/material-ui/getting-started/

2 https://redux.js.org/tutorials/essentials/part-1-overview-concepts

3 https://nextjs.org/docs