Báo cáo Đồ án 1: Xây dựng website chỉnh sửa ảnh trực tuyến - ĐH CNTT

Tải trọn bộ báo cáo đồ án 1 xây dựng website chỉnh sửa ảnh online. Tài liệu tham khảo đầy đủ cho sinh viên CNTT thực hiện đề tài tương tự.

• Tác giả: Nguyễn Lê Tuấn Nhật
• Người hướng dẫn: Đỗ Thị Thanh Tuyền
• Trường học: Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng Website Chỉnh sửa Ảnh Trực tuyến
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: TP. Hồ Chí Minh

Tóm tắt

I. Tổng quan về Đồ án Website Chỉnh sửa Ảnh Trực tuyến

Đồ án website chỉnh sửa ảnh trực tuyến là một dự án học tập được thực hiện bởi sinh viên Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin - ĐHQG TP.HCM. Đây là một nền tảng web hiện đại cho phép người dùng chỉnh sửa ảnh trực tiếp trên trình duyệt mà không cần cài đặt phần mềm phức tạp. Dự án được phát triển bằng các công nghệ frontend và backend tiên tiến như React, Node.js, Express, MongoDB và Firebase. Mục đích chính của đề tài là xây dựng một ứng dụng web chỉnh sửa ảnh đầy đủ chức năng, cung cấp trải nghiệm người dùng mượt mà, an toàn và dễ sử dụng. Với phạm vi bao gồm quản lý tài khoản, quản lý dự án, các công cụ chỉnh sửa ảnh, hệ thống hợp tác thời gian thực và hỗ trợ chatbot thông minh, đề tài này thực sự là một công trình học tập đáng kể trong lĩnh vực phát triển ứng dụng web.

1.1. Lý do chọn đề tài Chỉnh sửa Ảnh Trực tuyến

Chỉnh sửa ảnh trực tuyến ngày càng trở nên phổ biến trong thời đại số. Lý do chọn đề tài này xuất phát từ nhu cầu thực tế của người dùng hiện đại - họ muốn có công cụ chỉnh sửa ảnh dễ tiếp cận mà không cần phải cài đặt phần mềm nặng. Đây là cơ hội tốt để ứng dụng các kỹ năng lập trình web vào một dự án thực tế, đồng thời đáp ứng nhu cầu thị trường về công cụ biên tập ảnh hiện đại.

1.2. Mục đích và Đối tượng Nghiên cứu

Mục đích chính là phát triển platform chỉnh sửa ảnh web với các tính năng toàn diện. Đối tượng nghiên cứu bao gồm kiến trúc hệ thống MVC, thiết kế cơ sở dữ liệu NoSQL, xây dựng giao diện người dùng responsive, và cơ chế hợp tác thời gian thực. Đối tượng người dùng chính là những ai cần chỉnh sửa và thiết kế ảnh trực tuyến một cách nhanh chóng và tiện lợi.

II. Kiến trúc Hệ thống và Công nghệ Sử dụng

Dự án website chỉnh sửa ảnh trực tuyến được xây dựng trên nền tảng kiến trúc MVC (Model-View-Controller), đảm bảo tính rõ ràng, dễ bảo trì và mở rộng. Frontend sử dụng React để tạo giao diện tương tác động, HTML5 và CSS3 để thiết kế layout responsive, JavaScript để xử lý logic phía client. Backend được phát triển với Node.js và Express, cung cấp API RESTful mạnh mẽ. Cơ sở dữ liệu sử dụng MongoDB - một database NoSQL linh hoạt cho lưu trữ dữ liệu người dùng, dự án, ảnh và các thành phần thiết kế. Firebase được tích hợp để hỗ trợ xác thực người dùng và lưu trữ đám mây. Các công nghệ này kết hợp tạo nên một hệ thống web mạnh mẽ, tính năng đầy đủ với hiệu suất cao và khả năng mở rộng tốt.

2.1. Mô hình MVC trong Chỉnh sửa Ảnh

Mô hình MVC chia hệ thống thành ba phần riêng biệt. Model quản lý dữ liệu ảnh, người dùng, dự án trong MongoDB. View là giao diện React hiển thị công cụ chỉnh sửa ảnh cho người dùng. Controller xử lý logic của Express server, điều phối yêu cầu từ client và cập nhật dữ liệu. Cấu trúc này giúp phát triển hệ thống chỉnh sửa ảnh một cách có tổ chức, dễ test và bảo trì.

2.2. Các Công nghệ Chính

React cung cấp UI components tái sử dụng cho công cụ chỉnh sửa ảnh. Node.js và Express xử lý logic backend. MongoDB lưu trữ dữ liệu dự án chỉnh sửa người dùng. Firebase quản lý xác thực an toàn. HTML5 Canvas cung cấp khả năng vẽ và xử lý ảnh mức độ pixel cao, là nền tảng kỹ thuật cho các tính năng chỉnh sửa ảnh nâng cao.

III. Thiết kế Cơ sở Dữ liệu và Quản lý Dữ liệu

Thiết kế cơ sở dữ liệu cho đề tài chỉnh sửa ảnh trực tuyến sử dụng mô hình NoSQL MongoDB với nhiều bảng dữ liệu chính. Bảng User lưu thông tin người dùng, Project quản lý các dự án chỉnh sửa, Canvas chứa thông tin không gian làm việc, Image lưu trữ ảnh đã upload. Các bảng Background, Component, Text, Shape quản lý các phần tử thiết kế trong editor. Bảng GroupChat và Message hỗ trợ tính năng hợp tác và giao tiếp thời gian thực. Mỗi bảng được thiết kế tối ưu với các trường dữ liệu phù hợp, hỗ trợ quản lý dự án chỉnh sửa ảnh hiệu quả. Quan hệ giữa các bảng được thiết kế theo chuẩn, đảm bảo tính toàn vẹn dữ liệu và hỗ trợ các truy vấn phức tạp cần thiết.

3.1. Bảng Chính trong Hệ thống

Bảng Project là trung tâm, lưu tên, mô tả, thời gian tạo của mỗi dự án chỉnh sửa ảnh. Bảng Canvas chứa chiều rộng, chiều cao, các layer, màu nền. Bảng User lưu email, mật khẩu, username, ảnh đại diện. Bảng Image quản lý tên file, đường dẫn ảnh. Các bảng Component, Text, Shape lưu các đối tượng thiết kế với tọa độ, kích thước, màu sắc để hỗ trợ chỉnh sửa ảnh toàn diện.

3.2. Quản lý Dữ liệu và Bảo mật

Dữ liệu người dùng được bảo vệ bằng mật khẩu mã hóa và xác thực Firebase. Mỗi dự án chỉnh sửa ảnh được gắn với ID người dùng để kiểm soát quyền truy cập. Hệ thống quản lý quyền chia sẻ dự án giữa người dùng khác nhau. Sao lưu dữ liệu được thực hiện tự động, đảm bảo an toàn thông tin người dùng và các dự án chỉnh sửa quan trọng.

IV. Giao diện Người dùng và Tính năng Chính

Giao diện người dùng của website chỉnh sửa ảnh được thiết kế hiện đại, thân thiện và responsive với tất cả thiết bị. Màn hình Welcome chào mừng người dùng, Đăng nhập/Đăng ký xác thực tài khoản. Trang chủ hiển thị các dự án chỉnh sửa ảnh và template có sẵn. Màn hình Workplace là trung tâm với công cụ chỉnh sửa, bao gồm các thành phần Design cho hình dạng, Text để thêm chữ, Image để nhập ảnh, Background để đặt nền. Tính năng hợp tác thời gian thực cho phép nhiều người cùng làm việc trên một dự án, với hỗ trợ chatbot thông minh trả lời câu hỏi và tạo ảnh AI. Chế độ Dark Mode cung cấp trải nghiệm chỉnh sửa ảnh thoải mái vào buổi tối. Màn hình Thông tin cá nhân cho phép thay đổi username, mật khẩu, ảnh đại diện.

4.1. Các Màn hình Chính của Ứng dụng

Màn hình Welcome giới thiệu nền tảng. Màn hình Đăng ký/Đăng nhập với xác minh email an toàn. Màn hình Projects liệt kê tất cả dự án chỉnh sửa ảnh của người dùng. Màn hình Templates cung cấp các mẫu sẵn để bắt đầu nhanh. Màn hình Workplace là nơi người dùng chỉnh sửa ảnh chi tiết với các panel công cụ bên cạnh, thanh layer ở dưới, và preview ảnh ở giữa.

4.2. Tính năng Chỉnh sửa Ảnh Nâng cao

Ứng dụng cung cấp chỉnh sửa ảnh đầy đủ: thêm/xóa layer, tải lên ảnh, chỉnh sửa kích thước, xoay, lật. Công cụ design cho hình dạng, văn bản có định dạng. Hợp tác thời gian thực hiển thị con trỏ chuột người khác. Xuất file dạng PNG/JPG. Chia sẻ dự án với bạn bè qua link. Chatbot AI hỗ trợ người dùng chỉnh sửa ảnh hiệu quả và sinh ảnh AI từ mô tả.

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

CHƯƠNG 1. Lý do chọn đề tài. Mục đích của đề tài. Đối tượng nghiên cứu.

Đối tượng công nghệ. Đối tượng người dùng. Phạm vi nghiên cứu. Phạm vi môi trường.

Phạm vi chức năng. Các chức năng chính. Các công nghệ sử dụng. Ưu điểm và nhược điểm.

Ưu điểm và nhược điểm. Nhược điểm. Nhược điểm. Nhược điểm.

Nhược điểm. Nhược điểm. THIẾT KẾ HỆ THỐNG. Kiến trúc hệ thống.

Mô hình MVC. Thành phần trong hệ thống. Thiết kế sơ đồ lớp. Danh sách tác nhân.

Danh sách Use Case. Đặc tả Use Case. THIẾT KẾ CƠ SỞ DỮ LIỆU. Danh sách các bảng dữ liệu.

Chi tiết các bảng. Chi tiết bảng Project. Chi tiết bảng User. Chi tiết bảng Canvas.

Chi tiết bảng Background. Chi tiết bảng Component. Chi tiết bảng Image. Chi tiết bảng Text.

Chi tiết bảng Shape. Chi tiết bảng GroupChat. Chi tiết bảng Message. THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG.

Danh sách các màn hình. Chi tiết các màn hình. Màn hình welcome. Màn hình đăng nhập.

Màn hình đăng ký. Màn hình trang chủ. Màn hình Projects. Màn hình Templates.

Màn hình làm việc (Workplace). Màn hình thông tin cá nhân. Màn hình cài đặt. CÀI ĐẶT VÀ KIỂM THỬ.

HƯỚNG PHÁT TRIỂN. 98 TÀI LIỆU THAM KHẢO.100 DANH MỤC HÌNH ẢNH Hình 2. Tổng quan về HTML. Tổng quan về CSS.

Tổng quan về JavaScript. Tổng quan về Node. Tổng quan về Express. Tổng quan về React.

Tổng quan về MongoDB. Tổng quan về Firebase. Mô hình MVC. Sơ đồ tuần tự đăng ký.

Sơ đồ tuần tự đăng nhập. Sơ đồ tuần tự quên mật khẩu. Sơ đồ tuần tự xem thông tin cá nhân. Sơ đồ tuần tự thay đổi username.

Sơ đồ tuần tự thay đổi mật khẩu. Sơ đồ tuần tự thay đổi ảnh đại diện. Sơ đồ tuần tự xem dự án. Sơ đồ tuần tự tạo dự án.

Sơ đồ tuần tự đổi tên dự án. Sơ đồ tuần tự xóa dự án. Sơ đồ tuần tự truy cập dự án (mở dự án). Sơ đồ tuần tự chia sẻ dự án.

Sơ đồ tuần tự công khai dự án. Sơ đồ tuần tự tải về. Sơ đồ tuần tự nhắn tin. Use Case sử dụng Chatbot.

Sơ đồ tuần tự thêm trang. Sơ đồ tuần tự xóa trang. Sơ đồ tuần tự thêm background. Sơ đồ tuần tự upload background.

Sơ đồ tuần tự upload hình ảnh. Sơ đồ tuần tự thêm đối tượng. Sơ đồ tuần tự di chuyển đối tượng. Sơ đồ tuần tự thay đổi kích thước đối tượng.

Sơ đồ tuần tự xoay đối tượng. Sơ đồ tuần tự xóa đối tượng. Màn hình welcome. Màn hình đăng nhập.

Màn hình xác minh tài khoản để lấy lại mật khẩu. Màn hình đăng ký. Màn hình xác minh email. Màn hình trang chủ.

Hộp thoại tạo dự án. Màn hình Projects. Màn hình Templates. Màn hình làm việc (Workplace).

Thành phần Design. Thành phần Shape. Giao diện chỉnh sửa hình dạng (Shape). Thành phần Project.

Thành phần Text. Giao diện chỉnh sửa văn bản. Thành phần Image. Chỉnh sửa ảnh (1).

Chỉnh sửa ảnh (2). Giao diện chỉnh sửa hình ảnh. Thành phần Background. Thêm người vào dự án.

Kết quả tải về. Chia sẻ dự án. Công khai dự án và quản lý người tham gia. Di chuyển chuột thời gian thực.

Thao tác với đối tượng thời gian thực. Nhắn tin trong dự án. Chatbot hỗ trợ trả lời. Chatbot hỗ trợ tạo hình ảnh.

Màn hình thông tin cá nhân. Thay đổi username. Thay đổi mật khẩu. Màn hình cài đặt.

Màn hình đăng nhập (dark mode). Màn hình đăng ký (dark mode). Màn hình trang chủ (dark mode). Màn hình Project (dark mode).

Màn hình Templates (dark mode). Màn hình làm việc (Workplace) (dark mode). Màn hình thông tin cá nhân (dark mode). Màn hình cài đặt (dark mode).94 DANH MỤC BẢNG Bảng 3.

Danh sách tác nhân. Danh sách các Use Case. Đặc tả Use Case đăng ký. Đặc tả Use Case đăng nhập.

Đặc tả Use Case quên mật khẩu. Đặc tả Use Case xem thông tin cá nhân. Đặc tả Use Case thay đổi username. Đặc tả Use Case thay đổi mật khẩu.

Đặc tả Use Case thay đổi ảnh đại diện. Đặc tả Use Case xem dự án. Đặc tả Use Case tạo dự án. Đặc tả Use Case đổi tên dự án.

Đặc tả Use Case xóa dự án. Đặc tả Use Case truy cập dự án (mở dự án). Đặc tả Use Case chia sẻ dự án. Đặc tả Use Case công khai dự án.

Đặc tả Use Case tải về. Đặc tả Use Case nhắn tin. Đặc tả Use Case sử dụng chatbot. Đặc tả Use Case thêm trang.

Đặc tả Use Case xóa trang. Đặc tả Use Case thêm background. Đặc tả Use Case upload background. Đặc tả Use Case upload hình ảnh.

Đặc tả Use Case thêm đối tượng. Đặc tả Use Case di chuyển đối tượng. Đặc tả Use Case thay đổi kích thước đối tượng. Đặc tả Use Case xoay đối tượng.

Danh sách các bảng dữ liệu. Chi tiết bảng Project. Chi tiết bảng User. Chi tiết bảng Canvas.5 Chi tiết bảng Background.

Chi tiết bảng Component. Chi tiết bảng Image. Chi tiết bảng Text. Chi tiết bảng Shape.

Chi tiết bảng GroupChat. Chi tiết bảng Message. Danh sách các màn hình. Thành phần màn hình welcome.

Thành phần màn hình đăng nhập. Thành phần màn hình lấy lại mật khẩu. Thành phần màn hình đăng ký. Thành phần màn hình xác minh email.

Thành phần màn hình trang chủ. Thành phần Profile modal. Thành phần hộp thoại tạo dự án. Thành phần màn hình Projects.

Thành phần màn hình Templates. Thành phần màn hình làm việc (Workplace). Thành phần Design. Thành phần Shape.

Thành phần giao diện chỉnh sửa hình dạng (Shape). Thành phần Project. Thành phần Text. Thành phần giao diện chỉnh sửa văn bản.

Thành phần Image. Thành phần giao diện chỉnh sửa ảnh. Thành phần thanh công cụ chỉnh sửa ảnh. Thành phần Background.

Thành phần hộp thoại thêm người vào dự án. Thành phần hộp thoại tải dự án. Thành phần hộp thoại chia sẻ dự án. Thành phần hộp thoại công khai dự án và quản lý người tham gia.

Thành phần màn hình thông tin cá nhân. Thành phần khung thay đổi username. Thành phần hộp thoại thay đổi mật khẩu. Thành phần màn hình cài đặt.

Kết quả kiểm thử.95 TÓM TẮT ĐỒ ÁN Hiện nay, người dùng có nhu cầu ngày càng cao về việc chỉnh sửa ảnh nhanh chóng, dễ dàng mà không cần phần mềm phức tạp hoặc tốn chi phí. Tuy nhiên, một trong những thách thức lớn đối với các website chỉnh sửa ảnh hiện nay là làm sao để cung cấp một công cụ chỉnh sửa ảnh mạnh mẽ nhưng vẫn dễ sử dụng và dễ tiếp cận đối với mọi người dùng, từ người mới bắt đầu đến những người có kinh nghiệm. Mặc dù nhiều website chỉnh sửa ảnh trực tuyến hiện nay đã cung cấp các tính năng cơ bản như cắt, xoay, thay đổi kích thước nhưng vẫn thiếu các công cụ chỉnh sửa chuyên sâu và tính năng hỗ trợ người dùng dễ dàng trong quá trình sáng tạo và chia sẻ. Hơn nữa, một số nền tảng chưa thực sự tối ưu trong việc nâng cao trải nghiệm người dùng và còn nhiều hạn chế trong việc hợp tác giữa nhiều người.

Để giải quyết vấn đề này, việc xây dựng một website chỉnh sửa ảnh trực tuyến toàn diện, dễ sử dụng và cung cấp các tính năng mạnh mẽ là cần thiết. Website này sẽ cung cấp các công cụ chỉnh sửa ảnh cơ bản lẫn nâng cao, tất cả đều có thể thao tác dễ dàng ngay trên trình duyệt mà không cần cài đặt phần mềm. Đặc biệt, website sẽ cho phép nhiều người cùng làm việc trên một dự án, từ đó tạo ra những tác phẩm ảnh độc đáo và chuyên nghiệp trong thời gian ngắn. Xây dựng Website chỉnh sửa ảnh là một đề tài không chỉ có tính ứng dụng cao mà còn mở ra nhiều cơ hội phát triển trong tương lai.

Đây là một lĩnh vực kết hợp giữa công nghệ, sáng tạo và nhu cầu thực tiễn, hứa hẹn mang lại nhiều lợi ích cho cả người sử dụng và người phát triển. Lý do chọn đề tài Trong bối cảnh hiện nay, khi nhu cầu chỉnh sửa ảnh đang ngày càng trở nên phổ biến và đa dạng, từ cá nhân cho đến doanh nghiệp, việc chỉnh sửa ảnh đã trở thành một nhu cầu không thể thiếu. Dù là những bức ảnh selfie, ảnh gia đình, hay các hình ảnh dùng trong công việc quảng cáo, thiết kế, mọi người đều cần một công cụ tiện lợi để chỉnh sửa. Việc xây dựng một website chỉnh sửa ảnh sẽ đáp ứng nhu cầu đó, tạo ra một giải pháp dễ tiếp cận cho tất cả người dùng mà không yêu cầu họ phải cài đặt phần mềm phức tạp.

Với sự phát triển không ngừng của công nghệ web, việc tạo ra một công cụ chỉnh sửa ảnh trực tuyến trở nên khả thi hơn bao giờ hết. Một trong những điểm mạnh của việc xây dựng website chỉnh sửa ảnh chính là khả năng phục vụ cho nhiều đối tượng người dùng khác nhau. Đối với người dùng cá nhân, đây là công cụ giúp họ nhanh chóng chỉnh sửa những bức ảnh selfie hay ảnh cuộc sống hàng ngày để chia sẻ lên mạng xã hội. Đối với các doanh nghiệp, website này có thể trở thành một công cụ hỗ trợ trong việc tạo ra những bức ảnh quảng cáo, hình ảnh sản phẩm đẹp mắt để thu hút khách hàng.

Với sự phát triển mạnh mẽ của các nền tảng mạng xã hội như Instagram, Facebook, hay TikTok, việc chia sẻ những khoảnh khắc cuộc sống đã trở thành một phần không thể thiếu. Người dùng ngày càng đòi hỏi các công cụ chỉnh sửa ảnh dễ sử dụng, nhanh chóng và hiệu quả để tạo ra những bức ảnh ấn tượng. Chính vì vậy, yêu cầu đặt ra là cần có một website chỉnh sửa ảnh có thể giúp người dùng dễ dàng tạo ra các sản phẩm hình ảnh đẹp, phù hợp với xu hướng. Ngoài ra, việc lựa chọn đề tài này cũng giúp chúng em học hỏi và phát triển kỹ năng lập trình, đặc biệt là trong các lĩnh vực xử lý ảnh, giao diện người dùng (UI/UX), và tích hợp công nghệ web hiện đại.

Đề tài xây dựng website chỉnh sửa ảnh này là một thử thách nhưng cũng là một cơ hội tuyệt vời để củng cố kiến thức và nâng cao năng lực chuyên môn. Mục đích của đề tài 2 Mục đích của đề tài "Xây dựng Website chỉnh sửa ảnh" là tạo ra một nền tảng trực tuyến giúp người dùng dễ dàng chỉnh sửa, tùy chỉnh và nâng cao chất lượng hình ảnh mà không cần cài đặt phần mềm phức tạp. Đề tài này hướng đến việc cung cấp một công cụ tiện ích, dễ sử dụng nhưng vẫn mạnh mẽ, đáp ứng được nhu cầu ngày càng tăng về việc chỉnh sửa ảnh của các cá nhân, doanh nghiệp, và các chuyên gia trong lĩnh vực sáng tạo:  Xây dựng website chỉnh sửa ảnh với giao diện trực quan, thân thiện, đáp ứng các chức năng cần thiết; giúp nâng cao trải nghiệm người dùng.  Hỗ trợ làm việc nhóm.