Đang tải... (xem toàn văn)
Báo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hustBáo cáo BTL môn công nghệ web hust
ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRÙN THƠNG BÁO CÁO Cơng nghệ Web dịch vụ trực tuyến Web blog Giảng viên hướng dẫn : Phạm Huy Hoàng Lớp : Khoa học máy tính 06 – K65 Sinh viên thực : Nguyễn Hoàng Bảo MSSV : 20204515 Hà Nội, 7/2023 Muc lục A.Mô tả toán B Phân tích yêu cầu chức cho toán (case study) I Yêu cầu chức II Yêu cầu phi chức C Các công nghệ sử dụng I.Vue 3(Front-end) II Vite (Front-end) III PrimeVue (Front-end) IV, NestJs(Back-end) V, PostgreSQL (Database) VI, Oauth2 google (Login Oauth2) VII, Storage Firebase (Storage) D Cơ sở liệu I Bảng User II Bảng Post III Bảng Comment E Phân tích cho nghiệp vụ tốn I, Biểu đồ Use case: 1.Thông tin đăng nhập thông thường: Thông tin đăng nhập gmail: Thông tin đăng xuất Quản lý viết Quản lý bình luận F Biểu đồ usecase chi tiết 10 I UseCase Đăng nhập/ Đăng ký 10 II Usecase đăng 11 1, Đặc tả usecase “Đăng bài” 11 2, Đặc tả usecase “Thay đổi đăng” 13 II.Usecase Xem đăng /Thả cảm xúc 15 1, Đặc tả usecase “xem danh sách đăng” 15 2, Đặc tả usecase “Thả tym đăng” 16 III Usecase Bình luận 18 1, Đặc tả usecase “Thêm bình luân/bình luận” 18 2, Đặc tả usecase “xóa bình luận” 20 G Phân rã chức hệ thống 21 I.Use case phân rã “Tạo đăng.” 21 II Usecase phân rã “Xem đăng” 22 III UseCase phân rã “Chỉnh sửa viết” 22 IV Usecase phân rã “Thêm/hủy cảm xúc tym” 23 IV UseCase phân rã “Thêm bình luận” 23 V.UseCase phân rã “Xóa bình luận” 24 H Kho lưu trữ mà nguồn dự án 24 I, Kết luận 24 I Thành thu 24 II Khó khăn hạn chế 24 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog A.Mơ tả tốn Xây dựng trang web blog với chức sau: • • • • • Sử dụng tài khoản gmail để login User sau login viết blog Nội dung blog yêu cầu tối thiểu phải chấp nhận text, hình ảnh, âm Text format (đậm, nghiêng, font to/nhỏ, v.v ) Các user khác vào blog bình luận xem bình luận người khác User sở hữu blog nhìn tất bình luận xóa bình luận Yêu cầu giao diện thiết kế đẹp mắt, chức chạy khơng lỗi B Phân tích yêu cầu chức cho toán (case study) I Yêu cầu chức • • • • • Đăng nhập đăng ký: Cho phép người dùng đăng nhập vào trang web tài khoản đăng ký tạo tài khoản sử dụng tài khoản gmail để login Viết blog: Cung cấp giao diện cho phép người dùng tạo đăng blog Người dùng nhập nội dung, thêm ảnh,video,audio,… định dạng văn Hiển thị viết: Hiển thị danh sách viết theo danh mục Cung cấp trang đọc viết chi tiết người dùng nhấp vào viết Quản lý viết: Cho phép người dùng chỉnh sửa, xóa lưu trữ viết Bình luận: Cho phép người dùng bình luận viết Hiển thị bình luận phản hồi cho người dùng khác Người sở hữu viết nhìn tất bình luận xóa bình luận II u cầu phi chức • • • Giao diện người dùng thân thiện: Thiết kế giao diện đơn giản, dễ sử dụng hấp dẫn cho người dùng Tính bảo mật: Bảo vệ thông tin người dùng liệu viết cách sử dụng mã hóa biện pháp bảo mật khác Tốc độ tải trang: Đảm bảo thời gian tải trang nhanh để cung cấp trải nghiệm tốt cho người dùng Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog C Các công nghệ sử dụng I.Vue 3(Front-end) Vue framework JavaScript mã nguồn mở thiết kế để xây dựng giao diện người dùng (UI) linh hoạt hiệu suất cao Phiên đem lại nhiều cải tiến so với phiên trước đó, với tối ưu hóa hiệu suất, kích thước gọn nhẹ khả xử lý tốt Vue sử dụng Composition API, chế "Reactivity" mới, cho phép phân tách logic thành module độc lập tái sử dụng dễ dàng Điều giúp tăng tính linh hoạt hiệu việc phát triển ứng dụng Vue cải tiến việc hỗ trợ TypeScript cung cấp kiểu liệu mạnh mẽ, giúp phát triển ứng dụng với tính tồn vẹn liệu cao Với tính tải lại phần tử cần thiết, Vue giúp xây dựng ứng dụng đơn trang mượt mà nhanh chóng II Vite (Front-end) Vite cơng cụ phát triển web nhanh chóng thiết kế cho việc xây dựng ứng dụng hiệu suất cao Nó giúp tối ưu q trình phát triển xây dựng ứng dụng web thông qua việc sử dụng module cách hiệu khả tải lại nhanh chóng Vite tạo quy trình phát triển mượt mà trải nghiệm phát triển tốt nhờ vào khả hot module replacement (HMR) cho phép xem thay đổi trình phát triển Nó cung cấp mơi trường phát triển đơn giản dễ sử dụng, giúp bạn tập trung vào việc viết mã thay cấu hình Vite tích hợp tốt với Vue 3, tận dụng lợi ích Composition API cung cấp hiệu suất tải trang tối ưu Nó hỗ trợ TypeScript tạo bundle nhỏ gọn giúp giảm thời gian tải trang tăng trải nghiệm người dùng Với Vite 4, việc xây dựng ứng dụng web hiệu suất cao trở nên dễ dàng nhanh chóng III PrimeVue (Front-end) Là utility-first CSS framework, giống Bootstrap, có class built-in Tailwind CSS có nhiều class bao gồm thuộc tính CSS khác quan trọng,có thể dễ dàng mở rộng tạo class class PrimeVue thư viện UI mã nguồn mở dựa Vue.js, mang đến 80+ thành phần giao diện người dùng (UI components) đẹp mắt mạnh mẽ Với PrimeVue, bạn dễ dàng xây dựng ứng dụng web chuyên nghiệp tùy chỉnh theo nhu cầu bạn Thư viện tích hợp tốt với Vue.js sử dụng cú pháp gần gũi, giúp việc tích hợp sử dụng thành phần trở nên dễ dàng PrimeVue cung cấp tính xử lý kiện, ràng buộc liệu, kiểm soát trạng thái tương tác động Nó hỗ trợ tùy chỉnh để phù hợp với yêu cầu ứng dụng bạn Thư viện có cộng đồng lớn động, cung cấp tài liệu phong phú, hướng dẫn ví dụ minh họa Với PrimeVue, bạn xây dựng ứng dụng web đẹp, tương tác mạnh mẽ cách dễ dàng Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog IV, NestJs(Back-end) NestJS framework Node.js mã nguồn mở, sử dụng TypeScript kiến trúc tương tự Angular để phát triển ứng dụng back-end Với NestJS, bạn xây dựng ứng dụng backend mạnh mẽ dễ bảo trì Framework hỗ trợ kiến trúc phân lớp, dependency injection, sử dụng Express Fastify làm khung sườn NestJS tận dụng tính TypeScript cho kiểm tra lỗi thời điểm biên dịch cung cấp cộng đồng phát triển lớn Với NestJS, bạn phát triển ứng dụng back-end hiệu linh hoạt V, PostgreSQL (Database) PostgreSQL hệ thống quản trị sở liệu quan hệ đối tượng (object-relational database management system) miễn phí nguồn mở (RDBMS) tiên tiến khả mở rộng cao tuân thủ tiêu chuẩn kỹ thuật Nó thiết kế để xử lý loạt khối lượng công việc lớn, từ máy tính cá nhân đến kho liệu dịch vụ Web có nhiều người dùng đồng thời VI, Oauth2 google (Login Oauth2) Người dùng truy cập vào trang web chọn phương thức đăng nhập tài khoản Google Trang web chuyển hướng người dùng đến URL xác thực Google (chẳng hạn: https://accounts.google.com/o/oauth2/auth) Tại trang xác thực Google, người dùng yêu cầu đăng nhập vào tài khoản Google họ (nếu chưa đăng nhập trước đó) Người dùng cung cấp thông tin đăng nhập (địa email mật khẩu) xác thực tài khoản Sau người dùng xác thực thành công, Google cấp cho trang web mã xác thực (authorization code) Trang web sử dụng mã xác thực để yêu cầu thông tin truy cập từ Google Yêu cầu bao gồm thông tin mã xác thực, Client ID Client Secret trang web Google xác minh thông tin yêu cầu hợp lệ, cung cấp cho trang web mã truy cập (access token) mã làm (refresh token) Trang web sử dụng mã truy cập để truy cập dịch vụ Google mà người dùng cho phép Trang web lưu trữ mã làm để cung cấp quyền truy cập liên tục cho người dùng mà không cần hỏi lại thông tin đăng nhập Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog 10 Người dùng đăng nhập thành cơng vào trang web truy cập tính dịch vụ mà tài khoản Google họ cho phép VII, Storage Firebase (Storage) Firebase tảng phát triển ứng dụng di động web Google Firebase Realtime Database dịch vụ lưu trữ liệu thời gian thực, sử dụng định dạng JSON Nó cung cấp tính đồng liệu nhiều thiết bị cho phép quản lý quyền truy cập liệu Firebase Realtime Database tích hợp tốt với tảng phát triển cho phép mở rộng liệu cách linh hoạt D Cơ sở liệu I Bảng User Tên trường Kiểu liệu Ràng buộc tồn vẹn Khn dạng id integer Khố Số ngun dương createdAt datetime Not null Ngày Ngày thêm vào updatedAt datetime Not null Ngày Ngày cập nhật gần name text Not null Văn username text Not null Văn Tên đăng nhập password text Văn Được hash lưu vào email text Not null Văn Ghi Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog phone int Số nguyên dương avatar json json ảnh đại diện người dùng II Bảng Post Tên trường Kiểu liệu Ràng buộc tồn vẹn Khn dạng Ghi id integer Khố chính, not null Số ngun dương createdAt datetime Not null Ngày Ngày thêm vào updatedAt datetime Not null Ngày Ngày cập nhật gần limit text Not null Văn Trạng thái viết ownerId int Not null Số nguyên dương Id chủ viết file json json Mảng path ảnh, video, … content json json Lưu nội dung text dạng object chứa css cho chữ III Bảng Comment Tên trường Kiểu liệu Ràng buộc tồn vẹn Khn dạng Ghi Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog id int Khố chính, not null Số nguyên dương createdAt datetime Not null Ngày Ngày thêm vào updatedAt datetime Not null Ngày Ngày cập nhật gần contentComm text ent Văn file json json Mảng path ảnh, video, … owner int Not null Số nguyên dương Liên kết với bảng người dùng postId int Not null Số nguyên dương Liên kết với bảng đăng Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog E Phân tích cho nghiệp vụ tốn I, Biểu đồ Use case: 1.Thơng tin đăng nhập thông thường: input process output usename Kiểm tra/ lưu trữ/ tìm kiếm Đăng nhập thành cơng hay khơng password Thông tin đăng nhập gmail: input process output email Tuân thủ trình tự đăng nhập theo Đăng nhập thành cơng hay khơng Oauth2 Google password Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog II Usecase đăng 1, Đặc tả usecase “Đăng bài” Tác nhân Người dùng Mô tả Thêm đăng viết 11 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog Tiền điều kiện Khơng Luồng kiện STT Thực Luồng kiện thay Hành động Người dùng Chọn chức tạo viết Hệ thống Hiện giao diện để người dùng nhập thông tin Người dùng Nhập thông tin nhấn thêm viết Hệ thống Kiểm tra thông tin có hợp lệ khơng Hệ thống Thơng báo nhập thành công STT Thực Hành động 12 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog Hậu điều kiện Hệ thống Thông báo lỗi xuất nội dung không hợp lệ, kết không hợp lệ hiển thị kết lỗi hệ thống Không 2, Đặc tả usecase “Thay đổi đăng” Tác nhân Người dùng Mô tả Thay đổi nội dung đăng Tiền điều kiện Khơng Luồng kiện STT Thực Hành động Người dùng Chọn chức thay đổi đăng Hệ thống Hiện giao diện để người dùng nhập thông tin Người dùng Nhập thông tin nhấn thay đổi đăng 13 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog Luồng kiện thay Hậu điều kiện Hệ thống Kiểm tra thơng tin có hợp lệ khơng Hệ thống Thông báo nhập thành công STT Thực Hành động Thông báo lỗi xuất nội dung không hợp lệ, kết không hợp lệ hiển thị kết lỗi hệ thống Hệ thống Khơng 14 Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog II.Usecase Xem đăng /Thả cảm xúc 1, Đặc tả usecase “xem danh sách đăng” Tác nhân Người dùng Mô tả Xem danh sách đăng theo tùy chọn thân , đăng công khai người khác hay đăng công khai tất người Tiền điều kiện Không Luồng kiện STT Thực Người dùng Hành động Chọn chức home page nhấn vào người dung khác personal page 15 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog Hệ thống Kiểm tra thông tin có hợp lệ khơng Hệ thống Lấy liệu từ database hiển thị danh sách viết cho người dùng Luồng STT Thực kiện thay Hậu điều kiện Hệ thống Hành động Thông báo lỗi xuất nội dung không hợp lệ, kết không hợp lệ hiển thị kết lỗi hệ thống Không 2, Đặc tả usecase “Thả tym đăng” Tác nhân Người dùng Mô tả Thả icon tym cho đăng Tiền điều kiện Khơng Luồng kiện STT Thực Hành động 16 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog Luồng kiện thay Người dùng Nhấn nút thả tym viết Hệ thống Lưu trữ hành động thả tym bỏ thả tym người dùng lưu lại Người dùng Khi người dung truy cập sang trang khác Hệ thống Gửi liệu thu thập dược server để lưu trữ Hệ thống Kiểm tra thơng tin có hợp lệ không Hệ thống Lưu trữ cập nhật lại liệu STT Thực Hành động Thông báo lỗi xuất nội dung không hợp lệ, kết không hợp lệ hiển thị kết lỗi hệ thống Hệ thống 17 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog Hậu điều kiện Khơng III Usecase Bình luận 1, Đặc tả usecase “Thêm bình ln/bình luận” Tác nhân Người dùng 18 Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog Mơ tả Thêm bình luận Tiền điều kiện Khơng Luồng kiện STT Thực Luồng kiện thay Hành động Người dùng Chọn chức tạo bình luận Hệ thống Hiện giao diện để người dùng nhập thông tin Người dùng Nhập thơng tin nhấn thêm bình luận Hệ thống Kiểm tra thơng tin có hợp lệ không Hệ thống Thông báo nhập thành công STT Thực Hành động 19 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog Hậu điều kiện Hệ thống Thông báo lỗi xuất nội dung không hợp lệ, kết không hợp lệ hiển thị kết lỗi hệ thống Không 2, Đặc tả usecase “xóa bình luận” Tác nhân Người dùng Mơ tả Xóa bình luận người khác viết bình luận người dùng Tiền điều kiện Khơng Luồng kiện STT Thực Hành động Người dùng Hệ thống Kiểm tra thơng tin có hợp lệ khơng Hệ thống Xóa bình luận theo u cầu database Chọn chức xóa bình luận 20 Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog Luồng kiện thay STT Thực Hậu điều kiện Hành động Hệ thống Thông báo lỗi xuất nội dung không hợp lệ, kết không hợp lệ hiển thị kết lỗi hệ thống Không G Phân rã chức hệ thống I.Use case phân rã “Tạo đăng.” 21 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog II Usecase phân rã “Xem đăng” III UseCase phân rã “Chỉnh sửa viết” 22 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog IV Usecase phân rã “Thêm/hủy cảm xúc tym” IV UseCase phân rã “Thêm bình luận” 23 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog V.UseCase phân rã “Xóa bình luận” H Kho lưu trữ mà nguồn dự án https://github.com/BaoDao-212/Web-blog- I, Kết luận I Thành thu • • • Hồn thành xong website quản lý quán cà phê đơn giản thân tự thiết kế Học thêm nhiều công nghệ làm website Hiểu nguyên lý hoạt động khái niệm backend frontend cách thực hoạt động xác thực đăng nhập tài khoản google II Khó khăn hạn chế • • • • Chưa thể hoàn thiện website mong muốn thân Mới tìm hiểu ngơn ngữ lập trình mới, khơng có kinh nghiệm nên việc hồn thiện tốn nhiều thời gian cơng sức Mới biết sử dụng công nghệ chưa thể vào chuyên sâu Website gặp số lỗi logic mà chưa thể sửa hết 24 Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog 25