Với thiết kế của hệ thống như đã trình bày ở trên, nhóm chúng em quyết định xây dựng API theo mơ hình RESTful API với cấu trúc như sau:
3.1.3.1 API tương tác với người dùng
P.Thức Đường dẫn Tham số Mô tả POST /user/login
Nội dung yêu cầu: - email: mail đăng kí của user
- password: mật khẩu của tài khoản
Đăng nhập vào tài khoản
POST /user/logout Header:- token: mã xác nhận đăng nhập người dùng
Đăng xuất khỏi hệ thống
POST /user/signup
Nội dung yêu cầu: - lastname: họ của người dùng
- firstname: tên của người dùng
- email: email đăng kí tài khoản
- password: mật khẩu đăng nhập
- birthday: ngày sinh của người dùng - address: địa chỉ người dùng
Đăng kí tài khoản mới
POST /user/forgotPassword Nội dung yêu cầu:- email: email người dùng Gửi mail đến để người dùng đổi mật khẩu PATCH /user/updatePassword Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu:
- currentPassword: mật khẩu hiện tại
- newPassword: mật khẩu mới
Đổi mật khẩu tài khoản người dùng
PATCH /user/resetPassword/:token
Nội dung yêu cầu:
- password: mật khẩu mới - token: mã xác nhận được gửi qua mail
Khôi phục mật khẩu
GET /user/:id
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id của user
Lấy thông tin người dùng
PATCH /user/:id Header:-token: mã xác nhận đăng nhập của người dùng
Chỉnh sửa thông tin người dùng DELETE /user/:id Header:- token: mã xác nhận đăng
nhập của người dùng Xóa người dùng GET /user/followers/:id Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id của người dùng
Danh sách user đang theo dõi mình
GET /user/followings/:id
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id của người dùng
Danh sách user mà user hiện tại đang theo dõi
POST /user/followUser
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id của người dùng cần theo dõi
Theo dõi người dùng khác
POST /user/followRestaurant
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id của nhà hàng cần theo dõi
Theo dõi nhà hàng
GET /user/restaurant/getRestaurantFollow Header:- token: mã xác nhận đăng nhập của người dùng
Danh sách nhà hàng mà user hiện tại đang theo dõi
POST /user/changeBackgroundPicture
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - data: ảnh bìa của người dùng
Thay đổi ảnh bìa
3.1.3.2 API của nhà hàng
P.Thức Đường dẫn Tham số Mô tả
POST /restaurants/create
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - restaurantname: tên nhà hàng
- address: địa chỉ nhà hàng
- email: mail nhà hàng - phone: số điện thoại nhà hàng
- description: mô tả nhà hàng
Tạo nhà hàng
GET /restaurants/allRestaurant Header:- token: mã xác nhận đăng nhập của người dùng
Danh sách tất cả nhà hàng
GET /restaurants/getRestaurantById/ :restaurantId
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu:
- restaurantId: Id của nhà hàng Thông tin của nhà hàng dựa theo Id nhà hàng GET /restaurants/getList
RestaurantByRating Header: - token: mã xác nhận đăng nhập của người dùng Danh sách nhà hàng sắp xếp theo đánh giá GET /restaurants/getListRestaurantTop Header:- token: mã xác nhận đăng
nhập của người dùng
Danh sách nhà hàng tốt nhất
GET /restaurants/getPostByRestaurantId/ :restaurantId
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu:
- restaurantId: Id của nhà hàng
Danh sách bài viết của nhà hàng
POST /restaurants/recommendRestaurant
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - restaurantname: Tên nhà hàng - address: Địa chỉ nhà hàng - description: mơ tả nhà hàng
- photo: hình ảnh của bài viết
- rating: đánh giá về nhà hàng
Đề xuất nhà hàng
POST /restaurants/approveRestaurant/:id
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id của nhà hàng Phản hồi lời đề xuất nhà hàng GET /restaurants/ getUserFollow Restaurant/ :restaurantId Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu:
- restaurantId: id nhà hàng
Danh sách người dùng đang theo dõi nhà hàng GET /restaurants/ getRecommend RestaurantList ByLocation Header: - token: mã xác nhận đăng nhập của người dùng Danh danh nhà hàng theo vị trí Bảng 3.2:API của nhà hàng
3.1.3.3 API bài viết và bình luận
P.Thức Đường dẫn Tham số Mô tả
POST /review/create
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - description: mô tả nhà hàng
- photo: hình ảnh bài viết - restaurantId: id nhà hàng cần đánh giá
- location: vị trí của người dùng - rating: đánh giá nhà hàng - description: mô tả nhà hàng Tạo đánh giá nhà hàng POST /review/update/ Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - description: mơ tả nhà hàng
- photo: hình ảnh bài viết - id: id bài viết
- location: vị trí của người dùng - rating: đánh giá nhà hàng - description: mô tả nhà hàng Chỉnh sửa đánh giá nhà hàng POST /posts/likePost Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - postId: id bài viết
Thích bài viết
GET /posts/:id
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id bài viết
Lấy thông tin bài viết
DELETE /posts/:id
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - id: id bài viết
GET /posts/getPostLikes/:postId
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - postId: id bài viết
Tính số lượt thích của bài viết
GET /posts/getPostByUser/:userId
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - userId: id của người dùng
Danh sách bài viết tạo bởi người dùng GET /posts Header:- token: mã xác nhận đăng
nhập của người dùng
Danh sách tất cả bài viết GET /comments Header:- token: mã xác nhận đăng
nhập của người dùng Danh sách tất cả bình luận POST /comments Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - text: bình luận
- postId: id của bài viết
Tạo bình luận
GET /comments/commentPost/:postId
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - postId: id của bài viết
Danh sách bình luận của bài viêt POST /commentReplies Header: - token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu: - text: bình luận
- commentId: id của bài viết
Tạo một bình luận trả lời
GET /commentReplies/commentComment Reply/:commentId
Header:
- token: mã xác nhận đăng nhập của người dùng Nội dung yêu cầu:
- commentId: id của bài viết
Danh sách bình luận trả lời của một bình luận
3.1.3.4 Các API khác
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 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 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 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 yê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