Xây dựng mạng xã hội sử dụng Mern Stack

Theo thống kê của một trong những trang mạng xã hội lớn nhất thế giới là Facebook đã đưa ra các số liệu về thói quen và hành vi của người dùng Việt Nam sử dụng ứng dụng của họ cho thấy..

NGHIÊN CỨU

CƠ SỞ LÝ THUYẾT

Hình 1: Hình minh hoạ kiến trúc hệ thống [1]

Kiến trúc chung của hệ thống bao gồm có 3 tầng truyền thống, tầng hiển thị front- end(Reactjs),tầng ứng dụng backend (expressJs và nodeJs) và tầng cơ sở dữ liệu (mongodb), front-end và backend giao tiếp với nhau qua RESTful API

Node là một nền tảng phát triển các ứng dụng web back-end được viết bằng JavaScript, là một trình biên đóng gói của Google’s V8 JavaScript engine, libuv platform abstraction layer, và một thư viện lõi được viết bằng Javascript Mục tiêu của NodeJS là làm cho web có khả năng push như trong một số ứng dụng gmail NodeJS cung cấp công cụ giúp lập trình viên có thể làm việc trong non-blocking, mô hình I/O Sau hơn

20 năm nghiên cứu, xây dựng và phát triển, nhóm kĩ sư đã cho ra đời sản phẩm ứng dụng web NodeJS chạy thời gian thực và kết nối 2 chiều client và server, cho phép trao đổi dữ liệu một cách tự do

Ngoài việc chạy trên JavaScript thì Node có những tính năng đi kèm sau:

- Có trình CLI (giao diện dòng lệnh)

- Chạy theo mô hình REPL

- Có các hàm quản lý tiến trình

- Có các đối tượng hỗ trợ làm việc với dữ liệu nhị phân

- Hỗ trợ TCP và UDP

- Hỗ trợ phân giải DNS

- Hỗ trợ HTTP và HTTPS

- Có thể truy cập file và thư mục Dưới đây là sơ đồ về các thành phần quan trọng trong NodeJS:

Hình 2: Các thành phần quan trọng trong NodeJS [2]

NodeJS cho phép chúng ta dễ dàng thực hiện các giao thức mạng cấp thấp Ví dụ, NodeJS có một mô-đun HTTP, cho phép xây dựng một máy chủ web chỉ với một vài dòng mã, nhưng do đó chúng ta phải tìm hiểu thêm nhiều thứ, chẳng hạn như hiểu tiêu đề của các gói HTTP, không giống như PHP, vốn chỉ là một mô-đun mở rộng cho các mạng hiện có Máy chủ (như Apache hay NginX) - tức là PHP dễ sử dụng hơn NodeJS, nhưng không cho phép lập trình viên làm công việc cấp thấp Tuy nhiên, vì NodeJS là một framework mã nguồn mở, nên có rất nhiều thư viện cho phép các nhà phát triển viết các máy chủ web nhanh hơn và dễ dàng hơn

NodeJS sử dụng kiển trúc lập trình hướng sự kiện bất đồng bộ, và đây là một tính năng làm cho các ứng dụng NodeJS có thể chạy với hiệu suất cao Chẳng hạn như đối với các ứng dụng bình thường như một chương trình viết bằng C++ thì khi ta viết chương

20 trình để đọc dữ liệu, chương trình sẽ phải dừng lại ở đoạn code đọc dữ liệu để chờ cho đến khi có dữ liệu để đọc, nếu muốn chương trình tiếp tục vừa chạy các công việc khác vừa đọc dữ liệu thì phải dùng đến đa luồng (multi-threading), tuy nhiên việc dùng đa luồng rất phức tạp và có thể làm chậm server nếu quản lý đa luồng không tốt

Trong khi đó, NodeJS chỉ sử dụng một luồng duy nhất, các câu lệnh nhập xuất không cần phải chờ mà được thực hiện ngay lập tức bằng cách sử dụng Event Loop, cứ mỗi lần có sự kiện xảy ra thì chuyển dữ liệu của sự kiện đó đến các hàm xử lý tương ứng, và trong khi các hàm xử lý đang chạy thì vòng lặp sự kiện vẫn tiếp tục nhận sự kiện và chuyển đến các hàm xử lý tương ứng khác Đối với các chương trình bình thường thì khi chạy đến dòng code trên, luồng chạy chương trình đó sẽ phải dừng lại để đợi quá trình xử lý từ cơ sở dữ liệu thực hiện xong và trả về rồi mới tiếp tục được, trong quá trình đợi đó sẽ có nhiều yêu cầu khác có thể xảy ra và hiệu suất phần mềm sẽ giảm do lãng phí tài nguyên, để giải quyết tình trạng đó thì ta có thể dùng cơ chế đa luồng để xử lý, tuy nhiên đa luồng có một nhược điểm làm tiêu tốn nhiều bộ nhớ và CPU và nếu chúng ta quản lý không tốt việc xử lý đa luồng có thể làm chậm server

Thay vì dùng đa luồng thì NodeJS sử dụng cơ chế Event Loop để giải quyết việc này, nói một cách đơn giản thì Node sẽ đưa các câu lệnh chờ trên vào một luồng khác là Event Loop để xử lý riêng, trong khi luồng chính vẫn sẽ chạy các công việc của riêng nó, và khi nào luồng chính “rảnh” rồi thì luồng Event Loop sẽ chuyển các công việc đã thực hiện xong trở về lại luồng chính Và chính vì NodeJS chỉ sử dụng 2 luồng nên tài nguyên hệ thống sẽ không bị chiếm nhiều như khi dùng cơ chế đa luồng, ngoài ra việc viết mã sử dụng Event Loop đơn giản hơn nhiều

Trong đoạn mã trên, kết quả trả về từ hàm query() thay vì được gán vào một biến thì sẽ được truyền vào một hàm khác là function(err, result) , và hàm này sẽ được chuyển vào luồng Event Loop và chờ cho đến khi luồng chính “rảnh” thì mới được chuyển qua

1.2.3 Cách thức hoạt động của NodeJS Ý tưởng chính của NodeJS là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì, NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử

21 dụng không hiệu quả Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng luồng đơn (Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời [1]

Hình 3: Cách thức hoạt động của NodeJS [3]

Tính toán nhanh như sau: giả sử mỗi một luồng đính kèm 2MB dữ liệu được gửi lên server chạy trong hệ thống với 8GB RAM hệ thống, thì có tối đa khoảng 4000 kết nối đồng thời Tuy nhiên với NodeJS thì nó có khả năng mở rộng ra cả hàng triệu kết nối cùng lúc Thật vậy, cơ chế của NodeJS Application xử lý Model như sau:

- Client gửi request đến Web Server

- NodeJS Web Service duy trì trong nội bộ một luồng giới hạn để cung cấp dịch vụ cho Client Request

- NodeJS Web Service nhận tất cả các request và đặt chúng vào một trong Queue Nó được gọi là một Event Queue

- NodeJS Web Service nội bộ có một thành phần được gọi là "Event Loop"

- Event Loop chỉ sử dụng một luồng đơn để xử lý Model

- Event Loop kiểm tra tất cả các Request đặt trong Event Queue Nếu không có request nào thì chờ request đến vô thời hạn

- Nếu có request thì sẽ lấy một request từ Event Queue:

- Khởi động quá trình xử lý tiến trình từ client request

- Nếu Client Request không chứa nhiều Blocking I/O thì xử lý tất cả mọi thứ và chuẩn bị cho quá trình gửi lại phản hồi cho phía client

- Nếu Client Request chứa nhiều Blocking I/O như việc tương tác với cơ sở dữ liệu, tập tin hệ thống, dịch vụ mở rộng, thì nó sẽ thực hiện theo các phương pháp tiếp cận khác nhau

1 Kiểm tra các luồng sẵn có từ nội bộ bên trong của request gửi lên

2 Chọn một luồng và chỉ định cho client request tương ứng với luồng đó

3 Luồng đó phải có trách nhiệm với reuqest đó, xử lý nó, thực thi các hoạt động Blocking I/O, chuẩn bị các phản hồi và gửi lại cho Event Loop

4 Event Loop gửi lại phản hồi tương ứng cho client

Hình 4: Cơ chế của Event Loop trong NodeJS [4]

Mô tả sơ đồ như sau:

- Có n số lượng client gửi request lên web service Chúng ta giả định rằng chúng đều truy cập đồng thời vào ứng dụng Web của chúng ta

- Chúng ta giả định client của chúng ta là Client-1, Client-2 đến client-n

- Web server của chúng ta duy trì một vùng các luồng có giới hạn và giả định rằng m là số luồng của vùng luồng đó

- NodeJS Web service nhận các request từ client-1, client-2 đến client-n và đặt chúng vào trong Event Queue

- NodeJS Event Loop chọn các request theo dạng một đối một:

▪ Event Loop chọn client-1 request-1 o Kiểm tra trong client-1 request-1 có không yêu cầu bất kì hoạt động Blocking I/O hoặc mất nhiều thời gian cho việc tính toán phức tạp o Request này thì đơn giản và Non-blocking I/O, nó không có đòi hỏi một xử lý nào riêng biệt

24 o Event Loop xử lý tất cả các giai đoạn để cung cấp cho hoạt động của client-1 request-1 (hoạt động ở đây nghĩa là các function của javascript) và chuẩn bị response-1 o Event Loop gửi Response-1 đến Client-1

KHẢO SÁT HIỆN TRẠNG MÔ HÌNH HÓA YÊU CẦU

Chúng em đã khảo sát thực tế trên 3 trang mạng xã hội thông dụng nhất trong thị trường hiện nay như facebook.com, linkedin.com, gapo.vn, để qua đó xác định được phạm vi đề tài

Các tính năng nổi bật:

Trò chuyện và tương tác với bạn bè mọi lúc mọi nói chỉ cần có thiết bị được kết nối Internet

Cập nhật, chia sẻ hình ảnh, video, thông tin, story (câu chuyện)

Tìm kiếm bạn bè thông qua địa chỉ email, số điện thoại, tên người dùng hay thậm chí là thông qua bạn chung

Tận dụng làm nơi bán hàng online như: Tạo Fanpage để bán hàng, bán hàng trên trang cá nhân Đa dạng game cho người dùng mặc sức giải trí, trải nghiệm

Khả năng tag (gắn thẻ) hình ảnh, nhận diện khuôn mặt thông minh

Cho phép tạo khảo sát/thăm dò ý kiến ngay trên tường cá nhân

Trang chủ có những chức năng sau (từ đầu trang tới cuối trang)

- Header: Thanh công cụ gồm

▪ Các button dẫn đến các chức năng khác (Watch, Marketplace,

▪ Textbox để nhập từ khóa cần tìm kiếm

▪ Button tên tài khoản: để di chuyển đến trang cá nhân

▪ Button icon: hiển thị menu, tin nhắn , danh sách thông báo, cài đặt thêm

- Body: Hiển thị các phần nội dung:

▪ Bên trái: o Các button dẫn đến các chức năng khác (Watch, Marketplace, Newsfeed group, Gaming)

38 o Các button dẫn đến những group mà người dùng đã theo dõi

▪ Trung tâm: o Danh sách story của bạn bè đã đăng o Textbox dùng để tạo nhanh một bài viết o Danh sách các bài viết của bạn bè và những nhóm mà người dùng đã theo dõi

▪ Bên phải: o Nội dung quảng cáo o Danh sách những bạn bè đang trực tuyến

Hình 13: Trang chủ Facebook.com

Các chức năng nổi bật:

- Kết nối nhà tuyển dụng với người tìm việc nhanh chóng

- Tham gia các hội nhóm, thảo luận về các vấn đề được đăng tải

- Truyền thông bản thân một cách chuyên nghiệp bằng LinkedIn Người dùng có thể giới thiệu kinh nghiệm làm việc, thành tích công việc và đề xuất thường đến từ đồng nghiệp và khách hàng của người dùng

- Tìm kiếm thông tin của đồng nghiệp, công ty, bạn bè dễ dàng trên

LinkedIn nếu như thông tin đó được công khai

- Tài khoản LinkedIn đồng bộ hóa với TripIt, PowerPoint, Amazon,

Twitter hoặc blog cá nhân của người dùng

- Header: thanh công cụ bao gồm:

- Textbox nhập từ khóa tìm kiếm

- Button icon: di chuyển đến các chức năng khác ( các công ty đã kết nối, những công việc đang tuyển dụng, tin nhắn, thông báo, hình ảnh đại diện)

- Body: hiển thị các phần nội dung bao gồm:

- Bên trái: thông tin cá nhân người dùng, các nhóm và sự kiện người dùng theo dõi

- Các bài đăng từ các công ty, nhóm được người dùng theo dõi

- Danh sách đề xuất các công ty và người dùng khác

- Textbox tìm kiếm bạn bè

- Danh sách những bạn đè đang trực tuyến

Hình 14: Trang chủ Linkedin.com

- Tính năng cá nhân hóa và trang trí bài viết cá nhân

- Dễ dàng kết bạn theo vị trí

- Biểu tượng cảm xúc khác biệt được thiết kế riêng

- Ngăn chặn tình trạng mạo danh, đánh cắp tài khoản với tính năng định danh tài khoản chính chủ

- Sử dụng được trên nhiều nền tảng khác nhau

- Header: thanh công cụ bao gồm:

▪ Textbox nhập từ khóa tìm kiếm

▪ Button icon: di chuyển đến các chức năng khác ( trang chủ, nhóm, video, tin nhắn)

- Body: gồm các phần nội dung:

▪ Bên trái: o Button chọn chủ đề hiện trên bảng tin:

▪ Button khám phá: hiển thị tất cả những bài đăng được Gapo đề xuất

▪ Button theo dõi: hiển thị những bài đăng của trang được người dùng theo dõi

▪ Button tìm bạn bè: hiển thị những người dùng được Gapo đề xuất kết bạn

▪ Button trang của bạn: hiển thị các bài đăng trên trang được được người dùng tạo

▪ Button tạo trang: hiển thị chức năng tạo trang

▪ Trung tâm: o Pannel tạo nhanh bài viết o Danh sách các story được Gapo đề xuất o Những bài đăng được lọc theo các Button ở phần nội dung bên trái

▪ Bên phải: o Danh sách những người bạn đang trực tuyến

Hình 15: Trang chủ Gapo.vn

Qua dữ liệu khảo sát được ở 3 trang mạng xã hội phổ biến nhất hiện nay, chúng em đã tổng hợp lại những yêu cầu chức năng cho đề tài “Xây dựng website mạng xã hội trực tuyến sử dụng MERN Stack” như sau:

- Đề tài là một nơi kết nối những người dùng nên chức năng chính đầu tiên cần quan tâm đó là giao diện thân thiện với mọi người dùng Những thao tác cho các chức năng quan trọng như: tạo bài viết, tương tác bài viết ( thích, bình luận, chia sẽ, báo cáo bài viết), nhắn tin cần tối giản và phản hồi nhanh

- Phát triển các tính CRUD cho người quản lý để quản lý các đối tượng như tài khoản, bài viết, tin nhắn, …

- Có thể thêm tính năng phân tích sở thích tương tác bài viết của người dùng để đề xuất những bài viết phù hợp, có thể ứng dụng học máy (machine learning)

- Lưu thông tin về người dùng

- Lưu trữ bình reaction của người dùng với bài viết của mình hoặc của người dùng khác

- Thông tin các user của hệ thống

- Thông tin phân quyền sử dụng của người dùng

- Tra cứu các thông tin liên quan như tên người dùng

- Thống kê những bài viết bị báo cáo nội dung

- Thống kê những bài viết có lượt tương tác cao

2.2.2 Yêu cầu phi chức năng

- Tốc độ tìm kiếm nhanh và chính xác

- Tiết kiệm được thời gian, thu hẹp không gian lưu trữ, tránh thất lạc dữ liệu

- Tốc độ xử lý các thao tác nhanh chóng và chính xác

- Có thể thiết kế thêm các chức năng theo yêu cầu

- Thời gian truyền tải nội dung giữa các thiết bị

2.3 MÔ HÌNH HÓA YÊU CẦU

Hình 16: Use case người dùng

Hình 17: Use case khôi phục mật khẩu

Hình 18: Use case tương tác bài viết

Hình 19: Use case quản lý bài viết bản thân

Hình 20: Use case quản lý bạn bè

Hình 21: Use case chỉnh sửa trang cá nhân

Hình 22: Use case quản lý nhóm

2.3.1.2 Use case Người quản lý

Hình 24: Use case quản lý tài khoản

Hình 25: Use case quản lý bài viết

Bảng 1: Use case quản lý tài khoản

Mô tả: Hình ảnh trên web - Xem danh sách tài khoản đang có trên hệ thống

- Tạo tài khoản mới cho người dùng

- Khóa hoặc mở tài khoản người dùng

- Khôi phục mật khẩu tài khoản người dùng

Tác nhân kích hoạt Người quản lý

Tiền điều kiện Đã đăng nhập

Các bước thực hiện - Bước 1: Đăng nhập tài khoản admin tại trang quản lý

- Bước 2: Chọn tab Quản lý tài khoản người dùng

- Bước 3: Chọn chức năng cần thực hiện

Bảng 2: Use case quản lý bài viết

Mô tả: Hình ảnh trên web - Xem danh sách bài viết đã đăng

- Chỉnh sửa nội dung bài viết

Các bước thực hiện - Bước 1: Đăng nhập tài khoản admin tại trang quản lý

- Bước 2: Chọn tab Quản lý bài viết

- Bước 3: Lọc danh sách bài viết theo tên người dùng

- Bước 4: Thực hiện chức năng

Bảng 3: Use case chỉnh sửa thông tin cá nhân

Chỉnh sửa thông tin cá nhân

Mô tả: Hình ảnh trên web - Thay đổi thông tin cá nhân

- Thay đổi mật khẩu tài khoản

Các bước thực hiện - Bước 1: Đăng nhập bằng tài khoản admin trên trang quản lý

- Bước 2: Nhấn vào ảnh đại diện và chọn chỉnh sửa thông tin cá nhân

- Bước 3: Thay đổi thông tin

- Bước 4: Nhấn Lưu thay đổi

Bảng 4: Use case đăng nhập Đăng nhập

Mô tả: Hình ảnh trên web - Người quản lý sẽ được cung cấp tài khoản để đăng nhập vào trang quản lý

Các bước thực hiện - Bước 1: Nhập tên đăng nhập và mật khẩu được cung cấp

- Bước 2: Nhấn nút đăng nhập

Bảng 5: Use case đăng ký Đăng ký

Mô tả: Hình ảnh trên web Người dùng chưa có tài khoản sẽ tạo tài khoản tại trang đăng ký

Tác nhân kích hoạt Người dùng chưa đăng nhập, người dùng đã đăng nhập

Tiền điều kiện Không có

Các bước thực hiện - Bước 1: Truy cập vào trang đăng ký tài khoản

- Bước 2: Nhập thông tin cá nhân được yêu cầu

- Bước 3: Chọn nút Đăng ký

Bảng 6: Use case Khôi phục mật khẩu

Mô tả: Hình ảnh trên web

Khi người dùng khôi phục mật khẩu của tài khoản đăng ký trước đó Người dùng có thể chọn quên mật khẩu để tạo mật khẩu tải khoản của mình

Tác nhân kích hoạt Người dùng chưa đăng nhập, người dùng đã đăng nhập

Tiền điều kiện Không có

Các bước thực hiện - Bước 1: Chọn quên mật khẩu tại trang đăng nhập

- Bước 2: Nhập email đã đăng ký tài khoản của mình

- Bước 3: Truy cập email và sao chép mã xác nhận

- Bước 4: Tại trang quên mật khẩu, dán mã xác nhận vừa sao chép và nhấn xác nhận

- Bước 5: Nhập mật khẩu mới và xác nhận mật khẩu mới

- Bước 6: Nhấn nút xác nhận

Bảng 7: Use case tạo bài viết

Người dùng có thể chia sẻ cảm xúc hiện tại hoặc đăng tải hình ảnh kèm với nội dung cho bài viết

Tác nhân kích hoạt Người dùng đã đăng nhập

Tiền điều kiện Đăng đăng nhập

Các bước thực hiện - Bước 1: Tại trang chủ hoặc trang cá nhân, người dùng chọn tạo bài viết

- Bước 2: Nhập nội dung của bài viết muốn chia sẻ, có thể đính kèm ảnh hoặc video

- Bước 3: Nhấn nút Đăng để đăng tải bài viết

Bảng 8: Use case tương tác bài viết

Người dùng có thể bày tỏa cảm xúc cá nhân của mình đến một bài viết khác hoặc của mình bản thân thông qua các tương tác:

- Tạo bình luận nêu cảm nghĩ bản 55han

- Chia sẻ bài viết về tường nhà của mình

Tiền điều kiện Đăng nhập

Bảng 9: Use case quản lý bài viết

Người dùng có quyền chỉnh sửa, xóa, ẩn bài viết

Các bước thực hiện - Bước 1: Truy cập trang cá nhận, tại đây danh sách bài viết của người dùng đã đăng hoặc chia sẻ sẽ hiện ra

- Bước 3: Chọn bài viết cần thực hiện thao tác

- Bước 4: Chọn dấu ba chấm nằm tại góc trên bên phải của bài viết

- Bước 5: Thực hiện thao tác

- Bưới 6: Chọn nút lưu thay đổi nếu chỉnh sửa nội dung hoặc nút xác nhận cho xóa, ẩn bài viết

Bảng 10: Use case quản lý bạn bè

- Tìm kiếm bạn bè theo tên Tại danh sách kết quả, người dùng có thể thực hiện thao tác thêm bạn bè hoặc xóa bạn bè nếu như người dùng đó đã là bạn bè

- Xem danh sách bạn bè Tại đây người dùng có thể xóa bạn bè

- Xem danh sách lời mời kết bạn Tại đây người dùng có thể chấp nhận hoặc từ chối lời mời

Các bước thực hiện - Bước 1: Truy cập vào trang cá nhân

- Bước 2: Chọn chức năng quản lý bạn bè

- Bước 3: Thực hiện các thao tác mong muốn như xem danh sách bạn bè, danh sách lời mời kết bạn, tìm kiếm bạn bè

Bảng 11: Use case chỉnh sửa trang cá nhân

Chỉnh sửa trang cá nhân

Người dùng có thể chỉnh sửa thông tin trang cá nhân theo ý muốn như:

- Giới hạn người có thể xem trang cá nhân của bạn như: chọn “công khai” nếu như muốn tất cả mọi người có thể xem trang cá nhân, chọn “bạn bè” nếu như chỉ muốn những người bạn có thể xem, chọn “cá nhân” nếu như bạn không muốn ai có thể xem trang cá nhân

- Chỉnh sửa ảnh nền cho trang cá nhân

- Thay đổi thông tin cá nhân như: tên, ngày tháng năm sinh, ảnh đại diện,…

- Bước 2: Chọn chỉnh sửa trang cá nhân

- Bước 3: Chọn nội dung muốn chỉnh sửa

- Bước 4: Nhấn nút lưu để lưu những thay đổi

Bảng 12: Use case chỉnh sửa trang cá nhân

- Tạo nhóm để chia sẻ những sở thích chung Tác nhân kích hoạt Người dùng đã đăng nhập

- Bước 2: Chọn chức năng nhóm

- Bước 4: Nhập nội dung cần thiết để tạo nhóm

Bảng 13: Use case tạo nhóm

- Chỉnh sửa thông tin nhóm

- Mời vào nhóm Tác nhân kích hoạt Người dùng đã đăng nhập

- Bước 2: Chọn chức năng nhóm

- Bước 3: Chọn chức năng cần thực hiện

THIẾT KẾ PHẦN MỀM

Hình 26: Lược đồ tuần tự chức năng “Đăng nhập”

Hình 27: Lược đồ tuần tự chức năng “Đăng ký”

Hình 28: Lược đồ tuần tự chức năng “Quên mật khẩu”

Hình 29: Lược đồ tuần tự chức năng “Tạo bài viết”

Hình 30: Lược đồ tuần tự chức năng “Chỉnh sửa bài viết”

Hình 31: Lược đồ tuần tự chức năng “Xóa bài viết”

Hình 32: Lược đồ tuần tự chức nắng “Tạo bình luận”

Hình 33: Lược đồ tuần tự chức năng “Chỉnh sửa bình luận”

Hình 34: Lược đồ tuần tự chức năng “Xóa bình luận”

Hình 35: Lược đồ tuần tự chức năng “Thích bài viết”

Hình 36: Lược đồ tuần tự chức năng “Chỉnh sửa trang cá nhân”

Hình 37: Lược đồ tuần tự chức năng “Đổi mật khẩu”

Hình 38: Lược đồ tuần tự chức năng “Hủy kết bạn”

Hình 39: Lược đồ tuần tự chức năng “Chấp nhận kết bạn”

Hình 40: Lược đồ tuần tự chức năng “Gửi lời mời kết bạn”

Hình 42: Giao diện đăng nhập Bảng 14: Mô tả giao diện đăng nhập

Số thứ tự Loại thẻ Ý nghĩa

1 Img Ảnh nền cho giao diện đăng nhập

4 Button Nhận dữ liệu 2 input và gọi

Hình 43: Giao diện đăng ký Bảng 15: Mô tả giao diện đăng ký

1 Input Khung nhập tài khoản

4 Input Khung nhập mật khẩu

5 Input Khung nhập lại mật khẩu

6 Button Lấy dữ liệu từ các input trên và gọi api Đăng ký

3.3.3 Giao diện quên mật khẩu

Hình 44: Giao diện quên mật khẩu

1 Input Khung nhập email của tài khoản quên mật khẩu

2 Button Nút gửi code xác thực đến email vừa nhập

3 Input Khung nhập code được gửi đến email

4 Button Nút kiểm tra code hợp lệ

5 Input Khung nhập mật khẩu mới

6 Input Khung nhập lại mật khẩu

7 Button Nút đổi mật khẩu

Bảng 16: Mô tả giao diện quên mật khẩu

Hình 45: Giao diện trang chủ

1 Li Đi đến trang bài viết

2 Li Đi đến trang danh sách người dùng

3 Li Đi đến danh sách nhóm đã tham gia

4 Button Mở hộp thoại tạo bài viết

5 Span Mở hộp thoại lời mời kết bạn

6 Span Mở hộp thoại thông báo

7 Button Đến trang cài đặt

8 Button Mở hộp thoại tạo bài viết

Bảng 17: Mô tả giao diện trang chủ

Hình 46: Giao diện bài viết Bảng 18: Mô tả giao diện bài viết

3 Button Xoá,chỉnh sửa bài viết

4 Textarea Nội dung bài viết

5 P Số lượt thích bài viết

6 P Số lượt bình luận bài viết

7 Button Tương tác bài viết ( Thích hoặc Bỏ thích)

3.3.6 Giao diện danh sách lời mời kết bạn

Hình 47: Giao diện danh sách lời mời kết bạn Bảng 19: Mô tả giao diện danh sách lời mời kết bạn

2 Img Ảnh đại diện người yêu cầu kết bạn

3 P Tên người yêu cầu kết bạn

4 Button Chấp nhận yêu cầu kết bạn

5 Button Từ chối yêu cầu kết bạn

3.3.7 Giao diện danh sách thông báo tương tác

Hình 48: Giao diện danh sách thông báo Bảng 20: Mô tả giao diện danh sách thông báo

2 Img Ảnh đại người người tương tác

4 Image Trạng thái thông báo đã xem

5 P Khoảng thời gian được tính từ lúc tương tác đến hiện tại

3.3.8 Giao diện tạo bài viết

Hình 49: Giao diện tạo bài viết Bảng 21: Mô tả giao diện tạo bài viết

1 P Tên hộp thoại tạo bài viết

2 Svg Nhấn để đóng hộp thoại tạo bài viết

3 Label Chế độ bài viết

4 Textarea Khung nhập nội dung bài viết

5 Button Nhấn để tải ảnh từ máy tính và đính kèm vào bài viết

6 Button Nhấn để đóng hộp thoại tạo bài viết

7 Button Nhấn để tạo bài viết

3.3.9 Giao diện chỉnh sửa bài viết

Hình 50: Giao diện chỉnh sửa bài viết

1 P Tên hộp thoại tạo bài viết

2 Svg Nhấn để đóng hộp thoại tạo bài viết

3 Label Chế độ bài viết

4 Textarea Khung nhập nội dung bài viết

5 Button Nhấn để tải ảnh từ máy tính và đính kèm vào bài viết

6 Button Nhấn để đóng hộp thoại tạo bài viết

7 Button Nhấn để cập nhật bài viết

Bảng 22: Mô tả giao diện chỉnh sửa bài viết

3.3.10 Giao diện bình luận bài viết

Hình 51: Giao diện bình luận bài viết

Bảng 23: Mô tả giao diện bình luận bài viết

3 Image Ảnh người bình luận

6 Textarea Nội dung bình luận

7 P Hiển thị giới hạn nội dung bình luận

8 Textarea Khung nhập bình luận mới

3.3.11 Giao diện tùy chỉnh trên thanh công cụ đầu trang

Hình 52: Giao diện tùy chỉnh trên thanh công cụ đầu trang Bảng 24: Mô tả giao diện tùy chỉnh trên thanh công cụ đầu trang

1 Li Đăng xuất tài khoản

3.3.12 Giao diện thay đổi mật khẩu của tài khoản bản thân

Hình 53: Giao diện thay đổi mật khẩu tài khoản của bản than Bảng 25: Mô tả giao diện thay đổi mật khẩu của tài khoản bản thân

1 P Tên hộp thoại thay đổi mật khẩu

2 Svg Nhấn để hiện mật khẩu

3 Input Khung nhập mật khẩu cũ

4 Input Khung nhập mật khẩu mới

5 Input Khung nhập xác nhận lại mật mới

6 Button Nhấn để cập nhật mật khẩu

3.3.13 Giao diện trang cá nhân

Hình 54: Giao diện trang cá nhân Bảng 26: Mô tả giao diện trang cá nhân

1 P Số bài đăng của người dùng

3 P Số lượng nhóm người dùng tham gia

4 Button Tab thông tin người dùng

9 A Mạng xã hội khác của người dùng

13 Image Ảnh đại diện người dùng

3.3.14 Giao diện chỉnh thông tin cá nhân

Hình 55: Giao diện chỉnh sửa trang cá nhân Bảng 27: Mô tả giao diện chỉnh sửa trang cá nhân

2 Text Khung nhập họ tên

4 Text Khung nhập công việc

5 Datetimepicker Khung chọn ngày sinh

6 Select Khung nhập địa chỉ

7 Select Khung nhập nơi sinh

8 Button Nhấn để cập nhật thông tin

9 Label Tên khung chọn ngày sinh

3.3.15 Giao diện chỉnh sửa ảnh đại diện và ảnh bìa

Hình 56:Giao diện sửa ảnh đại diện và ảnh bìa Bảng 28: Mô tả giao diện chỉnh sửa ảnh đại diện và ảnh bìa

1 P Tên hộp thoại thay dổi ảnh đại diện và ảnh bì

2 image Ảnh người dùng hiện tại

3 Input Nhấp để chọn ảnh mới

4 Image Ảnh bìa hiện tại

5 Input Nhấp để chọn ảnh bìa mới

6 Button Nhấn để cập nhật

3.3.16 Giao diện chỉnh sửa sở thích

Bảng 29: Mô tả giao diện chỉnh sửa sở thích

1 P Tên hộp thoại cập nhật sở thích

2 image Nhấp để loại bỏ sở thích

3 Input Tiêu đề sở thích

Hình 57:Giao diện chỉnh sửa sở thích

4 Image Nội dung sở thích

5 Input Nhấp để thêm sở thích kh

6 Button Nhấn để cập nhật

3.3.17 Giao diện tab bạn bè trong trang cá nhân

Hình 58: Giao diện tab bạn bè trong trang cá nhân Bảng 30: Mô tả giao diện tab bạn bè trong trang cá nhân

5 P Số bạn bè của người dùng

3.3.18 Giao diện tab nhóm trong trang cá nhân

Hình 59: Giao diện nhóm trong trang cá nhân Bảng 31: Mô tả giao diện nhóm trong trang cá nhân

2 Image Ảnh đại diện của nhóm

4 P Loại nhóm (công khai,kín)

5 P Số lượng thành viên trong nhóm

6 P Số lượng bài đăng trong nhóm

Hình 60: Giao diện trang nhóm Bảng 32: Mô tả giao diện trang nhóm

1 Button Nhấp để mở hộp thoại tạo nhóm

2 Image Ảnh đại diện của nhóm

4 P Loại nhóm (công khai,kín)

5 P Số lượng thành viên trong nhóm

6 P Số lượng bài đăng trong nhóm

3.3.20 Giao diện trang danh sách người dùng

Hình 61:Giao diện trang danh sách người dùng Bảng 33: Mô tả giao diện trang danh sách người dùng

4 P Số bạn bè của người dùng

3.3.21 Giao diện biểu đồ trang admin

Hình 62: Giao diện biểu đồ trang admin Bảng 34: Mô tả giao diện biểu đồ trang admin

1 P Số lượng người tương tác trong trang web hôm nay

2 P Số lượng bài viết đăng hôm nay

3 P Số lượng người truy cập trang web hôm nay

4 P Số lượng tài khoản tạo mới trong hôm nay

5 Button Cập nhật số lượng người tương tác trang web trong hôm nay

6 Button Cập nhật số lượng bài viết được đăng trong hôm nay

7 Button Cập nhật số lượng người truy cập trang web trong hôm nay

8 Button Cập nhật số lượng tài khoản tạo mới trong hôm nay

9 Span Hiển thị biểu đồ số lượng người truy cập trang web theo thời gian được chọn

10 Span Hiển thị biểu đồ số lượng tương tác các bài viết của tất cả người dùng theo thời gian được chọn

11 Select Chọn thời gian biểu đồ hiển thị (ngày / tháng / năm)

12 Datetimepicker Chọn ngày bắt đầu cho biểu đồ

13 Datetimepicker Chọn ngày kết thúc cho biểu đồ

3.3.22 Giao diện bảng quản lý người dùng trang admin

Hình 63: giao diện bảng quản lý người dùng trang admin

Bảng 35: Mô tả giao diện bảng quản lý người dùng trang admin

1 Input Tìm kiếm người dùng trong bảng theo tên

2 Svg Nhấn để hiển thị hộp thoại chỉnh sửa thông tin người dùng

3 Switch Ẩn/ hiện tất cả bài viết người dùng trên trang web

3.3.23 Giao diện bảng quản lý bài viết trang admin

Hình 64: Giao diện bảng quản lý bài viết trang admin

1 Input Tìm kiếm bài viết theo nội dung bài viết

2 Svg Xem chi tiết thông tin bài viết

3 Switch Ẩn/ hiện bài viết trên trang web

Bảng 36: Mô tả giao diện bảng quản lý bài viết trang admin

KIỂM THỬ ỨNG DỤNG

Việc thực hiện kế hoạch kiểm thử này nhằm đạt được các mục đích sau:

− Xác định thông tin cơ bản về dự án và các thành phần chức năng được kiểm thử và không được kiểm thử

− Liệt kê những yêu cầu cho việc kiểm thử (Test Requirements)

− Những chiến lược kiểm thử nên được sử dụng

− Ước lượng những yêu cầu về tài nguyên và chi phí cho việc kiểm thử

− Những tài liệu được lập sau khi hoàn thành việc kiểm thử

4.1.2 Lịch trình kiểm thử

Bảng 38: Lịch trình kiểm thử

Milestone Deliverables Duration Start Date End Date

Lập kế hoạch kiểm thử

Xem lại các tài liệu Tài liệu Tes Plan 3 ngày 9/11/2021 12/11/2021

Thiết kế các testcase Tài liệu Testcase 3 ngày 12/11/2021 15/11/2021

Viết các testcase Tài liệu Testcase 4 ngày 15/11/2021 19/11/2021

Xem lại các testcase Tài liệu Testcase 2 ngày 19/11/2021 21/11/2021

Thực thi các testcase Tài liệu Testcase 3 ngày 21/11/2021 24/11/2021

Ghi nhận và đánh giá kết quả kiểm thử

4.2.1 Những chức năng được kiểm thử

Người dùng sử dụng tài khoản đã đăng ký để truy cập vào trang web Sau khi đăng nhập thành công, tùy theo loại tài khoản, trang web sẽ đi đến các đường dẫn trang chủ cho người quản lý hoặc người dùng bình thường

Người dùng muốn truy cập và sử dụng các dịch vụ của trang web phải tạo tài khoản ( chỉ tạo tài khoản cho người dùng, tài khoản người quản lý sẽ được cấp từ phía lập trình viên) Tài khoản đăng ký thành công bắt buộc phải đăng nhập được không cần phải tải lại trang tại trang đăng nhập

Người dùng sau khi đăng nhập có thể tạo bài viết Nội dung bài viết có thể kèm theo hình ảnh và video Tạo bài viết thành công hoặc thất bại đều thông báo cho người dùng

Người dùng có thể chỉnh sửa nội dung cho bài viết của mình Sau khi chỉnh sửa thành công hoặc thất bại đều phải thông báo cho người dùng Nếu chỉnh sửa bài viết thành công thì bài viết đó phải được cập nhật theo dữ liệu đã chỉnh sửa mà không cần phải tải loại trang

Người dùng có thể xóa bài viết của mình đã đăng tải trước đó Sau khi xóa thành công hoặc thất bài đều phải thông báo cho người dùng

Người dùng có thể tìm kiếm những người dùng khác trong mạng xã hội thông qua họ và tên của người dùng đó Kết quả tìm kiểm sẽ là danh sách những người dùng có tên

98 giống hoàn toàn hoặc gần giống so với từ khóa tìm kiếm Nếu không tìm thấy người dùng nào thì trả về thông báo “người dùng này không tồn tại”

4.2.2 Những chức năng không được kiểm thử:

Những chức năng không được đặc tả trong tài liệu đặc tả của hệ thống Eduhub:

− Chức năng sao lưu và bảo trì hệ thống

− Chức năng phân tích dữ liệu người dùng trên hệ thống

− Và các chức năng khác không thuộc đặc tả của hệ thống

4.3 Yêu cầu về tài nguyên:

Máy tính cá nhân có kết nối mạng Internet

Bảng 39: Tài nguyên phần cứng cần để kiểm thử trên PC

Intel Core i7, 4.1 GHz 16 GB 512 GB 64 bit Điện thoại cá nhân có kết nối mạng Internet

Bảng 40: Tài nguyên phần cứng cần để kiểm thử trên mobile

Bảng 37: Tài nguyên phần mềm cần để kiểm thử

Tên phần mềm Phiên bản Loại

Mozilla Firefox Mới nhất phù hợp với từng hệ điều hành

Google Chrome Trình duyệt web

Bảng 38: Công cụ kiểm thử

Hoạt động Công cụ Nhà cung cấp Phiên bản

Quản lý Test Case Microsoft Office

Quản lý Configuration Microsoft Office

Máy tính cá nhân có kết nối mạng Internet để có thể truy cập vào trang web Ehub.edu.vn Các chức năng của trang web được kiểm thử trên các web browser đã nêu ở trên có cho phép cookies và javascript

4.4 Bảng phân công kiểm thử

Bảng 39: Phân công kiểm thử

Lê Thanh Hải Test Designer / Tester: Thiết kế và viết các test case, thực thi các testcase cho 2 chức năng Quản lý xác thực người dùng và

Quản lý tài khoản, xem lại Test Plan

Phạm Hoàng Long Test Manager / Test Designer / Tester: Thiết kế và viết các testcase bổ sung, thực thi các testcase bổ sung, đọc các tài liệu tham khảo để cung cấp thông tin cần thiết cho nhóm, xem lại

Unit Tests, Integration Tests, System Tests, and Acceptance Tests (UAT)

Bảng 40: Kiểm thử chức năng

Mục đích kiểm tra Đảm bảo các chức năng được kiểm tra hoạt động chính xác theo đặc tả yêu cầu

Kỹ thuật Thực thi tất cả các trường hợp có thể có cho mỗi nhóm chức năng, sử dụng dữ liệu hợp lệ và không hợp lệ để xác định:

- Kết quả mong đợi khi dữ liệu hợp lệ được sử dụng

- Cảnh báo phù hợp hiện ra khi dữ liệu không hợp lệ được sử dụng

Tiêu chuẩn dừng Tất cả các testcase đã được thiết kế đều được thực thi

Tất cả các lỗi tìm thấy đều được ghi nhận lý do rõ ràng để có thể giúp cho developer khắc phục

Chịu trách nhiệm kiểm thử

Cách kiểm thử Kiểm thử bằng tay thủ công, tuần tự theo các bước được định nghĩa trong testcase

Xử lý ngoại lệ Liệt kê tất cả các vấn đề liên quan phát sinh trong quá trình thực thi kiểm thử

Bảng 41: Kiểm thử thiết bị

Mục đích kiểm tra Đảm bảo các chức năng được kiểm tra hoạt động chính xác theo đặc tả yêu cầu trên các loại thiết bị khác nhau

Kỹ thuật Thực thi một chức năng trên nhiều thiết bị khác nhau để xác thực khả năng thích nghi với các thiết bị khác nhau

Kết quả đạt mong đợi khi hệ thống tương thích tốt với nhiều hệ điều hành, thiết bị

Cảnh báo không phù hợp cho những môi trường, thiết bị đã cũ

Tiêu chuẩn dừng Tất cả các testcase đã được thiết kế đều được thực thi

Tất cả các lỗi tìm thấy đều được ghi nhận lý do rõ ràng để có thể giúp cho developer khắc phục

4.5.2.3 Kiểm tra luồng dữ liệu

Bảng 42: Kiểm tra luồng dữ liệu

Mục đích kiểm tra Đảm bảo các đoạn mã nguồn được kiểm tra được lập trình không có bất thường về luồng dữ liệu

Kỹ thuật Phân tích vẽ đồ thị dòng điều khiển, dòng điều khiển cơ bản, dòng dữ liệu từ đó xác định các bất thường

Tiêu chuẩn dừng Kiểm tra hết các đoạn code được chọn mà không tìm thấy các bất thường nào

4.5.2.4 Kiểm thử UI và UX

Bảng 43: Kiểm thử UI và UX

Mục đích kiểm tra Đảm bảo các chức năng được kiểm tra hoạt động chính xác theo đặc tả yêu cầu

Kỹ thuật Quan sát và so sánh UI/UX của ứng dụng với các bản thiết kế

Mockup/Wire frame của ứng dụng từ đó xác định các lỗi về

UI/UX khi xuất hiện

Tiêu chuẩn dừng Kiểm tra tất cả các UI/UX được mô tả trong mokup / wires frame

Mức độ nghiêm trọng Đặc tả lỗi

• Không sử dụng được chức năng

• Không thể đăng ký tạo tài khoản mới

• Không thể bình luận, tương tác, đăng bài

• Không xem được bài viết người khác

• Hiển thị sai thông tin

• Không thể chỉnh sửa thông tin cá nhân người dùng

• Không thể chỉnh sửa thông tin tài khoản

• Hiển thị kết quả tìm kiếm không đúng mẫu

• Các chức năng chạy không ổn định

4.6.2 Quy trình xử lý lỗi

Ghi nhận lại các lỗi được tìm thấy trong quá trình kiểm thử.Với mỗi lỗi ghi lại bằng 1 test report và gửi cho nhóm quản lý dự án

Nhận thông tin và dữ liệu kiểm thử từ nhóm quản lý dự án và tiến hành kiểm thử lỗi lại theo yêu cầu

Tiêu đề	Xây Dựng Mạng Xã Hội Sử Dụng MERN Stack
Tác giả	Lê Thanh Hải, Phạm Hoàng Long
Người hướng dẫn	TS. Lê Văn Vinh
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
Thể loại	Khóa Luận Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	111
Dung lượng	8,39 MB