Báo cáo đồ án 1 xây dựng website bán laptop

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HCM TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN (UIT) Báo cáo mơn học ĐỒ ÁN Xây dựng Website bán Laptop Giảng viên hướng dẫn: Ths Thái Thuỵ Hàn Uyển Sinh viên thực hiện: Nguyễn Nam Hùng - 17520544 Phạm Quang Việt - 20512153 Thành phố Hồ Chí Minh, tháng 12 năm 2022 Mục lục LỜI CẢM ƠN GIỚI THIỆU 1.1 Phạm Vi 1.2 Lí Do Chọn Đề Tài: 1.2.1 Lợi ích việc tạo website bán điện thoại thời đại công nghệ: 1.3 KHẢO SÁT 1.4 Lợi ích 1.5 Thuật Ngữ 1.6 Cấu Trúc 1.7 Giới thiệu công nghệ sử dụng 10 1.7.1 ReactJS 10 Vấn đề giải pháp 11 Tại lại React? 11 Vậy React lại nhiều công ty lớn lựa chọn cho dự án họ? 11 1.7.2 Firebase 14 Firebase gì? 14 Lịch sử phát triển Firebase 15 Những tính Firebase 16 Firebase Realtime Database 16 Firebase Authentication 18 Firebase Cloud Storage 19 Firebase Cloud Function 19 Firebase Analytics 20 Machine Learning Kit 20 MÔ TẢ 22 2.1 2.1.1 Giao diện hệ thống 22 2.2 Các Ràng Buộc 22 2.3 Các Giả Định 22 YÊU CẦU 23 3.1 3.1.1 3.1.2 3.1.3 Quan Điểm Sản Phẩm 22 Các Yêu Cầu Chức Năng 23 Tổng quan 23 Khách hàng 23 Admin 24 MƠ HÌNH PHÂN TÍCH UML 25 4.1 4.1.1 4.1.2 4.1.3 4.1.1 4.1.2 4.1.3 4.1.4 4.1.5 Use Cases 25 Mơ hình khách hàng 25 Tác nhân Administrator 28 Danh sách actor 31 Đặc tả Use-case “Đăng nhập khách hàng” 31 Đặc tả Use-case “Đăng nhập Admin” 33 Đặc tả Use-case “Thêm sản phẩm” 34 Đặc tả Use-case “Đặt đơn hàng” 35 Đặc tả Use-case “Tra cứu đơn hàng” 36 4.2 4.2.1 4.2.2 4.3 4.3.1 4.3.2 Sơ Đồ Lớp 37 Danh sách lớp đối tượng quan hệ 38 Mô tả chi tiết lớp đối tượng 38 Sơ Đồ Trạng Thái 42 Tác nhân Administrator 42 Tác nhân khách hàng 44 PHỤ LỤC A – TÀI LIỆU THAM KHẢO 46 PHỤ LỤC B – ĐÁNH GIÁ QUÁ TRÌNH Error! Bookmark not defined LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM chúng em trang bị kiến thức bản, kỹ thực tế để lần đầu thực Đồ án Để hồn thành Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng tin Chúng em xin gửi lời cảm ơn chân thành đến cô Thái Thuỵ Hàn Uyển tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực luận văn mà cịn hành trang tiếp bước cho chúng em trình học tập lập nghiệp sau Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất thầy khoa, bạn bè người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Trong q trình làm Đồ án chúng em không tránh khỏi sai sót, chúng em kính mong nhận dẫn góp ý q thầy để hồn thiện phát triển đồ án Khóa luận tốt nghiệp tương lai Chúng em xin chân thành cảm ơn Xin chúc điều tốt đẹp đồng hành người Thành phố Hồ Chí Minh, tháng 12 năm 2022 Sinh viên Nguyễn Nam Hùng Phạm Quang Việt GIỚI THIỆU Mục trình bày tổng quan đặc tả yêu cầu hệ thống quản lý website bán laptop 1.1 Phạm Vi Xây dựng trang web ứng dụng bán laptop, …Trong thời đại thương mại điện tử ngày phát triển, việc ứng dụng vào hoạt động “Website bán laptops trực tuyến” mang lại nhiều ý nghĩa như: - Đỡ tốn nhiều thời gian cho người tiêu dùng nhà quản lý việc tham gia vào hoạt động mua bán laptops - Giúp người tiêu dùng có giá hình ảnh mặt hàng cách xác - Giúp nhà quản lý dễ dàng việc quản lý sản phẩm - Nhà quản lý thống kê sản phẩm bán chạy cách nhanh giúp cho hoạt động sản xuất kinh doanh trở nên tốt 1.2 Lí Do Chọn Đề Tài: Hiện nay, công nghệ tiên tiến phát triển ngày mạnh mẽ ứng dụng ngày nhiều vào lĩnh vực kinh tế, sản xuất đời sống thường nhật người Một điểm tiêu biểu việc phát triển cơng nghệ phải kể đến việc ứng dụng công nghệ thông tin vào hầu khắp hoạt động Nhờ đó, cơng việc thực nhanh, xác đạt kết cao nhiều Khi xã hội ngày phát triển, mức sống người dân nâng cao thu nhập kinh tế ngày cải thiện điện thoại di động khơng cịn trở nên xa lạ với người mà ngược lại vật dụng thiếu người dân Hầu hết người trang bị cho điện thoại phù hợp với nhu cầu túi tiền Tuy nhiên, với sống ngày bận rộn việc muốn mua điện thoại ưa thích người tiêu dùng phải đến tận cửa hàng để chọn lựa nhiều thời gian công sức Cùng với lý nêu trên, qua tìm hiểu nhóm đồ án biết việc ứng dụng bán điện thoại di động trực tuyến giúp cho khách hàng giảm bớt thời gian công sức phải đến tận cửa hàng để mua Muốn lựa chọn cho điện thoại ưng ý phù hợp với túi tiền khách hàng cần ngồi bên máy tính có nối mạng internet mua mặt hàng điện thoại cần Do nhóm đề tài chọn thực đề tài “Xây dựng trang web ứng dụng bán laptop” Trang Web xây dựng với định hướng giúp việc mua sắm điện thoại khách hàng dễ dàng nhanh gọn hơn, không thời gian cơng sức 1.2.1 Lợi ích việc tạo website bán điện thoại thời đại công nghệ: 1.2.1.1 - Bán hàng lúc, nơi: Internet để kết nối tỷ người lại với nhau, khơng gói gọn phạm vi lãnh thổ quốc gia Nhờ phát triển vượt bậc công nghệ, việc đưa thông tin đến với cá nhân sử dụng internet điều q cao sang Giao diện website, bạn hồn tồn quảng bá sản phẩm, bán hàng thị trường nước đất nước khác Việt Nam cách nhanh chóng dễ dàng 1.2.1.2 - Tương tác với khách hàng dễ dàng (hỗ trợ, tư vấn, đặt hàng…) Việc tương tác trực tiếp với khách hàng dễ dàng hết với công cụ hỗ trợ website 1.2.1.3 - Tiết kiệm chi phí thuê mặt bằng, nhân sự: Đây điểm khác biệt lớn mà doanh nghiệp vừa nhỏ cần biết Chi phí mặt nhân vấn đề khiến chủ doanh nghiệp đau đầu Khi thiết kế website bán hàng, bạn cần tốn chi phí hosting tên miền hàng năm (con số tháng lương cho nhân tháng thuê mặt bằng) Tiết kiệm chi phí nên đặt lên hàng đầu ưu tiên doanh nghiệp vừa nhỏ 1.2.1.4 - Tăng phạm vi tiếp cận khách hàng: Một cửa hàng địa phương thu hút khách địa phương lại hạn chế khách hàng khu vực khác Tuy nhiên, doanh nghiệp xây dựng trang web bán hàng phạm vị khách hàng không bị giới hạn Cơ hội nhận đơn đặt hàng khách từ khắp nơi đất nước ngày tăng cao 1.2.1.5 - Nền tảng cho sản phẩm bán hàng: Mọi người bận rộn với guồng quay công việc họ có thời gian để mua sắm Đó lý sao, mua sắm trực tuyến dần lên Trang web bán hàng tảng tốt để bạn giới thiệu sản phẩm bán hàng Điều không phù hợp với khách hàng địa phương mà với khách hàng tồn giới (Hình minh hoạ) 1.2.1.6 - Dễ dàng nhận phản hồi từ khách hàng: Lấy ý kiến khách hàng việc làm quan trọng giúp doanh nghiệp nắm bắt tâm lý khách hàng có chiến lược thay đổi phù hợp Thông tin phản hồi từ khách hàng dễ dàng thu thập thơng qua trang web Vì vậy, khách hàng tự đặt câu hỏi, đánh giá sản phẩm trực tiếp trang web 1.3 KHẢO SÁT Khảo sát website thương mại điện tử Thegioididong.com Công nghệ sử dụng: ReactJS, JQuery, PHP - Tính so sánh sản phẩm danh sách sản phẩm chọn theo tiêu chí kinh tế kỹ thuật chi tiết dễ dàng cho việc mua sắm - Tính tính cước vận chuyển tự động theo nhiều hình thức vận chuyển cho phép khách hàng hoàn biết tổng trị giá hàng hóa giao tới địa điểm khách hàng định đâu - Hệ thống thống kê, đánh giá tự động, khách quan để liệt kê hàng hóa xem mua nhiều, hàng hóa người tiêu dùng bình chọn, đánh giá tốt, hàng có khuyến mại, giảm giá hàng hóa mua kèm với hàng hóa khác, miễn cước vận chuyển… - Tính hỗ trợ trực cho phép kết nối khách hàng dù khách hàng đâu tới đội ngũ nhân viên kinh doanh, tư vấn bán hàng, chun gia dịng sản phẩm, ngành hàng đơng đảo tồn quốc, có kiến thức chun sâu đào tạo tư vấn, phân tích lựa chọn sản phẩm, linh phụ kiện kèm mua thêm, thay thế, chương trình khuyến mại, giảm giá, quà tặng, cách thức mua hàng, đặt hàng…mà khách hàng khơng phải trả khoản phí nào… Và cịn nhiều tính thơng minh ưu việt khác Ngồi thơng qua trang web, cịn cung cấp cho khách hàng thơng tin mang tính chất tư vấn, định hướng lựa chọn sản phẩm phù hợp cho khách hàng thông qua chức thống kê cách khách quan sản phẩm bình chọn khách hàng Mục tiêu cuối mang lại thơng tin thực khách quan, xác đem lại thoải mái hài lòng cho khách hàng lựa chọn mua hàng website Hoạt động quản lý hàng hóa mua bán hàng đa số website bộc lộ hạn chế sau: - Tra cứu thơng tin hàng hóa, nhiều nhiều thời gian, thiếu xác - Việc lưu trữ thơng tin hàng hóa, khách hàng, nhà cung cấp, tài … phải sử dụng nhiều loại giấy tờ, sổ sách nên cồng kềnh cho lưu trữ - Tốn nhiều thời gian cho tổng hợp, báo cáo, thống kê - Không đáp ứng nhu cầu thông tin phục vụ hàng ngày mở rộng tương lai - Cơ sở hạ tầng dùng để tốn thẻ cịn nhiều hạn chế rủi ro 1.4 Lợi ích Có thể tra cứu, cập nhật, thống kê, báo cáo sản phẩm, nhà sản xuất, thông tin khách hàng, hóa đơn, thuế, … Mua sản phẩm dể dàng, tốn kém, hàng hóa chất lượng, phục vụ tận tình từ nhân viên website 1.5 Thuật Ngữ Phần thuật ngữ hay từ viết tắt sử dụng xuyên suốt tài liệu Thuật ngữ Giải thích Order Chỉ hay nhiều sản phẩm khách hàng đặt hàng Khách hàng Người truy cập trang web dể mua sản phẩm Giỏ hàng Chứa thông tin order khách hàng số tiền cần toán Admin Người quản trị trang web Actor Thường người tham gia trực tiếp vào việc sử dụng hệ thống phần mềm Table 1.5-1 Các thuật ngữ 1.6 Cấu Trúc Cấu trúc đặc tả yêu cầu phần mềm website bán laptops sau: Mục trình bày mô tả tổng quan hệ thống website bán laptops Nội dung tập trung vào quan điểm sản phẩm đặc điểm người dùng cuối, ràng buộc hệ thống giả định cài đặt chạy hệ thống Mục vào xác định yêu cầu chức Mục mở rộng dựa mục ba qua phân tích thiết kế mơ hình UML 1.7 Giới thiệu công nghệ sử dụng 1.7.1 ReactJS React (Hay ReactJS, React.js) thư viện Javascript mã nguồn mở để xây dựng thành phần giao diện tái sử dụng Nó tạo Jordan Walke, kỹ sư phần mềm Facebook Người bị ảnh hưởng XHP (Một tảng thành phần HTML cho PHP) React lần triển khai cho ứng dụng Newsfeed Facebook năm 2011, sau triển khai cho Instagram.com năm 2012 Nó mở mã nguồn (open-sourced) JSConf US tháng năm 2013 Mã nguồn React mở GitHub:  https://github.com/facebook/react - Nếu hình thức đăng nhập Tài khoản cũ, phần mềm kiểm tra thông tin người dùng hệ thống - Nếu thông tin hợp lệ, chuyển tiếp vào trang chủ ứng dụng Người dùng chọn hình thức đăng nhập tài khoản khác: - Người dùng nhập thông tin tài khoản mật Nhấn vào nút Đăng nhập - Phần mềm kiểm tra thơng tin người dùng có hệ thống Luồng thay - Tiếp tục bước dịng kiện Thơng tin đăng nhập không hợp lệ: - Phần mềm thông báo lỗi - Người dùng đăng nhập lại thông tin khác - Tiếp tục thực bước dòng kiện phụ: đăng nhập tài khoản Điều kiện trước Điều kiện sau Thiết bị phải có kết nối mạng Kết nối thành công với database Không đổi 4.1.2 Đặc tả Use-case “Đăng nhập Admin” Mô tả Tác nhân Admin người quản lý cửa hàng Người quản lý Hành vi tác nhân Hành vi hệ thống - Người dùng thực Usecase đăng nhập vào hệ Luồng thống - Vào trang quản lý để quản lý cửa hàng - Hệ thống hiển thị thông báo đăng nhập thành công Luồng thay Điều kiện trước Điều kiện sau Khơng Thiết bị phải có kết nối mạng Kết nối thành công với database Không 4.1.3 Đặc tả Use-case “Thêm sản phẩm” Mô tả Tác nhân Người quản lý muốn tạo sản phẩm Người quản lý Hành vi tác nhân Hành vi hệ thống - Người quản lý thực Usecase Đăng nhập - Người quản lý mở tab Luồng sản phẩm lên – Nhấn nút “Thêm” để tiến hành thêm sản phẩm - Điền đầy đủ thông tin để tạo sản phẩm - Hệ thống thực tạo sản phẩm lên CSDL - Màn hình hiển thị tạo thành cơng Luồng thay Khơng có Thiết bị phải có kết nối mạng Kết nối thành công với database Điều kiện trước Hệ thống them sản phẩm CSDL Điều kiện sau 4.1.4 Đặc tả Use-case “Đặt đơn hàng” Mô tả Tác nhân Người dùng muốn đặt đơn hàng Người dùng Hành vi tác nhân Hành vi hệ thống - Người dùng thực Usecase Đăng nhập - Bấm vào tab giỏ hàng - Điền thơng tin cần thiết Luồng – Tiến hành đặt đơn hàng (Gồm sản phẩm muốn mua, thông tin cá nhân cần thiết, phương thức toán ) - Phần mềm thông báo tạo đơn hàng thành công Luồng thay Điều kiện trước Điều kiện sau Khơng có Thiết bị phải có kết nối mạng Kết nối thành công với database CSDL cập nhật liệu 4.1.5 Đặc tả Use-case “Tra cứu đơn hàng” Mô tả Tác nhân Người dùng muốn tra cứu đơn hàng Người dùng Hành vi tác nhân Hành vi hệ thống - Người dùng thực Usecase Đăng nhập - Bấm vào tab đơn hàng – Xem thơng tin đơn hàng Luồng - Phần mềm hiển thị đơn hàng tìm Luồng thay Điều kiện trước Điều kiện sau Khơng có Thiết bị phải có kết nối mạng Kết nối thành cơng với database CSDL không cập nhật 4.2 Sơ Đồ Lớp Figure 4.2-1 Sơ đồ lớp 4.2.1 Danh sách lớp đối tượng quan hệ STT Tên lớp/quan hệ Ý nghĩa/Ghi User Người dùng Admin Quản lý Product Sản phẩm Order Đơn hàng Order Detail Chi tiết đơn hàng Shipping Phương thức giao hàng Cart Giỏ hàng Table 4.2-1 Diễn giải sơ đồ lớp 4.2.2 Mô tả chi tiết lớp đối tượng Lớp User  Các thuộc tính STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi UserID private Không Mã khách hàng Password private Không Mật Loginstatus private Khơng Tình trạng đăng nhập Table 4.2-2 Các thuộc tính lớp User  Các phương thức STT Tên phương thức Loại Ràng buộc Ý nghĩa/ghi Register private Không Đăng ký Login private Khơng Đăng nhập Table 4.2-3 Các phương thức lớp User Lớp Cart  Các thuộc tính STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi Cartid private Khơng Mã tốn IdProduct private Khơng Mã sản phẩm quantity public Không Số lượng sản phẩm dateAdded public Không Ngày thêm Table 4.2-4 Các thuộc tính lớp Cart  Các phương thức STT Tên phương thức Loại Ràng buộc Ý nghĩa/ghi addCartitem public Không Thêm vào giỏ hàng updateQuantity public Không Cập nhật số lượng sp viewCartDetails public Không Xem chi tiết giỏ hàng checkOut public Khơng Tiến vào tốn Table 4.2-5 Các phương thức lớp Cart Lớp Order  Các thuộc tính STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi orderld private Không Mã đơn hàng dateCreated private Không Ngày tạo đơn hàng UserID private Không Mã người dùng Status private Khơng Tình trạng đơn hàng Email private Khơng Email Table 4.2-6 Các thuộc tính lớp Order  Các phương thức STT Tên phương thức Loại Ràng buộc Ý nghĩa/ghi placeOrder public Không Thông tin giao hàng Table 4.2-7 Các phương thức lớp Order Lớp Product  Các thuộc tính STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi IdProduct private Khơng Mã hàng hóa Name private Không Tên sản phẩm Price private Không Đơn giá Image private Khơng Hình sản phẩm Table 4.2-8 Các thuộc tính lớp Product  Các phương thức STT Tên phương thức Loại Ràng buộc Ý nghĩa/ghi displayProduct public Không Hiển thị sản phẩm getProductDetail public Không Hiển thị chi tiết sản phẩm Table 4.2-9 Các phương thức lớp Product Lớp Shipping Infor  Các thuộc tính STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi shippingld: private Không Mã vận chuyển shippingCost: private Khơng Phí vận chuyển ShippingAddress private Không Địa vận chuyển Table 4.2-10 Các thuộc tính lớp Shipping Infor  Các phương thức STT Tên phương thức Loại Ràng buộc Ý nghĩa/ghi getShippingInfor public Không Xem thông tin vận chuyển Table 4.2-11 Các phương thức lớp Shipping Infor Lớp Orders Details  Các thuộc tính STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi Oderid private Khơng Mã phiếu tốn Productid private Khơng Mã sản phẩm ProductName public Không Tên Sản phẩm Quantity public Không Số lượng Subtotal public Không Tổng số tiền Table 4.2-12 Các thuộc tính lớp Orders Detail  Các phương thức STT Tên phương thức Loại Ràng buộc Ý nghĩa/ghi calcPrice public Khơng Tính tổng số tiền trả Table 4.2-13 Các phương thức lớp PhieuThanhToan 4.3 Sơ Đồ Trạng Thái 4.3.1 Tác nhân Administrator Hình 2.16 Activity Administrator quản lý sản phẩm Hình 2.20 Activity Administrator xem báo cáo, thống kê 4.3.2 Tác nhân khách hàng Hình 2.11 Activity khách hàng quản lý giỏ hàng Hướng phát triển Nhóm chúng em đưa sáng kiến hướng phát triển cho đồ án sản phẩm  Tiếp tục phát triển tính cịn chưa hồn thiện  Có thể tích hợp số cách tuyến trực tuyến Momo, Zalopay, hay đơn vị ngân hàng khác  Cung cấp thêm số lựa chọn đơn vị vận chuyển  Phát triển tính Coupon - mã thẻ giảm giá  Tối ưu hóa code để cải thiện tốc độ web tăng tốc trải nghiệm cho người dùng  Quản lý chi tiết nghiệp vụ nhập hàng, xuất hàng tồn kho sản phẩm (dành cho Admin)  Cải tiển số thuật toán việc xử lý backend để giảm thiểu thời gian phải cho việc truy xuất liệu  Cấu trúc lại nguồn code để dễ dàng bảo trì nâng cấp dành cho sau đồ án Tuy nhiên, nhóm chúng em cịn vài hạn chế mà khơng thể hồn tồn khắc phục đồ án lần cần phải cố gắng cho lần sau  Một số tính cịn chưa hồn thiện  Một số tính khơng tương thích với trình duyệt cũ  Tối ưu code chưa tốt nên chậm TÀI LIỆU THAM KHẢO Các thư viện dành cho việc xây dựng ứng dụng ReactJS     ReactJS: https://reactjs.org/docs/introducing-jsx.html Redux: https://redux.js.org/ React Router: https://reactrouter.com/ React Hook Form: https://react-hook-form.com/ Firebase  https://firebase.com Một số nguồn tham khảo khác  Stackoverflow: https://stackoverflow.com/ ­ Github: https://github.com ... 23 Admin 24 MƠ HÌNH PHÂN TÍCH UML 25 4 .1 4 .1. 1 4 .1. 2 4 .1. 3 4 .1. 1 4 .1. 2 4 .1. 3 4 .1. 4 4 .1. 5 Use Cases 25 Mơ hình khách hàng 25 Tác... 4 .1 Use Cases Có actors website bán laptop mô tả tài liệu khách hàng quản lý Figure 4 .1- 1 Sơ đồ Use Cases 4 .1. 1 Mơ hình khách hàng Use case khách hàng Usecase khách hàng quản lý giỏ hàng 4 .1. 2... tài ? ?Xây dựng trang web ứng dụng bán laptop? ?? Trang Web xây dựng với định hướng giúp việc mua sắm điện thoại khách hàng dễ dàng nhanh gọn hơn, không thời gian cơng sức 1. 2 .1 Lợi ích việc tạo website