Đồ án 1: Báo cáo xây dựng website hợp tác thiết kế - SVTH: Cao Dương Lâm

Đồ án xây dựng website hợp tác thiết kế online, giải pháp kết nối nhà thiết kế và khách hàng hiệu quả, tối ưu quy trình làm việc chuyên nghiệp.

• Tác giả: Cao Dương Lâm
• Người hướng dẫn: Th.S Trần Anh Dũng
• Trường học: Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Kỹ sư Ngành Kỹ thuật Phần mềm
• Đề tài: Xây dựng Website Hợp tác Thiết kế
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Xây dựng Website Hợp tác Thiết kế Online

Đồ án xây dựng website hợp tác thiết kế online là một dự án học tập tại Trường Đại học Công nghệ Thông tin - ĐHQG TP. Hồ Chí Minh, được thực hiện bởi các sinh viên ngành Kỹ thuật Phần mềm. Dự án này nhằm mục đích phát triển nền tảng web cho phép các nhà thiết kế hợp tác trong việc tạo và chia sẻ các dự án thiết kế trực tuyến. Nền tảng này cung cấp các công cụ tiên tiến để hỗ trợ quá trình thiết kế hợp tác, từ việc tạo dự án mới, quản lý các phiên bản, cho đến chia sẻ và công bố công khai. Với sự phát triển của công nghệ web hiện đại, việc xây dựng website thiết kế online hợp tác đã trở thành một giải pháp thiết thực cho cộng đồng các nhà thiết kế đang tìm kiếm nền tảng làm việc chuyên nghiệp và hiệu quả.

1.1. Lý do chọn đề tài

Trong bối cảnh đại dịch và chuyển đổi số, nhu cầu làm việc từ xa và hợp tác trực tuyến ngày càng gia tăng. Các nhà thiết kế cần một nền tảng tập trung cho phép họ cộng tác với các thành viên khác, quản lý dự án thiết kế và chia sẻ tác phẩm một cách dễ dàng. Đề tài này được chọn để giải quyết bài toán thực tiễn trong lĩnh vực thiết kế đồ họa và xây dựng hệ thống quản lý dự án thiết kế chuyên nghiệp.

1.2. Đối tượng người dùng hướng tới

Nền tảng này được phát triển dành cho các nhà thiết kế chuyên nghiệp, freelancer và sinh viên ngành thiết kế. Trang web cung cấp các công cụ cần thiết để quản lý dự án thiết kế online, cho phép người dùng tạo, chỉnh sửa, chia sẻ dự án và hợp tác với các thành viên khác một cách hiệu quả, từ đó nâng cao năng suất làm việc.

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

Website hợp tác thiết kế online được xây dựng dựa trên mô hình kiến trúc MVC (Model-View-Controller), đảm bảo tính modular và dễ bảo trì. Hệ thống sử dụng Node.js cho backend, Express.js để xây dựng API REST, và React cho frontend nhằm cung cấp trải nghiệm người dùng động và phản hồi nhanh. Để lưu trữ dữ liệu, dự án tích hợp Firebase - một nền tảng backend-as-a-service cung cấp cơ sở dữ liệu thời gian thực, xác thực người dùng và lưu trữ tệp tin. Kiến trúc này được thiết kế để hỗ trợ tính năng hợp tác real-time, cho phép nhiều người dùng làm việc trên cùng một dự án thiết kế mà không gặp xung đột dữ liệu.

2.1. Frontend và UI UX Design

Giao diện người dùng được phát triển bằng React, cung cấp các màn hình trực quan bao gồm welcome, đăng nhập, quản lý dự án và bộ công cụ thiết kế trực tuyến. Mỗi màn hình được thiết kế để tối ưu hóa trải nghiệm người dùng, với giao diện responsive hoạt động tốt trên các thiết bị khác nhau, đảm bảo người dùng có thể làm việc thiết kế online từ mọi nơi.

2.2. Backend và Cơ sở dữ liệu

Backend được xây dựng với Node.js và Express.js, cung cấp API để quản lý người dùng, dự án thiết kế và file. Firebase Realtime Database cho phép hợp tác real-time, trong khi Firebase Storage lưu trữ các tệp hình ảnh và dự án. Kiến trúc backend microservices này đảm bảo khả năng mở rộng cao cho nền tảng thiết kế hợp tác.

III. Các Tính năng Chính của Nền tảng

Website hợp tác thiết kế online cung cấp một bộ tính năng toàn diện để hỗ trợ quy trình thiết kế từ đầu đến cuối. Người dùng có thể tạo và quản lý nhiều dự án thiết kế, mỗi dự án chứa nhiều trang và các phần tử thiết kế. Nền tảng hỗ trợ tính năng cộng tác real-time, cho phép nhiều nhà thiết kế làm việc cùng lúc trên một dự án mà không gặp xung đột dữ liệu. Các nhà thiết kế có thể chia sẻ dự án với người khác, mời cộng tác viên và quản lý quyền truy cập. Ngoài ra, hệ thống cung cấp tính năng upload hình ảnh, thay đổi kích thước phần tử, xoay quay và các công cụ chỉnh sửa nâng cao để hỗ trợ quy trình thiết kế chuyên nghiệp.

3.1. Quản lý Dự án và Mẫu thiết kế

Người dùng có thể tạo dự án mới từ blank hoặc sử dụng mẫu thiết kế sẵn có để tăng tốc độ làm việc. Hệ thống cho phép xem danh sách dự án, xóa dự án và xuất bản dự án công khai. Mỗi dự án được lưu trữ an toàn trên Firebase với bản sao lưu tự động, đảm bảo dữ liệu của người dùng luôn được bảo vệ.

3.2. Công cụ Thiết kế và Hợp tác Real time

Bộ công cụ thiết kế bao gồm thêm trang, chỉnh sửa background, di chuyển phần tử, thay đổi kích thước, xoay quay và tải xuống dự án. Tính năng chat hợp tác cho phép các thành viên nhóm giao tiếp trực tiếp trong dự án, tạo ra một môi trường làm việc hợp tác liền mạch cho nhà thiết kế online.

IV. Hướng Phát triển và Triển khai Tương lai

Dự án website hợp tác thiết kế online có đủ tiềm năng để mở rộng quy mô và thêm các tính năng mới. Các hướng phát triển tương lai bao gồm tích hợp AI/Machine Learning để đề xuất thiết kế thông minh, hỗ trợ nhiều định dạng tệp như SVG và PSD, phát triển ứng dụng mobile cho iOS và Android, và tích hợp các công cụ thiết kế nâng cao như vector editing, typography tools. Ngoài ra, có thể phát triển marketplace cho các nhà thiết kế để chia sẻ mẫu thiết kế premium và kiếm thu nhập từ tác phẩm của họ. Việc cải thiện hiệu suất hệ thống, tăng cường bảo mật dữ liệu và mở rộng hỗ trợ ngôn ngữ sẽ giúp nền tảng trở thành giải pháp hàng đầu cho hợp tác thiết kế online.

4.1. Tính năng Nâng cao dành cho Người dùng Pro

Nền tảng có thể cung cấp gói đăng ký Pro với các tính năng cao cấp như dung lượng lưu trữ không giới hạn, chia sẻ dự án private nâng cao, hỗ trợ độc quyền. Các nhà thiết kế chuyên nghiệp có thể sử dụng tính năng xuất bản nâng cao và quản lý nhóm dự án để tối ưu hóa quy trình làm việc thiết kế online của họ.

4.2. Cộng đồng và Sinh thái Hợp tác

Phát triển cộng đồng người dùng mạnh mẽ bằng cách tạo forum, blog và tài nguyên hướng dẫn giúp nhà thiết kế học hỏi và chia sẻ kinh nghiệm. Tích hợp sự kiện thiết kế, cuộc thi online và chương trình đào tạo sẽ làm cho nền tảng trở thành hub thiết kế hợp tác toàn cầu, thúc đẩy sự hợp tác thiết kế online ở quy mô lớn.

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

MỞ ĐẦU 1. Lý do chọn đề tài Với sự phát triển mạnh mẽ của công nghệ và nhu cầu ngày càng cao về các sản phẩm thiết kế chất lượng, việc hợp tác hiệu quả giữa các nhà thiết kế đã trở thành một yếu tố then chốt trong quy trình sáng tạo. Tuy nhiên, thực tế cho thấy các công cụ thiết kế hiện nay thường thiếu đi tính năng hỗ trợ làm việc nhóm thời gian thực, khiến việc phối hợp giữa các thành viên gặp nhiều khó khăn. Điều này không chỉ làm giảm hiệu suất làm việc mà còn ảnh hưởng đến chất lượng sản phẩm cuối cùng, đặc biệt trong các dự án đòi hỏi sự sáng tạo và tương tác liên tục giữa các thành viên.

Đề tài xây dựng một nền tảng thiết kế đồ họa trực tuyến hỗ trợ hợp tác thời gian thực được chọn nhằm giải quyết những hạn chế này. Website được thiết kế để giúp các nhà thiết kế dễ dàng làm việc cùng nhau một cách hiệu quả hơn, dù ở bất kỳ đâu, bằng cách cung cấp các công cụ và tính năng hỗ trợ đồng bộ thời gian thực. Điều này không chỉ giúp tối ưu hóa quy trình thiết kế mà còn cải thiện chất lượng sản phẩm, đáp ứng tốt hơn nhu cầu của người dùng trong các ngành sáng tạo. Ngoài ý nghĩa thực tế, đề tài còn mang lại cơ hội để nhóm nghiên cứu tiếp cận và học hỏi thêm về lĩnh vực đồ họa – một lĩnh vực đầy tiềm năng và luôn đổi mới.

Việc tham gia vào đề tài này giúp nhóm phát triển không chỉ về mặt kiến thức chuyên môn mà còn về kỹ năng giải quyết vấn đề, khả năng áp dụng các công nghệ hiện đại vào thực tế. Đây là một bước tiến quan trọng, đặc biệt trong bối cảnh công nghiệp hóa – hiện đại hóa ngày nay, khi công nghệ và sự sáng tạo trở thành nền tảng của mọi ngành nghề. Hơn nữa, đề tài có tiềm năng phục vụ rộng rãi cho cả sinh viên và những người đi làm. Trong bất kỳ lĩnh vực nào, từ quảng cáo, truyền thông đến sản xuất nội dung, việc sử dụng các ứng dụng thiết kế là điều không thể thiếu.

Bên cạnh đó, nhóm dự định tích hợp thêm tính năng Chatbox để hỗ trợ người dùng trao đổi thông tin ngay trên nền tảng, tạo ra sự kết nối và tương tác thuận lợi giữa các thành 11 viên. Đây không chỉ là một điểm khác biệt mà còn là yếu tố giúp nâng cao trải nghiệm người dùng, bắt kịp xu hướng công nghệ hiện nay. Tóm lại, đề tài không chỉ mang lại giá trị thực tế mà còn mở ra nhiều cơ hội nghiên cứu và phát triển trong lĩnh vực đồ họa và công nghệ. Sản phẩm không chỉ dừng lại ở việc hỗ trợ học tập và làm việc mà còn góp phần tạo nên một nền tảng hợp tác sáng tạo, kết nối cộng đồng và thúc đẩy sự đổi mới trong ngành thiết kế.

Mục đích nghiên cứu 1. Khách quan - Đánh giá hiệu quả và tiện ích: Website cải thiện hiệu suất làm việc nhóm với tính năng đồng bộ thời gian thực, giao diện thân thiện, và công cụ đa dạng. - Đánh giá tin cậy và an toàn: Hệ thống bảo mật dữ liệu, hỗ trợ lưu trữ và khôi phục dự án, đảm bảo tin cậy cho người dùng. - Đánh giá tác động đến sáng tạo: Tính năng hợp tác và Chatbox tích hợp khuyến khích trao đổi ý tưởng, nâng cao sáng tạo nhóm.

- Đánh giá tối ưu tài nguyên: Website giảm phụ thuộc phần mềm offline, tiết kiệm tài nguyên và tối ưu quy trình làm việc. Chủ quan - Khám phá trải nghiệm và thái độ của người dùng: Khám phá trải nghiệm, thái độ và sự thích thú của các nhà thiết kế khi sử dụng website hợp tác thiết kế đồ họa, đặc biệt trong việc làm việc nhóm và phát triển ý tưởng sáng tạo. - Tìm hiểu cách tận dụng lợi ích của nền tảng: Tìm hiểu cách người dùng tận dụng các lợi ích của nền tảng, bao gồm tiết kiệm thời gian, nâng cao hiệu suất và tối ưu hóa quy trình thiết kế. - Nghiên cứu và cải tiến tính năng: Nghiên cứu ý kiến về giao diện và tính năng của website, đồng thời đề xuất cải tiến để nâng cao trải nghiệm người dùng và đáp ứng tốt hơn nhu cầu 12 hợp tác thiết kế.

Đối tượng nghiên cứu 1. Các công nghệ nghiên cứu - Đối với thiết kế hệ thống: Client-server, kết nối và trao đổi website đến database thông qua RESTful API. - Đối với Database: MongoDb - Đối với Website: Node.js, ReactJS, Npm. - Đối với server: Node.

Đối tượng sử dụng đề tài hướng đến - Website hướng tới các nhà thiết kế đồ họa chuyên nghiệp, sinh viên ngành thiết kế, và những người yêu thích sáng tạo muốn cộng tác trong các dự án thiết kế. - Cụ thể, nền tảng phục vụ nhóm thiết kế làm việc từ xa, giảng viên và sinh viên trong môi trường học thuật, cũng như các doanh nghiệp cần công cụ làm việc nhóm hiệu quả. - Mục tiêu là cung cấp một nền tảng thiết kế trực tuyến tiện lợi, tiết kiệm thời gian, tăng cường tính sáng tạo, và đảm bảo sự hợp tác hiệu quả trong các dự án đa dạng. Phạm vi nghiên cứu 1.

Phạm vi môi trường - Website 1. Phạm vi chức năng - Tải lên và xem trước ảnh - Tải lên ảnh: Cho phép người dùng tải ảnh từ máy tính. - Xem trước ảnh: Hiển thị ảnh đã tải lên trong một giao diện chỉnh sửa, cho phép phóng to, thu nhỏ, và kéo thả. - Chức năng đăng ký, đăng nhập tài khoản - Đăng ký: Cho phép người dùng tạo tài khoản để sử dụng website.

13 - Đăng nhập: Cho phép người dùng đăng nhập tài khoản vào website để sử dụng các chức năng của hệ thống. - Khởi tạo dự án: Khi người dùng đăng nhập thành công vào hệ thống thì có thể tạo ra các dự án cho riêng mình. - Kéo thả: Có thể kéo thả các Component như hình ảnh, các loại hình và chữ trên trang làm việc. - Điều chỉnh màu sắc: Thay đổi bão hòa, cân bằng màu sắc, và điều chỉnh các kênh màu (đỏ, xanh, xanh lục).

- Thêm văn bản và hình ảnh - Chèn văn bản: Thêm văn bản vào ảnh với các tùy chọn về kiểu chữ, kích thước, màu sắc và hiệu ứng bóng. - Chèn hình ảnh: Thêm các hình ảnh, biểu tượng hoặc hình dán từ thư viện có sẵn hoặc tải lên từ thiết bị. - Chỉnh sửa tự do: Cho phép người dùng có thể tùy chỉnh các đối tượng trên trang làm việc. - Làm dự án nhóm và chia sẻ trực tuyến - Cộng tác nhóm: Cung cấp tính năng làm việc nhóm, cho phép nhiều người cùng chỉnh sửa một bức ảnh hoặc dự án cùng lúc.

Người dùng có thể mời bạn bè hoặc đồng nghiệp tham gia vào dự án qua liên kết chia sẻ. - Bình luận và góp ý: Cho phép các thành viên trong nhóm để lại bình luận và góp ý trực tiếp trên ảnh, giúp dễ dàng trao đổi ý tưởng và chỉnh sửa. - Chia sẻ trực tuyến: Sau khi hoàn thành, người dùng có thể chia sẻ ảnh hoặc dự án qua mạng xã hội, email hoặc tạo liên kết để người khác xem hoặc tải về. 14 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.

HTML • HTML là gì? HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu được sử dụng để cấu trúc nội dung trên web. HTML không phải là một ngôn ngữ lập trình, mà là một ngôn ngữ dùng để mô tả cấu trúc và nội dung của một trang web; điều này cũng có nghĩa là HTML không thể thực hiện các chức năng “động”.1 Tổng quan về HTML • Ưu điểm và nhược điểm ● Ưu điểm o Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn. o Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay. o Học HTML khá đơn giản.

o Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao. o Sử dụng mã nguồn mở, hoàn toàn miễn phí. o HTML là chuẩn web được vận hành bởi World Wide Web Consortium (W3C). o Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.

● Nhược điểm 15 o Chỉ được áp dụng chủ yếu cho web tĩnh. Nếu muốn tạo các tính năng động, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như: PHP). o Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer. o Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được tag mới.

o Do đó, dù trong HTML document có sử dụng các tag này thì trình duyệt cũng không đọc được). o Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML. • Vai trò HTML là một loại ngôn ngữ đánh dấu siêu văn bản, nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một hệ thống hoàn chỉnh. Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành phần trang Web.

Đồng thời, nó còn hỗ trợ khai báo các File kỹ thuật số như nhạc, Video, hình ảnh,… Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố trong văn bản, bạn sẽ cần đến HTML. Lập trình viên có thể lựa chọn ngôn ngữ lập trình riêng cho Website tùy vào mục đích sử dụng. Nhưng HTML thực chất chứa những yếu tố cần thiết cho mọi thể loại Website. Trang Web của bạn sẽ cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập.

Điều này đúng dù trang của bạn xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu. CSS • CSS là gì? CSS (Cascading Style Sheets) là một ngôn ngữ định dạng và trang trí cho các trang web. Nó được sử dụng để định dạng và trình bày các phần tử trên trang web, bao gồm màu sắc, font chữ, khoảng cách, bố cục, hiệu ứng hình ảnh và nhiều hơn nữa. CSS được phát triển để tách biệt phần nội dung và phần trình bày của trang web, giúp cho các nhà phát triển web có thể quản lý và cập nhật giao diện của trang web 16 một cách dễ dàng hơn.

Nó là một phần quan trọng trong thiết kế web hiện đại và được sử dụng rộng rãi trên các trang web trên toàn thế giới.2 Tổng quan về CSS • Ưu điểm ● Tách biệt giữa nội dung và kiểu dáng cho website. ● Kiểm soát nội dung: CSS cho phép bạn kiểm soát toàn bộ giao diện của website một cách chính xác và dễ dàng.