Báo cáo môn nhập môn công nhệ phần mềm tên đề tài tạo website quảng bá sản phẩm cho cửa hàng mixue

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG KHOA CÔNG NGHỆ THỒNG TIN BÀI BÁO CÁO MÔN NHẬP MÔN CÔNG NHỆ PHẦN MỀM Tên đề tài: TẠO WEBSITE QUẢNG BÁ SẢN PHẨM CHO CỬA HÀNG MIXUE Sinh viên thực hiện: - Lê Bích Ngọc (Nhóm trưởng) Hồng Minh Đạt Ma Doãn Huy Hậu Ma Doãn Huy Hùng Nguyễn Quốc Khánh Lâm Hữu Quốc Nguyễn Văn Phúc Lê Thị Hải Yến Trần Thị Hải Yến Giảng viên: Nguyễn Thị Dung Lớp: K20 CNTT N14 Thái Nguyên, tháng … năm 2023 MỤC LỤC MỤC LỤC LỜI NÓI ĐẦU PHÂN CÔNG NHIỆM VỤ THÀNH VIÊN CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ PHẦN MỀM 1.1 Giới thiệu .6 1.2 Mơ hình xoắn ốc 1.3 Kiến trúc client-server 1.4 VS studio .9 CHƯƠNG LẬP KẾ HOẠCH DỰ ÁN .11 2.1 Giới thiệu thông tin nhóm thực .11 2.1.1 Phỏng vấn, tìm hiểu trạng cửa hàng, tổ chức dự án 11 2.1.2 Đặc tả phần mềm 11 2.1.3 Thiết kế hệ thống 11 2.1.4 Cài đặt phần mềm .11 2.1.5 Kiểm thử 11 2.2 Đặt vấn đề, phát biểu toán 12 2.3 Lập kế hoạch quản lí dự án 12 CHƯƠNG 3: ĐẶC TẢ PHẦN MỀM 13 3.1 Khảo sát trạng 13 3.2 Đánh giá hệ thống trạng 13 3.3 Đề xuất dự án 14 3.4 Đặc tả yêu cầu 14 3.4.1 Yêu cầu chức 14  Đăng thơng tin hình ảnh lên website .14  Tạo danh sách sản phẩm 14  Tìm kiếm thơng tin sản phẩm 14 3.4.2 3.5 Yêu cầu phi chức .15 Biểu đồ use-case tổng quát .15 CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 16 4.1 Biểu đồ use-case phân rã 16 4.2 Đặc tả use-case 16 4.2.1 Tìm kiếm 16 4.2.2 Trở trang chủ .18 4.2.3 Xem thông tin sản phẩm 20 4.2.4 Xem thông tin khuyến .21 4.2.5 Cập nhật thông tin 23 4.2.10 Cập nhật sản phẩm 31 4.2.11 Thêm sản phẩm 33 4.2.12 Xóa sản phẩm 35 4.2.13 Sửa thông tin sản phẩm 36 4.3 Biểu đồ lớp: .39 4.4 Biểu đồ thành phần: 39 4.5 Biểu đồ triển khai .40 LỜI NÓI ĐẦU Sau thời gian tìm hiểu thực đến đề tài “Xây dựng website quảng bá sản phẩm cửa hàng Mixue” hoàn thành Trong suốt trình thực đề tài, chúng em nhận nhiều giúp đỡ nhiệt tình Chúng em xin chân thành cảm ơn thầy cô trang bị kiến thức quý báu cho chúng em suốt q trình học tập Trường Đại Học Cơng Nghệ Thông Tin Truyền Thông Thái Nguyên Đặc biệt thầy cô khoa Công nghệ thông tin tận tình giảng dạy, bảo, trang bị cho chúng em kiến thức cần thiết suốt trình học tập nghiên cứu khoa, tạo điều kiện thuận lợi giúp chúng em thực báo cáo Chúng em xin cảm ơn Nguyễn Thị Dung tận tình hướng dẫn, bảo chúng em suốt thời gian thực báo cáo, giúp chúng em hồn thành báo cáo Chúng em xin chân thành cảm ơn cô, anh chị cửa hàng Mixue nhiệt tình tạo điều kiện giúp đỡ chúng em trình thực đề tài Chúng em xin gửi lời cảm ơn gia đình bạn bè ln động viên, ủng hộ chúng em suốt trình thực tập lớn Mặc dù cố gắng nỗ lực thực đề tài với tâm cao hẳn đề tài tránh khỏi thiếu sót, kính mong đóng góp hướng dẫn thầy cô Chúng em xin chân thành cảm ơn! PHÂN CÔNG NHIỆM VỤ THÀNH VIÊN Tên thành viên Nhiệm vụ Lê Bích Ngọc Phỏng vấn, tìm hiểu trạng cửa hàng, tổ chức dự án, kiểm thử Hoàng Minh Đạt Thiết kế hệ thống, cài đặt phần mềm Ma Doãn Huy Hậu thiết kế hệ thống, cài đặt phần mềm Ma Doãn Huy Hùng Thiết kế hệ thống, kiểm thử Nguyễn Quốc Khánh Đặc tả phần mềm, kiểm thử Lâm Hữu Quốc Thiết kế hệ thống, cài đặt phần mềm Nguyễn Văn Phúc Thiết kế hệ thống, cài đặt phần mềm Lê Thị Hải Yến Đặc tả phần mềm, kiểm thử Trần Thị Hải Yến Đặc tả phần mềm, kiểm thử CHƯƠNG 1: TỔNG QUAN VỀ CƠNG NGHỆ PHẦN MỀM 1.1 Giới thiệu Nhóm chúng em nghiên cứu dự án phát triển dự án theo mơ hình xoắn ốc, phân tích thiết kế theo phương pháp hướng đối tượng kiến trúc kháchdịch vụ Bên cạnh đó, nhóm em sử dụng cơng cụ VS studio để cài đặt phần mềm 1.2 Mơ hình xoắn ốc Mơ hình này Boehm đưa nên đơi lúc cịn gọi mơ hình Boehm's (The Boehm's spiral model -1988) Nó xem kết hợp giữa mơ hình thác nước mơ hình mẫu và đồng thời thêm mợt thành phần -phân tích rủi ro Trong mơ hình xoắn ớc, quy trình phát triển phần mềm biểu diễn mợt vịng xoắn ớc Mỗi vịng lặp mơ hình biểu diễn mợt pha qui trình Vịng lặp tính khả thi hệ thớng, vịng lặp tiếp theo là xác định yêu cầu, vòng lặp tiếp nữa thiết kế hệ thớng Các rủi ro nhận rõ và giải qút śt qui trình.Các pha quy trình phát triển xoắn ớc bao gồm:  Planning: Xác định mục tiêu, tương tác và ràng ḅc  Risk analysis: Phân tích lựa chọn định/giải quyết rủi ro  Engineering: Phát triển sản phẩm  Customer evaluation: Đánh giá kết xây dựng Mơ hình tóm tắt sau: Hình 1.2.1: Mơ hình xoắn ốc Các giai đoạn của mơ hình xoắn ớc: Lập kế hoạch –Planning phase:Thu thập, phân tích yêu cầu từ dự án từ phía khách hàng Bao gồm cơng việc: Ước lượng chi phí (estimating cost), lên lịch trình thực dự án (shedule-master), xác định số lượng nhân lực, môi trường làm việc (identifying necessary resources and work environment), tìm hiểu yêu cầu hệ thớng (requirements) từ đưa tài liệu đặc tả (Bussiness Requirement Specifications và System Requirement specifications) để phục vụ cho việc trao đổi giữa khách hàng và phân tích hệ thớng sau này Phân tích rủi ro –Risk analysis phase:Mợt q trình phân tích thực để xác định rủi ro và đưa giải pháp thay thế Một prototype tạo ći giai đoạn phân tích rủi ro Nếu có rủi ro nào tìm thấy trình này giải pháp thay thế đề xuất và thực Thực thi kỹ thuật –Engineering phase:Đây là giai đoạn mà dự án dev tiến hành code, tester tiến hành test và deploying software trang web khách hàng Đánh giá –Evaluation phase:Khách hàng tham gia vào giai đoạn này để đánh giá công việc, sản phẩm và đảm bảo rằngsản phẩm đáp ứng tất yêu cầu đặt trước Nếu có yêu cầu thay đổi nào từ khách hàng, giai đoạn lặp lại Đây là giai đoạn quan trọng cần có phản hồi khách hàng sản phẩm trước sản phẩm release Nhận xét:  Ưu điểm:- Sau lần tăng vịng chuyển giao kết thực cho khách hành nên chức hệ thớng nhìn thấy sớm - Các vịng trước đóng vai trị là mẫu thử để giúp tìm hiểu thêm yêu cầu những vòng tiếp theo - Những chức hệ thớng có thứ tự ưu tiên càng cao kiểm thử kỹ - Mơ hình xoắn ốc một cách tiếp cận thực để phát triển phần mềm hệ thớng lớn Vì PM phát triển theo sựtiến hóa, khách hàng nhà phát triển hiểu tốt và rủi ro sẽđược giảm thiểu sau lần tiến hóa - Các ước lượng (budget, schedule, etc.) trở nên thực tế là mợt quy trình làm việc, những vấn đề quan trọng phát sớm Có tham gia sớm deverlopers Quảnlý rủi ro và phát triển hệ thống theo phase  Nhược điểm: - Chi phí cao và thời gian dài để có sản phẩm ći - Phải có kỹ tớt để đánh giá rủi ro và giả định - Mô hình này chưa thực quen tḥc với nhà phát triển mơ hình tún tính - Hạn chế lớn mơ hình khả thuyết phục khách hàng giảm thiểu tính rủi ro q trình phát triển Mơ hình xoắn ớc thường sử dụng cho ứng dụng lớn hệ thống xây dựng theo giai đoạn nhỏ theo phân đoạn 1.3 Kiến trúc client-server Mô hình khách -phục vụ mợt mơ hình hệ thớng phân tán, biểu diễn việc phân tán dữ liệu xử lý nhiều máy tính khác Các thành phần mơ hình là: - Mợt tập server độc lập phục vụ cho phân hệ cách cung cấp dịch vụ như: in ấn, quản lý dữ liệu, - Một tập khách hàng (client –phân hệ) truy nhập đến server để yêu cầu cung cấp dịch vụ - Hệ thống mạng cho phép client truy cập tới dịch vụ mà server cung cấp Client phải biết tên server dịch vụ mà server cung cấp Nhưng server khơng cần xác định rõ client có client Client tạo một yêu cầu tới server chờ server trả lời Kiến trúc khách-dịch vụ hình 1.4.1 Hình 1.3.1: Kiến trúc khách-dịch vụ(client-server) Ưu điểm: - Phân tán dữ liệu rõ ràng - Sử dụng hệ thống kết nối mạng một cách hiệu chi phí dành cho phần cứng rẻ - Dễ dàng bổ sung nâng cấp server Nhược điểm: - 1.4 Không phải mô hình dữ liệu dùng chung nên hệ thớng sử dụng tổ chức dữ liệu khác Do đó, việc trao đổi dữ liệu khơng hiệu phải chuyển đổi - Quản lý server không thống nhất, dư thừa (nhiều sever cung cấp một dịch vụ, ) - Không đăng ký tên và dịch vụ tập trung Điều làm cho việc tìm kiếm server dịch vụrất khó khăn VS studio Visual Studio Code ứng dụng cho phép biên tập, soạn thảo đoạn code để hỗ trợ trình thực xây dựng, thiết kế website cách nhanh chóng Visual Studio Code hỗ trợ đa dạng chức Debug, kèm với Git, có Syntax Highlighting Đặc biệt tự hồn thành mã thông minh, Snippets, khả cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép lập trình viên thay đổi Theme, phím tắt, đa dạng tùy chọn khác Hình 1.4.1: Ứng dụng Visual Studio Tính Visual Studio Code Visual Studio Code nhiều người tìm hiểu Đây ứng dụng dân IT “săn đón” tải sử dụng nhiều Visual Studio Code ln có cải tiến tạo đa dạng tiện ích kèm từ giúp cho lập trình viên sử dụng dễ dàng Trong kể đến ưu điểm sau:  Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo sử dụng HTML, CSS, JavaScript, C++,…  Ngôn ngữ, giao diện tối giản, thân thiện, giúp lập trình viên dễ dàng định hình nội dung Các tiện ích mở rộng đa dạng phong phú  Tích hợp tính quan trọng tính bảo mật (Git), khả tăng tốc xử lý vòng lặp (Debug),…  Đơn giản hóa việc tìm quản lý hết tất Code có hệ thống  Hỗ trợ đa tảng: Linux, Mac, Windows,  Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, JavaScript, JSON, Visual Basic, HTML, CSS,  Ít dung lượng Tính mạnh mẽ Intellisense chuyên nghiệp  Giao diện thân thiện  Kiến trúc mạnh mẽ người dùng khai thác mở rộng  Số lượng người sử dụng lớn tạo nên ộng đồng hỗ trợ rộng rãi Nhược điểm:  Tương tự tất ứng dụng electron khác, nhớ mức sử dụng pin VSCode tệ  Khơng có git merge, điều mà nhiều người mong đợi, ST3 Atom có khả làm điều  Các phím tắt mặc định khơng có ý nghĩa người dùng phải cấu hình lại gần tất chúng  Nếu sử dụng Visual Studio Code, kỹ sư thời gian để “chiến đấu” với trình soạn thảo code Bên cạnh đó, kỹ sư muốn sử dụng VSCode để tăng tốc nhanh, cấu hình plugin chép nhanh chóng từ máy sang máy khác 10 Ngoại lệ:  Biểu đồ trình tự  Biểu đồ hoạt động 28 4.2.8 Thêm khuyến  Kịch Tên UC Thêm khuyến Tác nhân Chủ cửa hàng Mức Người chịu trách nhiệm Chủ cửa hàng Tiền điều kiện Chủ cửa hàng chọn chức thêm khuyến Đảm bảo tối thiểu Hệ thống thông báo lỗi quay trở lại bước trước Đảm bảo thành công Khuyến tạo banner website Kích hoạt Chủ cửa hàng chọn chức thêm khuyến Chuỗi kiện chính: Chủ cửa hàng chọn chức thêm khuyến Hệ thống hiển thị form thêm khuyến Chủ cửa hàng điền đầy đủ thông tin khuyến vào form submits Hệ thống thông báo thành công Ngoại lệ: 3.a Chủ cửa hàng điền thiếu thông tin 3.a.1 Hệ thống yêu cầu thêm đủ thông tin 3.a.2 Chủ cửa hàng thêm thơng tin cịn thiếu 3.a.3 Hệ thống thông báo thành công 3.b Chủ cửa hàng điền thông tin không hợp lệ 3.b.1 Hệ thống yêu cầu nhập lại thông tin 3.b.2 Chủ cửa hàng sửa lại thông tin 3.b.3 Hệ thống thông báo thành công  Biểu đồ trình tự 29 30  Biểu đồ trạng thái  Biểu đồ hoạt động 31 4.2.9 Xóa khuyến  Kịch Tên UC Xóa khuyến Tác nhân Chủ cửa hàng Mức Người chịu trách nhiệm Chủ cửa hàng Tiền điều kiện Chủ cửa hàng chọn chức xóa khuyến Đảm bảo tối thiểu Hệ thống thông báo lỗi quay trở lại bước trước Đảm bảo thành công Khuyến cập nhật lại banner website Kích hoạt Chủ cửa hàng chọn chức xóa khuyến Chuỗi kiện chính: Chủ cửa hàng chọn chức xóa khuyến Chủ cửa hàng chọn khuyến muốn xóa submits Hệ thống thông báo thành công Ngoại lệ:  Biểu đồ trình tự 32  Biểu đồ trạng thái  Biểu đồ hoạt động 4.2.10 Cập nhật sản phẩm  Kịch Tên UC Cập nhật thông tin sản phẩm Tác nhân Chủ cửa hàng Mức Người chịu trách nhiệm Chủ cửa hàng Tiền điều kiện Chủ cửa hàng chọn chức cập nhật thông tin sản phẩm Đảm bảo tối thiểu Hệ thống thông báo lỗi quay trở lại trang chủ Đảm bảo thành công Hệ thống hiển thị chức thêm sản phẩm, sửa thơng tin sản phẩm, xóa sản phẩm 33 Kích hoạt Chủ cửa hàng chọn chức cập nhật sản phẩm Chuỗi kiện chính: Chủ cửa hàng chọn chức cập nhật sản phẩm Hệ thống hiển thị chức thêm sản phẩm, sửa thông tin sản phẩm, xóa sản phẩm Ngoại lệ:  Biểu đồ trình tự  Biểu đồ hoạt động 34 4.2.11 Thêm sản phẩm  Kịch Tên UC Thêm sản phẩm Tác nhân Chủ cửa hang Mức Người chịu trách nhiệm Chủ cửa hang Tiền điều kiện Chủ cửa hàng chọn chức cập nhật sản phẩm Đảm bảo tối thiểu Hệ thống loại bỏ liệu nhập quay trở lại bước trước Đảm bảo thành cơng Sản phẩm thêm vào CSDL website Kích hoạt Chủ cửa hàng chọn chức thêm sản phẩm Chuỗi kiện chính: Chủ cửa hàng chọn chức thêm sản phẩm Hệ thống hiển thị form thêm sản phẩm Chủ cửa hàng điền thông tin sản phẩm bấm submits Hệ thống thông báo thêm thành công Ngoại lệ: 3.a Chủ cửa hàng điền thiếu thông tin 3.a.1 Hệ thống yêu cầu thêm đủ thơng tin 3.a.2 Chủ cửa hàng thêm thơng tin cịn thiếu 3.a.3 Hệ thống thông báo thành công 3.b Chủ cửa hàng điền thông tin không hợp lệ 3.b.1 Hệ thống yêu cầu nhập lại thông tin 3.b.2 Chủ cửa hàng sửa lại thông tin 3.b.3 Hệ thống thông báo thành cơng  Biểu đồ trình tự 35  Biểu đồ trạng thái  Biểu đồ hoạt động 36 4.2.12 Xóa sản phẩm  Kịch Tên UC Xóa sản phẩm Tác nhân Chủ cửa hàng Mức Người chịu trách nhiệm Chủ cửa hàng Tiền điều kiện Chủ cửa hàng chọn chức cập nhật sản phẩm Đảm bảo tối thiểu Hệ thống thông báo lỗi quay trở lại bước trước Đảm bảo thành công Sản phẩm xóa thành cơng Kích hoạt Chủ cửa hàng chọn chức xóa sản phẩm Chuỗi kiện chính: Chủ cửa hàng chọn chức xóa sản phẩm Chủ cửa hàng chọn sản phẩm muốn xóa submits Hệ thống thông báo thành công Ngoại lệ:  Biểu đồ trình tự 37  Biểu đồ trạng thái:  Biểu đồ hoạt động: 4.2.13 Sửa thông tin sản phẩm  Kịch Tên UC Sửa thông tin sản phẩm Tác nhân Chủ cửa hàng Mức Người chịu trách nhiệm Chủ cửa hàng Tiền điều kiện Chủ cửa hàng chọn chức cập nhật sản phẩm Đảm bảo tối thiểu Hệ thống loại bỏ thông tin sửa quay trở lại bước trước Đảm bảo thành công Thông tin sản phẩm cập nhật lại CDSL 38 Kích hoạt Chủ cửa hàng chọn chức sửa thơng tin sản phẩm Chuỗi kiện chính: Chủ cửa hàng chọn chức sửa thông tin sản phẩm Chủ cửa hàng chọn sản phẩm muốn sửa submits Hệ thống thông báo thành công Ngoại lệ: 2.a Chủ cửa hàng điền thiếu thông tin 2.a.1 Hệ thống yêu cầu thêm đủ thông tin 2.a.2 Chủ cửa hàng thêm thơng tin cịn thiếu 2.a.3 Hệ thống thông báo thành công 2.b Chủ cửa hàng điền thông tin không hợp lệ 2.b.1 Hệ thống yêu cầu nhập lại thông tin 2.b.2 Chủ cửa hàng sửa lại thông tin 2.b.3 Hệ thống thông báo thành công  Biểu đồ trình tự 39  Biểu đồ trạng thái:  Biểu đồ hoạt động: 40 4.3 Biểu đồ lớp: 4.4 Biểu đồ thành phần: 41 4.5 Biểu đồ triển khai TCP/IP TCP/IP 42 ... cơng Sản phẩm xóa thành cơng Kích hoạt Chủ cửa hàng chọn chức xóa sản phẩm Chuỗi kiện chính: Chủ cửa hàng chọn chức xóa sản phẩm Chủ cửa hàng chọn sản phẩm muốn xóa submits Hệ thống thơng báo. .. tin sản phẩm, xóa sản phẩm 33 Kích hoạt Chủ cửa hàng chọn chức cập nhật sản phẩm Chuỗi kiện chính: Chủ cửa hàng chọn chức cập nhật sản phẩm Hệ thống hiển thị chức thêm sản phẩm, sửa thơng tin sản. .. thêm sản phẩm Chuỗi kiện chính: Chủ cửa hàng chọn chức thêm sản phẩm Hệ thống hiển thị form thêm sản phẩm Chủ cửa hàng điền thông tin sản phẩm bấm submits Hệ thống thông báo thêm thành công Ngoại