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 cac mang hinh
Hình 4-18 Sơ đồ liên kết cac man hình
Danh sach man hinh chinh:
STT Màn hình
1 Đăng nhâp
2 Đăng ky
88 | P a g e
3 Trang chu
4 Tin nhăn
5 Đăng bai
7 Trang ca nhân
8 Cai đặt
4.2.2 Thanh 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:
STT Tên
1 Thanh header
1.2 btnHome
1.3 btnMessenger 1.4 btnAddPost 1.5 btnNotify
1.6 btnProfileList
4.2.2.1 Giao diên thanh tìm kiếm
Khi nhâp tên tai khoan người dung vao thanh tim kiêm, hê thông se tim cac tai khoan co kêt qua phu hơp ơ bên dươi.
90 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
Hình 4-20: Thanh tìm kiếm
Mô tả chi tiết các thành phần giao diện:
STT Tên
1 listUser
1.1 linkUser
2 btnDelete
91 | P a g e
4.2.2.2 Giao diên thêm bai viết mới
Đây la giao diên popup khi thêm bai viêt vơi. Người dung nhân biêu tương “dâu công” trên thanh header thi popup nay se hiên lên.
Hình 4-21: Thêm bai viết
Mô tả chi tiết các thành phần giao diện:
Bảng 4-15: Mô tả thanh phần thêm bai viết mới
STT Tên 1 CreatePostDialog 1.1 btnSelectImg 1.2 txtImgCaption 1.3 btnEmoji 1.4 btnClosePopup 92 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
Giao diên sau khi chon anh:
Hình 4-22: Giao diên sau khi chon ảnh
Mô tả chi tiết các thành phần giao diện:
Bảng 4-16: Mô tả thanh phần thêm bai viết
STT Tên
1 btnDeleteImg
2 btnSelectMoreImg
3 btnPost
93 | P a g e
4.2.2.3 Giao diên điều hướng trang ca nhân
Sau khi nhân biêu tương “người dung” trên thanh header thi môt drop list se hiên ra.
Hình 4-23: User navigation
Mô tả chi tiết các thành phần giao diện:
STT Tên 1 User navigation 1.1 linkToProfile 1.2 linkToSaved 1.3 linkToSettings 1.4 linkToLogout 94 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
chuyên man hinh đăng nhâp.
4.2.3 Đăng nhâp
4.2.3.1 giao diên đăng nhâp
đây la giao diên man hinh đă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:
STT
1
IE213 – Kỹ thuật phát triển hệ thống Web
3 btnLogin
4 Register
4.2.4 Đăng ky
4.2.4.1 Giao diên đăng ky
Đây la giao diên form đăng ky khi chưa tao tai khoan trên hê thông.
96 | P a g e
Hình 4-25: Trang đăng ky
Mô tả chi tiết các thành phần giao diện:
STT Tên
1 txtFullName
2 txtEmail
3 txtUsername
5 txtConfirmPassword
6 btnSignUp
4.2.5 Trang chu
4.2.5.1 Giao diên news feed (bản tin)
Đây la giao diên bang tin cua trang chu, ơ đây hiên tât ca bai đăng mơi nhât cua nhưng người dung khac ma người dung nay đang theo doi.
Mô tả chi tiết các thành phần giao diện:
STT Tên 1 btnSettingPost 2 btnLike 3 btnComment 4 btnShare 5 btnSave 6 btnEmoji 7 txtComment 8 btnPostComment 9 btnNext 99 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web 10 linkToUser 11 linkToProfile 12 listSuggestedUser 12.1 btnFollow 12.2 btnSeeMore
4.2.5.2 Giao diên bai viết
Đây la giao diên thông tin chi tiêt cua môt bai viêt.
Hình 4-26: Bai viết
Mô tả chi tiết các thành phần giao diện:
100 | P a g e
STT Tên
1 btnReply
2 btnViewReply
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:
Bảng 4-22: Mô tả thanh phần trang tin nhăn
101 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web STT Tên 1 txtSearchMessage 2 listConversations 2.1 btnConversation 3 boxMessage 3.1 btnEmoji 3.2 txtMessage 3.3 btnImg 3.4 btnSend 3.5 btnLikeMessage 3.6 btnSettingMessage 3.7 btnDeleteMessage 3.8 btnForwardMessage 3.9 btnCallVideo 3.10 btnSettingConversation 102 | P a g e
4.2.6.2 Giao diên cai đặt cuộc trò chuyên trong một nhóm
Hình 4-28: Giao diên cai đặ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ả thanh phần cai đặt cuộc trò chuyên nhóm
STT Tên
1 listMembers
2 btnRenameConversati
103 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web on 3 btnAddMember 4 btnDelete 5 btnBlock 6 btnReport 7 btnExitConversation 8 btnSettingMember
Giao diên popup sau khi nhân btnSettingMember
104 | P a g e
Hình 4-29: Popup cai đặt thanh viên
Mô tả chi tiết các thành phần giao diện:
Bảng 4-24: Mô tả thanh phần Popup xóa thanh viên
STT Tên
1 Notification box for
setting member 1.1 btnRemoveFromGroup 1.2 btnMakeAdmin 1.3 btnBlock 1.4 btnCancel 105 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
hanh đông nao.
4.2.7 Trang ca nhân
4.2.7.1 3.2.6.1 Giao diên trang ca nhân
Hình 4-30: Trang ca nhân
Mô tả chi tiết các thành phần giao diện:
STT Tên
1 btnEditProfile
106 | P a g e
2 listUserInfo 3 tabNavigation 2.1 popupFollowers 2.2 popupFollowing 4 gridImg 4.1 tabPosts 4.2 tabSaved 4.3 tabTagged 107 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
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ả thanh phần Popup followers
STT Tên
1 listFollowers
1.1 btnClose
1.2 btnRemveFollower
108 | P a g e
Popup khi nhân remove
Hình 4-32: Popup xac nhân
Mô tả chi tiết các thành phần giao diện:
STT Tên
1 boxConfirm
1.1 btnRemove
1.2 btnCancel
109 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
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:
STT Tên
1 listFollowings
1.1 btnClose
1.2 btnFollowing
110 | P a g e
Popup sau khi nhân nut following
Hình 4-34: Popup xac nhân
Mô tả chi tiết các thành phần giao diện:
STT Tên
1 boxConfirm
1.1 btnYes
1.2 btnNo
111 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
4.2.8 Trang cai đặt
4.2.8.1 Giao diên trang cai đặt tai khoản
Hình 4-35: Trang cai đặt người dùng
IE213 – Kỹ thuật phát triển hệ thống Web 3 4 5, 6, 7, 8, 9, 10 113 | P a g e
CHƯƠNG 5: HIỆN THỰC
5.1 Các công nghệ sử dụng5.1.1 Front-end 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à 114 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
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.
115 | P a g e
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.
5.2 Cài đặặ̣t và kiểm thử
116 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web STT Nhóm chức năng 1 Quản lý user 2 Quản lý post 3 Quản lý tin nhắn 4 Quản lý follow
IE213 – Kỹ thuật phát triển hệ thống Web
6
cá nhân khi nhấn vào thông báo, đánh dấu thông báo chưa xem/đã xem, hiện thị số lượng thơng báo mới…
Chưa có popup hiện thị nội dung thông báo mới.
Quản lý comment của bài post
118 | P a g e
CHƯƠNG 6: ĐÁNH GIÁ VÀ KẾT LUẬN
6.1 Nhận xét
6.1.1 Quá trình làm việc
Sử dụng các công cụ:
- Công cụ quản lý dự án: Trello
Hình 6-36: Q trìì̀nh làm việc ởở̉ Trello
(Link: https://trello.com/b/dPh39FfG/ie213)
- Cơng cụ quản lý dự án và phiên bản code: Github
119 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
Hình 6-37: Giao diện quảở̉n lý source code Backend trên Github
(Link: https://github.com/sonlam137216/SocialNetwork_BE)
Hình 6-38: Giao diện quảở̉n lý source code Frontend trên Github
(Link: https://github.com/giathai1505/SocialMediaWebSite)
120 | P a g e
- Công cụ thiết kế giao diện: Figma
Hình 6-39: Giao diện thiếế́t kếế́ giao diện trên Figma
(Link: https://www.figma.com/proto/I66ZPLX5xD1gkOZrKEUjpO/ig)
- Cơng cụ quản lý hình ảnh: Cloudinary
121 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
Hình 6-40: Giao diện quảở̉n lý hìì̀nh ảở̉nh của trang web
6.1.2 Kết quả đạt được
Xây dựng phần mêm thỏa mãn một số yêu cầu và biểu mẫu đề ra ban đầu.
Hiểu được và vận dụng các kiến thức được học trên lớp vê các quy trình phát triển phần mềm, các kiến thức lập trình từ CSDL Nosql (MongoDB), Backend (Express - NodeJS), Frontend (ReactJS) đến các kiến thức khác như cách deploy web lên Heroku, Netify…
Biết cách sử dụng 1 số công cụ, phần mêm phục vụ cho việc lập trình, làm việc chung như Trello, Github, Figma, Cloudinary.
Các thành viên trong nhóm có cơ hội học tập, làm việc chung nhiêu hơn. Biết cách phối hợp làm việc nhóm và sử dụng các cơng cụ để làm việc từ xa.
122 | P a g e
6.1.3 Ưu điểm
Về việc tổ chức quản lý nhóm:
- Các thành viên tích cực tham gia đóng góp ý kiến cũng như trao đổi trong q trình thực hiện đồ án.
- Nhóm hỗ trợ nhau khá tốt, các thành viên sẵẵ̃n sàng hướng dẫn nhau để cùng tiến bộ.
- Việc quản lý cơng việc nhóm được thực hiện một cách dễ dàng hơn khi sử dụng công cụ Trello.
- Công việc được phân chia khá phù hợp với định hướng của các thành viên. Về sản phẩm:
- Phần mềm xây dựng đáp ứng các yêu cầu cơ bản của một trang mạng xã hội, thỏa mãn các yêu cầu và biểu mẫu trình bày trên.
- Giao diện trực quan, dễ sử dụng với hầu hết bộ phận ngườờ̀i dùng.
- Có một số hiệu ứng đáp ứng trải nghiệm sử dụng cho ngườờ̀i dùng.
- Hệ thống cần đăng nhập trước khi sử dụng, đồng thờờ̀i mật khẩu được mã hóa trong q trình đăng nhập cũng như lưu xuống cơ sở dữ liệu, đảm bảo yêu cầu về bảo mật cho ngườờ̀i dùng.
6.1.4 Hạn chế
Về việc tổ chức quản lý nhóm:
- Nhóm bước đầu đã thực hiện theo các bước của quy trình thác nước cải tiến, tuy nhiên nhóm vẫn chưa hồn tồn ứng dụng và thực hiện theo mơ hình này.
123 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
- Đôi khi các thành viên chưa hồn thành cơng việc đúng tiến độ do các lý do khách quan/chủ quan.
- Đôi khi công việc được phân chia khơng đồng đều, do trình độ của các thành viên hơi chênh lệch.
Về sản phẩm:
- Sản phẩm chưa được thực hiện responsive.
- Một số chức năng chưa hoàn thiện như: call, video call, report, …
- Chưa có trang riêng/chức năng riêng cho admin.
- Chưa thực hiện tối ưu source code cũng như chưa thực hiện một số bước sau khi xây dựng trang web như seo,…
6.2 Hướng phát triển
Do thờờ̀i gian thực hiện đồ án là có hạn, nhóm đã hồn thành được những kết quả trình bày trên. Trong tương lai, nhóm đề ra một số hướng phát triển để trang web tiếp tục được duy trì và hồn thiện hơn từng ngày.
Dưới đây là hướng phát triển của nhóm chúng em:
- Tối ưu giao diện bằng cách thiết kế giao diện chuyên nghiệp hơn và thực hiện responsive cho trang web.
- Thêm các yếu tố tạo nên thương hiệu cá nhân cho trang web để có thể đưa trang web vào dự án thực trong cuộc sống.
- Hoàn thiện chức năng call video.
- Thêm chức năng report ngườờ̀i dùng hoặặ̣c bài đăng không hợp lệ/vi phạm. - Hoàn thiện, nâng cao các chức năng đã xây dựng.
- Tối ưu source code để giảm thờờ̀i gian chờờ̀, từ đó nâng cao trải nghiệm khi sử dụng trang web của ngườờ̀i dùng.
124 | P a g e
- Nâng cao tinh bao mât va quyên riêng tư cua người dung.
- Thêm chưc năng đăng tai video, găn the người dung khac vao bai viêt, lưu bai viêt.
- Tiến hành các phương pháp tối ưu hóa cơng cụ tìm kiếm để trang web có thứ hạng cao trong kết quả trả về của các trình duyệt.
125 | P a g e
IE213 – Kỹ thuật phát triển hệ thống Web
TÀI LIỆU THAM KHẢO
1. NodeJS Documentation. Lấy từ https://nodejs.org/en/docs/ [truy cập lần