Báo cáo bộ môn công nghệ phần mềm (int2008 5) đề tài ứng dụng giới thiệu nhà hàng

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ - ĐHQG HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN *** BÁO CÁO BỘ MÔN: CÔNG NGHỆ PHẦN MỀM (INT2008_5) Đề tài: Ứng dụng giới thiệu nhà hàng Nhóm thực hiện: Nhóm Trương Khơi Ngun 20020271 Nhóm trưởng Trần Anh Tú 20020495 Thành viên Nguyễn Văn Thịnh 20020477 Thành viên Hoàng Sỹ Quý 20020466 Thành viên Nguyễn Minh Chiến 20020369 Thành viên Lời cam đoan Chúng em, bao gồm trưởng nhóm (Trương Khơi Ngun - 20020271) thành viên (Trần Anh Tú - 20020495, Nguyễn Văn Thịnh 20020477, Hoàng Sỹ Quý - 20020466 Nguyễn Minh Chiến - 20020369) xin cam kết nội dung sau: Nghiêm túc, trung thực trình làm tập nhóm Khơng chép nội dung tập từ nguồn có sẵn Chúng em xin cam đoan điều thật trình làm Bài tập lớn mơn Cơng nghệ phần mềm (INT2008_5) Chúng em hoàn chịu trách nhiệm vi phạm thực không điều kể theo quy định nhà trường, lớp học thầy cô giảng dạy học phần môn Công nghệ phần mềm (INT2208_5) Mục lục Lời cam đoan Mục lục Danh sách hình vẽ Danh sách bảng biểu Chương 1: Đặt vấn đề 1.1 Lý thực đề tài: 1.2 Phương pháp làm sản phẩm: 1.3 Kết thu được: 8 Chương 2: Thu thập, phân tích đặc tả yêu cầu 2.1 Phạm vi dự án: 2.2 Thuật ngữ: 2.3 Khái quát yêu cầu: 2.3.1 Môi trường hệ thống: 2.3.2 Yêu cầu chức năng: 2.3.2.1 Đăng ký, Đăng nhập: 2.3.2.2 User use cases: 2.3.2.1.2 Xem danh sách nhà hàng: 2.3.2.1.3 Xem chi tiết nhà hàng: 2.3.2.1.4 Thêm nhà hàng: 2.3.2.1.5 Sửa thơng tin nhà hàng 2.3.2.1.6 Xóa nhà hàng: 2.3.2.3 Admin use cases: 2.3.2.1.1 Xem danh sách nhà hàng: 2.3.2.1.2 Xem chi tiết nhà hàng: 2.3.2.1.3 Thêm nhà hàng: 2.3.2.1.4 Sửa thơng tin nhà hàng: 2.3.2.1.5 Xóa nhà hàng: 2.3.3 Yêu cầu phi chức năng: 2.4 Chi tiết yêu cầu: 10 10 10 10 10 11 11 14 14 15 17 19 21 22 22 23 24 25 27 28 28 2.4.1 Tương tác với hệ thống khác bên ngoài: 2.4.2 Yêu cầu chức năng: 2.4.2.1 Đăng ký, đăng nhập: 2.4.2.2 User use cases: Xem danh sách nhà hàng: Thêm nhà hàng: Sửa thông tin nhà hàng: Xóa nhà hàng: 2.4.2.3 Admin use cases: Xem danh sách nhà hàng: Thêm nhà hàng: Sửa thông tin nhà hàng: Xóa nhà hàng: 2.4.3 Yêu cầu phi chức năng: 2.4.3.1 Tổ chức thông tin: 2.4.3.2 Bảo mật: Cài đặt kiểm thử 3.1 Quy trình phát triển: 3.2 Thiết kế hệ thống: 3.2.1 Kiến trúc: 3.2.2 Database: 3.2.3 Backend: Endpoint api/auth/login api/auth/logout api/restaurants api/restaurants api/restaurants/{id} api/restaurants/{id} api/restaurants/owned api/restaurants/{id} 3.2.3.2 Hoạt động: 28 28 28 29 29 30 30 31 31 31 32 32 33 33 33 35 36 36 37 37 38 39 39 39 39 39 39 40 40 40 40 41 3.2.3.2.1 Login: 3.2.3.2.2 Add restaurant: 3.2.3.2.3 Edit restaurant: 3.2.3.2.4 Delete restaurant: 3.2.4 Frontend: 3.2.4.1 Danh sách màn: 3.2.4.1.1 Login 3.2.4.1.2 Register 3.2.4.1.3 Home 3.2.4.1.4 My restaurant 3.2.4.1.5 About 3.2.4.1.6 Detail 3.2.4.1.7 Add restaurant 3.2.4.1.8 Edit restaurant 3.3 Q trình phát triển: 3.3.1 Cơng việc: 3.3.2 Khó khăn: 3.3.3 Hướng giải quyết: 3.4 Kiểm thử: 3.4.1 Test API 3.4.2 Test UI 41 42 43 44 45 46 46 47 48 49 51 52 54 55 56 56 56 56 57 57 62 Kết luận 63 Danh sách hình vẽ Figure 1: Một số hình ảnh ứng dụng 11 Figure 2: Biểu đồ ca sử dụng chung hệ thống 13 Figure 3: Biểu đồ ca sử dụng đăng nhập user 13 Figure 4: Biểu đồ hoạt động đăng nhập 14 Figure 5: Biểu đồ hoạt động đăng ký user 15 Figure 6: Biểu đồ ca sử dụng xem danh sách nhà hàng 16 Figure 7: Biểu đồ hoạt động xem danh sách nhà hàng 16 Figure 8: Biểu đồ ca sử dụng xem chi tiết nhà hàng 17 Figure 9: Biểu đồ hoạt động xem chi tiết nhà hàng 17 Figure 10: Biểu đồ ca sử dụng thêm nhà hàng 18 Figure 11: Biểu đồ hoạt động thêm nhà hàng 19 Figure 12: Biểu đồ ca sử dụng chỉnh sửa thông tin nhà hàng 20 Figure 13: Biểu đồ hoạt động chỉnh sửa thông tin nhà hàng 20 Figure 14: Biểu đồ ca sử dụng xóa nhà hàng 21 Figure 15: Biểu đồ hoạt động xóa nhà hàng 21 Figure 16: Biểu đồ ca sử dụng xem danh sách nhà hàng 22 Figure 17: Biểu đồ hoạt động xem danh sách nhà hàng 22 Figure 18: Biểu đồ ca sử dụng xem chi tiết nhà hàng 23 Figure 19: Biểu đồ hoạt động xem chi tiết nhà hàng 23 Figure 20: Biểu đồ ca sử dụng thêm nhà hàng 24 Figure 21: Biểu đồ hoạt động thêm nhà hàng 24 Figure 22: Biểu đồ ca sử dụng chỉnh sửa thông tin nhà hàng 25 Figure 23: Biểu đồ hoạt động chỉnh sửa thông tin nhà hàng 26 Figure 24: Biểu đồ ca sử dụng xóa nhà hàng 26 Figure 25: Biểu đồ hoạt động xóa nhà hàng 27 Figure 26: Biểu đồ ER liệu 33 Figure 27: Sơ đồ kiến trúc hệ thống 36 Figure 28: Biểu đồ EER thể mối quan hệ thành phần liệu.37 Figure 29: Biểu đồ thể hoạt động đăng nhập 40 Figure 30: Biểu đồ thể hoạt động thêm nhà hàng 41 hàng Figure 31: Biểu đồ thể hoạt động chỉnh sửa thông tin nhà 42 Figure 32: Biểu đồ thể hoạt động xóa nhà hàng 43 Figure 33: Biểu đồ khái quát trình di chuyển trang 44 Figure 34: Hình ảnh Đăng nhập 45 Figure 35: Hình ảnh Đăng ký 46 Figure 36: Hình ảnh Home 47 Figure 37: Hình ảnh My Restaurant chưa có nhà hàng 48 Figure 38: Hình ảnh My Restaurant có nhà hàng 49 Figure 39: Hình ảnh About 50 Figure 40: Hình ảnh Detail 51 Figure 41: Hình ảnh Add Restaurant 52 Figure 42: Hình ảnh Edit Restaurant 53 Danh sách bảng biểu Table 1: Usecase đăng ký đăng nhập 28 Table 2: Use case xem danh sách nhà hàng User 29 Table 3: Use case thêm nhà hàng User 30 Table 4: Use case sửa thông tin nhà hàng User 30 Table 5: Use case xóa nhà hàng User 31 Table 6: Use case xem danh sách nhà hàng Admin 31 Table 7: Use case thêm nhà hàng Admin 32 Table 8: Use case sửa thông tin nhà hàng Admin 32 Table 9: Use case xóa nhà hàng Admin 33 Table 10: Thuộc tính User 34 Table 11: Thuộc tính Nhà hàng 34 Table 12: Chi tiết bảng Users 38 Table 13: Chi tiết bảng Restaurants 38 Table 14: Danh sách API 39 Table 15: Phân chia công việc 56 Table 16: Kiểm thử API 57 Table 17: Kiểm thử UI 62 Chương 1: Đặt vấn đề 1.1 Lý thực đề tài: Khoa học xã hội ngày phát triển việc chia sẻ thông tin cần thiết Hiện internet môi trường chia sẻ thông tin sử dụng rộng rãi vô cần thiết với đời sống Bối cảnh: Một nhóm bạn chơi thân với thường xuyên rủ ăn nhà hàng khác Họ có group chat để chia sẻ thông tin nhà hàng cho Tuy nhiên, cách có số bất cập Dễ kể đến việc tin nhắn bị trôi khó khăn việc quản lý thơng tin Giải pháp: Hệ thống chung sử dụng để lưu trữ chia sẻ nhà hàng Một người nhóm bạn host hệ thống người khác chia sẻ lên Website giới thiệu nhà hàng nơi người dùng chia sẻ cách thêm thơng tin nhà hàng thích cụ thể hình ảnh, nhận xét, địa chỉ, Bên cạnh xem thơng tin nhà hàng dùng khác chia sẻ vào hệ thống 1.2 Phương pháp làm sản phẩm: Để ứng dụng dễ dàng tiếp cận sử dụng nhiều tảng, bọn em định chọn phát triển xây dựng dự án tảng Web thơng qua bước sau : - Xây dựng ý tưởng: tìm hiểu - Lập kế hoạch, phân chia công việc - Thiết kế giao diện, xây dựng liệu - Tiến hành code kết hợp phần với - Kiểm thử - Đưa demo 1.3 Kết thu được: Ứng dụng mà người dùng chia sẻ nhà hàng lên hệ thống xem thơng tin nhà hàng user khác Có Admin quản lý nhà hàng hệ thống Một số hình ảnh ứng dụng : Button ‘Previous’ để chuyển trang trước Button ‘Next’ để chuyển tới trang Button số trang để chuyển tới trang tương ứng 3.2.4.1.4 My restaurant Khi chưa có nhà hàng nào: Figure 37: Hình ảnh My Restaurant chưa có nhà hàng Button có hình miếng dưa hấu, mang tên trang web SuikaRes đặt góc bên trái có chức chuyển home Bên cạnh tên trang web có button: Button ‘Home’ có chức chuyển Home Button ‘My Restaurant’ có chức chuyển My Restaurant Button ‘About’ có chức chuyển About Button có tên username tài khoản góc bên phải có chức chuyển My Restaurant Button ‘Logout’ để chuyển Login 49 Ở có button ‘Let’s start’ để chuyển sang Add restaurant Khi có nhà hàng: Button có hình miếng dưa hấu, mang tên trang web SuikaRes đặt góc bên trái có chức chuyển home Bên cạnh tên trang web có button: Button ‘Home’ có chức chuyển Home Button ‘My Restaurant’ có chức chuyển My Restaurant Button ‘About’ có chức chuyển About Button có tên username tài khoản góc bên phải có chức chuyển My Restaurant Button ‘Logout’ để chuyển Login 50 Bên danh sách nhà hàng thân chia sẻ (tối đa hiển thị nhà hàng trang) Hình ảnh nhà hàng zoom lên hover chuột qua Ở có button: Button ‘Previous’ để chuyển trang trước Button ‘Next’ để chuyển tới trang Button số trang để chuyển tới trang tương ứng Ở góc bên phải có button ‘+’ để chuyển sang Add restaurant 3.2.4.1.5 About Figure 39: Hình ảnh About Button có hình miếng dưa hấu, mang tên trang web SuikaRes đặt góc bên trái có chức chuyển home Bên cạnh tên trang web có button: 51 Button ‘Home’ có chức chuyển Home Button ‘My Restaurant’ có chức chuyển My Restaurant Button ‘About’ có chức chuyển About Button có tên username tài khoản góc bên phải có chức chuyển My Restaurant Button ‘Logout’ để chuyển Login Bên thông tin trang web 3.2.4.1.6 Detail Figure 40: Hình ảnh Detail Button có hình miếng dưa hấu, mang tên trang web SuikaRes đặt góc bên trái có chức chuyển home Bên cạnh tên trang web có button: Button ‘Home’ có chức chuyển Home 52 Button ‘My Restaurant’ có chức chuyển My Restaurant Button ‘About’ có chức chuyển About Button có tên username tài khoản góc bên phải có chức chuyển My Restaurant Button ‘Logout’ để chuyển Login Bên thông tin chi tiết nhà hàng mà thân chọn gồm có: Tên nhà hàng Người chia sẻ Địa nhà hàng Mô tả nhà hàng Hình ảnh nhà hàng Ở hình ảnh nhà hàng có button: Button ‘Delete’ để xóa nhà hàng chọn (nếu chia sẻ) Button ‘Edit’ để chỉnh sửa thông tin nhà hàng (nếu chia sẻ) 53 3.2.4.1.7 Add restaurant Figure 41: Hình ảnh Add Restaurant Button ‘X’ góc bên phải có chức khỏi Add restaurant Form thêm nhà hàng có trường: Tên nhà hàng Địa nhà hàng Mô tả nhà hàng Hình ảnh nhà hàng Ở bên cạnh trường hình ảnh nhà hàng có button ‘Choose File’ để chọn ảnh nhà hàng Ở góc bên phải có button: Button ‘Cancel’ để khỏi Add restaurant 54 Button ‘Create!’ để hoàn tất thêm nhà hàng 3.2.4.1.8 Edit restaurant Figure 42: Hình ảnh Edit Restaurant Button ‘X’ góc bên phải có chức khỏi Edit restaurant Form sửa nhà hàng có trường: Tên nhà hàng Địa nhà hàng Mơ tả nhà hàng Hình ảnh nhà hàng Ở bên cạnh trường hình ảnh nhà hàng có button ‘Choose File’ để đổi hình ảnh nhà hàng Ở góc bên phải có button: 55 Button ‘Cancel’ để thoát khỏi Edit restaurant Button ‘Update!’ để hoàn tất chỉnh sửa nhà hàng 3.3 Q trình phát triển: 3.3.1 Cơng việc: Table 15: Phân chia công việc Công việc Người phụ trách Quản lý, review pull request Nguyên Thiết kế Backend Thịnh, Nguyên Thiết kế Frontend Tú, Quý Cài đặt Backend Chiến, Thịnh Cài đặt Frontend Tú, Quý Kiểm thử Tất thành viên *Ghi chú: Việc phân chia công việc không cố định, thành viên sang làm hỗ trợ phần việc người khác 3.3.2 Khó khăn: - Mất thời gian học framework - Chỉ giao tiếp qua nhóm chat nên gặp nhiều khó khăn - Khơng có hướng thiết kế phù hợp - Khơng có kinh nghiệm phát triển 3.3.3 Hướng giải quyết: - Thiết kế prototype trước thiết kế sản phẩm thật - Thiết kế đơn giản trước, tăng tính phức tạp sau 56 3.4 Kiểm thử: - Việc kiểm tra chương trình thực thủ cơng, chưa viết test tự động - Lý do: + Dự án bị chậm tiến độ + Việc học thêm framework test tự động nhiều thời gian + Thành viên chưa có nhiều kinh nghiệm việc test 3.4.1 Test API - Công cụ: Postman Table 16: Kiểm thử API Tên test Test register API bình thường API api/aut h/regis ter HTTP request POST { ‘username’: ‘suika’ ‘password’: 12345678 ‘confirm_password’:12345678 } Kết trả mong muốn Pass { ‘Success”: ‘true’ ‘accessToken’ O } { Test register API sai request Test register API có username bị trùng api/aut h/regis ter api/aut h/regis ter POST { ‘abc’: ‘def’ } POST { ‘username’: ‘suika’ ‘password’: 12345678 ‘confirm_password’:12345678 ‘Success’: false ‘message’: ‘Missing username and/or password ’ } O { ‘Success’: false ‘message’: ‘Username already taken ’ 57 } Test login API bình thường POST { api/aut ‘username’: ‘suika’ h/login ‘password’: 12345678 } { ‘Success”: ‘true’ ‘accessToken’ O } } { Test login API sai request POST api/aut { h/login ‘abc’: ‘def’ } ‘Success’: false ‘message’: ‘Missing username and/or password ’ } O { Test login API sai username/ password POST { api/aut ‘username’: ‘suika’ h/login ‘password’: 9876543 } Test logout API binh thuong Test logout API chua đăng nhập (ko có bearer token) api/aut h/logo ut api/aut h/logo ut POST { } POST { ‘Success’: false ‘message’: “Incorrect username or password” ’ } O { ‘Success’: true ‘message’: “Logged out” } O Authorization O { “success”: true, “restaurants”: (tất nhà hàng hệ thống) } O Authorization O } GET { Test API get all nhà hàng (bình thường) api/res taurant s Test API get all nhà hàng api/res GET taurant { } 58 chưa đăng nhập s (khơng có bearer token) } Test API get all nhà hàng thân (bình thường) api/res GET taurant { s/owne d } { “success”: true, “restaurants”: (tất nhà hàng thân hệ thống) } Test API get all nhà hàng thân chưa đăng nhập (khơng có bearer token) api/res GET taurant { s/owne d } Authorization O Test API create nhà hàng (bình thường) POST { api/res “name”, taurant “address”, s “description”, “image” } { “success”: true, “message”: “create successfully!”, “restaurant”: (nhà hàng vừa thêm) } O Authorization O { “success”: true, “message”: “create successfully!”, “restaurant”: (nhà hàng vừa thêm) } O Authorization O POST Test API create { nhà hàng api/res “name”, chưa đăng nhập taurant “address”, (khơng có s “description”, bearer token) “image” } Test API create nhà hàng (bình thường) POST { api/res “name”, taurant “address”, s “description”, “image” } Test API create api/res POST nhà hàng taurant { chưa đăng nhập s “name”, O 59 (khơng có bearer token) “address”, “description”, “image” } Test API get nhà hàng theo id ( binh thuong) api/res GET taurant { s/{id} } { “success”: true, “restaurant”: (nhà hàng có id thỏa mãn) } Test API get nhà hàng theo id chưa đăng nhập (khơng có bearer token) GET api/res { taurant s/{id} } Authorization O PUT { Test API update api/res “name”, nhà hàng (bình taurant “address”, thường) s/{id} “description”, “image” } { “success”: true, “message”: “update successfully!”, “restaurant”: (nhà hàng vừa update) } O PUT Test API update { nhà hàng api/res “name”, chưa đăng nhập taurant “address”, (khơng có s/{id} “description”, bearer token) “image” } Authorization O PUT { Test API update api/res “name”, nhà hàng taurant “address”, người khác s/{id} “description”, “image” } { “success”: false, “message”: “you are not allowed!”, } O Test API delete nhà hàng (bình thường) { “success”: true, “message”: “delete O api/res DELETE taurant { s/{id} O 60 } successfully!”, } Test API delete nhà hàng api/res DELETE chưa đăng nhập taurant { (khơng có s/{id} } bearer token) Authorization O Test API delete nhà hàng(khi user delete người khác) { “success”: false, “message”: “you are not allowed!”, } O api/res DELETE taurant { s/{id} } 61 3.4.2 Test UI - Công cụ: Không Table 17: Kiểm thử UI Tên Test Màn Kết mong muốn Pass Test đăng nhập Đăng nhập Xuất button ‘Login’ button ‘Register’ O Test đăng ký Đăng ký Xuất button ‘Register’ button ‘Login’ O Test Home Home Xuất button ‘Previous’, button ‘Next’, button số trang O Test My Restaurant có nhà hàng My Restaurant Xuất button ‘Previous’, button ‘Next’, button số trang button ‘+’ O Test My Restaurant chưa có nhà hàng My Restaurant Xuất button ‘Let’s start!’ O Test About About O Test Add Restaurant Add Restaurant Xuất button ‘close’, button ‘Chọn tệp’, button ‘Cancel’ button ‘Create!’ O Test Restaurant Detail Restaurant Detail Xuất button ‘Delete’ button ‘Edit’ O Test Restaurant Edit Restaurant Edit Xuất button ‘close’, button ‘Chọn tệp’, button ‘Cancel’ button ‘Update!’ O 62 Kết luận Tính đến thời điểm tại, nhìn chung ứng dụng hồn thành hầu hết tính so với yêu cầu Cụ thể tính thêm, sửa, xóa xem thơng tin nhà hàng ( gọi tắt CRUD ) Bên cạnh đó, ứng dụng có hệ thống phân quyền cho user admin Sau trải nghiệm kiểm tra tính năng, nhìn chung ứng dụng chạy ổn định không mắc phải lỗi nghiêm trọng ảnh hướng đến trải nghiệm người dùng Tuy nhiên, vấn đề thời gian hạn chế đóng góp thực tế từ người dùng, hệ thống nhiều thiếu sót Trong thời gian tới, nhóm chúng em cố gắng hoàn thiện sản phẩm để sản phẩm trở nên hồn thiện Một số tính phát triển thời gian tới: - Bình luận react - Đánh giá nhà hàng - User profile - Tích hợp thêm google map cho hệ thống - … 63