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

ĐẠ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: PGS.TS Nguyễn Thị Hoàng Lan Mã lớp: 733514 Sinh viên thực hiện: Phạm Thị Vân Anh – 20198204 Lớp: IT-LTU-K64 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 2 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: 3 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 4 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: 5 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 6 CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ 3.1 Biểu đồ use case tổng quan 7 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 Mô tả Người dùng Điều kiện trước Điều kiện sau Người dùng chỉnh sửa thông tin một collection trong list collection Luồng sự kiện chính Người dùng đăng nhập thành công Hệ thống cập nhật thông tin người dùng vừa chỉnh sửa 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 5 Hệ thống cập nhật lại thông thông tin muốn thay đổi và clicktin người dùng vừa chỉnh sửa button “ save “ Luồng sự kiện 4.1 Người dùng không click 4.2 Hệ thống vẫn lưu trữ thông phụ “save” mà thoát khỏi popup 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 Mô tả Người dùng Điều kiện trước Điều kiện sau Người dùng follow một user khác Luồng sự kiện chính Người dùng đăng nhập thành công Hệ thống cập nhật danh sách following của người dùng 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 8 Luồng sự kiện của người dùng và danh sách phụ follower của user 3.2 Chọn button “unfollow” 3.1 Nếu người dùng đang follow tài khoản này rồi, hiển thị 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 Mô tả Người dùng Điều kiện trước Điều kiện sau Người dùng save collection từ list collection của user khác Luồng sự kiện chính Người dùng đăng nhập thành công Hệ thống cập nhật list collection của người dùng Người dùng Hệ thống 1.Tại giao diện list collection của user khác, click chọn 2 Cập nhật danh sách collection của người dùng collection muốn save 3 Tại giao diện list collection 4 Hiển thị detail collection của của mình, click chọn collection author vừa lưu về 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 10 Các hành động edit trên động edit với bản copy collection copy sẽ không ảnh collection hưởng tới collection gốc Luồng sự kiện 7.1 Không chọn duplicate 7.2 Người dùng chỉ xem và phụ share được collection 3.2.4 Use case: Download worksheets Tên usecase Download worksheets 9 Tác nhân Người dùng Mô tả Điều kiện trước Người dùng download worksheet về máy Điều kiện sau Luồng sự kiện Người dùng đăng nhập thành công chính Hệ thống cập số lượt download, danh sách worksheets download Người dùng Hệ thống 1.Tại bất kỳ giao diện nào có 2 Tính toán các thông tin liên worksheet, người dùng chọn quan: số worksheet download, worksheets và chọn button số lượt download hiện có và ‘download’ 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 4.1 Người dùng không đủ lượt phụ 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 Mô tả Người dùng Điều kiện trước Điều kiện sau Người dùng mời bạn bè đăng ký tài khoản Luồng sự kiện Người dùng đăng nhập thành công chính 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 User khác Người dùng Hệ thống 1.Tại giao diện làm tăng 2 Hiển thị giao diện lượt download, chọn refer chức năng ‘refer friend’ 3 Nhập email muốn 4 Kiểm tra thông tin mời hoặc copy link 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 7 Cập nhật trạng thái mời đã accept và update limit download 10 Luồng sự kiện 4.1 Email có fomat phụ không đúng hoặc đã có tài khoản, thông báo 6.1 Đã chấp nhận lời nhập email khác mời khác hoặc không 6.2 Cập nhật trạng thái chấp nhận lời mời trong list refer và hiện tại không update limit download 11 3.3 Biểu đồ trình tự 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 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 17 Trang quản lý collections Trang detail worksheet 18 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 19