GIỚI THIỆU
Đặt vấn đề
Với sự phát triển của công nghệ hiện đại, các trang web và ứng dụng web ngày càng trở nên phổ biến và cần thiết trong đời sống công nghệ Chúng được áp dụng rộng rãi trong nhiều lĩnh vực như mua sắm và giải trí, góp phần quan trọng trong việc thay đổi cuộc sống của con người.
Trong bối cảnh khoa học công nghệ phát triển nhanh chóng, việc kết nối và giao tiếp qua các thiết bị trở nên phổ biến hơn Điều này giúp việc trao đổi thông tin dễ dàng hơn, và việc sử dụng các phương tiện trực tuyến, đặc biệt là các mạng xã hội, sẽ mang lại sự thuận tiện, chính xác và tiết kiệm thời gian, công sức.
Mạng xã hội hiện nay đã trở nên phổ biến trong mọi lĩnh vực, không chỉ là nơi trao đổi thông tin mà còn là nền tảng giải trí, tạo ra cơ hội việc làm và nguồn thu nhập cho nhiều cá nhân và tập thể.
Luận văn tốt nghiệp này nghiên cứu phương pháp xây dựng một mô hình nhằm giúp mọi người trao đổi những thông tin cơ bản của mình với nhau.
Mục tiêu đề tài
Mục tiêu cụ thể của luận văn như sau:
Nắm bắt các đặc trưng quan trọng của mạng xã hội cơ bản là bước đầu tiên trong việc xử lý dữ liệu hiệu quả Từ đó, chúng ta có thể lựa chọn mô hình phù hợp để phân tích và khai thác thông tin một cách tối ưu.
Mô hình MVC với nhiều tính năng nổi bật là một trong những mô hình phổ biến cho các trang web, kết hợp với hệ quản trị cơ sở dữ liệu MySQL.
Để phát triển ứng dụng, tôi đã lựa chọn framework PHP Laravel kết hợp với VueJS, một framework hiện đại của JavaScript để xây dựng giao diện người dùng Ngoài ra, NodeJS cũng là một phần quan trọng giúp truyền tải dữ liệu theo thời gian thực giữa các người dùng.
Đối tượng và phạm vi nghiên cứu
- Đối tượng nghiên cứu: Sử dụng mô hình MVC của Laravel kết hợp với VueJS hỗ trợ cho front-end và NodeJS
- Phạm vi nghiên cứu: Xây dựng ứng hoàn chỉnh các chức năng.
Phương pháp nghiên cứu
- Tìm hiểu đề tài và các nghiên cứu có liên quan
- Phân tích và thiết kế cơ sở dữ liệu
- Thiết lập môi trường và cài đặt các thư viên cần thiết
- Xây dựng mô hình phù hợp cho ứng dụng
- Xử lí giao diện (front-end) và server (backend)
- Viết báo cáo và đưa ra đánh giá.
Bố cục luận văn
Quyển luận văn này gồm 4 chương
- Chương 1: Giới thiệu: giới thiệu mục tiêu đề tài, đối tượng và phạm vi nghiên cứu, nghiên cứu có liên quan, phương pháp thực hiện
- Chương 2: Cơ sở lí thuyết: giới thiệu Laravel framework, VueJS framework và NodeJS
- Chương 3: Phương pháp thực hiện, những chức năng của ứng dụng
- Chương 4: Tổng kết, đánh giá.
CƠ SỞ LÝ THUYẾT
1.1 Giới thiệu Đối với mỗi developer, đặc biệt là các PHP developer chắc hẳn ai cũng biết đến Laravel một open source framework đứng đầu về số lượt download trên Packagist cũng như số lượng sao đạt được trên Github Laravel được tạo ra bởi Taylor Otwell với phiên bản đầu tiên được ra mắt vào tháng 6 năm 2011 Từ đó cho đến này, Laravel đã phát triển một cách mạnh mẽ, vượt qua những framework khác và vươn lên trở thành framework PHP có thể nói được ưa chuộc và được cộng đồng sử dụng nhiều nhất khi phát triển web với PHP
Laravel nhanh chóng được cộng đồng đón nhận nhờ vào tính dễ sử dụng của nó Ngay cả những người mới chỉ có kiến thức cơ bản về lập trình web với PHP cũng có thể bắt đầu với Laravel chỉ sau vài giờ, từ đó có thể thực hiện một dự án nhỏ.
Tài liệu của Laravel trên trang chủ được trình bày rõ ràng và dễ hiểu, giúp bạn nhanh chóng tìm thấy thông tin cần thiết.
1.3 Xây dựng theo mô hình MVC
Laravel được phát triển theo mô hình MVC (Model-View-Controller), giúp tổ chức và cấu trúc mã nguồn trong dự án một cách hợp lý Điều này không chỉ tạo điều kiện thuận lợi cho việc bảo trì mà còn hỗ trợ sự phát triển bền vững trong tương lai.
1.4 Các tính năng dựng sẵn
Bản thân Laravel đã cung cấp cho người dùng rất nhiều các nhóm tính năng giúp quá trình phát triển trở nên nhanh chóng hơn rất nhiều lần
1.5 Các tính năng bảo mật Để giúp lập trình viên có thể tối đa thời gian tập chung vào việc phát triển các tính năng, Laravel đã cung cấp sẵn cho người dùng các tính năng bảo mật cơ bản như:
- ORM của Laravel sử dụng PDO thay vì mysqli để chống lại tấn công SQL Injection
- Laravel sử dụng một field token ẩn để chống lại tấn công kiểu CSRF
- Các biến được đưa ra view mặc định đều được Laravel escape để tránh tấn công XSS
Trong quá trình làm việc với Laravel, bạn có thể gặp nhiều vấn đề và bug mà chưa tìm được giải pháp Tuy nhiên, may mắn thay, có thể những vướng mắc của bạn đã được người khác giải quyết Bạn có thể dễ dàng tìm thấy câu trả lời hoặc nhận hỗ trợ từ cộng đồng đông đảo người dùng Laravel khi đặt câu hỏi trên các diễn đàn.
Vue.js, hay gọi tắt là Vue, là một framework linh hoạt để xây dựng giao diện người dùng Khác với các framework nguyên khối, Vue được thiết kế để phát triển ứng dụng theo từng bước, cho phép người dùng chỉ cần sử dụng thư viện lõi dễ học và tích hợp với các dự án có sẵn Ngoài ra, Vue cũng hỗ trợ các kỹ thuật hiện đại như SFC (single file components) và các thư viện bổ trợ.
Các phương thức trong component là danh sách các hàm mà bạn có thể thực thi ở bất kỳ đâu trong component đó.
- Lắng nghe: v-on:click hoặc @click
- Các key modifiers: @click @keyup, @enter, @tab, @ctrl
Component là một tính năng quan trọng trong Vue mà bạn cần nắm vững Nó cho phép kế thừa các thành phần HTML cơ bản, giúp đóng gói và tái sử dụng mã code một cách dễ dàng.
Dùng để truyền dữ liệu (data) từ component Cha sang component con, và component con dùng sự kiện để gửi ngược dữ liệu về component cha
Event Bus hay còn là publish - subscribe pattern
Dùng để tạo và nhận sự kiện trên component
Node.js là nền tảng phát triển độc lập, được xây dựng trên môi trường thực thi JavaScript của Chrome, cho phép tạo ra các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.
Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao
Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực
Node.js là lựa chọn lý tưởng cho các sản phẩm có lượng truy cập lớn, yêu cầu khả năng mở rộng nhanh chóng, cần đổi mới công nghệ, hoặc để phát triển các dự án Startup trong thời gian ngắn nhất.
3.2 Những ứng dụng có thể và nên viết bằng nodeJS
Mặc dù Node.js đang trở nên phổ biến, không phải lúc nào nó cũng là lựa chọn tốt nhất cho mọi ứng dụng Đối với những ứng dụng yêu cầu tính ổn định cao và logic phức tạp, các ngôn ngữ như PHP hay Ruby có thể là sự lựa chọn tối ưu hơn Tuy nhiên, Node.js vẫn phù hợp cho nhiều loại ứng dụng khác nhau.
- Websocket server: Các máy chủ web socket như là Online Chat, Game Server…
- Fast File Upload Client: là các chương trình upload file tốc độ cao
- Ad Server: Các máy chủ quảng cáo
- Cloud Services: Các dịch vụ đám mây
- RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API
Real-time data applications require immediate processing capabilities, and microservices architecture effectively breaks down large applications into smaller, interconnected services Node.js excels in facilitating this approach, making it an ideal choice for developing scalable and efficient real-time applications.
PHƯƠNG PHÁP THỰC HIỆN
Mô hình MVC, viết tắt của Model, View và Controller, chia ứng dụng web thành ba thành phần riêng biệt, mỗi thành phần đảm nhận chức năng cụ thể Cách tiếp cận này giúp tối ưu hóa việc xử lý và bảo trì ứng dụng.
Mô hình chịu trách nhiệm quản lý dữ liệu, bao gồm việc lưu trữ và truy xuất các thực thể từ các cơ sở dữ liệu như MySQL, SQL Server, PostgreSQL, và đồng thời chứa các logic được thực thi bởi ứng dụng.
View chịu trách nhiệm hiển thị dữ liệu được truy xuất từ model theo định dạng mà lập trình viên mong muốn Cách sử dụng View tương tự như các module templates trong các ứng dụng web phổ biến như WordPress và Joomla.
Controller là trung gian giữa model và view, chịu trách nhiệm xử lý các tương tác giữa chúng Nó nhận yêu cầu từ client, gọi các model để thực hiện các hoạt động cần thiết và sau đó gửi dữ liệu ra view View sẽ đảm nhiệm việc định dạng lại dữ liệu từ controller.
Vue.js tập trung vào lớp ViewModel của mẫu MVVM, kết nối View và Model thông qua ràng buộc dữ liệu hai chiều Các thao tác DOM và định dạng đầu ra được trừu tượng hóa thành các Directives và Filters.
Mục tiêu của bài viết là trình bày lợi ích của việc sử dụng reactive ràng buộc dữ liệu và các composable có thể kết hợp với một API đơn giản Đây không phải là một khung framework đầy đủ, mà được thiết kế như một lớp view linh hoạt và đơn giản Bạn có thể sử dụng nó độc lập để tạo mẫu nhanh hoặc kết hợp với các thư viện khác để tùy chỉnh stack front-end Nó cũng tương thích với các dịch vụ không phụ trợ như Firebase.
3 Giao diện và chức năng
- Xác thực người dùng đã có tài khoản tại trang web bằng cách kiểm tra tên tài khoản và mật khẩu đã có tồn tại tại server chưa
- Chức năng lưu tài khoản của người dung để không phải nhập thông tin những lần sau
Hình 4 Giao diện đăng kí
Chức năng đăng ký tài khoản mới cho phép người dùng dễ dàng đăng nhập vào hệ thống và truy cập vào các tính năng bên trong.
Hình 3 Giao diện đăng nhập
Hình 5 Giao diện trang chủ
Trên giao diện trang chủ, người dùng có thể thấy các thông tin quan trọng như danh sách bạn bè, danh sách nhóm, các bài viết liên quan, cùng với thanh điều hướng chính của ứng dụng (navbar).
- Sử dụng lazy loading để hiển thị để load từng bài viết lên khi người dùng scroll về phía cuối trang web
Hình 6 Tạo bài viết mới
- Có thể tạo mới bài viết với các trường dữ liệu cơ bản như text, hình ảnh và video
- Sau khi đăng bài viết sẽ tự động hiển thị trên dòng thời gian (trang chủ và trang cá nhân) mà không cần reload lại trang
- Sử dụng ckfinder 5 để có thể định dạng lại văn bản
Hình 7 Cấu trúc bài viết
- Một bài viết cơ bản gồm có các nội dung sau:
Header: Người tạo, ngày giờ tạo, xóa bài viết
Body: Nội dung (text, img, video)
Footer: Lượt like, lượt comment, hiển thị top những comment mới nhất
- Các chức năng sẽ được trình bài cụ thể ở slides tiếp theo
Hình 8 Header của bài viết
- Hiển thị thông tin người đăng bài viết, ngày giờ bài viết được tạo
- Xóa bài viết thực hiện qua các bước:
- Theo dõi người dung khi xóa bài viết
Sửa thông tin nội dung
Sửa ảnh của bài viết
Hình 10 Body của bài viết
- Hiển thị các thông tin như text, images, video
- Với hình ảnh, khi nhấn vào sẽ show ảnh ra một modal để xem rõ hơn
Hình 11 Footer của bài viết
- Khi người dùng ấn “like” hệ thống sẽ update lại lượt like cho bài viết đó ngay lập tức
- Với bài viết người dùng đã like mà ấn vào “like” lần nữa thì hệ thống sẽ hủy lượt like của người dùng đó ra khỏi bài viết
- Thống kê lượt like của bài viết:
- Người dùng nào đã thích bài viết
- Ngày giờ người dùng đã like
Hình 12 Comment cho bài viết
- Khi người dùng ấn “comment”, người dung có thể comment trên một modal, hệ thống sẽ update lại comment cho bài viết đó ngay lập tức
- Người dùng hoàn toàn có thể xóa comment của họ
- Sử dụng ckfinder 5 để có thể định dạng lại văn bản
- Thống kê lượt comment của bài viết:
Người dùng comment bài viết
Ngày giờ người dùng đã comment
3.10 Hiển thị comment mới nhất
Hình 13 Comment mới nhất của bài viết
- Chức năng hiển thị comment mới nhất của bài viết, khi ấn “Hiển thị comment mới nhất” phần footer sẽ hiện thị ra 3 comment mới nhất, khi ấn
“Thu nhỏ” thì sẽ ẩn đi những comment đó
- Vẫn hiển thị các thông tin có liên quan bao gồm người tạo, ngày giờ tạo
- Người dùng cũng có thể xóa các comment của họ
Hình 14 Giao diện bạn bè
- Đồng ý hoặc hủy lời mời kết bạn
- Hiển thị danh sách bạn bè, tìm kiếm những người đã kết bạn
- Có thể tìm kiếm bạn bè bằng 2 cách: sử dụng số điện thoại hoặc email
- Sau khi tìm kiếm nếu đúng thông tin có thể gửi lời mời kết bạn đến người đó
- Khi tìm kiếm sẽ có 3 kết quả trả về
Nếu chưa gửi lời mời kết bạn thì sẽ hiển thị thông tin “có thể bết bạn” (not_friend_request)
Nếu đã gửi lời mời kết bạn trước đó thì thông tin được hiển thị là
“đang chờ xác nhận” (friend_requested)
Trong trường hợp tìm thấy người mà đã kết bạn thì trạng thái hiển thị là “bạn bè” (friend)
- Tự động reload lại các thông tin khi gửi một yêu cầu nào đó (thêm xong => đổi trạng thái)
Hình 15 Tìm kiếm bạn bè Hình 16 Nội dung được tìm
Có thể hủy hoặc đồng ý lời mời kết bạn (friended)
Hình 18 Dan sách bạn bè
- Thống kê tổng số lượng
- Hiển thị tất cả những người là bạn bè
- Khi nhấn vào một bạn bè thì sẽ chuyển sang giao diện chat online với người bạn đó
3.15 Trò chuyện giữa bạn bè với bạn bè
Hình 17 Lời mời kết bạn
Hình 19 Trò chuyện với bạn bè
- Giao diện chat gồm 3 phần:
- Header: thông tin người dung muốn gửi tin nhắn
- Body: những nội dung tin nhắn giữa 2 người, khi hover choột vào tin nhắn thì sẽ hiển thị thông tin ngày giờ mà tin nhắn đó được gửi đi
- Footer: thanh để nhập nội dung tin nhắn và gửi đi
- Sử dụng websocket để thực hiện hiển thị tin nhắn theo thời gian thực (realtime)
- Khi nhập tin nhắn vào ô và gửi đi thì server sẽ tiến hành thêm dữ liệu vào
DB sẽ phát đi sự kiện và người nhận, thông qua tên sự kiện được gửi, sẽ nhận được tin nhắn ngay lập tức.
- Sau khi nhận được tin nhắn tiến hành thay đổi dữ liệu tại body (update lại tin nhắn)
Hình 20 Giao diện nhóm người dùng
- Hiển thị danh sách các nhóm đã tham gia
Nhập tên nhóm và ấn nút tạo, thì hệ thống sẽ xử lí để tạo nhóm mới và hiển thị ngay nhóm vừa tạo về cho người dùng
3.18 Trò chuyện giữa các thành viên trong nhóm
Hình 22 Trò chuyện với bạn bè trong nhóm
- Giao diện gồm 2 phần chính
- Nội dung tin những tin nhắn trong nhóm
- Các thành viên trong nhóm
- Hiển thị tất cả các thành viên trong nhóm
- Thành viên trong nhóm có thể tự rời nhóm
- Chủ phòng có quyền kick thành viên bất kì trong nhóm ra khỏi nhóm
- Khi chủ phòng rời nhóm, chủ phòng sẽ chuyển lại cho người khác
- Khi thành viên trong nhóm không còn ai nhóm sẽ tự động xóa
Header hiển thị tên nhóm và chủ phòng, cho phép người dùng đổi tên nhóm và thêm thành viên mới Chủ phòng có quyền tự ý xóa nhóm, trong khi các thành viên chỉ có thể rời nhóm mà không thể xóa nhóm.
- Body: hiển thị tất cả các tin nhắn có trong nhóm, bao gồm người gửi, nội dung, ngày giờ gửi tin (khi hover)
Footer là khu vực để người dùng gửi tin nhắn Khi tin nhắn được nhập vào ô và gửi đi, server sẽ thêm dữ liệu vào cơ sở dữ liệu (DB) và phát đi sự kiện Nhóm nhận sự kiện sẽ nhận tin nhắn ngay lập tức thông qua tên sự kiện được gửi đi.
Hình 23 Thành viên trong nhóm
Hình 24 Giao diện trang chủ
- Giao diện chính gồm các thông tin của người sử dụng như: họ tên, email, ảnh đại diện,…
- Có thể tạo bài viết mới như trang chủ, hiển thị danh sách bạn bè, danh sách nhóm và những bài viết của người dùng đó
- Thay đổi ảnh đại diện và ảnh bìa tại đây
3.22 Thay đổi ảnh đại diện và ảnh bìa
- Thay đổi ảnh đại diện bằng camera
(mở cam, đóng cam, chụp) hoặc chọn file trực tiếp từ máy tính
- Sau khi ấn thay đổi hình ảnh sẽ được sử lí và cập nhật lập tức
- Chức năng thay đổi ảnh bìa tương tự những không có cam
Hình 26 Cài đặt cá nhân
- Các chức năng của trang cài đặt:
- Thay đổi những thông tin cơ bản của người dung như: họ tên, số điện thoại
(kiểm tra trùng), địa chỉ, ngày sinh
- Thay đổi thông tin mật khẩu cho người dùng
Hình 25 Thay đổi ảnh đại diện và ảnh bìa
3.24 Theo dõi hoạt động người dùng
Hình 27 Giao diện admin - theo dõi người dùng
- Hệ thống theo dõi người dung có các chức năng chính
- Hiển thị tất cả các hoạt động của người dùng (đăng nhập, tạo bài viết, comment,…)
Khi người dùng nhấn vào một hoạt động cụ thể, thông tin chi tiết về hoạt động đó sẽ được hiển thị, bao gồm thông tin cơ bản của người dùng và các dữ liệu truy cập liên quan.
- Hệ thống tìm kiếm hoạt động người dùng (cho phép tìm theo tên, ngày và hoạt động là gì)
TỔNG KẾT
3 Kết quả đạt được và hạn chế
Khóa luận đã phát triển thành công một ứng dụng mạng xã hội, cung cấp các chức năng thiết yếu để đáp ứng nhu cầu đa dạng của người dùng Người dùng có thể tạo và chia sẻ thông tin, trò chuyện trực tuyến, cũng như xây dựng trang cá nhân để tùy chỉnh thông tin của mình.
- Chưa xây dựng chức năng sửa bài biết cho người dùng
- Chưa xây dựng chức năng xóa comment của người dùng tại bài viết
- Chưa realtime một số tính năng của ứng dụng
- Gửi kết bạn, người nhận không nhận ngay lập tức được
- Khi người dung like hoặc comment người khác chưa thể nhìn thấy ngay
- Chỉ mới theo dõi được vài hoạt động của người dùng
- Xây dựng chức năng trả lời comment tại bài viết (comment_child)
- Xây dựng chức năng share bài viết
- Xây dựng chức năng multi bài tỏ cảm xúc
- Thực hiện chức năng xóa tin nhắn tại cuộc trò chuyện cá nhân hoặc tin nhắn của trò truyện nhóm
- Xây dựng thêm các chức năng theo dõi người dùng
- Tạo thêm chức năng thay đổi ảnh cho nhóm
