CHƯƠNG 4: CHƯƠNG 4 : THIẾT KẾ
4.2 Thiết kế giao diện
4.2.1 Sơ đồ liên kết các màng hình
Hình 4-18 Sơ đồ liên kết các màn hình
Danh sách màn hình chính:
Bảng 4-12: Danh sách màng hình chính
STT Màn hình Chức năng
1 Đăng nhập Giúp người dùng đăng nhập vào hệ thống.
3 Trang chủ Xem các bài viết mới nhất từ những người dùng khác. 4 Tin nhắn Gửi tin nhắn qua lại giữa những người dùng, tạo 1
nhóm các người dùng có thể trò chuyện trao đổi với nhau.
5 Đăng bài Chia sẻ một bài viết của mình lên với mọi người. 7 Trang cá nhân Hiển thị thông tin cá nhân, các bài viết đã chia sẻ, các
bài viết đã lưu.
8 Cài đặt Cài đặt, chỉnh sửa các thông tin cá nhân của người dùng.
4.2.2 Thành phần giao diện dùng chung
diện thanh điều hướng:
Hình 4-19: Thanh header
Mô tả chi tiết các thành phần giao diện:
Bảng 4-13: Mô tả thành phần thanh header
STT Tên Kiểu Mô tả
1 Thanh header Navigation components
Thanh header để chứa các thành phần chuyển hướng trên ứng dụng.
1.1 txtSearchBox Search Input Người dùng nhập tên của một người dùng khác, hệ thống sẽ tìm tất cả kết
quả khớp với tên được tìm kiếm.
1.2 btnHome Link Người dùng nhấp vào sẽ chuyển về giao diện màn hình chính (trang chủ).
1.3 btnMessenger Link Người dùng nhấp vào] sẽ chuyển đến trang tin nhắn.
1.4 btnAddPost Popup Button Người dùng nhấp vào sẽ hiện giao diện thêm bài viết.
1.5 btnNotify Button Người dùng nhấp vào sẽ hiện các thông báo.
1.6 btnProfileList Button Người dùng nhấp vào sẽ hiện danh sách chức năng tùy chọn cho tài khoản người dùng.
4.2.2.1 Giao diện thanh tìm kiếm
Khi nhập tên tài khoản người dùng vào thanh tìm kiếm, hệ thống sẽ tìm các tài khoản có kết quả phù hợp ở bên dưới.
Hình 4-20: Thanh tìm kiếm
Mô tả chi tiết các thành phần giao diện:
Bảng 4-14: Mô tả thành phần thanh tìm kiếm
STT Tên Kiểu Mô tả
1 listUser List View Hiện thị danh sách người dùng có tên giống với nội dung tìm kiếm. 1.1 linkUser Dynamic Link Đường dẫn đến profile của những
người dùng khác.
2 btnDelete Button Người dùng nhấp vào nút [3] sẽ chuyển về giao diện màn hình chính (trang chủ).
4.2.2.2 Giao diện thêm bài viết mới
Đây là giao diện popup khi thêm bài viết với. Người dùng nhấn biểu tượng “dấu cộng” trên thanh header thì popup này sẽ hiện lên.
Hình 4-21: Thêm bài viết
Mô tả chi tiết các thành phần giao diện:
Bảng 4-15: Mô tả thành phần thêm bài viết mới
STT Tên Kiểu Chức năng
1 CreatePostDialog Popup dialog Hiện thị các tùy chọn cho bài viết. 1.1 btnSelectImg Button Chọn hình ảnh từ thiết bị.
1.2 txtImgCaption Textbox Nhập nội dung đi kèm. 1.3 btnEmoji Button Chọn biểu tượng cảm xúc. 1.4 btnClosePopup Button Tắt popup thêm bài viết.
Giao diện sau khi chọn ảnh:
Hình 4-22: Giao diện sau khi chọn ảnh
Mô tả chi tiết các thành phần giao diện:
Bảng 4-16: Mô tả thành phần thêm bài viết
STT Tên Kiểu Chức năng
1 btnDeleteImg Button Xóa hình ảnh vừa chọn.
2 btnSelectMoreImg Button Chọn thêm hình ảnh từ thiết bị.
4.2.2.3 Giao diện điều hướng trang cá nhân
Sau khi nhấn biểu tượng “người dùng” trên thanh header thì một drop list sẽ hiện ra.
Hình 4-23: User navigation
Mô tả chi tiết các thành phần giao diện:
Bảng 4-17: Mô tả thành phần trang chủ
STT Tên Kiểu Chức năng
1 User navigation Static link Hiện thị các tùy chọn cho bài viết. 1.1 linkToProfile Link Chuyển đến trang profile của người
dùng.
1.2 linkToSaved Link Chuyển đến trang lưu trữ của người dùng.
1.3 linkToSettings Link Chuyển đến trang cài đặt của người dùng.
chuyển màn hình đăng nhập.
4.2.3 Đăng nhập
4.2.3.1 giao diện đăng nhập
đây là giao diện màn hình đăng nhập.
Hình 4-24: Trang đăng nhập
Mô tả chi tiết các thành phần giao diện:
Bảng 4-18: Mô tả thành phần trang đăng nhập
STT Tên Kiểu Chức năng
1 txtEmail Textbox Người dùng nhập email dùng để đăng nhập vào hệ thống.
2 txtPassword Textbox Người dùng nhập mật khẩu dùng để đăng nhập hệ thống. Mật khẩu được mã hóa thành ****, có thể chọn
vào biểu tượng “mắt” để hiện mật khẩu.
3 btnLogin Link Nếu nhấn đăng nhập thành cơng sẽ chuyển sang giao diện chính của hệ thống. Nếu nhấn đăng nhập không thành công người dùng phải nhập lại email và mật khẩu.
4 Register Link Chuyển hướng giao diện đến trang đăng ký nếu người dùng chưa có tài khoản.
4.2.4 Đăng ký
4.2.4.1 Giao diện đăng ký
Hình 4-25: Trang đăng ký
Mô tả chi tiết các thành phần giao diện:
Bảng 4-19: Mô tả thành phần trang đăng ký
STT Tên Kiểu Chức năng
1 txtFullName Textbox Người dùng nhập họ tên của mình.
2 txtEmail Textbox Người dùng nhập email của mình để đăng ký tạo tài khoản mới. 3 txtUsername Textbox Người dùng nhập tên đăng nhập
mà mình muốn.
4 txtPassword Textbox Người dùng nhập mật khẩu của tài khoản.
5 txtConfirmPassword Textbox Người dùng xác nhận lại mật khẩu của tài khoản.
6 btnSignUp Button Nút đăng ký để xác nhận tạo một tạo khoản mới với các thông tin như trên. Nếu đăng ký thành cơng thì màn hình sẽ chuyển đến giao diện đăng nhập của hệ thống. Nếu đăng ký khơng thành cơng, màn hình sẽ thơng báo lỗi, người dùng phải điền lại thông tin không tin không hợp lệ.
4.2.5 Trang chủ
4.2.5.1 Giao diện news feed (bản tin)
Đây là giao diện bảng tin của trang chủ, ở đây hiện tất cả bài đăng mới nhất của những người dùng khác mà người dùng này đang theo dõi.
Bảng 4-20: Mô tả thành phần bản tin
STT Tên Kiểu Chức năng
1 btnSettingPost Button Hiện thị các tùy chọn cho bài viết. 2 btnLike Button Thể hiện yêu thích đối với bài viết. 3 btnComment Button Xem thông tin chi tiết của bài viết đó
gồm tất cả bình luận cơng khai trên bài viết.
4 btnShare Button Chia sẻ lại bài viết. 5 btnSave Button Lưu lại bài viết.
6 btnEmoji Button Thêm các emoji vào bình luận. 7 txtComment Textbox Thêm bình luận vào bài viết.
8 btnPostComment Button Xác nhận đăng bình luận của người dùng lên bài viết.
10 linkToUser Dynamic Link Đi đến trang cá nhân của người dùng khác.
11 linkToProfile Link Đi đến trang cá nhân của mình.
12 listSuggestedUser List View Danh sách các người dùng khác có thế biết hoặc quan tâm.
12.1 btnFollow Button Theo dõi một tài khoản khác.
12.2 btnSeeMore Button Xem thêm danh sách tài khoản được đề xuất khác.
4.2.5.2 Giao diện bài viết
Đây là giao diện thông tin chi tiết của một bài viết.
Hình 4-26: Bài viết
Bảng 4-21: Mô tả thành phần bài viết
STT Tên Kiểu Chức năng
1 btnReply Button Trả lời một bình luận trên bài viết. 2 btnViewReply Button Xem tất các câu trả lời của một bình
luận trên bài viết.
4.2.6 Trang tin nhắn
4.2.6.1 Giao diện tin nhắn
Hình 4-27: Trang tin nhắn
Mô tả chi tiết các thành phần giao diện:
STT Tên Kiểu Chức năng
1 txtSearchMessage Button Tìm kiếm cuộc trò chuyện trong tin nhắn.
2 listConversations list Liệt kê danh sách các cuộc trò chuyện
2.1 btnConversation Button Mở một cuộc trò chuyện.
3 boxMessage Chứa tin nhắn của người dùng
3.1 btnEmoji Button Thêm emoji vào tin nhắn.
3.2 txtMessage TextBox Nhận tin nhắn cần gửi của người dùng nhập vào.
3.3 btnImg Button Gửi ảnh vào tin nhắn.
3.4 btnSend Button Gửi tin nhắn vào cuộc trò chuyện. 3.5 btnLikeMessage Button Thể hiện yêu thích đối với tin
nhắn.
3.6 btnSettingMessage Button Hiện các chức năng đối với tin nhắn.
3.7 btnDeleteMessage Button Xóa tin nhắn.
3.8 btnForwardMessage Button Chuyển tiếp tin nhắn đó với người dùng khác.
3.9 btnCallVideo Button Thực hiện cuộc gọi giữa các người dùng trong 1 cuộc trò chuyện. 3.10 btnSettingConversation Button Di chuyển qua lại giữa phần cài
đặt cuộc hội thoại và tin nhắn của cuộc hội thoại.
4.2.6.2 Giao diện cài đặt cuộc trò chuyện trong một nhóm
Hình 4-28: Giao diện cài đặt cuộc trò chuyện nhóm
Mô tả chi tiết các thành phần giao diện:
Bảng 4-23: Mô tả thành phần cài đặt cuộc trò chuyện nhóm
STT Tên Kiểu Chức năng
1 listMembers ListView Hiện thị các thành viên trong cuộc trò chuyện.
on
3 btnAddMember Button Thêm thành viên mới vào cuộc trò chuyện .
4 btnDelete Button Xóa cuộc trò chuyện này. 5 btnBlock Button Chặn người lên hệ này . 6 btnReport Button Báo cáo người liên hệ này. 7 btnExitConversation Button Thoát khỏi cuộc trò chuyện này. 8 btnSettingMember Button Admin của nhóm tùy chỉnh một số
chức năng đối với các thành viên khác của nhóm.
Hình 4-29: Popup cài đặt thành viên
Mô tả chi tiết các thành phần giao diện:
Bảng 4-24: Mô tả thành phần Popup xóa thành viên
STT Tên Kiểu Chức năng
1 Notification box for setting member
Popup box Admin của nhóm tùy chỉnh một số chức năng đối với các thành viên khác của nhóm.
1.1 btnRemoveFromGroup Button Admin của nhóm xóa thành viên khỏi cuộc trò chuyện.
1.2 btnMakeAdmin Button Cấp quyền cho thành viên làm admin của nhóm.
1.3 btnBlock Button Admin của nhóm chăn thành viên khác .
hành động nào.
4.2.7 Trang cá nhân
4.2.7.1 3.2.6.1 Giao diện trang cá nhân
Hình 4-30: Trang cá nhân
Mô tả chi tiết các thành phần giao diện:
Bảng 4-25: Mô tả thành phần trang cá nhân
STT Tên Kiểu Chức năng
người dùng.
2 listUserInfo List view Các thông tin cơ bản của người dùng.
3 tabNavigation Tab components Khung điều hướng gồm các đường dẫn đến những tab khác. 2.1 popupFollowers Button Hiện popup danh sách những
người đang theo dõi người dùng. 2.2 popupFollowing Button Hiện danh sách những tài khoản
mà người dùng đang theo dõi. 4 gridImg Grid View Các hình ảnh, video mà người
dùng đăng tải.
4.1 tabPosts Link Hiện những hình ảnh mà người dùng đăng tải.
4.2 tabSaved Link Hiện những bài viết đã lưu của người dùng.
4.3 tabTagged Link Hiện những bài viết mà người dùng được gắn tên cùng.
4.2.7.2 Giao diện followers
Hình 4-31: Popup followers
Mô tả chi tiết các thành phần giao diện:
Bảng 4-26: Mô tả thành phần Popup followers
STT Tên Kiểu Chức năng
1 listFollowers List View Danh sách các tài khoản đang theo dõi người dùng.
1.1 btnClose Button Tắt popup.
1.2 btnRemveFollower Button Xóa tài khoản khỏi danh dách người theo dõi.
Popup khi nhấn remove
Hình 4-32: Popup xác nhận
Mô tả chi tiết các thành phần giao diện:
Bảng 4-27: Mô tả thành phần Popup xác nhận
STT Tên Kiểu Chức năng
1 boxConfirm Popup Hộp thoại xác nhận hành động. 1.1 btnRemove Button Xóa tài khoản khỏi danh sách
người theo dõi. 1.2 btnCancel Button Hủy thực hiên.
4.2.7.3 Giao diện followings
Hình 4-33: Popup following
Mô tả chi tiết các thành phần giao diện:
Bảng 4-28: Mô tả thành phần Popup following
STT Tên Kiểu Chức năng
1 listFollowings List View Danh sách các tài khoản người dùng đang theo dõi.
1.1 btnClose Button Tắt popup.
1.2 btnFollowing Button Xóa tài khoản khỏi danh dách các tài khoản đang theo dõi.
Popup sau khi nhấn nút following
Hình 4-34: Popup xác nhận
Mô tả chi tiết các thành phần giao diện:
Bảng 4-29: Mô tả thành phần Popup xác nhận
STT Tên Kiểu Chức năng
1 boxConfirm Popup Hộp thoại xác nhận hành động. 1.1 btnYes Button Đồng ý xóa tài khoản khỏi danh
sách đang theo dõi.
4.2.8 Trang cài đặt
4.2.8.1 Giao diện trang cài đặt tài khoản
Hình 4-35: Trang cài đặt người dùng
Mô tả chi tiết các thành phần giao diện:
Bảng 4-30: Mô tả thành phần trang cài đặt người dùng
STT Tên Kiểu Chức năng
1 listSettings List View Danh sách tên của các trường trong cài đặt tài khoản người dùng.
2 listAccountI nfo
3 lblUsername Label Tên của tài khoản.
4 btnChangeA
vatar
Button Đổi ảnh đại diện của tài khoản.
5, 6, 7, 8, 9, 10
txtAccountI nfo
CHƯƠNG 5: HIỆN THỰC5.1 Các công nghệ sử dụng 5.1 Các công nghệ sử dụng
5.1.1 Front-end
HTML5: HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngơn ngữ kịch bản giống như JavaScript. Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang web đa phương tiện. HTML mơ tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu.
CSS3: CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc,…
Javascript: JavaScript là một ngơn ngữ lập trình website, được tích hợp và nhúng trong HTML giúp website sống động hơn. JavaScript cho phép kiểm soát các hành vi của trang web tốt hơn so với khi chỉ sử dụng mỗi HTML. Vậy ứng dụng thực tiễn của JavaScript là gì? Các slideshow, pop-up quảng cáo và tính năng autocomplete của Google là những ví dụ dễ thấy nhất cho bạn, chúng đều được viết bằng JavaScript.
ReactJS: ReactJS là một thư viện Javascript dùng để xây dựng giao diện người dùng. Được tạo ra bởi Facebook, React càng ngày càng được sử dụng rộng rãi, đặc biệt là
trong các trang web đòi hỏi yêu cầu cao về giao diện với các khả năng nổi bật như nhanh, dễ học, code ngắn và tái sử dụng tốt.
5.1.2 Back-end
NodeJS –ExpressJS: NodeJS là một nền tảng mã nguồn mở chạy trên server-side và Networking applications. Được viết bằng ngơn ngữ JavaScript và có thể chạy trên các hệ điều hành như Mac OS X, Windows, Linux, FreeBSD, IBM i. Node JS cung cấp một kiến trúc event-driven architecture và là một non-blocking I/O API băng thông của một ứng dụng và có khả năng mở rộng. Node JS cho phép tạo ra những máy chủ web và các công cụ sử dụng ngôn ngữ JavaScript cùng module. Các module của NodeJS đã giúp việc viết code đơn giản hơn, giảm đi độ phức tạp cho việc viết ứng dụng trên server. Sử dụng Google V8 JavaScript engine để chạy code và có một lượng lớn module được viết bằng Javascript. Node JS chạy được trên Server Apache và IIS. Đặc biệt Node JS được chọn làm nền tảng phát triển của Microsoft, Yahoo, Walmart, Groupon, SAP, LinkedIn, Rakuten, Paypal, Voxer và GoDaddy. Áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể. Cung cấp các thư viện cần thiết như Express, Mongoose, Body-parser, ejs, Multer, … Express giúp tương tác giữa Server và Client. Multer giúp upload và lưu file (Ảnh, video, …).
Socket.io: là một thư viện JavaScript hướng sự kiện cho các ứng dụng web thời gian thực. Nó cho phép giao tiếp hai chiều giữa các máy khách và máy chủ web. Bao gồm hai phần: thư viện phía máy khách (socket.io-client) chạy trong trình duyệt và thư viện phía máy chủ (socket.io) cho Node.js.
5.1.3 Database
MongoDB: là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở đa nền tảng viết
bằng C++. Bản ghi trong MongoDB được lưu trữ dạng một dữ liệu văn bản (Document), là một cấu trúc dữ liệu bao gồm các cặp giá trị và trường tương tự như các đối tượng JSON. MongoDB được phát triển bởi MongoDB Inc. dưới dạng giấy phép Server Side Public License (SSPL).
Mongoose: là một framework JavaScript thường được sử dụng trong ứng dụng
Node.js với database là MongoDB.
STT Nhóm chức năng Mức độ hồn thành
Ghi chú
1 Quản lý user 90% Hoàn thành cơ bản các chứ năng như