Đồ Án Tốt Nghiệp: Xây Dựng Ứng Dụng Hỗ Trợ Thiết Kế Giao Diện Website Tìm Việc

Đồ án kỹ thuật nghiên cứu tốt nghiệp đại học ngành khoa học máy tính khoa học máy tính xây dựng ứng dụng hỗ trợ thiết kế giao, thiết kế chi tiết, tính toán kỹ thuật theo tiêu

• Tác giả: Bùi Văn Mạnh
• Người hướng dẫn: ThS. Nguyễn Thị Nhung
• Trường học: Đại học Công nghiệp Hà Nội
• Chuyên ngành: Khoa học máy tính
• Đề tài: Xây Dựng Ứng Dụng Hỗ Trợ Thiết Kế Giao Diện Website Tìm Việc
• Loại tài liệu: đồ án tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Hà Nội

Mục lục chi tiết

• LỜI NÓI ĐẦU
• 1. CHƯƠNG 1: TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT
• 1.1. Giới thiệu về HTML, CSS và Javascript
• 1.2. Giới thiệu về ReactJs
• 1.3. Giới thiệu về Java
• 1.4. Giới thiệu về spring boot
• 1.5. Giới thiệu về MySQL
• 2. CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
• 2.1. Đặc tả yêu cầu
• 2.2. Các yêu cầu phi chức năng
• 2.3. Phân tích thiết kế hệ thống
• 2.4. Mô hình hóa use case
• 2.4.1. Biểu đồ use case tổng quát
• 2.4.2. Biểu đồ use case phân rã
• 2.5. Mô tả chi tiết use case
• 2.5.1. Use case đăng ký tài khoản
• 2.5.2. Use case đăng nhập
• 2.5.3. Use case xem thông tin tài khoản
• 2.5.4. Use case thay đổi mật khẩu
• 2.5.5. Use case lấy lại mật khẩu
• 2.5.6. Use case cập nhật thông tin cá nhân
• 2.5.7. Use case xem chi tiết trang giao diện
• 2.5.8. Use case tạo trang giao diện
• 2.5.9. Use case chỉnh sửa trang giao diện
• 2.5.10. Use case tìm kiếm trang giao diện
• 2.5.11. Use case xóa trang giao diện
• 2.5.12. Use case xuất mã nguồn trang giao diện
• 2.5.13. Use case thêm người chỉnh sửa
• 2.6. Phân tích use case
• 2.6.1. Use case đăng kí tài khoản
• 2.6.2. Use case đăng nhập
• 2.6.3. Use case xem thông tin tài khoản
• 2.6.4. Use case lấy lại mật khẩu
• 2.6.5. Use case thay đổi mật khẩu
• 2.6.6. Use case cập nhật thông tin cá nhân
• 2.6.7. Use case xem chi tiết trang giao diện
• 2.6.8. Use case tạo trang giao diện
• 2.6.9. Use case chỉnh sửa trang giao diện
• 2.6.10. Use case tìm kiếm trang giao diện
• 2.6.11. Use case xóa trang giao diện
• 2.6.12. Use case thêm người chỉnh sửa
• 2.6.13. Use case xuất mã nguồn trang giao diện
• 2.7. Thiết kế cơ sở dữ liệu
• 2.7.1. Biểu đồ Entity Relationship Diagram
• 2.7.2. Các bảng trong cơ sở dữ liệu
• 3. CHƯƠNG 3: KẾT QUẢ, KIỂM THỬ VÀ ĐÁNH GIÁ
• 3.1. Giới thiệu ứng dụng
• 3.2. Một số chức năng chính của ứng dụng
• 3.2.1. Trang đăng ký tài khoản
• 3.2.2. Trang đăng nhập
• 3.2.3. Trang lấy lại mật khẩu
• 3.2.4. Trang thông tin tài khoản
• 3.2.5. Trang tạo và chỉnh sửa trang giao diện
• 3.2.6. Trang danh sách trang giao diện cá nhân
• 3.2.7. Trang danh sách trang giao diện cộng đồng
• 3.2.8. Trang xem chi tiết trang giao diện
• 3.3. Kiểm thử chương trình
• 3.3.1. Kế hoạch kiểm thử
• 3.3.2. Chiến lược kiểm thử
• 3.3.3. Mô hình kiểm thử
• 3.3.4. Kết quả kiểm thử
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Về Ứng Dụng Hỗ Trợ Thiết Kế Giao Diện Website Tìm Việc

Trong thời đại số hóa hiện nay, việc tìm kiếm việc làm và tuyển dụng trực tuyến đã trở thành một phần thiết yếu trong cuộc sống. Ứng dụng hỗ trợ thiết kế giao diện website tìm việc không chỉ giúp người dùng dễ dàng tạo ra các trang web đẹp mắt mà còn tối ưu hóa trải nghiệm người dùng. Việc phát triển ứng dụng này nhằm giải quyết những khó khăn trong việc tìm kiếm việc làm và kết nối giữa người tìm việc và nhà tuyển dụng.

1.1. Lý Do Cần Thiết Ứng Dụng Hỗ Trợ Thiết Kế

Sự phát triển của công nghệ thông tin đã tạo ra nhu cầu cao về các công cụ hỗ trợ thiết kế giao diện. Ứng dụng này giúp người dùng không có kinh nghiệm lập trình vẫn có thể tạo ra website chuyên nghiệp.

1.2. Mục Tiêu Của Ứng Dụng

Mục tiêu chính là cung cấp một nền tảng dễ sử dụng, giúp người dùng thiết kế giao diện website một cách nhanh chóng và hiệu quả, từ đó nâng cao cơ hội tìm việc.

II. Vấn Đề Trong Thiết Kế Giao Diện Website Tìm Việc

Thiết kế giao diện website tìm việc gặp nhiều thách thức như độ phức tạp trong việc tạo ra giao diện thân thiện và dễ sử dụng. Người dùng thường gặp khó khăn trong việc tìm kiếm thông tin và kết nối với nhà tuyển dụng. Những vấn đề này cần được giải quyết để cải thiện trải nghiệm người dùng.

2.1. Thách Thức Trong Việc Kết Nối Người Tìm Việc Và Nhà Tuyển Dụng

Thị trường tuyển dụng truyền thống thường gặp khó khăn trong việc kết nối giữa người tìm việc và nhà tuyển dụng, dẫn đến việc mất thời gian và cơ hội.

2.2. Khó Khăn Trong Việc Tạo Giao Diện Thân Thiện

Việc thiết kế giao diện thân thiện với người dùng là một thách thức lớn, đặc biệt là đối với những người không có kinh nghiệm về lập trình.

III. Phương Pháp Xây Dựng Ứng Dụng Hỗ Trợ Thiết Kế Giao Diện

Để xây dựng ứng dụng hỗ trợ thiết kế giao diện website tìm việc, cần áp dụng các công nghệ hiện đại như HTML, CSS, JavaScript và các framework như ReactJS. Việc sử dụng các công nghệ này giúp tạo ra giao diện đẹp mắt và dễ sử dụng.

3.1. Sử Dụng Công Nghệ Hiện Đại

HTML, CSS và JavaScript là những công nghệ cơ bản giúp xây dựng giao diện website. Việc áp dụng các công nghệ này giúp tạo ra trải nghiệm người dùng tốt hơn.

3.2. Tích Hợp Các Tính Năng Hỗ Trợ

Ứng dụng cần tích hợp các tính năng như kéo thả, chỉnh sửa trực tiếp để người dùng có thể dễ dàng tạo ra giao diện mà không cần kiến thức lập trình.

IV. Ứng Dụng Thực Tiễn Của Ứng Dụng Hỗ Trợ Thiết Kế

Ứng dụng hỗ trợ thiết kế giao diện website tìm việc đã được triển khai và nhận được phản hồi tích cực từ người dùng. Nhiều người đã sử dụng ứng dụng để tạo ra các trang web tìm việc hiệu quả, giúp họ kết nối với nhà tuyển dụng nhanh chóng.

4.1. Kết Quả Nghiên Cứu Và Phát Triển

Nghiên cứu cho thấy ứng dụng đã giúp cải thiện đáng kể trải nghiệm người dùng trong việc tìm kiếm việc làm và tuyển dụng.

4.2. Phản Hồi Từ Người Dùng

Người dùng đã phản hồi tích cực về tính năng và giao diện của ứng dụng, cho thấy sự tiện lợi và hiệu quả trong việc sử dụng.

V. Kết Luận Về Tương Lai Của Ứng Dụng Hỗ Trợ Thiết Kế

Tương lai của ứng dụng hỗ trợ thiết kế giao diện website tìm việc rất hứa hẹn. Với sự phát triển không ngừng của công nghệ, ứng dụng sẽ tiếp tục được cải tiến và mở rộng tính năng để đáp ứng nhu cầu ngày càng cao của người dùng.

5.1. Xu Hướng Phát Triển Công Nghệ

Công nghệ sẽ tiếp tục phát triển, tạo ra nhiều cơ hội mới cho việc thiết kế giao diện website tìm việc.

5.2. Định Hướng Tương Lai Của Ứng Dụng

Ứng dụng sẽ được cập nhật thường xuyên để cải thiện tính năng và đáp ứng nhu cầu của người dùng, từ đó nâng cao hiệu quả tìm kiếm việc làm.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong quá trình phát triển của công nghệ phần mềm và các nền tảng trực tuyến, việc xây dựng website đóng vai trò thiết yếu đối với hoạt động của cá nhân và doanh nghiệp. Tuy nhiên, rào cản về kiến thức chuyên môn trong lập trình giao diện (frontend) và thiết kế trải nghiệm người dùng khiến những đối tượng không chuyên gặp nhiều trở ngại khi muốn tự tạo lập trang web. Xuất phát từ thực tế đó, các công cụ xây dựng trang web tự động (web builder) với phương thức tương tác trực quan kéo thả ra đời nhằm tối ưu hóa thời gian và nguồn lực triển khai.

Đồ án tốt nghiệp đại học ngành Khoa học Máy tính của tác giả Bùi Văn Mạnh, dưới sự hướng dẫn của ThS. Nguyễn Thị Nhung tại Trường Đại học Công nghiệp Hà Nội (năm 2024), tập trung giải quyết bài toán trên thông qua đề tài "Xây dựng ứng dụng hỗ trợ thiết kế giao diện website" với sản phẩm phần mềm mang tên Component Craft.

Lưu ý về hiện trạng văn bản: Toàn bộ hồ sơ đồ án ghi nhận hiện tượng không đồng nhất ở phần đầu tài liệu. Cụ thể, báo cáo đính kèm hai trang bìa: bìa chính ngành Khoa học Máy tính (năm 2024) với đề tài "Xây dựng ứng dụng hỗ trợ thiết kế giao diện website", và một trang bìa phụ ngành Công nghệ Thông tin (năm 2023) với tên đề tài "Xây dựng giải pháp tìm việc và tuyển dụng trực tuyến". Phần Lời nói đầu và tiểu mục khảo sát ban đầu của Chương 1 bị lẫn một phần nội dung của hệ thống tuyển dụng trực tuyến. Tuy nhiên, căn cứ vào phần Mở đầu chính thức, Danh mục hình ảnh, Danh mục bảng biểu và toàn bộ nội dung phân tích, thiết kế, hiện thực hóa tại Chương 2 và Chương 3, đề tài hoàn toàn tập trung vào ứng dụng thiết kế giao diện website Component Craft.

Mục tiêu nghiên cứu của đồ án bao gồm:

1. Xây dựng một ứng dụng web builder giúp người dùng thiết kế giao diện website một cách trực quan, nhanh chóng thông qua thao tác kéo thả các khối thành phần.
2. Cung cấp các công cụ và tài nguyên giao diện mẫu (template) hỗ trợ người dùng tạo lập giao diện mà không đòi hỏi kỹ năng lập trình chuyên sâu.
3. Tích hợp tính năng hợp tác trực tuyến, phân quyền chia sẻ liên kết dự án để nhiều người dùng có thể cùng tham gia xem xét, đánh giá hoặc chỉnh sửa giao diện.
4. Cung cấp chức năng chuyển đổi và xuất mã nguồn trang giao diện sang các framework lập trình phổ biến.

Nhiệm vụ nghiên cứu được văn bản phân định qua các nội dung chính:

• Khảo sát các công cụ web builder phổ biến trên thị trường để xác định yêu cầu chức năng và phi chức năng.
• Quản lý thông tin tài khoản người dùng và xác thực hệ thống.
• Quản lý cơ sở dữ liệu các trang thiết kế và cấu trúc giao diện tương ứng.
• Xây dựng cơ chế phân quyền, quản lý cộng đồng người dùng và cơ chế chia sẻ tài nguyên.
• Kiểm thử và đánh giá các chức năng đã cài đặt.

Đối tượng và phạm vi nghiên cứu:

• Đối tượng nghiên cứu: Hệ thống ứng dụng hỗ trợ thiết kế giao diện kéo thả (Component Craft).
• Phạm vi chức năng: Hệ thống dừng lại ở mức hỗ trợ thiết kế các thành phần giao diện đơn giản, chưa cung cấp đủ tính năng để xây dựng các bố cục giao diện phức tạp; hỗ trợ tính năng chia sẻ trang trong phạm vi người dùng nội bộ của hệ thống; hỗ trợ xuất mã nguồn giao diện sang hai framework là React và Vue.
• Phạm vi môi trường: Hệ thống vận hành trên môi trường mạng Internet, tương thích với các trình duyệt web phổ biến gồm Chrome, Firefox, Safari, Edge và hỗ trợ hiển thị trên các thiết bị máy tính cũng như di động.

Cơ sở lý thuyết và phương pháp

Đồ án ứng dụng quy trình phân tích và thiết kế hệ thống hướng đối tượng (OOAD) kết hợp việc mô hình hóa bằng ngôn ngữ UML và thiết kế cơ sở dữ liệu quan hệ.

Khung công nghệ và nền tảng lý thuyết được tác giả trình bày bao gồm:

• Công nghệ phía máy khách (Frontend): HTML, CSS, JavaScript thuần và thư viện ReactJS dùng để xây dựng giao diện tương tác một trang (Single Page Application), quản lý trạng thái các component và hỗ trợ xử lý kéo thả giao diện.
• Công nghệ phía máy chủ (Backend): Ngôn ngữ lập trình Java kết hợp nền tảng Spring Boot nhằm hiện thực hóa các dịch vụ web (RESTful API), xử lý logic nghiệp vụ, quản lý phiên làm việc, gửi email tự động và kết nối dữ liệu.
• Hệ quản trị cơ sở dữ liệu: MySQL được sử dụng để lưu trữ dữ liệu người dùng, thông tin dự án trang và các liên kết quyền hạn.

Phương pháp nghiên cứu và phát triển phần mềm được triển khai qua các bước:

• Phương pháp mô hình hóa cấu trúc và hành vi hệ thống: Sử dụng biểu đồ Use Case tổng quát và phân rã; biểu đồ hoạt động (Activity Diagram) thể hiện luồng xử lý; biểu đồ lớp (Class Diagram) theo mô hình phân tách Boundary - Control - Entity; biểu đồ trình tự (Sequence Diagram) mô tả tương tác giữa các đối tượng theo thời gian.
• Phương pháp thiết kế dữ liệu: Mô hình hóa thực thể mối quan hệ (ERD - Entity Relationship Diagram) và chuyển đổi thành lược đồ bảng dữ liệu quan hệ trong MySQL.
• Phương pháp kiểm thử: Thực hiện kiểm thử hộp đen (Black-box testing) với kế hoạch kiểm thử, chiến lược kiểm thử chức năng dựa trên các kịch bản kiểm thử ca sử dụng.

Thiết kế và triển khai hệ thống

Hệ thống được thiết kế theo mô hình hướng đối tượng với sự tách biệt rõ ràng giữa tầng giao diện (Boundary), tầng điều khiển logic (Control) và tầng thực thể dữ liệu (Entity).

Kiến trúc các thực thể dữ liệu chính

Các thực thể nền tảng được định nghĩa trong hệ thống gồm:

• Thực thể User: Lưu trữ thông tin định danh và xác thực của người dùng, gồm các thuộc tính id, firstName, lastName, photo, cover, email, password. Các phương thức quản trị đi kèm gồm CreateUser(), getUserById(), getUserByEmail(), setUserById().
• Thực thể Page: Lưu trữ trạng thái và cấu trúc của trang giao diện, gồm các thuộc tính id, name, json, previewImage, privacy, userId, modified_at. Các thao tác tương tác gồm createPage(), getPageById(), getPageByName(), setPageById(), deletePageById(), exportPageById(). Điểm then chốt trong giải pháp lưu trữ là việc đóng gói toàn bộ cấu trúc cây thành phần giao diện kéo thả dưới dạng chuỗi JSON (json).

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

Cơ sở dữ liệu của ứng dụng gồm 5 bảng chính được thiết kế phục vụ lưu trữ thông tin hệ thống và giải quyết quan hệ cộng tác:

Tên bảng	Chức năng lưu trữ chính
user	Lưu trữ thông tin định danh tài khoản, email, mật khẩu đã mã hóa, họ tên và ảnh đại diện.
page	Lưu trữ thông tin trang thiết kế, chuỗi dữ liệu JSON biểu diễn giao diện, mã người tạo (userId), ảnh xem trước và trạng thái quyền riêng tư (privacy).
page_user	Bảng trung gian liên kết phân quyền cộng tác, lưu trữ quan hệ giữa trang và các người dùng được cấp quyền chỉnh sửa.
user_shortcut_pages	Lưu trữ danh mục các trang được người dùng đánh dấu lối tắt để truy cập nhanh trên giao diện cá nhân.
saved_pages	Quản lý danh sách các trang được người dùng lưu lại từ kho trang giao diện cộng đồng.

Cơ chế xử lý ca sử dụng cốt lõi

1. Cơ chế kéo thả và lưu trữ giao diện: Khi người dùng thao tác kéo thả component trên màn hình thiết kế, hệ thống cập nhật mô hình DOM ảo và chuyển đổi cấu trúc thành chuỗi JSON. Khi nhấn "Lưu", lớp điều khiển SuaTrangController chuyển giao dữ liệu xuống thực thể Page để thực thi cập nhật bản ghi trong cơ sở dữ liệu.
2. Cơ chế xuất mã nguồn: Cho phép người dùng chuyển đổi dữ liệu cấu hình giao diện thành mã nguồn ứng dụng hoàn chỉnh. Hệ thống cung cấp hai tùy chọn biên dịch xuất mã: React hoặc Vue.
3. Cơ chế chia sẻ và hợp tác: Chủ sở hữu trang có thể tìm kiếm người dùng khác trong hệ thống theo email thông qua giao diện XemChiTietTrangUI, chọn người cần phân quyền để cập nhật vào bảng page_user, đồng thời hệ thống kích hoạt thông báo quyền chỉnh sửa gửi đến email của người được chia sẻ.

Nội dung chính theo từng chương

Chương 1: Tổng quan về cơ sở lý thuyết

• Trình bày kiến trúc và vai trò của bộ ba công nghệ web nền tảng: HTML (định hình cấu trúc tài liệu), CSS (định dạng bố cục, kiểu dáng) và JavaScript (xử lý logic kịch bản phía client).
• Giới thiệu thư viện ReactJS, cơ chế hoạt động dựa trên Component, Virtual DOM và khả năng tối ưu hóa việc cập nhật giao diện trong các ứng dụng web phức tạp.
• Khái quát về ngôn ngữ lập trình Java và framework Spring Boot, làm rõ cơ chế cấu hình tự động (auto-configuration), việc nhúng máy chủ web và xây dựng các tầng dịch vụ backend độc lập.
• Giới thiệu hệ quản trị cơ sở dữ liệu quan hệ MySQL, nguyên lý lưu trữ dữ liệu dạng bảng và khả năng bảo đảm tính toàn vẹn quan hệ.
• Ghi nhận hiện tượng lẫn nội dung: Trong chương này, ngoài lý thuyết công nghệ, văn bản còn chứa tiểu mục mô tả bài toán tuyển dụng trực tuyến, phân tích các yêu cầu chức năng (đăng tin, tìm việc, tạo hồ sơ cá nhân, nộp CV) và yêu cầu phi chức năng (hiệu suất, bảo mật, tương thích trình duyệt, SEO).

Chương 2: Phân tích thiết kế hệ thống

Chương 2 chiếm dung lượng lớn nhất trong đồ án, tập trung mô tả chi tiết 13 ca sử dụng (Use Case) chính cùng hệ thống biểu đồ UML hoàn chỉnh:

Nhóm chức năng	Tên ca sử dụng (Use Case)	Mô tả tóm tắt luồng xử lý
Quản lý tài khoản	Đăng ký tài khoản	Người dùng nhập họ, tên, email; hệ thống kiểm tra tính hợp lệ và thêm bản ghi vào bảng user.
	Đăng nhập	Xác thực tên đăng nhập/email và mật khẩu với dữ liệu trong bảng user.
	Xem thông tin tài khoản	Truy xuất dữ liệu từ bảng user thông qua định danh id để hiển thị trang hồ sơ cá nhân.
	Thay đổi mật khẩu	Kiểm tra mật khẩu cũ; nếu khớp, tiến hành cập nhật mật khẩu mới vào bảng user.
	Lấy lại mật khẩu	Nhập email; hệ thống kiểm tra tồn tại, tạo mật khẩu ngẫu nhiên và gửi thông tin qua email.
	Cập nhật thông tin cá nhân	Cho phép sửa họ và tên, sau đó ghi đè thông tin mới vào cơ sở dữ liệu.
Quản lý trang giao diện	Tạo trang giao diện	Chọn chức năng tạo mới, nhập tên trang, chọn mẫu; hệ thống kiểm tra trùng tên và tạo trang.
	Chỉnh sửa trang giao diện	Thao tác thiết kế kéo thả các thành phần trực tiếp trên workspace và lưu cấu hình JSON.
	Xem chi tiết trang	Hiển thị thông số chi tiết của trang từ bảng page dựa trên pageId.
	Tìm kiếm trang giao diện	Tìm kiếm các trang theo từ khóa tên trang thông qua phương thức getPageByName().
	Xóa trang giao diện	Xác nhận yêu cầu xóa và thực hiện loại bỏ bản ghi trang trong bảng page.
	Xuất mã nguồn trang	Cho phép chọn định dạng xuất là mã nguồn React hoặc Vue, sau đó tải về máy cục bộ.
	Thêm người chỉnh sửa	Nhập email cộng tác viên; hệ thống phân quyền và gửi email thông báo cấp quyền chỉnh sửa.

Bên cạnh bảng mô tả chi tiết, tác giả xây dựng 43 hình vẽ kỹ thuật bao gồm:

• Biểu đồ use case tổng quát và phân rã cho hai phân hệ Quản lý tài khoản và Quản lý trang giao diện.
• Biểu đồ hoạt động mô tả chi tiết luồng xử lý chính và rẽ nhánh của toàn bộ 13 use case.
• Biểu đồ lớp phân tích phân định rõ các lớp biên giao diện (*UI), lớp điều khiển nghiệp vụ (*Controller) và các thực thể (User, Page).
• Biểu đồ trình tự mô tả tuần tự các thông điệp truyền giữa tác nhân người dùng, giao diện, bộ điều khiển và thực thể cơ sở dữ liệu.
• Biểu đồ thực thể liên kết ERD và cấu trúc dữ liệu chi tiết của 5 bảng quan hệ.

Chương 3: Kết quả, kiểm thử và đánh giá

• Giới thiệu tổng quan và minh chứng kết quả triển khai ứng dụng thực tế thông qua 24 màn hình giao diện:
  • Phân hệ tài khoản: Màn hình đăng ký, mẫu thông báo gửi đến email, màn hình đăng nhập, giao diện lấy lại mật khẩu, trang thông tin cá nhân của chủ tài khoản và giao diện xem hồ sơ của người dùng khác.
  • Phân hệ thiết kế giao diện: Màn hình cấu hình khởi tạo trang mới, thư viện mẫu giao diện gợi ý, không gian làm việc (workspace) chỉnh sửa kéo thả trực quan, màn hình xem trước (preview) giao diện khi hiển thị thực tế.
  • Phân hệ cộng tác và quản lý: Hộp thoại phân quyền thêm người chỉnh sửa, nội dung email tự động gửi thông báo phân quyền, giao diện xuất mã nguồn (React/Vue), danh sách quản lý trang cá nhân (kèm các thao tác đổi tên, xóa, thiết lập lối tắt), danh sách trang cộng đồng và chế độ xem chi tiết trang được chia sẻ.
• Công tác kiểm thử chương trình: Trình bày kế hoạch kiểm thử, chiến lược kiểm thử, mô hình kiểm thử và tổng hợp kết quả kiểm thử chức năng trên các giao diện thành phần nhằm xác nhận tính đúng đắn của các use case đã thiết kế.

Kết quả và đóng góp

Các kết quả kỹ thuật cụ thể được ghi nhận trong văn bản bao gồm:

• Xây dựng hoàn chỉnh ứng dụng web builder Component Craft với các tính năng: đăng ký/đăng nhập, quản lý hồ sơ, tạo trang mới theo mẫu, thiết kế giao diện dạng kéo thả thành phần, lưu trữ cấu trúc trang dưới dạng JSON, tìm kiếm, đổi tên, xóa trang và chia sẻ dự án giữa các người dùng.
• Hiện thực hóa thành công chức năng xuất mã nguồn trang giao diện hỗ trợ hai framework phổ biến là React và Vue.
• Tích hợp dịch vụ email tự động trong hai quy trình nghiệp vụ: cấp lại mật khẩu ngẫu nhiên cho tài khoản và gửi thư mời cộng tác chỉnh sửa trang giao diện.
• Đóng gói đầy đủ hồ sơ thiết kế phần mềm với 43 biểu đồ UML chi tiết (Use Case, Activity, Class, Sequence), biểu đồ ERD và 5 bảng cơ sở dữ liệu MySQL tương ứng.
• Đóng góp tự nêu của tác giả: Cung cấp một giải pháp trực quan giúp người dùng không có chuyên môn về lập trình hay thiết kế web vẫn có thể xây dựng giao diện ứng dụng/website một cách dễ dàng, đồng thời tạo ra môi trường chia sẻ và hợp tác trực tuyến giữa các thành viên trong cộng đồng.

Hạn chế và hướng nghiên cứu tiếp

Hạn chế được văn bản đề cập trực tiếp gồm:

• Các thành phần giao diện hỗ trợ trong công cụ mới dừng lại ở mức độ đơn giản, chưa cung cấp đủ tính năng và khối dựng sẵn để thiết kế các hệ thống giao diện phức tạp hoặc có độ tùy biến sâu.
• Báo cáo đồ án tồn tại lỗi biên tập kỹ thuật khi để lẫn lộn trang bìa, lời nói đầu và nội dung khảo sát của đề tài tuyển dụng trực tuyến vào phần đầu của tài liệu.

Hướng nghiên cứu và phát triển tiếp (dựa trên phạm vi nghiên cứu):

• Mở rộng thư viện linh kiện giao diện với nhiều thành phần phức tạp, đa dạng về kiểu dáng và bố cục.
• Nâng cao tính năng cộng tác nhóm theo thời gian thực (real-time collaboration).
• Tối ưu hóa bộ công cụ biên dịch để xuất mã nguồn sạch hơn, hỗ trợ thêm nhiều nền tảng frontend khác ngoài React và Vue.

Giá trị tham khảo

Đồ án có giá trị tham khảo thiết thực đối với:

• Sinh viên các ngành Khoa học Máy tính, Công nghệ Thông tin, Kỹ thuật Phần mềm đang tìm kiếm tài liệu mẫu về quy trình phân tích và thiết kế hệ thống phần mềm hướng đối tượng theo chuẩn UML.
• Những người phát triển các ứng dụng dạng công cụ kéo thả, web builder hoặc hệ thống quản lý nội dung (CMS).

Các nội dung có giá trị tham khảo nổi bật:

• Hệ thống biểu đồ phân tích use case tại Chương 2: Phương pháp phân rã theo mô hình Boundary - Control - Entity, kết hợp đồng bộ giữa Biểu đồ lớp và Biểu đồ trình tự cho từng ca sử dụng cụ thể.
• Giải pháp lưu trữ cấu trúc trang linh hoạt bằng cách kết hợp trường dữ liệu JSON (json) trong bảng quan hệ page, kết hợp mô hình phân quyền chia sẻ qua bảng trung gian page_user.

Câu hỏi thường gặp

1. Ứng dụng Component Craft hỗ trợ người dùng xuất mã nguồn trang giao diện sang những định dạng nào?

Theo đặc tả tại use case xuất mã nguồn (Bảng 2.12, Hình 2.29, Hình 2.33 và Hình 3.13), ứng dụng cho phép người dùng lựa chọn và tải xuống mã nguồn giao diện theo hai tùy chọn framework là React hoặc Vue.

2. Cấu trúc dữ liệu của một trang giao diện được lưu trữ trong cơ sở dữ liệu như thế nào?

Theo thiết kế thực thể và bảng dữ liệu page (tiểu mục 2.7 và Bảng 2.18), trang giao diện được lưu trữ với các thuộc tính: id (mã định danh), name (tên trang), json (chuỗi định dạng JSON chứa toàn bộ cấu trúc các thành phần kéo thả), previewImage (ảnh chụp xem trước giao diện), privacy (chế độ công khai hoặc riêng tư), userId (mã người tạo) và modified_at (thời gian chỉnh sửa gần nhất).

3. Quy trình cấp lại mật khẩu cho tài khoản người dùng được hệ thống xử lý ra sao?

Căn cứ mô tả use case lấy lại mật khẩu (Bảng 2.5 và Biểu đồ trình tự Hình 2.24), người dùng nhập email tại giao diện đăng nhập. Lớp điều khiển LayLaiMatKhauController gọi phương thức getUserByEmail() để kiểm tra; nếu email tồn tại trong bảng user, hệ thống tạo mật khẩu mới ngẫu nhiên (random), cập nhật vào cơ sở dữ liệu qua setPassword() và tự động gửi thông tin mật khẩu mới này về email của người dùng.

4. Cơ chế chia sẻ và hợp tác chỉnh sửa trang giữa các người dùng được thiết kế như thế nào?

Dựa vào use case "Thêm người chỉnh sửa" (Bảng 2.13, Hình 2.16 và Hình 3.11), chủ sở hữu trang mở giao diện chia sẻ, nhập email người dùng muốn cộng tác. Hệ thống ghi nhận liên kết này vào bảng page_user, đồng thời tự động gửi email thông báo cấp quyền chỉnh sửa đến người được chọn. Người cộng tác sau đó có thể truy cập trang và thao tác thiết kế thông qua màn hình giao diện dành riêng cho người chỉnh sửa (Hình 3.12).

5. Vì sao phần đầu của tài liệu xuất hiện nội dung về đề tài tuyển dụng việc làm trực tuyến?

Đây là lỗi kỹ thuật sao chép/ghép văn bản trong quá trình hoàn thiện hồ sơ của tác giả. Hồ sơ có hai trang bìa (Khoa học Máy tính năm 2024 và Công nghệ Thông tin năm 2023). Phần Lời nói đầu và tiểu mục khảo sát đầu Chương 1 bị sao chép nhầm từ đồ án tuyển dụng, trong khi phần Mở đầu, toàn bộ Chương 2 (phân tích thiết kế 13 use case), Chương 3 (kết quả giao diện, kiểm thử) và hệ thống bảng biểu, hình ảnh đều hoàn toàn thuộc về ứng dụng Component Craft.

Kết luận

Đồ án tốt nghiệp của tác giả Bùi Văn Mạnh đã phân tích, thiết kế và xây dựng thành công ứng dụng hỗ trợ thiết kế giao diện website mang tên Component Craft dựa trên nền tảng ReactJS, Spring Boot và MySQL. Mặc dù văn bản tài liệu còn tồn tại sai sót kỹ thuật biên tập ở phần đầu, phần nội dung cốt lõi đã hoàn thành đầy đủ quy trình kỹ thuật phần mềm từ khảo sát yêu cầu, mô hình hóa 13 ca sử dụng bằng UML, thiết kế 5 bảng cơ sở dữ liệu quan hệ đến việc cài đặt giao diện kéo thả trực quan và kiểm thử chức năng. Ứng dụng đã giải quyết được yêu cầu thiết kế website trực quan cơ bản, cung cấp cơ chế hợp tác chia sẻ dự án và hỗ trợ xuất mã nguồn giao diện sang React và Vue.

Trích đoạn nội dung tài liệu

CHƯƠNG 1 KHẢO SÁT HỆ THỐNG 1.1 Mô tả bài toán Trong xã hội hiện đại, việc tìm kiếm việc làm và tuyển dụng đã trở thành một phần không thể thiếu của cuộc sống hàng ngày của mỗi cá nhân và tổ chức. Đối với người lao động, việc tìm kiếm một công việc phù hợp không chỉ là một nhu cầu cần thiết mà còn là một bước quan trọng trong việc xây dựng sự nghiệp và định hình tương lai cá nhân. Ngược lại, đối với các doanh nghiệp, việc tuyển dụng nhân sự có kỹ năng và kinh nghiệm phù hợp là một yếu tố quyết định đến sự phát triển và thành công của công ty. Tuy nhiên, thị trường tuyển dụng truyền thống thường gặp phải nhiều khó khăn và hạn chế như: thời gian tìm kiếm công việc lâu dài, chi phí quảng cáo tuyển dụng cao, khó khăn trong việc kết nối giữa người tìm việc và nhà tuyển dụng, độ tin cậy của thông tin tuyển dụng, và nhiều vấn đề khác.

Để giải quyết những vấn đề này, việc áp dụng công nghệ thông tin vào quá trình tìm kiếm việc làm và tuyển dụng trở thành một xu hướng không thể tránh khỏi. Bài toán được đặt ra là xây dựng một hệ thống website tìm việc và tuyển dụng trực tuyến, với mục tiêu giúp kết nối giữa người tìm việc và nhà tuyển dụng một cách thuận tiện, nhanh chóng và hiệu quả. Hệ thống sẽ cung cấp các chức năng và tính năng như: đăng tin tuyển dụng, tìm kiếm việc làm theo các tiêu chí khác nhau, tạo hồ sơ cá nhân, đánh giá nhà tuyển dụng và ứng viên, và giao diện thân thiện dễ sử dụng. Mục tiêu của dự án là xây dựng một hệ thống website linh hoạt, chất lượng cao, đáp ứng được nhu cầu của cả người tìm việc và nhà tuyển dụng.

Qua đó, giúp cải thiện quá trình tìm kiếm việc làm và tuyển dụng, từ đó đóng góp vào sự phát triển của cả cộng đồng và xã hội. Trong phần tiếp theo của chương này, chúng ta sẽ tiến hành khảo sát và phân tích cụ thể hơn về yêu cầu và yếu tố cần thiết cho việc xây dựng hệ thống này.2 Các yêu cầu chức năng 1. Đăng Tin Tuyển Dụng: Downloaded by MON MON ([e-mail]) lOMoARcPSD|39222638  Cho phép nhà tuyển dụng đăng thông tin về các vị trí việc làm cụ thể, bao gồm tiêu đề công việc, mô tả công việc, yêu cầu ứng viên, lợi ích công việc và thông tin liên hệ.  Hỗ trợ việc đăng tin theo các lĩnh vực và ngành nghề khác nhau để dễ dàng tìm kiếm.

Tìm Kiếm Việc Làm:  Người tìm việc có thể tìm kiếm việc làm dựa trên các tiêu chí như ngành nghề, vị trí, địa điểm, mức lương, và yêu cầu công việc.  Hỗ trợ tìm kiếm nâng cao với các tính năng lọc kết hợp để thu hẹp kết quả tìm kiếm. Tạo Hồ Sơ Cá Nhân:  Cho phép người tìm việc tạo và quản lý hồ sơ cá nhân của mình với các thông tin như kinh nghiệm làm việc, học vấn, kỹ năng, và thông tin liên hệ.  Hỗ trợ tải lên hồ sơ CV và các tài liệu liên quan.

Ứng Tuyển Việc Làm:  Người tìm việc có thể ứng tuyển trực tiếp vào các vị trí việc làm mà họ quan tâm thông qua website.  Cung cấp giao diện thuận tiện để gửi thông điệp hoặc liên hệ trực tiếp với nhà tuyển dụng. Quản Lý Tin Tuyển Dụng:  Cho phép nhà tuyển dụng quản lý các tin tuyển dụng đã đăng, bao gồm chỉnh sửa, xoá và cập nhật thông tin.  Cung cấp thống kê và báo cáo về số lượng ứng viên đã ứng tuyển cho từng tin đăng.

Đánh Giá và Phản Hồi:  Người tìm việc và nhà tuyển dụng có thể đánh giá và đăng phản hồi về nhau sau khi kết thúc quá trình tuyển dụng.  Hỗ trợ xây dựng một cộng đồng đáng tin cậy và minh bạch trên nền tảng tuyển dụng. Thông Báo Tự Động:  Cung cấp tính năng thông báo tự động cho nhà tuyển dụng và người tìm việc khi có thông tin mới liên quan đến việc làm hoặc ứng tuyển. Downloaded by MON MON ([e-mail]) lOMoARcPSD|39222638  Đảm bảo rằng cả hai bên đều nhận được thông tin kịp thời và không bỏ lỡ cơ hội.

Bảo Mật Thông Tin:  Đảm bảo an toàn và bảo mật cho thông tin cá nhân của người tìm việc và nhà tuyển dụng.  Áp dụng các biện pháp bảo mật để ngăn chặn sự truy cập trái phép vào hệ thống và lợi dụng thông tin. Giao Diện Thân Thiện:  Xây dựng giao diện dễ sử dụng và thân thiện với người dùng, bao gồm cả trên máy tính và thiết bị di động.  Đảm bảo trải nghiệm người dùng mượt mà và hiệu quả.

Hỗ Trợ Khách Hàng:  Cung cấp các kênh hỗ trợ khách hàng như email, điện thoại, hoặc chat trực tuyến để giải đáp thắc mắc và xử lý các vấn đề phát sinh.  Các yêu cầu chức năng trên sẽ là cơ sở để xây dựng và phát triển hệ thống website tuyển dụng và tìm việc trực tuyến một cách toàn diện và hiệu quả.3 Các yêu cầu phi chức năng 1. Hiệu suất:  Hệ thống cần đảm bảo khả năng xử lý lớn và đồng thời của dữ liệu để đảm bảo trải nghiệm người dùng mượt mà và không bị gián đoạn.  Thời gian phản hồi của hệ thống cần được giữ ở mức thấp, đảm bảo việc truy cập và sử dụng website luôn nhanh chóng và hiệu quả.

Bảo mật:  Hệ thống cần có các biện pháp bảo mật mạnh mẽ để bảo vệ thông tin cá nhân của người dùng, bao gồm mã hóa dữ liệu, kiểm soát truy cập và cơ chế xác thực.  Phải có cơ chế sao lưu và khôi phục dữ liệu định kỳ để đảm bảo an toàn và tin cậy cho dữ liệu. Tương thích: Downloaded by MON MON ([e-mail]) lOMoARcPSD|39222638  Website cần phải tương thích với nhiều loại trình duyệt web phổ biến như Chrome, Firefox, Safari và Edge để đảm bảo mọi người dùng có thể truy cập và sử dụng một cách thuận tiện.  Giao diện của website cũng cần phải tương thích với các thiết bị di động như điện thoại thông minh và máy tính bảng.

Dễ dàng điều hướng:  Giao diện người dùng cần phải được thiết kế sao cho dễ dàng điều hướng và tìm kiếm thông tin, giúp người dùng tìm được thông tin một cách nhanh chóng và thuận tiện. Dễ dàng sử dụng:  Giao diện người dùng cần phải được thiết kế đơn giản và dễ sử dụng, giúp người dùng mới dễ dàng tiếp cận và sử dụng hệ thống một cách tự nhiên. Thân thiện với công cụ tìm kiếm (SEO):  Cần thiết kế website sao cho thân thiện với công cụ tìm kiếm (SEO), giúp website dễ dàng được tìm thấy và xếp hạng cao trên các trang kết quả tìm kiếm. Downloaded by MON MON ([e-mail]) lOMoARcPSD|39222638 CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Biểu đồ use case Downloaded by MON MON (monmon2@gmail.2 Mô hình hóa use case 2.1 Biểu đồ use case tổng quát Dang nhap Dang ki tai khoan Lay lai mat khau Thay doi mat khau Xem thong tin tai khoan Cap nhat thong tin ca nhan Dang xuat Tao trang Them nguoi chinh sua Nguoi dung Xem chi tiet trang Xuat ma nguon cua trang Xoa trang Chinh sua trang Tao loi tat trang Tao ban sao chep trang Luu trang Tim kiem trang Hình 2.1:Biểu đồ use case tổng quát Downloaded by MON MON (monmon2@gmail.2 Biểu đồ use case phân rã Dang ki tai khoan Thay doi mat khau <<include>> Lay lai mat khau <<include>> Cap nhat thong tin ca nhan <<include>> <<include>> Xem thong tin tai khoan <<include>> Nguoi dung Dang nhap <<include>> Dang xuat Hình 2.2: Biểu đồ use case phân rã quản lí tài khoản Them nguoi chinh sua Xoa trang <<include>> Xuat ma nguon cua trang <<include>> Tao trang <<include>> <<include>> Chinh sua trang <<include>> <<include>> <<include>> Xem chi tiet trang <<include>> <<include>> Tao loi tat trang <<include>> Nguoi dung <<include>> Dang nhap Tao ban sao chep trang <<include>> <<include>> Luu trang Tim kiem trang Hình 2.3: Biểu đồ use case phân ra quản lí trang giao diện Downloaded by MON MON (monmon2@gmail.3 Mô tả chi tiết use case 2.1 Use case đăng ký tài khoản Bảng 2.1: Mô tả chi tiết use case đăng ký tài khoản Tên use case Đăng ký tài khoản.

Tác nhân Người dùng. Mô tả vắn tắt Use case này cho phép người dùng đăng ký tài khoản sử dụng ứng dụng. Luồng cơ bản - Use case này bắt đầu khi người dùng kích vào nút “Đăng ký” trên màn hình. Hệ thống sẽ yêu cầu nhập các thông tin (Email, họ, tên) để tạo tài khoản - Người dùng kích vào nút “Đăng ký”.

Hệ thống kiểm tra thông tin đăng ký, nếu hợp lệ hiển thị thông báo thành công, chuyển đến màn hình Đăng nhập. Use case kết thúc. Luồng rẽ nhánh - Tại bất kì thời điểm nào trong quá trình thực hiện use case nếu không kết nối được với cơ sở dữ liệu thì hệ thống sẽ hiển thị một thông báo lỗi và use case kết thúc. - Người dùng hủy thao tác, ứng dụng trở lại trạng thái ban đầu.

- Ứng dụng kiểm tra thông tin đăng ký, nếu không hợp lệ hiển thị thông báo lỗi, yêu cầu nhập lại. Tiền điều kiện Người dùng truy cập ứng dụng Hậu điều kiện Người dùng đăng ký tài khoản thành công sẽ có một bản ghi mới trong bảng User Yêu cầu đặc biệt Người dùng cần nhập đúng các thông tin yêu cầu để tạo tài khoản. Điểm mở rộng Không có.4: Biểu đồ hoạt động mô tả use case đăng ký tài khoản Downloaded by MON MON (monmon2@gmail.2 Use case đăng nhập Bảng 2.2: Mô tả chi tiết use case đăng nhập Tên use case Đăng nhập. Tác nhân Người dùng.

Mô tả vắn tắt Use case này cho phép người dùng đăng nhập vào hệ thống. Luồng cơ bản - Use case này bắt đầu khi người dùng ấn vào nút “Đăng nhập” trên màn hình. Hệ thống sẽ yêu cầu người dùng nhập tên đăng nhập và mật khẩu. - Người dùng nhập đầy đủ thông tin yêu cầu và kích vào nút “Đăng nhập”.

Hệ thống sẽ kiểm tra thông tin đăng nhập so với thông tin trong bảng User, nếu có tài khoản trong bảng User thì sẽ được đăng nhập và chuyển đến trang chủ. Use case kết thúc. Luồng rẽ nhánh - Tại bất kì thời điểm nào trong quá trình thực hiện use case nếu không kết nối được với cơ sở dữ liệu thì hệ thống sẽ hiển thị một thông báo lỗi và use case kết thúc. - Khi người dùng nhập thiếu hoặc sai thông tin, hệ thống sẽ hiển thị thông báo lỗi và yêu cầu nhập lại.

Tiền điều kiện Người dùng đã được cấp tài khoản để sử dụng ứng dụng.