P.Thức Đường dẫn Tham số Mô tả
POST /chats/sendMessage
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - roomId: id của đoạn hội thoại
- sender: id người gửi - text: tin nhắn gửi - receiver: id người nhận Gửi tin nhắn POST /chats/readMessage Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu:
- roomId: id của đoạn hội thoại
- messageIds: id của tin nhắn
Thông báo khi có tin nhắn
POST /chats/getMessageForRoom
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu:
- roomId: id của đoạn hội thoại
Danh sách tin nhắn trong room
POST /chats/getChatRoom Header:- token: mã xác nhận đăng nhập của người dùng
Lấy id của đoạn hội thoại
POST /chats/notifications/readNotifications
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - notificationIds: Id của thơng báo Thơng báo khi có bình luận, thích hoặc kết bạn
GET /notifications/getNotifications/:page
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - page: trang của thông báo
Danh sách thông báo theo trang
POST /search/searchRestaurant
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - searchKey: từ khóa để tìm kiếm
Tìm kiếm nhà hàng
GET /search/searchUser
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - searchKey: từ khóa để tìm kiếm Tìm kiếm người dùng Bảng 3.4:Các API khác 3.1.4 Trang quản lý
Website Admin cũng được thiết kệ dựa trên mơ hình RESTful API. Web Admin là nơi mà quản trị viên sẽ quản lý nội dung cũng như quản lý các hoạt động khác của hệ thống. Hệ thống gồm các giao diện chính sau:
• Giao diện quản lý người dùng: giao diện hiển thị tất cả các user trong hệ thống. Ở màn hình này, quản trị viên có thể thêm mới, chỉnh sửa hoặc xóa người dùng.
• Giao diện quản lý nhà hàng: giao diện hiển thị tất cả các nhà hàng trong hệ thống. Ở màn hình này, quản trị viên có thể thêm mới, chỉnh sửa hoặc xóa nhà hàng. Ngồi ra, quản trị cịn có thể phê duyệt những nhà hàng được để xuất bởi người dùng.
• Giao diện quản lý trải nghiệm người dùng: giao diện hiển thị tất cả các trải nghiệm người dùng trong hệ thống. Ở màn hình này, quản trị viên có thể thêm mới, chỉnh sửa hoặc xóa trải nghiệm người dùng.
• Giao diện quản lý đánh giá người dùng: giao diện hiển thị tất cả các đánh giá người dùng trong hệ thống. Ở màn hình này, quản trị viên có thể thêm mới, chỉnh sửa hoặc xóa đánh giá người dùng.
3.2 Client
Hệ thống sử dụng thư viện Reactjs để xây dựng phần giao diện. React là thư viện javascript để xây dựng ứng dụng frontend và được phát triển bởi Facebook. Ưu điểm là tăng khả năng trải nghiệm của người dùng. Ngoài ra hệ thống sử dụng Redux để quản lý state của ứng dụng.
Hình 3.7:Kiến trúc redux áp dụng trong hệ thống[31] [31]
Các thành phần trong kiến trúc client:
• Viewlà các React component, ở đây sẽ gọi các yêu cầu cho Actiondựa trên tương tác trên ứng dụng.
• ActionLà nơi mang các thông tin dùng để gửi từ ứng dụng đến Store. Các thông tin này là một object mơ tả những gì đã xảy ra.
• Middlewareslà nơi xử lý các hành động bất đồng bộ như lấy dữ liệu từ API.
• APIhệ thống các api kết nối client với server.
• ReducersLà nơi xác định State thay đổi như thế nào.
4
HIỆN THỰC
Trong chương này, chúng em trình bày việc hiện thực website, làm rõ những chức năng có trong hệ thống và hướng dẫn người dùng sử dụng website một cách dễ dàng.
Mục lục
4.1 Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 4.1.1 Hiện thực RESTful API . . . . . . . . . . . . . . . . . . . . . . . 54 4.1.2 Hiện thực trang quản lý . . . . . . . . . . . . . . . . . . . . . . . 56 4.2 Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 4.2.1 Giao diện chính . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 4.2.2 Chức năng xem bài đánh giá, chia sẻ . . . . . . . . . . . . . . . . 56 4.2.3 Chức năng đăng bài viết . . . . . . . . . . . . . . . . . . . . . . . 59 4.2.4 Chức năng đề xuất nhà hàng với hệ thống . . . . . . . . . . . . . 65 4.2.5 Chức năng chỉnh sửa bài đánh giá, chia sẻ . . . . . . . . . . . . . 65 4.2.6 Chức năng xóa bài viết . . . . . . . . . . . . . . . . . . . . . . . . 66 4.2.7 Chức năng thích bài viết . . . . . . . . . . . . . . . . . . . . . . . 67 4.2.8 Chức năng bình luận bài viết . . . . . . . . . . . . . . . . . . . . 67 4.2.9 Chức năng đăng kí tài khoản . . . . . . . . . . . . . . . . . . . . . 68 4.2.10 Chức năng đăng nhập, đăng xuất . . . . . . . . . . . . . . . . . . 69 4.2.11 Chức năng đổi mật khẩu, quên mật khẩu . . . . . . . . . . . . . . 70 4.2.12 Chức năng cập nhật thông tin cá nhân . . . . . . . . . . . . . . . 71 4.2.13 Chức năng theo dõi/hủy theo dõi người dùng, nhà hàng . . . . . . 72 4.2.14 Chức năng xem thông tin người dùng, nhà hàng . . . . . . . . . . 72 4.2.15 Chức năng xếp hạng nhà hàng . . . . . . . . . . . . . . . . . . . . 73 4.2.16 Chức năng gợi ý nhà hàng . . . . . . . . . . . . . . . . . . . . . . 74 4.2.17 Chức năng tìm kiếm . . . . . . . . . . . . . . . . . . . . . . . . . 76 4.2.18 Chức năng nhắn tin . . . . . . . . . . . . . . . . . . . . . . . . . . 78 4.2.19 Chức năng thông báo . . . . . . . . . . . . . . . . . . . . . . . . . 80
Hình 4.1:Kiến trúc tổng quát hệ thống
4.1 Server
4.1.1 Hiện thực RESTful API
Để hiện thực API, đầu tiên nhóm tiến hành khởi tạo server bằng thư viện Express js để lắng nghe các yêu cầu(request) từ một cổng cố định(port).
Hình 4.2:Tạo server lắng nghe từ một cổng cố định
Sau đó, nhóm tiến hành kết nối đến cơ sở dữ liệu MongoDB bằng thư viện Mongoose.
Dữ liệu trong MongoDB được lưu dưới dạng JSON, rất thuận tiện cho việc sử dụng trong NodeJS. Các collection được tạo thông qua thư viện của mongoose và cấu trúc của các collection sẽ được định nghĩa thơng qua định dạng JSON
Hình 4.4:Định nghĩa một collection
Để client có thể gửi u cầu đến server thì ta cần đến các Router. Router sẽ tiếp nhận yêu cầu và trả về kết quả cho client. Các router gồm đường dẫn(URI) và phương thức HTTP( GET, POST,...). Mỗi Router sẽ xử lý một yêu cầu cụ thể từ client và router sẽ được gợi ý khi có một yêu cầu với đường dẫn và phương thức router đó.
Mỗi request khi gửi đến server sẽ phải kèm theo thuộc tính token bên trong HTTP header để phục vụ cho việc xác thực yêu cầu và thay đổi dữ liệu trong database. Với token là một mã xác thực trạng thái đăng nhập của người dùng. Token được trả về khi người đùng đăng nhập thành cơng.
Hình 4.6:Code đăng nhập và trả về token cho người dùng
4.1.2 Hiện thực trang quản lý
4.2 Client
4.2.1 Giao diện chính
4.2.2 Chức năng xem bài đánh giá, chia sẻ
Màn hình sẽ hiển thị các bài viết khi người dùng truy cập trang home. Mỗi bài viết bao gồm nội dung của bài viết như:
• Tên người đăng bài viết
• Thời gian đăng bài viết
• Địa điểm đăng bài viết
• Nội dung của bài viết
• Hình ảnh kèm theo
Hình 4.7:Giao diện hiển thị bài đánh giá, chia sẻĐối với bài viết đánh giá về nhà hàng thì các nội dung bắt buộc phải có: Đối với bài viết đánh giá về nhà hàng thì các nội dung bắt buộc phải có:
• Tên nhà hàng được đánh giá
Hình 4.8:Giao diện chi tiết một bài đánh giá nhà hàng
Và mỗi bài viết sẽ có phần bình luận và thích bài viết. Khi người dùng click vào bài viết thì bài viết sẽ được hiển thị chi tiết với tất cả bình luận.
Hình 4.9:Giao diện chi tiết một bài chia sẻ về ẩm thực
4.2.3 Chức năng đăng bài viết
Có hai loại bài viết:
• Bài đánh giá( review) về một nhà hàng
• Bài viết về món ăn, những kinh nghiệm nấu ăn...
Hình 4.11:Giao diện form dùng để đăng bài chia sẻ về ẩm thực
Với hình ảnh của bài viết được đăng trên hệ thống sẽ được phân loại để có cho phép đăng bài hay không.
Model CNN được sử dụng để hiện thực phân loại hình ảnh. Ở đây chúng ta chỉ phân loại hình ảnh một các đơn giản với hai lớp:
• Hình ảnh có chứa thức ăn
Vì hình ảnh có nhiều loại kích thước, tất cả hình ảnh sẽ được resize về kích thước (128,128,3).
Dữ liệu dùng để train và test được lấy từ nguồn: https://www.kaggle.com/binhminhs10/food5k Model CNN được sử dụng như hình bên dưới:
Code của nhóm:
Hình 4.13:Code hiện thực model CNN dùng trong hệ thống
Để tăng độ chính xác và chống overfit nhóm sử dụng data argumentation với một số phép biến đổi đơn giản.
Quá trình train và test model
Hình 4.16: Kết quả train và test của model
Khi bài viết được đăng thành cơng sẽ có thơng báo đến người dùng và bài viết sẽ được cập nhật trên trang chủ.
4.2.4 Chức năng đề xuất nhà hàng với hệ thống
Khi khơng tìm thấy nhà hàng trong hệ thống, người dùng có thể đề xuất với hệ thống.
Hình 4.18:Form đề xuất nhà hàng
Người dùng điền các thông tin cần thiết. Form sẽ được gửi đến Admin và khi admin kiểm duyệt chấp nhận thì nhà hàng người dùng đề xuất và bài đánh giá của người dùng sẽ được đưa vào hệ thống hiện tại.
4.2.5 Chức năng chỉnh sửa bài đánh giá, chia sẻ
Khi bạn là một người dùng và muốn chỉnh sửa bài viết mà mình đã đăng lên, chỉ cần nhấn vào trang cá nhân và bấm nút chỉnh sửa bài viết ở menu bên phải của bài đó. Hệ thống sẽ hiện lên một form để chỉnh sửa lại bài viết của bạn. Người dùng sẽ chỉnh sửa lại thơng tin về bài viết của mình cho chính xác. Sau khi đã chỉnh sửa xong, nhấn vào nút Chỉnh sửa, hệ thống sẽ hiển thị một thơng báo lên màn hình thơng báo rằng việc chỉnh sửa bài viết thành cơng hoặc thất bại. Bạn chỉ có thể chỉnh sửa bài viết do chính mình đăng.
Hình 4.19:Giao diện chức năng chỉnh sửa bài viết
4.2.6 Chức năng xóa bài viết
Khi bạn là một người dùng và muốn xóa bài viết mà mình đã đăng lên, chỉ cần nhấn vào trang cá nhân và bấm nút xóa bài viết ở menu bên phải của bài đó. Hệ thống sẽ gửi một yêu cầu xác nhận rằng bạn có chắc chắn muốn xóa bài viết khơng. Bạn nhấn đồng ý thì bài viết sẽ được xóa và ngược lại. Bạn chỉ có thể xóa bài viết do chính mình đăng.
Hình 4.20:Giao diện chức năng xóa bài viết
4.2.7 Chức năng thích bài viết
Để thể hiện sự u thích của mình đối với bài viết thì người dùng có thể thể hiện bằng cách ấn vào u thích bài viết. Khi người dùng thích bài viết nếu thích thành cơng thì số lượng thích sẽ được cập nhật.
Hình 4.21: Giao diện chức năng thích bài viết
Người dùng cũng có thể hủy thích bài viết bằng cách ấn vào nút yêu thích một lần nữa.
4.2.8 Chức năng bình luận bài viết
Trong mỗi bài viết, người dùng có thể bình luận. Mỗi bình luận sẽ được hiển thị tên, ảnh đại diện của người bình luận và nội dung của bình luận đó. Nếu bình luận được đăng thành cơng, hệ thống sẽ cập nhật lại nội dùng của phần bình luận trên màn hình.
Hình 4.22: Giao diện chức năng bình luận bài viết
4.2.9 Chức năng đăng kí tài khoản
Ở màn hình đăng ký, người dùng sẽ được yêu cầu nhập các thông tin cơ bản: email, họ tên, mật khẩu, xác nhận mật khẩu để đăng ký tài khoản. Hệ thống sẽ kiểm tra dữ liệu nhập và thông báo lỗi nếu nhập sai cú pháp. Sau khi điền đầy đủ thông tin và nhấn nút “Đăng ký”, hệ thống sẽ gửi yêu cầu đến server thơng qua API.
Hình 4.23:Giao diện chức năng đăng ký tài khoản
Sau khi nhận được kết quả trả về server, ứng dụng sẽ thông báo tài khoản đăng ký thành công hoặc thất bại, đồng thời người dùng sẽ nhận được một email chúc mừng kích hoạt tài khoản được gửi từ hệ thống. Nếu đăng ký thành công, người dùng sẽ được chuyển lại về giao diện đăng nhập và xuất hiện thơng báo “Đăng ký thành cơng”. Ngồi ra, người dùng cũng có thể tự quay lại giao diện đăng nhập bằng cách nhấn vào nút đăng nhập ở bên dưới.
4.2.10 Chức năng đăng nhập, đăng xuất
Khi đã có tài khoản, ở màn hình đăng nhập người dùng có thể đăng nhập bằng cách điền email và mật khẩu. Hệ thống sẽ kiểm tra email nhập và sẽ thơng báo có lỗi cú pháp hay khơng. Sau khi điền đầy đủ thông tin và nhấn nút “Đăng nhập”, hệ thống sẽ gửi thông tin người dùng vừa nhập đến server. Nếu đăng nhập thành công, server sẽ trả về một token để xác nhận người dùng đã đăng nhập, token này sẽ được lưu lại. Sau khi đăng nhập thành công, hệ thống sẽ tự động chuyển về trang chủ. Nếu đăng nhập không thành công, người dùng sẽ nhận được thơng báo về việc đăng nhập thất bại.
Hình 4.24:Giao diện chức năng đăng nhập
4.2.11 Chức năng đổi mật khẩu, quên mật khẩu
Khi người dùng bị lộ thông tin hoặc muốn thay đổi mật khẩu để bảo mật tốt hơn, người dùng có thể đổi mật khẩu một cách dễ dàng ở trang cài đặt. Người dùng nhấn vào nút Đổi mật khẩu và nhập vào các thông tin cần thiết: mật khẩu cũ, mật khẩu mới, xác nhận mật khẩu. Hệ thống sẽ gửi một yêu cầu bao gốm thơng tin vừa nhập đến server. Sau đó, hệ thống sẽ hiển thị thơng báo trên màn hình.
Nếu người dùng quên mật khẩu và không truy cập vào tài khoản được, nhấn vào quên mật khẩu tại trang đăng nhập để lấy lại mật khẩu. Ờ trang này, người dùng chỉ cần nhập email đăng ký của mình vào form. Hệ thống sẽ kiểm tra email này đã có tài khoản tại hệ thống hay chưa, nếu email này đã đăng ký, hệ thống sẽ tự động gửi mail đến tài khoản này kèm theo một đường dẫn để người dùng có thể thay đổi mật khẩu.
Hình 4.26:Giao diện của website khi người dùng muốn reset mật khẩu
4.2.12 Chức năng cập nhật thông tin cá nhân
Sau khi đã đăng nhập, người dùng có thể xem và cập nhật thơng tin của mình thơng qua trang cài đặt. Người dùng có thể sửa đổi thơng tin tài khoản bằng cách nhấn vào nút Chỉnh sửa. Người dùng sẽ được yêu cầu nhập thơng tin cần chỉnh sửa, có thể sửa các thơng tin nhưng không được thay đổi email. Hệ thống sẽ kiểm tra dữ liệu nhập và thông báo lỗi nếu nhập cú pháp. Sau khi điền đầy đủ thông tin và nhấn nút Chỉnh sửa, hệ thống
sẽ gửi thông tin người dùng vừa nhập đến server. Sau đó, hệ thống sẽ hiện thị thơng báo trên màn hình việc chỉnh sửa thành cơng hoặc thất bại.
Hình 4.27:Giao diện chức năng thay đổi thông tin cá nhân
4.2.13 Chức năng theo dõi/hủy theo dõi người dùng, nhà hàng
Để theo dõi được những thông tin và bài viết mới nhất về một nhà hàng, người dùng chỉ cần nhấn theo dõi nhà hàng. Sau khi theo dõi, tại trang chủ của người dùng sẽ hiện thị những bài đánh giá về nhà hàng vừa theo dõi. Nếu khơng thích theo dõi nhà hàng này