Đồ án tốt nghiệp: Xây dựng website mạng xã hội về hình ảnh - ĐH SPKT TPHCM

Tải miễn phí đồ án tốt nghiệp xây dựng website mạng xã hội về hình ảnh. Báo cáo chi tiết quá trình phân tích, thiết kế và triển khai đầy đủ chức năng.

• Tác giả: Phạm Phước Đặng Toàn
• Người hướng dẫn: TS. Lê Vĩnh Thịnh
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Website Mạng Xã Hội Về Hình Ảnh
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Website Mạng Xã Hội Hình Ảnh

Đồ án tốt nghiệp xây dựng website mạng xã hội hình ảnh là một dự án học thuật được thực hiện bởi sinh viên ngành Công Nghệ Thông Tin tại Trường Đại học Sư Phạm Kỹ Thuật Thành phố Hồ Chí Minh. Đây là một ứng dụng web hiện đại kết hợp các công nghệ tiên tiến như ReactJS, NestJS, GraphQL và MongoDB. Mục đích chính của website mạng xã hội này là tạo ra một nền tảng cho phép người dùng chia sẻ, tìm kiếm và tương tác với các hình ảnh thông qua các chức năng như bình luận, cảm xúc và tin nhắn. Dự án được hướng dẫn bởi TS. Lê Vĩnh Thịnh, với thời gian thực hiện từ tháng 9/2020 đến tháng 1/2021, nhằm cung cấp một giải pháp hoàn chỉnh cho nhu cầu chia sẻ nội dung hình ảnh trực tuyến.

1.1. Tính Cấp Thiết và Mục Đích Của Đề Tài

Trong thời đại số hóa hiện nay, mạng xã hội hình ảnh đã trở thành một phần không thể thiếu trong đời sống người dùng. Đồ án này được thiết kế để giải quyết nhu cầu chia sẻ hình ảnh một cách hiệu quả và an toàn. Mục đích chính là tạo ra một ứng dụng web mạng xã hội đầy đủ tính năng với giao diện thân thiện, hỗ trợ tìm kiếm ảnh bằng công nghệ Computer Vision, cũng như các chức năng tương tác xã hội cơ bản.

1.2. Đối Tượng và Phạm Vi Nghiên Cứu

Đối tượng nghiên cứu của đồ án website mạng xã hội bao gồm các công nghệ backend và frontend hiện đại. Phạm vi của dự án tập trung vào việc xây dựng một nền tảng hoàn chỉnh với khả năng quản lý người dùng, xử lý hình ảnh, thực hiện tìm kiếm thông minh, và cung cấp các tính năng tương tác cộng đồng như bình luận, phản ứng cảm xúc, và nhắn tin trực tiếp giữa các người dùng.

II. Các Công Nghệ Chính Sử Dụng Trong Đồ Án

Đồ án xây dựng website mạng xã hội hình ảnh sử dụng một stack công nghệ hiện đại và mạnh mẽ để đạt được hiệu suất tối ưu. Phần frontend được phát triển bằng ReactJS, một thư viện JavaScript phổ biến cho việc xây dựng giao diện người dùng động. Backend được xây dựng bằng NestJS, một framework Node.js tiên tiến hỗ trợ các tính năng khiến mã code dễ bảo trì hơn. GraphQL được sử dụng thay cho REST API truyền thống để cải thiện hiệu suất truy vấn dữ liệu. MongoDB là cơ sở dữ liệu NoSQL được chọn để lưu trữ dữ liệu linh hoạt. Ngoài ra, Docker được áp dụng để containerization, đảm bảo ứng dụng chạy nhất quán trên các môi trường khác nhau.

2.1. ReactJS và Ant Design Cho Giao Diện

ReactJS là thư viện JavaScript được sử dụng để phát triển giao diện website với các component tái sử dụng được. Ant Design cung cấp một bộ component UI đẹp và chuyên nghiệp, giúp xây dựng giao diện nhanh chóng và nhất quán. Kết hợp ReactJS với Ant Design giúp tạo ra một website mạng xã hội có tính năng mạnh mẽ và giao diện thân thiện với người dùng.

2.2. NestJS GraphQL và MongoDB Cho Backend

NestJS là một framework Node.js được thiết kế để xây dựng các ứng dụng server-side mạnh mẽ với kiến trúc modular. GraphQL cho phép tối ưu hóa truy vấn dữ liệu so với REST API. MongoDB là cơ sở dữ liệu NoSQL linh hoạt, phù hợp cho việc lưu trữ dữ liệu không có cấu trúc cố định như hình ảnh, bài đăng và bình luận. Ba công nghệ này kết hợp tạo thành backend mạng xã hội hình ảnh hiệu quả và dễ mở rộng.

2.3. Docker Và Nginx Cho Deployment

Docker giúp đóng gói ứng dụng website mạng xã hội vào các container riêng biệt, đảm bảo sự nhất quán giữa các môi trường phát triển, kiểm thử và triển khai. Nginx được sử dụng làm reverse proxy để quản lý lưu lượng và cải thiện hiệu suất. Sử dụng Docker và Nginx đơn giản hóa quy trình triển khai và bảo trì ứng dụng.

III. Các Chức Năng Chính Của Website Mạng Xã Hội Hình Ảnh

Website mạng xã hội hình ảnh được thiết kế với nhiều chức năng toàn diện để đáp ứng nhu cầu của người dùng. Chức năng đầu tiên là quản lý tài khoản người dùng với các tính năng đăng ký, đăng nhập và quản lý hồ sơ cá nhân. Chức năng thứ hai là đăng tải và chia sẻ hình ảnh với hỗ trợ nhiều định dạng và kích thước. Tìm kiếm ảnh là một tính năng quan trọng, sử dụng Computer Vision để nhận dạng nội dung ảnh. Chức năng tương tác cộng đồng bao gồm bình luận, thả cảm xúc (reaction) và nhắn tin trực tiếp. Ngoài ra, hệ thống thông báo cung cấp thông tin thời gian thực khi có sự tương tác với bài đăng của người dùng.

3.1. Quản Lý Tài Khoản Và Hồ Sơ Người Dùng

Chức năng quản lý tài khoản trong đồ án website mạng xã hội cho phép người dùng đăng ký tài khoản mới với thông tin xác thực. Người dùng có thể đăng nhập an toàn bằng email và mật khẩu. Hồ sơ cá nhân có thể được cập nhật với ảnh đại diện, tiểu sử cá nhân và thông tin liên lạc. Hệ thống bảo mật được thiết kế để bảo vệ dữ liệu người dùng khỏi truy cập trái phép.

3.2. Đăng Tải Hình Ảnh Và Tìm Kiếm Thông Minh

Tính năng đăng tải hình ảnh cho phép người dùng chia sẻ ảnh trên website mạng xã hội. Ứng dụng hỗ trợ tải xuống hình ảnh với nhiều kích thước khác nhau để tối ưu cho các thiết bị. Tính năng tìm kiếm sử dụng Computer Vision để phân tích nội dung ảnh, giúp người dùng tìm kiếm ảnh theo chủ đề, tag hoặc nội dung hình ảnh một cách chính xác.

3.3. Tương Tác Cộng Đồng Và Thông Báo Thời Gian Thực

Chức năng bình luận và reaction cho phép người dùng tương tác với các bài đăng hình ảnh. Phản hồi bình luận (nested comments) tạo ra các cuộc thảo luận chi tiết dưới mỗi bài đăng. Tin nhắn trực tiếp giữa người dùng tạo nên một cộng đồng sôi động. Hệ thống thông báo cung cấp cập nhật thời gian thực khi có người bình luận hoặc thả cảm xúc trên bài đăng.

IV. Kết Quả Đạt Được Và Triển Vọng Phát Triển

Đồ án xây dựng website mạng xã hội hình ảnh đã hoàn thành với kết quả vượt mong đợi. Ứng dụng được triển khai thành công trên Docker, đảm bảo tính ổn định và dễ bảo trì. Tất cả chức năng chính đã được kiểm thử và hoạt động bình thường, bao gồm đăng ký, đăng nhập, chia sẻ hình ảnh, tìm kiếm, bình luận và nhắn tin. Hiệu suất ứng dụng đạt tiêu chuẩn với tốc độ tải trang nhanh nhờ tối ưu hóa GraphQL. Giao diện sử dụng Ant Design mang lại trải nghiệm người dùng mượt mà và trực quan. Dự án này không chỉ là một website mạng xã hội hình ảnh hoàn chỉnh mà còn cung cấp nền tảng vững chắc cho các cải tiến và tính năng mới trong tương lai.

4.1. Ưu Điểm Chính Của Dự Án

Đồ án website mạng xã hội hình ảnh sở hữu nhiều ưu điểm nổi bật. Kiến trúc microservices với Docker cho phép dễ dàng mở rộng và bảo trì. GraphQL cải thiện hiệu suất truy vấn so với REST API truyền thống. Giao diện người dùng xây dựng bằng ReactJS và Ant Design mang lại trải nghiệm trực quan và thân thiện. Computer Vision cung cấp khả năng tìm kiếm ảnh thông minh. Toàn bộ ứng dụng được thiết kế với tính bảo mật cao và khả năng xử lý dữ liệu lớn nhờ MongoDB NoSQL.

4.2. Nhược Điểm Và Hướng Cải Thiện

Dù vậy, đồ án vẫn có một số nhược điểm cần cải thiện như khả năng mở rộng của hệ thống thông báo và tính năng tìm kiếm nâng cao. Chi phí triển khai Computer Vision tương đối cao. Trong tương lai, dự án có thể được cải thiện bằng cách thêm tính năng real-time video streaming, AI recommendation system, mobile app, và social commerce integration. Những nâng cấp này sẽ làm cho website mạng xã hội hình ảnh trở nên cạnh tranh hơn trên thị trường.

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

CHƯƠNG 1 TỔNG QUAN Trang 2 Báo cáo đồ án tốt nghiệp CƠ SỞ LÝ THUYẾT 2.1 Tổng quan về các công nghệ thực hiện 2.1 Các thành phần công nghệ thực hiện Website được xây dựng dựa trên các công nghệ được sử dụng phổ biến hiện nay. Phía back-end sử dụng các công nghệ hiện nay NestJS, GraphQL còn về phía front- end sử dụng thư viện Javascript ReactJS kèm theo một thư viện UI là Ant-design để design website bên cạch đó có sử dụng GraphQL, Webpack, Eslint. Phía cơ sở dữ liệu sử dụng MongoDB để quản lí dữ liệu của hệ thống cuối cùng là deploy sử dụng Docker,Ngnix. Đối với phần back-end: NestJS là một framework để xây dựng các ứng dụng server-side được phát triển bằng nodejs và sử dụng ngôn ngữ bật cao của JavaScript là TypeScript.

MongoDB là một cơ sở dữ liệu có dạng NoSQL. Đặc điểm của nó là không có ràng buộc quan hệ, phân tán, mã nguồn mở, có khả năng lưu trữ, xử lý một lượng rất nhỏ cho tới lượng dữ liệu cực lớn. GraphQL là một syntax mô tả việc yêu cầu lấy dữ liệu được sử dụng để load data từ server-side cho client. Đối với front-end: ReacJS là UI library được phát triển bởi Facebook, xây dựng giao diện bằng các component, theo xu hướng SPA(Single Page Application) có nghĩa là cấu trúc web page sẽ được load đầu tiên khi ta truy cập vào website ở những lần request sau, khi chuyển trang hay bất kì thao tác nào thì chỉ get những dữ liệu cần thiết mà không reload lại page điều này sẽ làm tiết kiệm băng thông cũng như trải nghiệm của người dùng tốt hơn.

Ant-design là một React UI Component Library, sử dung các components có sẵn tương tự như boostrap, material UI,… GraphQL là một syntax mô tả việc yêu cầu lấy dữ liệu được sử dụng để load data từ server-side cho client. Webpack là một công cụ thực hiện việc gói gọn toàn bộ file js, css, scss, sass,… thì việc này giúp cấu trúc file được gói theo cấu trúc project. CHƯƠNG 2 CƠ SỞ LÝ THUYẾT Trang 3 Báo cáo đồ án tốt nghiệp Eslint là một công cụ giúp phân tích code để báo các vấn đề về code như dư thừa biến khai báo không sử dụng, mục đích để lập trình viên clean code để dễ đọc và tái sửa chữa dễ dàng hơn. Đối với deploy: Docker là một nên tảng để deploy và run application với container.

Nginx là một web server mạnh mẽ mã nguồn mở. Nginx sử dụng kiến trúc đơn luồng, hướng sự kiện vì thế nó hiệu quả hơn Apache server. Nó cũng có thể làm những thứ quan trọng khác, chẳng hạn như load balancing.1 Tổng quan NestJS là một framework hỗ trợ xây dựng các ứng dụng node server-side một cách hiệu quả và dễ dàng mở rộng. Nest được hỗ trợ sử dụng Typescript và cả javascript thuần và có đầy đủ tính OOP (lập trình hướng đối tượng), FR (lập trình chức năng) và có cả FRP (lập trình phản ứng chức năng).

Về bản chất thì Nest JS sử dụng framework máy chủ HTTP mạnh mẻ như Express (mặc định) và có thể tùy chọn cấu hình để sử dụng Fastify. Nest cung cấp một tầng trừu tượng trên các framework nodeJS phổ biến này (Express / Fastify), nhưng cũng hỗ trợ API của họ trực tiếp cho nhà phát triển. Điều này cho phép các nhà phát triển tự do sử dụng vô số các module của bên thứ ba có sẵn cho nền tảng cơ bản. Có thể hiểu là tất cả các package mà chúng ta cài thêm khi sử dụng Express / Fastify đều có thể tích hợp dể dàng vào Nestjs.

Nest sử dụng Express nhưng cũng cung cấp khả năng tương thích với một loạt các thư viện khác, như ví dụ: Fastify, cho phép dễ dàng sử dụng vô số plugin của bên thứ ba có sẵn. CHƯƠNG 2 CƠ SỞ LÝ THUYẾT Trang 4 Báo cáo đồ án tốt nghiệp 2.2 Ưu điểm NestJS tương thích với cả Typescript và Javascript thuần, default là Typescript. Design Pattern xuyên suốt NestJS là Dependency Injection, và cú pháp của NestJS rất giống Angular. Nên nếu bạn đã có kiến thức về Angular thì việc bắt đầu với NesJS sẽ khá dễ dàng.

NestJS có rất nhiều module có thể hỗ trợ bạn từ việc hot reload, logger cho đến GraphQL, Websocket, cqrs pattern, microservices,. NestJS làm như mọi thứ. Có được sự hỗ trợ từ các công cụ thông dụng tích hợp sẵn trong NodeJS. Lập trình viên có thể dễ dàng kiểm tra mã nguồn đã chạy đúng hay chưa với Jasmine trong việc tạo các unit test.

Tương tự khi cài đặt những thư viện mới phục vụ cho dự án, node package manager (npm) sẽ là công cụ hỗ trợ đắc lực. Nhược điểm Số lượng người dùng hiện tại khá ít. Hạn chế về mặt hộ trỡ những vấn đế trên Stackoverflow. Quá nhiều thay đổi trong một bản update.

Không ổn định. CHƯƠNG 2 CƠ SỞ LÝ THUYẾT Trang 5 Báo cáo đồ án tốt nghiệp 2.1 Tổng quan GraphQL là một Graph Query Language được dành cho API. Nó được phát triển bởi Facebook và hiện tại nó được duy trì bởi rất nhiều công ty lớn và mọi cá nhân trên khắp thế giới. GraphQL từ khi ra đời đã gần như thay thế hoàn toàn REST bởi sự hiệu quả, mạnh mẽ và linh hoạt hơn rất nhiều.

GraphQL được tạo ra bằng cách định nghĩa các loại và các trường ,sau đó cung cấp chức năng cho mỗi trường trên mỗi loại. Một khi GraphQL đang chạy (thường là tại một URL trên web), nó có thể được gửi các truy vấn GraphQL để xác nhận và thực hiện. Truy vấn đã nhận được kiểm tra lần đầu để đảm bảo nó chỉ đề cập đến các loại và trường được xác định, sau đó chạy các hàm để tạo ra kết quả. GraphQL chia thành 3 phần chính : Query: Các câu lệnh lấy dữ liệu (tương tự method GET trong REST API) Mutation: Các câu lệnh để thêm/sửa dữ liệu (tuơng tự method POST/PUT/DELETE trong REST API) Subscription: Câu lệnh dùng để lắng nghe sự kiên trên server, khi dữ liệu trên server được thay đổi nó cũng thay đổi theo nhằm cung cấp dữ liệu cho client một cách realtime nhất có thể.

Ở điểm này REST API không có cửa để đấu lại với GraphQL.2 Tính năng Hierarchical : các truy vấn chính xác như dữ liệu mà chúng trả về. Các truy vấn do khách hàng chỉ định : khách hàng có quyền tự do quyết định lấy gì từ máy chủ. Strongly typed : bạn có thể xác thực một truy vấn theo cú pháp và trong hệ thống kiểu GraphQL trước khi thi hành. Điều này cũng giúp thúc đẩy các công cụ mạnh mẽ để cải thiện trải nghiệm phát triển, như GraphiQL.

Introspective : bạn có thể truy vấn hệ thống sử dụng cú pháp GraphQL. Điều này rất tốt cho việc phân tích cú pháp dữ liệu đến vào các giao diện strongly-typed và không phải phân tích cú pháp và chuyển đổi bằng tay JSON thành các đối tượng. CHƯƠNG 2 CƠ SỞ LÝ THUYẾT Trang 6 Báo cáo đồ án tốt nghiệp 2.3 Tại sao phải dùng GraphQL Sử dụng được trên cả Front-end lẫn Back-end giúp việc call API trở nên dễ dàng. Một trong những thách thức chính đối với các REST call truyền thống là không có khả năng khách hàng yêu cầu một bộ dữ liệu tùy chỉnh (giới hạn hoặc mở rộng).

Trong hầu hết các trường hợp, một khi khách hàng yêu cầu thông tin từ máy chủ, nó sẽ nhận tất cả hoặc không có bất kì trường nào. Một khó khăn khác là làm việc và duy trì nhiều điểm cuối. Khi nền tảng phát triển, do đó số lượng sẽ tăng lên. Vì vậy, khách hàng thường cần phải yêu cầu dữ liệu từ các endpoint khác nhau.

GraphQL API được tổ chức theo các loại và trường, chứ không phải endpoint. Bạn có thể truy cập đầy đủ các tính năng của dữ liệu từ một điểm cuối. Khi xây dựng một máy chủ GraphQL, chỉ cần có một URL cho tất cả dữ liệu tìm nạp và biến đổi. Do đó, khách hàng có thể yêu cầu một bộ dữ liệu bằng cách gửi một chuỗi truy vấn, mô tả những gì họ muốn đến một máy chủ.4 Nhược Điểm Hệ sinh thái vẫn còn đang phát triển nhanh chóng nên việc cập nhật đòi hỏi phải học tập thường xuyên.

Phức tạp hơn so với việc sử dụng Restfull API.1 Mô hình MongoDB hệ quản trị cơ sở dữ liệu mã nguồn mở (open-source) thuộc họ cơ sở dữ liệu phi quan hệ (NoSQL). MongoDB là một cơ sở dữ liệu phân tán vì vậy nó sẽ có những đặc trưng của cơ sở dữ liệu phân tán như: tính sẵn sàng cao, khả năng mở rộng theo chiều ngang,. MongoDB được xây dựng theo hướng là một cơ sở dữ liệu hướng đối tượng vì vậy nó không có các ràng buộc toàn vẹn dữ liệu như ở các Cơ sở dữ liệu quan hệ mà cho phép lưu trữ dữ liệu linh hoạt (stores data in flexible) có dữ liệu khác nhau trong cùng một Collection (tương đương với Table ở SQL). Do chính đặc thù này mà MongoDB Có thể được sử dụng để lưu các dữ liệu đa dạng và phức tạp mà không bị hạn chế khi có thay đổi về cấu trúc lưu dữ liệu.

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT Trang 7 Báo cáo đồ án tốt nghiệp MongoDB được phát triển từ năm 2007 bởi một tổ chức tên là MongoDB Inc có trụ sở tại New York. Tại thời điểm đó MongoDB được phát triển như là một nền tảng dịch vụ (Platform as a services - PAAS). Đến năm 2009 MongoDB đã được chính thức giới thiệu trên thị trường như một máy chủ cơ sở dữ liệu mã nguồn mở (open-source database server) được duy trì và phát triển bởi tổ chức MongoDB Inc. Tại thời điểm đó đã có nhiều tổ chức lớn và vừa như SourceForge, Foursquare, eBay sử dụng MongoDB để phát triển cơ sở dữ liệu của họ.2 Đặc trưng MongoDB là cơ sở dữ liệu No-SQL loại Document Database với nhiều yếu tố được bổ sung để nâng cao hiệu suất sử dụng như Index, Schema,.

MongoDB được lập trình bằng ngôn ngữ C++ và hỗ trợ tốt với các Javascript Framework. Các khái niệm tiêu biểu khi sử dụng MongoDB: Document - tài liệu: là đơn vị cơ bản của dữ liệu trong MongoDB, một document tương đương với một dòng trong bảng của SQL. Mỗi một document đều có cấu trúc là một đoạn chuỗi json độc lập. Collection: là tập hợp các document có các thuộc tính tương tự nhau.

Collection tương đương với một bảng (Table) trong SQL. Điểm khác nhau rõ rệt nhất ở đây chính là việc bảng trong SQL có cấu trúc được quy định sẵn và dữ liệu vào luôn phải tuân theo cấu trúc đó, còn Collection có thể tiếp nhận tự do mọi document có các thuộc tính khác nhau vào mà không hề phát sinh lỗi.